首页 > 其他分享 >网页版五子棋——用户模块(服务器开发)

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

时间:2024-11-08 11:46:56浏览次数:6  
标签:username 网页 登录 五子棋 用户 接口 user 服务器 User

前一篇文章:网页版五子棋—— 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%2B8
    username: root
    password: 111111
    driver-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 对象
    @Autowired
    private 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 来进行后端接口的测试,如果对本篇文章的内容有所疑惑,欢迎在评论区进行留言,如果感觉本篇文章还不错也希望能收到你的三连支持,那么我们下一篇文章再见吧~~~

标签:username,网页,登录,五子棋,用户,接口,user,服务器,User
From: https://blog.csdn.net/HKJ_numb1/article/details/143562672

相关文章

  • 记录几个视频嵌入网页的html代码写法
    <pstyle="text-align:center;"><iframestyle="height:350px;"src="https://v.qq.com/txp/iframe/player.html?vid=s3000bwdvh8"frameborder="0"></iframe></p><iframeframeborder="0"sr......
  • 在 Windows Server 系统中,更改更新服务器地址(即更改 Windows 更新源)通常需要调整组策
    在WindowsServer系统中,更改更新服务器地址(即更改Windows更新源)通常需要调整组策略或注册表设置。以下是两种常见的方法来更改Windows更新服务器地址:方法一:通过组策略设置更新服务器地址打开组策略编辑器按下Win+R打开“运行”窗口,输入gpedit.msc并按回车,打开本地......
  • 服务器是Ubuntu20.04,安装Colmap
    就下这一个东西,遇到的错误简直数不清,在这吐槽一下!顺便,分享一个最终成功的教程!!(虽然可能是玄学~)附上我跟着一步一步来最终下好的教程链接,亲测好用!!!https://blog.csdn.net/weixin_44172157/article/details/122203759其实中途还是发现了一个错误!和之前遇到的都一样,后面发现是我文件......
  • 国标GB28181网页直播平台EasyGBS国标GB28181摄像机接入对接国标协议平台的全方案
    随着信息技术的飞速发展,视频监控领域正经历从传统安防向智能化、网络化安防的深刻转变。国标GB28181协议作为我国制定的专门用于视频监控联网的协议标准,在这场技术变革中发挥了重要作用。而国标GB28181网页直播平台EasyGBS作为安防视频监控平台,通过与国标GB28181协议的对接,提供......
  • 前端跨域问题全解:JSONP、CORS 与代理服务器
    在前端开发中,跨域问题常常给开发者带来困扰。当网页应用需要从不同的源(域名、协议或端口)获取数据时,浏览器会因同源策略而限制这种跨域请求。本文将深入探讨前端跨域问题的产生原因以及多种有效的解决方案,并详细介绍其具体实现步骤。一、跨域问题产生的原因浏览器的同源策略是......
  • .net网页验证码、登录验证码
    来源:https://blog.csdn.net/Yuhang_Zhou/article/details/140614304验证码辅助类usingSystem.Drawing;usingSystem.Drawing.Imaging;namespaceXCGApp{///<summary>///验证码辅助类///</summary>publicclassValidateCodeUtil{/......
  • 智慧园区算法视频分析服务器明火识别视频分析技术与其他火灾预防技术相比有何优势?
    在火灾预防领域,传统的火灾报警系统虽然在一定程度上能够提供预警,但它们往往存在响应延迟和监测盲区的问题。随着人工智能和计算机视觉技术的发展,视频分析技术作为一种新型火灾预防手段,展现出了其独特的优势。明火识别视频分析服务器能够通过实时视频流分析,提供更为直观、快速和全......
  • 使用chromedriver抓取网页截图
    前提:1、电脑安装了谷歌浏览器2、下载chromedriver-win64,放到C:\ProgramFiles\Google\Chrome\chromedriver-win64  安装路径chromedriver-win64 下载地址:ChromeforTestingavailability3、importorg.apache.commons.io.FileUtils;importorg.openqa.selenium.Outp......
  • Windows Server 中的 NLB(Network Load Balancing,网络负载均衡)功能是一个用于将客户端
    WindowsServer中的NLB(NetworkLoadBalancing,网络负载均衡)功能是一个用于将客户端请求分配到多个服务器的技术,目的是提供高可用性和扩展性。NLB通过在多个服务器之间分配网络流量,确保应用程序或服务的高可用性,避免单点故障,并提高系统的处理能力。NLB通常用于需要高可用性和......
  • 街面环卫算法视频分析服务器流动商贩实时视频流分析边缘计算技术简介
    在当今数字化时代,实时视频流分析已成为推动智能监控、智慧城市和自动驾驶等前沿领域发展的关键技术。它通过深度挖掘视频内容,提供了前所未有的洞察力和即时反应能力。然而,这一技术面临着计算负载高、带宽需求大和对延迟的严格要求等挑战,这些挑战限制了其在传统云计算架构中的应用......