目录
一、数据库模块
1、创建数据库
2、使用MyBatis连接并操作数据库
编写后端数据库代码
二、约定前后端交互接口
三、后端代码编写
文件路径如下：
UserAPI：
UserMapper：
四、前端代码
登录页面 login.html：
注册页面 register.html：
一、数据库模块
1、创建数据库
数据库中存放的是用户信息，其中用户信息包含用户ID、用户名、用户密码、用户天梯分数、用户对战场数，用户胜场数。
根据上述信息，写SQL语句：
create database if not exists java_gobang;
use java_gobang;
drop table if exists use;
create table user (
user_id int primary key auto_increment,
user_name varchar(50) unique, --用户名，不能重复
password varchar(50),
score int, --用户天梯积分
total_count int, --总场数
win_count 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, "admin", "123", 1000, 0, 0);运行这些代码，查询是否创建成功。
2、使用MyBatis连接并操作数据库
加入依赖
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>3.0.3</version>
</dependency>
<dependency>
<groupId>com.mysql</groupId>
<artifactId>mysql-connector-j</artifactId>
<scope>runtime</scope>
</dependency>配置yml文件，连接本地数据库：
spring:
datasource:
url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=false
username: root
password: 1234
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
# 配置 mybatis xml 的⽂件路径，在 resources/mybatis 创建所有表的 xml ⽂件
mapper-locations: classpath:mapper/*Mapper.xml
configuration: # 配置打印 MyBatis日志
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
map-underscore-to-camel-case: true #配置驼峰自动转换编写后端数据库代码
登录接口：根据用户名，查询数据库中的用户信息，校验密码是否正确
注册模块：根据用户名 和 密码，往数据库中插入新的用户信息。
先创建一个用户类：
@Data
public class UserInfo {
private Integer userId;
private String userName;
private String password;
private Integer score;//用户天梯积分
private Integer totalCount;//总场数
private Integer winCount;//胜场数
}使用MyBatis操作数据库：
@Mapper
public interface UserMapper {
//根据用户名，查询用户的详情信息，用于登录功能
@Select("select * from user where user_name = #{userName}")
UserInfo selectByName(String userName);
//往数据库里插入信息，用于注册功能
@Insert("insert into user values (null, #{userName}, #{password}, 1000, 0, 0);")
Integer insert(UserInfo userInfo);
}二、约定前后端交互接口
登录：
注册：
从服务器获取到当前登录的用户信息：
（程序运行过程中，用户登录了之后，让客户端随时通过这个接口，来访问服务器，获取到自身的信息）
三、后端代码编写
文件路径如下：
UserAPI：
@RestController
@RequestMapping("/user")
public class UserAPI {
@Autowired
private UserMapper userMapper;
@PostMapping("/login")
@ResponseBody
public Object selectByName(String username, String password, HttpServletRequest request) {
System.out.println("userName：" + username + " " + "password：" + password);
User user = userMapper.selectByName(username);
if(user == null || !user.getPassword().equals(password)) {
return new User();
}
//正确的情况
HttpSession session = request.getSession(true);
session.setAttribute("user", user);
user.setPassword("");
return user;
}
@PostMapping("/register")
@ResponseBody
public Object register(String username, String password) {
if(!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {
return new User();
}
try {
User user = new User();
user.setUsername(username);
user.setPassword(password);
userMapper.register(user);
return user;
} catch (org.springframework.dao.DuplicateKeyException e) {
//注册的用户名可能重复，就返回空的对象
return new User();
}
}
@GetMapping("/userInfo")
@ResponseBody
public Object getUserInfo(HttpServletRequest request) {
try {
HttpSession session = request.getSession(false);
User user = (User) session.getAttribute("user");
User newUser = userMapper.selectByName(user.getUsername());
return newUser;
} catch (NullPointerException e) {
return new User();
}
}
}UserMapper：
@Mapper
public interface UserMapper {
//根据用户名，查询用户的详情信息，用于登录功能
@Select("select * from user where user_name = #{username}")
User selectByName(String username);
//往数据库里插入信息，用于注册功能
@Insert("insert into user values (null, #{username}, #{password}, 1000, 0, 0);")
void register(User userInfo);
}四、前端代码
登录页面 login.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: '/user/login',
data: {
username: usernameInput.value,
password: passwordInput.value
},
success: function(body) {
//请求成功之后的回调函数
//判定当前是否登录成功
//如果登录成功，服务器会返回当前的User对象；如果登录失败，服务器会返回一个空的User对象
if(body && body.userId > 0) {
//登录成功
alert("登录成功");
//重定向跳转到游戏大厅页面
location.assign('/game_hall.html');
} else {
alert("登录失败");
}
},
error: function() {
//请求失败后的回调函数
alert("登录失败");
}
});
}
</script>
</body>
</html>注册页面 register.html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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: '/user/register',
data: {
username: usernameInput.value,
password: passwordInput.value
},
success: function(body) {
//如果注册成功，就会返回一个新注册好的用户对象
if(body && body.username) {
//注册成功
alert("注册成功");
location.assign("/login.html");
} else {
alert("注册失败");
}
},
error: function() {
//请求失败后的回调函数
alert("注册失败");
}
});
}
</script>
</body>
</html>
