使用IDEA+vue.js+easyUI的demo

最近，隨便寫了幾個開發的小例子，自己總結下，留個紀念。

例子1：使用EasyUI做了一個簡單界面，服務器和客戶端在一起。

@Controller
@RequestMapping("/demo")
public class TestController {

    @RequestMapping(value = "/demo", method = { RequestMethod.GET, RequestMethod.POST})
    public String getDialog(){
        return "/demo";
    }
}

　　然后就轉到頁面

例子2：使用EasyUI展示后台數據，數據源是oracle數據庫，分頁使用邏輯分頁PageHelper

@Controller
@Configuration
@RequestMapping(value = "/bank")
public class BankController {

    private static final Logger LOGGER = LoggerFactory.getLogger(BankController.class);
    final Integer INTE = 1;

    @Autowired
    private BankService bankService;

    @RequestMapping("/banklist")
    public String index(){
        return "/banklist";
    }

    /**
     * 查詢列表信息
     *
     * @param searchcondition 查詢條件
     * @param searchcontent   查詢內容
     * @param page            頁數
     * @param rows            每頁記錄數
     * @return
     */
    @RequestMapping("/list")
    @ResponseBody
    public Map<String, Object> list(
//            @RequestParam(value = "searchcondition", required = false) String searchcondition,
//                                    @RequestParam(value = "searchcontent", required = false) String searchcontent,
                                    @RequestParam(value = "page", required = false) Integer page,
                                    @RequestParam(value = "rows", required = false) Integer rows) {

        if (null == page || INTE > page) page = 1;
        if (null == rows || INTE > rows) rows = 10;
        Map<String, Object> resultMap = new HashMap();
        PageInfo<Bank> pageInfo = bankService.getBankList(page, rows);
        resultMap.put("total", pageInfo.getTotal());
        resultMap.put("rows", pageInfo.getList());
        resultMap.put("success", true);

        return resultMap;
    }
    @GetMapping("/getBankList")
    public List<Bank> getBankList(){
        LOGGER.info("getBankList controller");
        return bankService.getBankList();

    }

    @GetMapping("/findBankList")
    @ResponseBody
    public HSResult findBankList(HttpServletRequest request, Integer page, Integer size){
        if (null == page || INTE > page) page = 1;
        if (null == size || INTE > size) size = 10;
        HSResult result = new HSResult();
        try {
            result.setData(bankService.getBankList(page, size));
            result.setMsg(HSHttpCodeEnum.CODE_200.getName());
            result.setStatus(HSHttpCodeEnum.CODE_200.getValue());
        }catch (Exception e){
            LOGGER.info(e.getMessage());
            result.setMsg(HSHttpCodeEnum.CODE_500.getName());
            result.setStatus(HSHttpCodeEnum.CODE_500.getValue());
        }
        return result;
    }
}

　　同樣是展示頁面

 

例子3：使用vue.js做前端，java開發后台，前后分離實現一個登陸，這個是參考網上例子做的，我也是第一次嘗試

[1] https://www.jianshu.com/p/9c1d4f8ed068

[2] https://www.jianshu.com/p/bbc455d86a22

vue.js啟動 npm run dev

@RestController
@RequestMapping("/rest")
public class LoginController {

    @RequestMapping(value = "/Login", method = {RequestMethod.POST, RequestMethod.GET})
    public boolean Login(@RequestBody User user){
        System.out.println("userName: " +  user.toString());
        return Boolean.TRUE;
    }
}

　　

啟動前端

后端響應

 

例子4：使用vue.js和easyui畫了一個頁面

簡單的東西，長時間不做也會忘記，特此留個記憶。

github:https://github.com/flyingJiang/JavaVueEasyUI