在用戶模塊我們要清楚要完成的任務(wù)

一、MyBatis后端操作數(shù)據(jù)庫

1. 需要在數(shù)據(jù)庫創(chuàng)建用戶數(shù)據(jù)庫

1. 用戶id

2. 用戶名

3. 密碼

4. 天梯積分

5. 總場數(shù)

6. 獲勝場數(shù)

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,  -- 比賽總場數(shù)
    winCount int     -- 獲勝場數(shù)
);

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

2. 創(chuàng)建用戶類User

和數(shù)據(jù)庫的數(shù)據(jù)一一對應(yīng)

package com.example.java_gobang.model;

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

    public int getUserId() {
        return userId;
    }

    public void setUserId(int userId) {
        this.userId = userId;
    }

    public String getUsername() {
        return username;
    }

    public void setUsername(String username) {
        this.username = username;
    }

    public String getPassword() {
        return password;
    }

    public void setPassword(String password) {
        this.password = password;
    }

    public int getScore() {
        return score;
    }

    public void setScore(int score) {
        this.score = score;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public void setTotalCount(int totalCount) {
        this.totalCount = totalCount;
    }

    public int getWinCount() {
        return winCount;
    }

    public void setWinCount(int winCount) {
        this.winCount = winCount;
    }
}

3. 用MyBatis操作數(shù)據(jù)庫

1. 連接數(shù)據(jù)庫（application.yml連接數(shù)據(jù)庫）

這個可以直接賦值代碼

spring:
  datasource:
    url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver

