设为首页收藏本站
开启辅助访问
Java网络开发（Tomcat异步登陆+注册） 您所在的位置：网站首页 › JSP登录注册页面 › Java网络开发（Tomcat异步登陆+注册）

Java网络开发（Tomcat异步登陆+注册）

2023-07-01 17:51| 来源: 网络整理| 查看: 265

目录 引出前置工作vue+axios+resp0.vue版本的jsp模板1.导包--Json：pom.xml文件：2.新建一个专门用来处理响应的实体类ResData3.在axios中，所有响应必须是 resp.getWriter().write() 的方式，核心代码如下4.在jsp前端代码中导包：5.删除form表单，把页面都放在div框里，并且加上id=“app”6.在script中写逻辑 登陆功能+保存登陆的用户名1.前端代码，loginVue.jsp文件 & 保存登陆用户名2.后端代码如下，LoginServlet.java文件：3.然后在index页面显示登陆的用户名 注册功能1.前端代码registerVue.jsp2.后端代码RegisterServletVue.java 附录：Vue+Axios遇到的bug汇总1.导包失败net:ERR ABORTED 4042.未定义错误msg is not defined，data写成date3.之前的form表单没有删4.没有加this，报未定义异常imgbtn is not defined5.post请求没加上下文，POST请求404，Uncaught (in promise)6.let app = new Vue没有加new7.一个没有报错信息的bug--应该写在created里8.一个报错定位不清楚的bug9.一个一堆人找了半天的bug：value写成vlaue 10.属性里面写了插值表达式【困扰】 总结

引出

在之前的jsp版本的登陆和注册中，如下面博客： Java网络开发（Tomcat）—— 登陆 和 注册功能 的实现 & 从html 到 jsp 迭代升级 & session保存登陆信息

在这里插入图片描述

本质是用同步请求实现登陆和注册功能，在学习Js+axios+vue之后，就可以用异步的方式来实现登陆，主要博客如下：

Java网络开发（Asynchronous）—— 从 Jsp 到 Ajax 的 axios 到 vue & 同步请求 到 异步请求

前端基础（JavaScript）——基础语法（变量，分支…）& Json对象【重要】& 函数定义 & 事件

前端基础（Vue）——基础语法（{{}}, v-model, :src=“imagSrc“, v-for）& 事件@click & 属性和方法（this.add() + this.name）

前置工作vue+axios+resp 0.vue版本的jsp模板

要点：head导包；div框+id；script里写逻辑

