网页版五子棋——用户模块（服务器开发）

前一篇文章：网页版五子棋—— WebSocket 协议-CSDN博客

目录

·前言

一、编写数据库代码

1.数据库设计

2.配置 MyBatis

3.创建实体类

4.创建 UserMapper

二、前后端交互接口

1.登录接口

2.注册接口

3.获取用户信息

三、服务器开发

1.代码编写

2.测试后端接口

·结尾

---

·前言

        本篇文章就开始五子棋项目的正式编写了，在本篇文章中主要是对用户模块中服务器端的代码进行编写与介绍，用户模块主要负责用户的注册、登录、分数记录的功能，这里我们使用 MySQL 数据库来存储数据，服务器端是基于 Spring + MyBatis 来实现对数据库的增、删、查、改，本篇文章新增的代码结构及内容如下图所示：

        下面就开始本篇文章的内容介绍。  

一、编写数据库代码

1.数据库设计

        创建 user 表来保存用户信息和分数信息，我们五子棋项目的数据库设计非常简单，具体的建库建表及测试数据的代码如下，复制粘贴到 MySQL 命令行中就可以完成创建：

create database if not exists spring_gobang charset utf8;use spring_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);
insert into user values (null, 'zhaoliu', '123', 1000, 0, 0);

2.配置 MyBatis

        在五子棋项目中我们使用 MyBatis 来连接并操作我们的数据库，首先我们需要修改 Spring 的配置文件，使数据库可以连接上，编辑 application.yml 的代码如下，这里要注意根据自己数据库的实际情况来对下面的部分配置加以修改：

spring:datasource:url: jdbc:mysql://127.0.0.1:3306/spring_gobang?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8username: rootpassword: 111111driver-class-name: com.mysql.cj.jdbc.Driver

        如果都是按照我的代码进行编写，这里的配置需要记得修改数据库的密码。 

3.创建实体类

        在代码中创建实体类，用户 User 类，它用来表示我们用户的相关信息，具体代码如下：

import lombok.Data;
// @Data 注解是为我们自动添加 get 与 set 方法的
@Data
public class User {private int userId;private String username;private String password;private int score;private int totalCount;private int winCount;
}

        这里需要注意，User 类中的每个属性名称要与 user 表中对应的每个字段的名称相同，不然·无法对应上。 

4.创建 UserMapper

        UserMapper 是一个接口，这里定义了用户相关数据库的操作，使用 MyBatis 中注解的方式来自动实现数据库的操作，具体代码及介绍如下所示：

import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;@Mapper
public interface UserMapper {// 往数据库中插入一个用户,用于注册功能@Insert("insert into user values (null, #{username}, #{password}, 1000, 0, 0)")void insert(User user);// 根据用户名,来查询用户的详细信息,用于登录功能@Select("select * from user where username = #{username}")User selectByName(String username);
}

二、前后端交互接口

        在我们用户模块，涉及前后端交互的接口主要有三个部分：

• 登录接口
• 注册接口
• 获取用户信息接口

        这个前后端交互的接口，在约定的时候是有很多种交互方式的，我们下面约定好之后，后续的后端/前端代码就都要严格的遵循这个约定来编写代码。 

1.登录接口

        登录接口的设计如下：

• 请求：

                POST /login HTTP/1.1

                Content-Type：application/x-www-from-urlencoded

                username=zhangsan&password=123

---

• 响应：

                Http/1.1 200 OK

                Content-Type：application/json

                {

                        userId:1,

                        username:'zhangsan',

                        score:1000,

                        totalCount:0,

                        winCount:0

                }

---

• 登录失败：

                返回一个无效的 user 对象，这个对象的所有属性都为空，后续利用这里的 userId 是否为 0 来判断登录是否成功。

        注意，以上接口格式要严格遵守，里面的数据只是以 zhangsan 为示例进行介绍， 

2.注册接口

        注册接口设计如下：

• 请求：

                POST /register HTTP/1.1

                Content-Type：application/x-www-from-urlencoded

                username=zhangsan&password=123

---

• 响应：

                Http/1.1 200 OK

                Content-Type：application/json

                {

                        userId:1,

                        username:'zhangsan',

                        score:1000,

                        totalCount:0,

                        winCount:0

                }