mybatis:
  mapper-locations: classpath:mapper/**Mapper.xml

logging:
  pattern:
    console: "[%-5level] - %msg%n"

2. 創(chuàng)建UserMapper的Java接口（interface UserMapper）

創(chuàng)建接口，在UserMapper.xml實現(xiàn)

在model中創(chuàng)建

需要實現(xiàn)@Mapper注釋

package com.example.java_gobang.model;

import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface UserMapper {
    // 往數(shù)據(jù)庫里插入一個用戶. 用于注冊功能.
    void insert(User user);

    // 根據(jù)用戶名, 來查詢用戶的詳細(xì)信息. 用于登錄功能
    User selectByName(String username);

    // 總比賽場數(shù) + 1, 獲勝場數(shù) + 1, 天梯分?jǐn)?shù) + 30
    void userWin(int userId);

    // 總比賽場數(shù) + 1, 獲勝場數(shù) 不變, 天梯分?jǐn)?shù) - 30
    void userLose(int userId);
}

3. 創(chuàng)建UserMapper.xml 實現(xiàn)數(shù)據(jù)庫操作

實現(xiàn)具體數(shù)據(jù)庫操作

利用標(biāo)簽

mapper標(biāo)簽地址要對應(yīng)好

不同操作 標(biāo)簽不同

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.java_gobang.model.UserMapper">
    <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>
    
    <update id="userWin">
        update user set totalCount = totalCount + 1, winCount = winCount + 1, score = score + 30
        where userId = #{userId}
    </update>
    
    <update id="userLose">
        update user set totalCount = totalCount + 1, score = score - 30
        where userId = #{userId}
    </update>
</mapper>

二、約定前后端接口

1. 登錄接口

前端發(fā)送post請求，具體內(nèi)容是直接對應(yīng)的

    <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) {
                    // 請求執(zhí)行成功之后的回調(diào)函數(shù)
                    // 判定當(dāng)前是否登錄成功~
                    // 如果登錄成功, 服務(wù)器會返回當(dāng)前的 User 對象. 
                    // 如果登錄失敗, 服務(wù)器會返回一個空的 User 對象. 
                    if (body && body.userId > 0) {
                        // 登錄成功
                        alert("登錄成功!");
                        // 重定向跳轉(zhuǎn)到 "游戲大廳頁面".
                        location.assign('/game_hall.html');
                    } else {
                        alert("登錄失敗!");
                    }
                },
                error: function() {
                    // 請求執(zhí)行失敗之后的回調(diào)函數(shù)
                    alert("登錄失敗!");
                }
            });
        }
    </script>

所以后端的參數(shù)也是對應(yīng)的，然后后端返回一個用戶類

1. 后端通過前端傳的用戶名，查詢數(shù)據(jù)庫

2. 如果數(shù)據(jù)庫為空，返回一個新的 用戶類

3. 否則，把Session置為true

4. 然后返回用戶類

@PostMapping("/login")
@ResponseBody
public Object login(String username, String password, HttpServletRequest req) {
    // 關(guān)鍵操作, 就是根據(jù) username 去數(shù)據(jù)庫中進行查詢.
    // 如果能找到匹配的用戶, 并且密碼也一致, 就認(rèn)為登錄成功
    User user = userMapper.selectByName(username);
    System.out.println("[login] username=" + username);
    if (user == null || !user.getPassword().equals(password)) {
        // 登錄失敗
        System.out.println("登錄失敗!");
        return new User();
    }
    HttpSession httpSession = req.getSession(true);
    httpSession.setAttribute("user", user);
    return user;
}

2. 注冊接口

前端POST請求，參數(shù)是一一對應(yīng)

    <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) {
                        // 注冊成功!
                        alert("注冊成功!")
                        location.assign('/login.html');
                    } else {
                        alert("注冊失敗!");
                    }
                }, 
                error: function() {
                    alert("注冊失敗!");
                }
            });
        }

    </script>

后端參數(shù)接受一個一一對應(yīng)

1. 創(chuàng)建一個User類

2. 調(diào)用userMapper插入

如果創(chuàng)建重復(fù) 則拋出異常 返回一個新的User

    @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;
        } catch (org.springframework.dao.DuplicateKeyException e) {
            User user = new User();
            return user;
        }
    }

3. 從服務(wù)器獲取當(dāng)前登錄的信息

文章來源地址http://www.zghlxwxcb.cn/news/detail-638259.html

前端GET請求

<script>
        $.ajax({
            type: 'get',
            url: '/userInfo',
            success: function(body) {
                let screenDiv = document.querySelector('#screen');
                screenDiv.innerHTML = '玩家: ' + body.username + " 分?jǐn)?shù): " + body.score 
                    + "<br> 比賽場次: " + body.totalCount + " 獲勝場數(shù): " + body.winCount
            },
            error: function() {
                alert("獲取用戶信息失敗!");
            }
        });
</script>

后端

1. 判斷用戶是否Session中

2. 查詢數(shù)據(jù)庫 返回對應(yīng)類

如果沒有在則返回一個新的user

@GetMapping("/userInfo")
@ResponseBody
public Object getUserInfo(HttpServletRequest req) {
    try {
        HttpSession httpSession = req.getSession(false);
        User user = (User) httpSession.getAttribute("user");
        // 拿著這個 user 對象, 去數(shù)據(jù)庫中找, 找到最新的數(shù)據(jù)
        User newUser = userMapper.selectByName(user.getUsername());
        return newUser;
    } catch (NullPointerException e) {
        return new User();
    }
}

4. UserAPI

package com.example.java_gobang.api;

import com.example.java_gobang.model.User;
import com.example.java_gobang.model.UserMapper;
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;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;

@RestController
public class UserAPI {

    @Resource
    private UserMapper userMapper;

    @PostMapping("/login")
    @ResponseBody
    public Object login(String username, String password, HttpServletRequest req) {
        // 關(guān)鍵操作, 就是根據(jù) username 去數(shù)據(jù)庫中進行查詢.
        // 如果能找到匹配的用戶, 并且密碼也一致, 就認(rèn)為登錄成功
        User user = userMapper.selectByName(username);
        System.out.println("[login] username=" + username);
        if (user == null || !user.getPassword().equals(password)) {
            // 登錄失敗
            System.out.println("登錄失敗!");
            return new User();
        }
        HttpSession httpSession = req.getSession(true);
        httpSession.setAttribute("user", user);
        return user;
    }

    @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;
        } catch (org.springframework.dao.DuplicateKeyException e) {
            User user = new User();
            return user;
        }
    }

    @GetMapping("/userInfo")
    @ResponseBody
    public Object getUserInfo(HttpServletRequest req) {
        try {
            HttpSession httpSession = req.getSession(false);
            User user = (User) httpSession.getAttribute("user");
            // 拿著這個 user 對象, 去數(shù)據(jù)庫中找, 找到最新的數(shù)據(jù)
            User newUser = userMapper.selectByName(user.getUsername());
            return newUser;
        } catch (NullPointerException e) {
            return new User();
        }
    }
}

三、實現(xiàn)前端頁面

1. 登錄頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
        五子棋對戰(zhàn)
    </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) {
                    // 請求執(zhí)行成功之后的回調(diào)函數(shù)
                    // 判定當(dāng)前是否登錄成功~
                    // 如果登錄成功, 服務(wù)器會返回當(dāng)前的 User 對象. 
                    // 如果登錄失敗, 服務(wù)器會返回一個空的 User 對象. 
                    if (body && body.userId > 0) {
                        // 登錄成功
                        alert("登錄成功!");
                        // 重定向跳轉(zhuǎn)到 "游戲大廳頁面".
                        location.assign('/game_hall.html');
                    } else {
                        alert("登錄失敗!");
                    }
                },
                error: function() {
                    // 請求執(zhí)行失敗之后的回調(diào)函數(shù)
                    alert("登錄失敗!");
                }
            });
        }
    </script>
</body>
</html>

2. 注冊頁面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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">
        五子棋對戰(zhàn)
    </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) {
                        // 注冊成功!
                        alert("注冊成功!")
                        location.assign('/login.html');
                    } else {
                        alert("注冊失敗!");
                    }
                }, 
                error: function() {
                    alert("注冊失敗!");
                }
            });
        }

    </script>
</body>
</html>

到了這里，關(guān)于網(wǎng)頁版Java（Spring/Spring Boot/Spring MVC）五子棋項目（二）前后端實現(xiàn)用戶的登錄和注冊功能【用戶模塊】的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！