目录
一、数据库模块
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
public class UserAPI {
@Autowired
private UserMapper userMapper;
@PostMapping("/login")
@ResponseBody
public Object login(String username, String password, HttpServletRequest req) {
//如果用户名或密码为空,就直接返回空的User对象
if(!StringUtils.hasLength(username) || !StringUtils.hasLength(password)) {
return new User();
}
User user = userMapper.selectByName(username);
//在数据库里查询不到这个用户名,或者有这个用户,但密码错误
if(user == null || !user.getPassword().equals(password)) {
return new User();
}
//建立会话,true的含义,如果当前有session,就直接使用当前的session,如果没有,就创建一个
HttpSession httpSession = req.getSession(true);
//把当前user保存到这个会话中
httpSession.setAttribute("user", user);
return user;
}
@PostMapping("/register")
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 req) {
try {
//拿到当前的session,false的含义:如果当前已经有session了,就使用该session,如果没有,也不会创建新的session
HttpSession httpSession = req.getSession(false);
//从当前的session拿到用户信息
User user = (User) httpSession.getAttribute("user");
//把当前信息返回给客户端
return user;
} catch (NullPointerException e) {
//可能当前用户没有登录,所以session可能会为空、
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: "/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 (body) {
//请求执行失败的回调函数
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: "/register",
data: {
username: usernameInput.value,
password: passwordInput.value
},
success: function (body) {
//请求执行成功的回调函数
//判断当前是否登录成功
//如果返回的对象是User,那么就是登录成功
//如果返回的对象是空的User,那么就是登录失败
if(body && body.username) {
//登录成功
alert("注册成功");
//重定向跳转到 “游戏大厅页面”
location.assign('/login.html');
} else {
//登录失败
alert("注册失败");
}
},
error: function (body) {
//请求执行失败的回调函数
alert("注册失败");
}
});
}
</script>
</body>
</html>