前言
通过异步请求来实现基本的登录注册功能，主要是梳理自己的思路并记录完整的流程，方便后续复习。
一、主要步骤整理
- 创建工程boot3-2 打钩3个
- 从之前工程中复制application.properties里面的连接数据库的信息 ,复制完之后立即启动工程 测试是否创建成功, 如果工程启动不起来 检查报错是不是因为端口被占用, 如果不是 刷新maven 再次启动 ,如果还是启动不了 删除工程重新创建新工程 直至启动成功.
- 创建index.html页面 在里面添加两个超链接访问注册和登录页面
- 创建reg.html页面 在页面中引入vue和axios两个框架文件 从之前工程中复制js文件夹(检查里面是不是包含这两个框架文件) 在页面中 点击按钮时向/reg发出异步请求,同时把用户输入的信息提交给服务器,然后在then方法里面判断返回的response.data值为1代表注册成功 显示首页 值为2代表用户名已存在
- 创建controller.UserController 并且创建entity.User实体类
- 在Controller里面添加reg方法处理/reg请求 声明User变量用来接收传递过来的用户信息
- 创建mapper.UserMapper 在里面提供两个方法 分别是 selectByUsername 和 insert两个方法
- 回到Controller里面把UserMapper通过@Autowired装配进来,在reg方法中先调用mapper里面的selectByUsername方法 判断返回值是否有值 如果有值则给客户端返回2代表用户名已存在 如果没有值 则调用mapper的insert方法 把用户信息保存到数据库,最后返回1 代表注册成功
- 下一步开始实现登录功能, 步骤类似注册 先创建login.html页面 然后在页面中通过Vue对内容进行管理 当点击登录按钮的时候 向/login发出异步请求 同样把输入的用户信息提交给服务器, 在then方法中判断response.data的值为1代表登录成功显示首页 值为2 代表用户名不存在, 值为3 代表密码错误
- 在Controller里面添加login方法处理/login请求,声明User对象接收传递过来的用户信息, 在方法中调用mapper的selectByUsername 通过用户输入的用户名查询对应的用户信息,如果没有查询到 直接返回2代表用户名不存在,如果查询到了 继续通过输入的密码和查询到的密码比较如果一致返回1代表登录成功, 如果不一致返回2 代表密码错误.
二、创建index，reg，login页面
index：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>工程首页</h1>
<a href="/reg.html">注册</a>
<a href="/login.html">登录</a>
</body>
</html>
reg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>注册</h1>
<div>
<input type="text" v-model="user.username" placeholder="用户名">
<input type="password" v-model="user.password" placeholder="密码">
<input type="text" v-model="user.nick" placeholder="昵称">
<input type=
最低0.47元/天 解锁文章
1101
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
