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

2024-10-03 12:34:51

一、数据库模块

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
public class UserAPI {
    @Autowired
    private UserMapper userMapper;
    @PostMapping("/login")
    @ResponseBody
    public 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")
    @ResponseBody
    public Object getUserInfo(HttpServletRequest req) {
        try {
            //拿到当前的session，false的含义：如果当前已经有session了，就使用该session，如果没有，也不会创建新的session
            HttpSession 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>

码农公寓

一、数据库模块

1、创建数据库

2、使用MyBatis连接并操作数据库

编写后端数据库代码

二、约定前后端交互接口

三、后端代码编写

文件路径如下：

UserAPI：

UserMapper：

四、前端代码

登录页面 login.html：

注册页面 register.html：

相关文章