五子棋双人对战项目（2）——登录模块

目录

一、数据库模块

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=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
@RequestMapping("/user")
public class UserAPI {
    @Autowired
    private UserMapper userMapper;

    @PostMapping("/login")
    @ResponseBody
    public Object selectByName(String username, String password, HttpServletRequest request) {
        System.out.println("userName：" + username + " " + "password：" + password);
        User user = userMapper.selectByName(username);
        if(user == null || !user.getPassword().equals(password)) {
            return new User();
        }
        //正确的情况
        HttpSession session = request.getSession(true);
        session.setAttribute("user", user);
        user.setPassword("");
        return user;
    }

    @PostMapping("/register")
    @ResponseBody
    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 request) {
        try {
            HttpSession session = request.getSession(false);
            User user = (User) session.getAttribute("user");
            User newUser = userMapper.selectByName(user.getUsername());
            return newUser;
        } catch (NullPointerException e) {
            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: '/user/login',
                data: {
                    username: usernameInput.value,
                    password: passwordInput.value
                },
                success: function(body) {
                    //请求成功之后的回调函数
                    //判定当前是否登录成功
                    //如果登录成功，服务器会返回当前的User对象；如果登录失败，服务器会返回一个空的User对象
                    if(body && body.userId > 0) {
                        //登录成功
                        alert("登录成功");
                        //重定向跳转到游戏大厅页面
                        location.assign('/game_hall.html');
                    } else {
                        alert("登录失败");
                    }
                },
                error: function() {
                    //请求失败后的回调函数
                    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: '/user/register',
                data: {
                    username: usernameInput.value,
                    password: passwordInput.value
                },
                success: function(body) {
                    //如果注册成功，就会返回一个新注册好的用户对象
                    if(body && body.username) {
                        //注册成功
                        alert("注册成功");
                        location.assign("/login.html");
                    } else {
                        alert("注册失败");
                    }
                },
                error: function() {
                    //请求失败后的回调函数
                    alert("注册失败");
                }
            });
        }
    </script>
</body>
</html>