Java语言中Vue 与 Ajax 编写用户验证实战

本人初级小菜鸟一枚，在最近的学习中，练习套模板，在登录验证中有所感悟，所以写下来，写的不好的话请见谅 其中user是我的用户信息表

Controller中的代码

//登录验证 @RequestMapping(value = "dologin") @ResponseBody public JSONObject dologin(HttpServletRequest request,Model model) { HttpSession session = request.getSession(); JSONObject json = new JSONObject(); String uname = request.getParameter("uname");//获取数据库内姓名信息 String pwd = request.getParameter("pwd");//获取数据库内密码信息 String code = request.getParameter("code").toLowerCase();//获取您在文本框输入的验证码信息 .toLowerCase 转为小写，因为服务器内的验证码默认为全部小写 if (!code.equals(session.getAttribute("verCode"))) {//与下面生成的验证码对比 json.put("succes", 3); json.put("info", "验证码不正确！"); return json; } User user = userService.findLogin(uname, pwd);//判断账户名与密码是否正确 if (user == null ||user.equals("") ) { json.put("succes", 2); json.put("info", "用户名或者验证码错误！"); } else { json.put("succes", 1); session.setAttribute("name", uname); //双引号中的name与拦截器的name是同一变量，变量名需要一致，拦截器在其他文章 json.put("info", "登录成功！"); } return json; } //登录映射 @RequestMapping(value = "login") public String login(HttpServletRequest request,Model model) { return "pages/admin/login"; } //生成验证码 @RequestMapping(value = "yzm") public void yzm(HttpServletRequest request,HttpServletResponse response) throws IOException { response.setHeader("Pragma", "No-cache"); response.setHeader("Cache-Control", "no-cache"); response.setDateHeader("Expires", 0); response.setContentType("image/jpeg"); // 生成随机字串 String verifyCode = VerifyCodeUtils.generateVerifyCode(4); // 存入会话session HttpSession session = request.getSession(true); // 删除以前的 session.removeAttribute("verCode"); session.removeAttribute("codeTime"); session.setAttribute("verCode", verifyCode.toLowerCase()); //传到session已转为小写，进行判断 session.setAttribute("codeTime", LocalDateTime.now()); ///session保留时间 // 生成图片 int w = 100, h = 30; OutputStream out = response.getOutputStream(); VerifyCodeUtils.outputImage(w, h, out, verifyCode); }

上面代码，看注解 双引号中的name与拦截器的name是同一变量，变量名需要一致，拦截器在其他文章

前端页面代码

在前端页面中，需要在用户名和密码还有输入验证的信息中的中加上v-model进行双向绑定 在登录按钮上进行login方法的调用

<script> var vm = new Vue({ el:"#app", data:{ uname:"", pwd:"", code:"", }, mounted(){ }, methods:{ login:function(){ $.post("/user/dologin",{uname:this.uname,pwd:this.pwd,code:this.code},function(json){ //ajax传值 if (json.succes==1) { alert(json.info); window.location.href="/indexs/index"; }else { alert(json.info); } }); }, } }); </script>