---

• 注册失败（比如用户名重复）：

                返回一个无效的 user 对象，这个对象的所有属性都为空，后续利用这里的 userId 是否为 0 来判断注册是否成功。

3.获取用户信息

        从服务器获取到当前登录用户的信息，程序运行过程中，用户登录之后，让客户端随时通过这个接口，来访问服务器获取到用户自身的信息，获取用户信息的接口设计如下：

• 请求：

                Get /userInfo HTTP/1.1

---

• 响应：

                HTTP/1.1 200 OK

                Content-Type：application/json

                {

                        userId:1,

                        username:'zhangsan',

                        score:1000,

                        totalCount:0,

                        winCount:0

                }

三、服务器开发

1.代码编写

        在 api 包下创建 UserAPI 类，这里主要实现用户相关操作的三个方法：

• login：用来实现登录逻辑；
• register：用来实现注册逻辑；
• getUserInfo：用来实现登录成功后显示用户分数的信息。

        具体代码及详细介绍如下所示：

import com.example.springgobang.model.User;
import com.example.springgobang.model.UserMapper;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpSession;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;@RestController
public class UserAPI {// 注入 userMapper 对象@Autowiredprivate UserMapper userMapper;// @PostMapping :路由映射@PostMapping("/login")// @ResponseBody :返回响应@ResponseBody// login 方法是处理登录的逻辑public Object login(String username, String password, HttpServletRequest request) {// 关键操作,根据 username 去数据库进行查询.User user = userMapper.selectByName(username);// 如果能找到匹配的用户,并且密码也一致,就认为登录成功if (user == null || !user.getPassword().equals(password)) {// 登录失败System.out.println("登录失败!");return new User();}System.out.println("[login] user = " + username);// getSession() 方法中参数为 true 表示当会话存在直接返回,不存在就创建会话// 用户首次登录,允许创建会话HttpSession httpSession = request.getSession(true);// 把 user 保存到 session 中,以便下次访问服务器时,服务器可以正确识别出当前客户端对应的正确身份信息httpSession.setAttribute("user",user);return user;}@PostMapping("/register")@ResponseBody// register 方法是处理注册相关的逻辑public Object register(String username, String password) {// 为了预防注册失败(比如出现用户名重复的情况)// 这里用 try--catch 包住try {User user = new User();user.setUsername(username);user.setPassword(password);userMapper.insert(user);return userMapper.selectByName(username);} catch (org.springframework.dao.DuplicateKeyException e) {// 注册失败,返回一个空的 User 对象return new User();}}@GetMapping("/userInfo")@ResponseBody// getUserInfo 方法用来处理获取用户信息的操作public Object getUserInfo(HttpServletRequest request) {// 避免获取的用户信息不存在,用 try--catch 包住try {// getSession() 方法中参数为 false 表示当会话存在直接返回,不存在也不创建新会话// 由于这是用户登录后的操作,所以登录了就有会话,没登录就没有会话// 这也可以让我们感知到用户是否进行了登录HttpSession httpSession = request.getSession(false);// 从 session 中获取登录用户的信息User user = (User) httpSession.getAttribute("user");return user;} catch (NullPointerException e) {// 当前用户未登录, 直接返回一个空的 User 对象return new User();}}
}

2.测试后端接口

        编写完代码之后，我们来验证一下代码是否正确，功能是否正常，这里我们使用的测试工具是一个软件 Postman ，首先我们要启动我们的程序，然后使用 Postman 来测试我们后端的代码，具体的测试过程及结果如下图所示：

        如上图所示，服务器端关于用户模块的代码及功能就都正确编写完成了。 

·结尾

        文章到此就要结束了，本篇文章主要介绍了五子棋项目中用户模块的服务器端代码编写、数据库设计，以及规定了前后端交互的接口，文章中使用到的 Postman 是非常好用的接口测试工具，在后面的模块中都会使用 Postman 来进行后端接口的测试，如果对本篇文章的内容有所疑惑，欢迎在评论区进行留言，如果感觉本篇文章还不错也希望能收到你的三连支持，那么我们下一篇文章再见吧~~~