零基礎做項目---五子棋對戰---day02

用戶模塊

完成注冊登錄，以及用戶分數管理~使用數據庫來保存上述用戶信息.

使用 MyBatis來連接并操作數據庫了

主要步驟:?

1.修改 Spring的配置文件,使數據庫可以被連接上.

2.創建實體類，用戶, User

3.創建Mapper接口~

4.實現MyBatis 的相關xml配置文件，來自動的實現數據庫操作

修改Spring的配置文件

將application.properties重命名為application.yml, 粘貼代碼

yml代碼:

spring:datasource:url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=false&serverTimezone=GMT%2B8username: rootpassword: 密碼driver-class-name: com.mysql.cj.jdbc.Drivermybatis:mapper-locations: classpath:mapper/**Mapper.xmllogging:pattern:console: "[%-5level] - %msg%n"

創建數據庫

創建數據庫并且插入數據

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, '張雨瀟', '123', 1000, 0, 0);
insert into user values (null, '李明', 'password1', 1200, 10, 6);
insert into user values (null, '王芳', 'password2', 1100, 8, 4);
insert into user values (null, '劉強', 'password3', 950, 12, 5);
insert into user values (null, '趙靜', 'password4', 980, 7, 3);
insert into user values (null, '孫鵬', 'password5', 1050, 11, 7);
insert into user values (null, '周麗', 'password6', 1020, 9, 4);
insert into user values (null, '鄭凱', 'password7', 1150, 15, 8);
insert into user values (null, '何敏', 'password8', 990, 10, 5);
insert into user values (null, '吳昊', 'password9', 1080, 13, 6);
insert into user values (null, '陳曉', 'password10', 930, 8, 3);
insert into user values (null, '楊洋', 'password11', 1120, 14, 9);
insert into user values (null, '林靜', 'password12', 1040, 11, 6);
insert into user values (null, '張偉', 'password13', 950, 7, 2);
insert into user values (null, '劉暢', 'password14', 1070, 12, 7);
insert into user values (null, '宋雨', 'password15', 990, 9, 4);
insert into user values (null, '唐鵬', 'password16', 1010, 10, 5);
insert into user values (null, '許娟', 'password17', 920, 6, 2);
insert into user values (null, '高飛', 'password18', 960, 8, 3);
insert into user values (null, '鐘麗', 'password19', 980, 7, 3);
insert into user values (null, '魏強', 'password20', 1100, 10, 5);

命令行運行即可

約定前后端交互接口

登錄接口：

請求：

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=zhangsan&password=123

響應：

HTTP/1.1 200 OK
Content-Type: application/json
{"userId": 1,"username": "zhangsan","score": 1000,"totalCount": 0,"winCount": 0
}

如果登錄失敗，返回一個無效的用戶對象，每個屬性為空或為默認值，例如 userId=0

注冊接口：

請求：

POST /register HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=zhangsan&password=123

響應：

HTTP/1.1 200 OK
Content-Type: application/json
{"userId": 1,"username": "zhangsan","score": 1000,"totalCount": 0,"winCount": 0
}

獲取用戶信息接口：

請求：
```
GET /userInfo HTTP/1.1
```

響應：

HTTP/1.1 200 OK
Content-Type: application/json
{"userId": 1,"username": "zhangsan","score": 1000,"totalCount": 0,"winCount": 0
}

編寫用戶實體

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

創建Mapper接口

UserMapper.xml

<?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></mapper>

UserMapper

package com.example.java_gobang.model;import org.apache.ibatis.annotations.Mapper;@Mapper
public interface UserMapper {//插入一個用戶, 用于注冊功能void insert(User user);//根據用戶名, 來查詢用戶的詳細信息, 用于登錄User selectByName(String username);
}

UserAPI

package com.example.java_gobang.api;import com.example.java_gobang.model.User;
import com.example.java_gobang.model.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;@RestController
public class UserAPI {@Autowiredprivate UserMapper userMapper;@PostMapping("/login")@ResponseBodypublic Object login(String username, String password, HttpServletRequest request) {//關鍵操作: 根據username去數據庫查詢// 如果能找到匹配的用戶并且密碼一致, 就確認為登陸成功User user = userMapper.selectByName(username);if (user == null || !user.getPassword().equals(password)) {return new User(); //這是空對象 說明登錄失敗}//這里的true表示如果會話存在, 那么返回session, 不存在創建一個新的會話返回HttpSession httpSession = request.getSession(true);httpSession.setAttribute("user", user);return user;}@PostMapping("/register")@ResponseBodypublic Object register(String username, String password) {try {User user = new User();user.setUsername(username);user.setPassword(password);//天梯分數新手默認1200user.setScore(1200);user.setWinCount(0);user.setTotalCount(0);userMapper.insert(user);return user;} catch (org.springframework.dao.DuplicateKeyException e) {//key重復異常User user = new User();return user;}}@PostMapping("/userInfo")@ResponseBodypublic Object getUserInfo(HttpServletRequest request) {try {HttpSession httpSession = request.getSession(false);User user = (User) httpSession.getAttribute("user");return user;} catch (NullPointerException e) {return new User();}}
}

其中有登錄, 注冊, 查詢用戶信息的方法

其中@PostMapping("/register")：映射HTTP POST請求到/register路徑。

會話機制講解

request.getSession(true)

功能：getSession(true)方法會檢查當前請求是否已經有一個會話。如果有，會返回這個會話。如果沒有，它會創建一個新的會話并返回。
參數true：表示如果沒有現有的會話，創建一個新的會話。

HttpSession

會話對象：HttpSession是一個接口，提供了一種在多個請求中標識用戶的方法，并且能夠存儲用戶會話期間的信息。典型的用法包括存儲用戶的登錄狀態、購物車內容等。

httpSession.setAttribute("user", user)

設置屬性：setAttribute方法用于在會話中存儲一個鍵值對。這里的鍵是"user"，值是用戶對象user。
作用：將當前登錄的用戶信息存儲到會話中，以便在后續的請求中可以方便地獲取到用戶信息。

登錄注冊的前端頁面

登錄的html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登錄</title>
</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><!-- 提交按鈕 --><button id="submit">提交</button></div></div>
</body>
</html>

common.css和login.css

/* 公共的樣式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 設置圖片能夠覆蓋全部窗口 */
html, body {height: 100%;background-image: url(../image/background.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;
}.nav {height: 50px;background-color: rgb(50, 50, 50);color: aliceblue;line-height: 50px;padding-left: 20px;
}

login.css

.login-container {height: calc(100% - 50px);display: flex;justify-content: center;align-items: center;
}.login-dialog {width: 400px;height: 400px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}/* 標題 */
.login-dialog h3 {text-align: center;padding: 50px 0;
}/* 針對一行設置樣式 */
.login-dialog .row {width: 100%;height: 50px;display: flex;align-items: center;justify-content: center;
}.login-dialog .row span {width: 100px;font-weight: 700;
}#username, #password {width: 200px;height: 40px;font-size: 20px;line-height: 40px;padding-left: 10px;border: none;outline: none;border-radius: 10px;
}.button-container {display: flex;justify-content: center;
}#submit {width: 300px;height: 50px;background-color: rgb(0, 128, 0);color: white;border: none;outline: none;border-radius: 10px;margin-top: 20px;
}#submit:active {background-color: #666;
}/* 公共的樣式 */
* {margin: 0;padding: 0;box-sizing: border-box;
}/* 設置圖片能夠覆蓋全部窗口 */
html, body {height: 100%;background-image: url(../image/background.jpg);background-repeat: no-repeat;background-position: center;background-size: cover;
}.nav {height: 50px;background-color: rgb(50, 50, 50);color: aliceblue;line-height: 50px;padding-left: 20px;
}

引入jQuery

百度搜索?jQuery cdn

比如使用字節的

https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/1.7.2/jquery.min.js

全選保存

引入:

<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() {// 禁用提交按鈕，避免重復提交submitButton.disabled = true;$.ajax({type: 'post',url: '/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("登錄失敗!");},complete: function() {//AJAX請求完成后重新啟用按鈕submitButton.disabled = false;}});}</script>

驗證登錄頁面

啟動服務器

訪問?http://127.0.0.1:8080/login.html

注冊樣式

與登錄大差不差

<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代碼

<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() {// 禁用提交按鈕，避免重復提交submitButton.disabled = true;$.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("注冊失敗!");},complete: function() {//AJAX請求完成后重新啟用按鈕submitButton.disabled = false;}});}</script>