Title let app = new Vue({ // 选择操作的div区域 el:"#app", // 数据区 data:{}, // 方法区 methods:{}, // 文档加载之后就执行 created(){}, // 整个页面全部加载完成后再执行 mounted(){}, })

带有axios请求的vue框架：

let app = new Vue({ el:"#app", data:{ bookTypeList:[] }, methods(){}, // 文档加载之后就执行 created(){ axios.get("/day06/types/list/vue") .then(response=>{ console.log(response) let resp = response.data; console.log(resp); this.bookTypeList=resp.data; },error=>{ console.log(error) }) }, }) 1.导包–Json：pom.xml文件： com.alibaba fastjson 1.2.76 2.新建一个专门用来处理响应的实体类ResData package com.tianju.entity; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; /** * 响应的实体类 */ @Data @NoArgsConstructor @AllArgsConstructor public class ResData { // 返回码，200正常，10001参数错误。。。 private Integer code; // 正常标识，success，ok private String msg; // 具体的信息，可以是对象 private Object data; } 3.在axios中，所有响应必须是 resp.getWriter().write() 的方式，核心代码如下 resp.getWriter().write(JSON.toJSONString(new ResData(1001, "输入为空", null))); 4.在jsp前端代码中导包： 用户登陆页面e 5.删除form表单，把页面都放在div框里，并且加上id=“app” 用户名： 密;;码： {{msg}} 登陆 重置 6.在script中写逻辑 let app = new Vue({ el:"#app", data:{}, methods:{}, }) 登陆功能+保存登陆的用户名

在这里插入图片描述

登陆功的代码如下：

1.前端代码，loginVue.jsp文件 & 保存登陆用户名 localStorage.setItem(“username”,resp.data) 用户登陆页面e 用户名： 密;;码： {{msg}} 登陆 重置 let app = new Vue({ el:"#app", data:{ username:"", password:"", msg:"" }, methods:{ login(){ let params = new URLSearchParams(); params.append("username",this.username); params.append("password",this.password) axios.post("/day06/comUser/login/vue",params) .then(response=>{ console.log(response); console.log(response.data); let resp=response.data; if (resp.code==200) { alert(resp.msg); localStorage.setItem("username",resp.data) location.href = "/day06/company/messList" } else { this.msg=resp.msg; } }) }, reset(){ this.username=""; this.password=""; this.msg="" } } }) 2.后端代码如下，LoginServlet.java文件： package com.tianju.servlet.comUser; import cn.hutool.crypto.SecureUtil; import com.alibaba.fastjson.JSON; import com.tianju.entity.ComUser; import com.tianju.entity.ResData; import com.tianju.service.IComUserService; import com.tianju.service.impl.ComUserServiceImpl; import com.tianju.util.StringUtils; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; /** * 用户登陆的servletVue */ @WebServlet("/comUser/login/vue") public class LoginServletVue extends HttpServlet { private IComUserService comUserService = new ComUserServiceImpl(); @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 输入不为空 String username = req.getParameter("username"); String password = req.getParameter("password"); if (StringUtils.isBlank(username) || StringUtils.isBlank(password)){ resp.getWriter().write(JSON.toJSONString( new ResData(1001, "输入为空", null))); return; } // 进行验证 ComUser comUser = comUserService.queryByUsername(username); if (comUser==null || !comUser.getPassword().equals(SecureUtil.md5(password))){ resp.getWriter().write(JSON.toJSONString(new ResData(1002, "用户名 | 密码错误", null))); return; } // ++++++登陆成功的用户对象存储到session中=====用户确定后续的操作是谁做的 req.getSession().setAttribute("user", comUser); resp.getWriter().write(JSON.toJSONString(new ResData(200, "ok", comUser.getUsername()))); } } 3.然后在index页面显示登陆的用户名 欢迎您： {username}}

核心代码如下：

let app = new Vue({ el:"#app", data:{ username:"", }, methods:{}, created(){ this.username=localStorage.getItem("username") } }) 注册功能

在这里插入图片描述

1.前端代码registerVue.jsp 用户注册页面 用户名： 密;;码： 确认密码： 性;;;别： 男 女 出生日期： 验证码： {{msg}} 注册 重置 退出 let app = new Vue({ el:"#app", data:{ username:"", password:"", rePassword:"", gender:"", birthday:"", imgCode:"", msg:"", imgsrc:"/day06/register/image/get", }, methods:{ register(){ let params = new URLSearchParams(); params.append("username",this.username); params.append("password",this.password); params.append("rePassword",this.rePassword); params.append("gender",this.gender); params.append("birthday",this.birthday); params.append("imgCode",this.imgCode); console.log(params); axios.post("/day06/comUser/register/vue",params) .then(response=>{ console.log(response); console.log(response.data); let resp = response.data; if (resp.code==200) { alert("登陆成功"); // 保存登陆到local localStorage.setItem("username",this.username); // 跳转到index location.href = "/day06/compMess/list.jsp"; } else if (resp.code==1002){ // 更新一下验证码 this.imgbtn(); this.msg=resp.msg; } else { this.msg=resp.msg; } }) }, reset() { this.username=""; this.password=""; this.rePassword=""; this.gender=""; this.birthday=""; this.imgCode=""; this.msg=""; }, imgbtn(){ // 切换图片 this.imgsrc = '/day06/register/image/get?'+new Date().getMilliseconds(); } } }) 2.后端代码RegisterServletVue.java package com.tianju.servlet.comUser; import cn.hutool.crypto.SecureUtil; import com.alibaba.fastjson.JSON; import com.tianju.entity.ComUser; import com.tianju.entity.ResData; import com.tianju.service.IComUserService; import com.tianju.service.impl.ComUserServiceImpl; import com.tianju.util.StringUtils; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; import java.text.ParseException; import java.text.SimpleDateFormat; /** * 用vue版本的注册的servlet */ @WebServlet("/comUser/register/vue") public class RegisterServletVue extends HttpServlet { private IComUserService comUserService = new ComUserServiceImpl(); private SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd"); @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 用户注册的业务逻辑 String username = req.getParameter("username"); String password = req.getParameter("password"); String rePassword = req.getParameter("rePassword"); String sex = req.getParameter("gender"); String birthday = req.getParameter("birthday"); System.out.println(username+password+rePassword+sex+birthday); // +++加入+验证码输入 String imgCode = req.getParameter("imgCode"); // 1.输入不为空； if (StringUtils.isBlank(username) || StringUtils.isBlank(password) || StringUtils.isBlank(rePassword) || StringUtils.isBlank(sex) || StringUtils.isBlank(birthday) || StringUtils.isBlank(imgCode)){ resp.getWriter().write(JSON.toJSONString( new ResData(1001, "输入为空", null))); return; } // +++++判断验证码是否正确 HttpSession session = req.getSession(); // 从session中获取验证码 String yzm = (String)session.getAttribute("yzm"); // 忽略大小写 .equalsIgnoreCase if (!yzm.equalsIgnoreCase(imgCode)){ resp.getWriter().write(JSON.toJSONString( new ResData(1002, "验证码不正确", null))); return; } // 2.用户名不重复； ComUser comUserDb = comUserService.queryByUsername(username); if (comUserDb!=null){ resp.getWriter().write(JSON.toJSONString( new ResData(1003, "用户名重复", null))); return; } // 3.两次密码输入一致； if (!password.equals(rePassword)){ // 两次密码不一致 resp.getWriter().write(JSON.toJSONString( new ResData(1004, "两次密码输入不一致，请检查", null))); return; } // 进行密码加密存储 ComUser comUser = new ComUser(); comUser.setPassword(SecureUtil.md5(password)); comUser.setUsername(username); try { comUser.setBirthday(sdf.parse(birthday)); } catch (ParseException e) { throw new RuntimeException(e); } comUser.setSex(sex); System.out.println(comUser); // 4.保存信息到数据库 comUserService.add(comUser); // 5.注册成功跳转到登陆页面 resp.getWriter().write(JSON.toJSONString( new ResData(200, "注册成功", null))); } } 附录：Vue+Axios遇到的bug汇总 1.导包失败net:ERR ABORTED 404

报错信息：

GET http://localhost:8080/bootstrap/css/bootstrap.css net:ERR ABORTED 404

在这里插入图片描述

2.未定义错误msg is not defined，data写成date

报错信息：ReferenceError:msg is not defined

在这里插入图片描述

另一种情况，不太好找：

在这里插入图片描述

3.之前的form表单没有删

导致发送两次请求 在这里插入图片描述

在这里插入图片描述

4.没有加this，报未定义异常imgbtn is not defined

Uncaught (in promise) ReferenceError: imgbtn is not defined

在这里插入图片描述

5.post请求没加上下文，POST请求404，Uncaught (in promise)

报错信息：

http://localhost:8080/comUser/register/vue 404

Uncaught (in promise) {message:‘Request failed with status code 404’,name:‘AxiosError’,

在这里插入图片描述

6.let app = new Vue没有加new

报错信息：

vue.min-v2.5.16.js:6 Uncaught TypeError: Cannot read properties of undefined (reading ‘_init’)

在这里插入图片描述

7.一个没有报错信息的bug–应该写在created里

在这里插入图片描述

8.一个报错定位不清楚的bug

报错信息：

Uncaught TypeError: e.bind is not a function

在这里插入图片描述

9.一个一堆人找了半天的bug：value写成vlaue

在这里插入图片描述同上，不太好找的bug

在这里插入图片描述

10.属性里面写了插值表达式【困扰】

问题描述： 前端没有list页面数据，但是前端拿到了后端的响应数据，而且前端没有报错，原因是属性里面写了插值表达式



【本文地址】

公司简介

联系我们

今日新闻

    推荐新闻

    专题文章
      CopyRight 2018-2019 实验室设备网 版权所有