完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com
模块详细讲解
用户信息定义(数据库)
用户名称: username
用户密码: password
用户天梯分数: score(假定初始值为1000)
用户游戏总场次: totalCount
用户获胜场次: winCount
用户表的创建:
sql
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中我们同样给出对于一个用户的定义:
java
@Data
public class User {
private int userId;
private String username;
private String password;
private int score;
private int totalCount;
private int winCount;
}后端代码部分
要想进行登录操作, 必然会进入对数据库用户信息的访问, 这时我们就可以利用MyBatis访问数据库.
首先在yml文件中完成对数据库的配置:
java
mybatis:
configuration:
map-underscore-to-camel-case: true
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
mapper-locations: classpath:mapper/**Mapper.xml
logging:
file:
name: spring-blog.log
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=false
username: root
password: 你的密码
driver-class-name: com.mysql.cj.jdbc.Driver然后我们通过mapper层, 来进行对数据库的读取:
java
//往数据库里插入一个用户, 用于注册功能
void insert(User user);
//根据用户名, 来查询用户的详细信息, 用于登录功能.
User selectByName(String username);
利用xml的方式进行具体实现:
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内容了:
java
//登录
@PostMapping("/login")
@ResponseBody
public 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重复), 是不能向数据库中插入重复的内容的, 应该插入一个空对象并返回, 如果前端发现这个对象是空的, 响应也会显示注册失败.
java
//注册
@PostMapping("/register")
@ResponseBody
public 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请求发送给后端即可, 成功登录就会跳转到游戏大厅页面(后面实现), 成功注册则会跳转至登录页面.
登录:
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 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>注册:
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>