芜湖酒店网站建设郑州做网站zzmshl
目录
一、数据库模块
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=falseusername: rootpassword: 1234driver-class-name: com.mysql.cj.jdbc.Drivermybatis:# 配置 mybatis xml 的⽂件路径，在 resources/mybatis 创建所有表的 xml ⽂件mapper-locations: classpath:mapper/*Mapper.xmlconfiguration: # 配置打印 MyBatis日志log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-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 {@Autowiredprivate UserMapper userMapper;@PostMapping("/login")@ResponseBodypublic 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")@ResponseBodypublic Object getUserInfo(HttpServletRequest req) {try {//拿到当前的session，false的含义：如果当前已经有session了，就使用该session，如果没有，也不会创建新的sessionHttpSession 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>