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

最新推荐文章于 2022-07-31 22:12:09 发布

喜用生姜洗发水

最新推荐文章于 2022-07-31 22:12:09 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

文章标签： Vue Java 用户验证登录验证 Ajax

本文链接：https://blog.youkuaiyun.com/javaxbc/article/details/102837628

本文是一位初级开发者分享的使用Java和Vue进行用户验证的实战经验，重点在于Controller中的登录逻辑处理和前端页面的Ajax请求，通过v-model实现双向绑定并调用login方法完成验证。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人初级小菜鸟一枚，在最近的学习中，练习套模板，在登录验证中有所感悟，所以写下来，写的不好的话请见谅
其中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>