项目-双人五子棋对战: 登录/注册模块的具体实现(2)

灰灰快醒醒

已于 2024-06-05 16:33:41 修改

阅读量605

点赞数 11

分类专栏：五子棋双人对战项目文章标签：数据库开发语言

于 2024-06-04 11:34:52 首次发布

本文链接：https://blog.csdn.net/asdssadddd/article/details/139434942

版权

五子棋双人对战项目专栏收录该内容

6 篇文章 0 订阅

订阅专栏

完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com

模块详细讲解

用户信息定义(数据库)

用户名称: username

用户密码: password

用户天梯分数: score(假定初始值为1000)

用户游戏总场次: totalCount

用户获胜场次: winCount

用户表的创建:

create database if not exists java_gobang;

use java_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);

这样我们就能够描述出一个用户的信息, 在后端model中我们同样给出对于一个用户的定义:

@Data
public class User {
    private int userId;
    private String username;
    private String password;
    private int score;
    private int totalCount;
    private int winCount;
}

后端代码部分

要想进行登录操作, 必然会进入对数据库用户信息的访问, 这时我们就可以利用MyBatis访问数据库.

首先在yml文件中完成对数据库的配置:

mybatis:
  configuration:
    map-underscore-to-camel-case: true
    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  mapper-locations: classpath:mapper/**Mapper.xml

logging:
  file:
    name: spring-blog.log

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=false
    username: root
    password: 你的密码
    driver-class-name: com.mysql.cj.jdbc.Driver

然后我们通过mapper层, 来进行对数据库的读取:

//往数据库里插入一个用户, 用于注册功能
void insert(User user);

//根据用户名, 来查询用户的详细信息, 用于登录功能.
User selectByName(String username);

利用xml的方式进行具体实现:

    <insert id="insert">
        insert into user values(null, #{username}, #{password}, 1000, 0, 0);
    </insert>

    <select id="selectByName" resultType="com.example.java_gobang.model.User">
        select * from user where username = #{username};
    </select>

这样我们就能够顺利地读取到数据库数据.

接下来我们就需要进行controller部分的编写, 我们都知道, 这一步的关键, 首先是定义请求和响应格式, 我们做出如下定义:

首先是请求, 这里我们定义的请求的发送类型为url, 即:

POST/login HTTP/1.1

Content-Type: application/x-www-form-urlencoded

username=zhangsan&password=123

响应:

HTTP/1.1 200 OK

{

userId: 1,

username: 'zhangsan',

score: 1000,

totalCount: 0,

winCount: 0

}

通过上述信息我们就可以编写controller内容了:

    //登录
    @PostMapping("/login")
    @ResponseBody
    public Object login(String username, String password, HttpServletRequest req) {
        //关键操作, 就是根据 username 去数据库中进行查询
        //如果能找到匹配用户, 并且密码也一致, 就认为登录成功
        User user = userMapper.selectByName(username);
        log.info("[login] username = " + username);
        if(user == null || !user.getPassword().equals(password)) {
            log.info(password + " " + user.getPassword());
            //登录失败
            log.info("登录失败!");
            //返回一个空对象
            return new User();
        }
        //创建一个新的会话, 以应对之后多次请求的情况
        HttpSession httpSession = req.getSession(true);
        //设置会话的内容.
        httpSession.setAttribute("user", user);
        return user;
    }

当登录操作完成后, 我们还需要对于当前用户的会话信息进行保存(创建一个新的会话保存), 以方便后面对于获取用户信息的请求.

然后是注册, 这里很简单, 只需要将用户输入的用户名和密码向数据库中保存即可, 要注意的是当用户名重复时(key重复), 是不能向数据库中插入重复的内容的, 应该插入一个空对象并返回, 如果前端发现这个对象是空的, 响应也会显示注册失败.

     //注册
    @PostMapping("/register")
    @ResponseBody
    public Object register(String username, String password) {
        try {
            User user = new User();
            user.setUsername(username);
            user.setPassword(password);
            userMapper.insert(user);
            return user;
            //抛出重复key异常
        } catch (org.springframework.dao.DuplicateKeyException e) {
            User user = new User();
            return user;
        }
    }

前端代码部分

这一部分很简单, 从输入框获取到用户输入内容, 点击按钮后构造ajax请求发送给后端即可, 成功登录就会跳转到游戏大厅页面(后面实现), 成功注册则会跳转至登录页面.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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 class="row">
                <a href="http://127.0.0.1:8080/register.html">没有账号?点击注册</a>
            </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的方式发送请求
            $.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() {
                    //请求执行失败之后的回调函数
                    alert("登录失败!");
                }
            });
        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <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) {
                    //如果`注册成功, 就会返回一个注册好的用户对象
                    if (body && body.username) {
                        location.assign('/login.html');
                    } else {
                        alert("注册失败!");
                    }
                },
                error: function () {
                    alert("注册失败");
                }
            });
        }
    </script>
</body>

</html>

灰灰快醒醒

关注

11
点赞
踩
16

收藏

觉得还不错? 一键收藏
6
评论
项目-双人五子棋对战: 登录/注册模块的具体实现(2)

用户名称: username用户密码: password用户天梯分数: score(假定初始值为1000)用户游戏总场次: totalCount用户获胜场次: winCount。
复制链接

扫一扫