完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com
模块详细讲解
用户信息定义(数据库)
用户名称: username
用户密码: password
用户天梯分数: score(假定初始值为1000)
用户游戏总场次: totalCount
用户获胜场次: winCount
用户表的创建:
create database if not exists java_gobang;use java_gobang;drop table if exists user;
create table user (userId int primary key auto_increment,username varchar(50) unique,password varchar(50),score int, -- 天梯积分totalCount int, -- 比赛总场数winCount int -- 获胜场数
);insert into user values(null, 'zhangsan', '123', 1000, 0, 0);
insert into user values(null, 'lisi', '123', 1000, 0, 0);
insert into user values(null, 'wangwu', '123', 1000, 0, 0);这样我们就能够描述出一个用户的信息, 在后端model中我们同样给出对于一个用户的定义:
@Data
public class User {private int userId;private String username;private String password;private int score;private int totalCount;private int winCount;
}后端代码部分
要想进行登录操作, 必然会进入对数据库用户信息的访问, 这时我们就可以利用MyBatis访问数据库.
首先在yml文件中完成对数据库的配置:
mybatis:configuration:map-underscore-to-camel-case: truelog-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations: classpath:mapper/**Mapper.xmllogging:file:name: spring-blog.logspring:datasource:url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=falseusername: rootpassword: 你的密码driver-class-name: com.mysql.cj.jdbc.Driver然后我们通过mapper层, 来进行对数据库的读取:
//往数据库里插入一个用户, 用于注册功能
void insert(User user);//根据用户名, 来查询用户的详细信息, 用于登录功能.
User selectByName(String username);利用xml的方式进行具体实现:
<insert id="insert">insert into user values(null, #{username}, #{password}, 1000, 0, 0);</insert><select id="selectByName" resultType="com.example.java_gobang.model.User">select * from user where username = #{username};</select>这样我们就能够顺利地读取到数据库数据.
接下来我们就需要进行controller部分的编写, 我们都知道, 这一步的关键, 首先是定义请求和响应格式, 我们做出如下定义:
首先是请求, 这里我们定义的请求的发送类型为url, 即:
POST/login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=zhangsan&password=123
响应:
HTTP/1.1 200 OK
{
userId: 1,
username: 'zhangsan',
score: 1000,
totalCount: 0,
winCount: 0
}
通过上述信息我们就可以编写controller内容了:
//登录@PostMapping("/login")@ResponseBodypublic Object login(String username, String password, HttpServletRequest req) {//关键操作, 就是根据 username 去数据库中进行查询//如果能找到匹配用户, 并且密码也一致, 就认为登录成功User user = userMapper.selectByName(username);log.info("[login] username = " + username);if(user == null || !user.getPassword().equals(password)) {log.info(password + " " + user.getPassword());//登录失败log.info("登录失败!");//返回一个空对象return new User();}//创建一个新的会话, 以应对之后多次请求的情况HttpSession httpSession = req.getSession(true);//设置会话的内容.httpSession.setAttribute("user", user);return user;}当登录操作完成后, 我们还需要对于当前用户的会话信息进行保存(创建一个新的会话保存), 以方便后面对于获取用户信息的请求.
然后是注册, 这里很简单, 只需要将用户输入的用户名和密码向数据库中保存即可, 要注意的是当用户名重复时(key重复), 是不能向数据库中插入重复的内容的, 应该插入一个空对象并返回, 如果前端发现这个对象是空的, 响应也会显示注册失败.
//注册@PostMapping("/register")@ResponseBodypublic Object register(String username, String password) {try {User user = new User();user.setUsername(username);user.setPassword(password);userMapper.insert(user);return user;//抛出重复key异常} catch (org.springframework.dao.DuplicateKeyException e) {User user = new User();return user;}}前端代码部分
这一部分很简单, 从输入框获取到用户输入内容, 点击按钮后构造ajax请求发送给后端即可, 成功登录就会跳转到游戏大厅页面(后面实现), 成功注册则会跳转至登录页面.
登录:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登录</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head>
<body><div class="nav">五子棋对战</div><div class="login-container"><!-- 登录界面的对话框 --><div class="login-dialog"><!-- 提示信息 --><h3>登录</h3><!-- 这个表示一行 --><div class="row"><span>用户名</span><input type="text" id="username"></div><!-- 这是另一行 --><div class="row"><span>密码</span><input type="password" id="password"></div><!-- 提交按钮 --><div class="row"><button id="submit">提交</button></div><div class="row"><a href="http://127.0.0.1:8080/register.html">没有账号?点击注册</a></div></div></div><script src="./js/jquery.min.js"></script><script>let usernameInput = document.querySelector('#username');let passwordInput = document.querySelector('#password');let submitButton = document.querySelector('#submit');submitButton.onclick = function() {//通过ajax的方式发送请求$.ajax({type: 'post',url: '/login',data: {username: usernameInput.value,password: passwordInput.value},success: function(body) {//请求执行成功之后的回调函数//判定当前是否登陆成功//如果登录成功, 服务器会返回当前的User对象.//如果登录失败, 服务器会返回一个空的User对象if (body && body.userId > 0) {//重定向到游戏大厅页面location.assign('/game_hall.html');} else {alert("登录失败!")}},error: function() {//请求执行失败之后的回调函数alert("登录失败!");}});}</script>
</body>
</html>注册:
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>注册</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css">
</head><body><div class="nav">五子棋对战</div><div class="login-container"><!-- 登录界面的对话框 --><div class="login-dialog"><!-- 提示信息 --><h3>注册</h3><!-- 这个表示一行 --><div class="row"><span>用户名</span><input type="text" id="username"></div><!-- 这是另一行 --><div class="row"><span>密码</span><input type="password" id="password"></div><!-- 提交按钮 --><div class="row"><button id="submit">提交</button></div></div></div><script src="js/jquery.min.js"></script><script>let usernameInput = document.querySelector('#username');let passwordInput = document.querySelector('#password');let submitButton = document.querySelector('#submit');submitButton.onclick = function () {$.ajax({type: 'post',url: '/register',data: {username: usernameInput.value,password: passwordInput.value,},success: function (body) {//如果`注册成功, 就会返回一个注册好的用户对象if (body && body.username) {location.assign('/login.html');} else {alert("注册失败!");}},error: function () {alert("注册失败");}});}</script>
</body></html>
