使用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