当前位置： 首页 > news >正文

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

news 2025/10/30 14:09:29

目录

一、数据库模块

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=falseusername: rootpassword: 1234driver-class-name: com.mysql.cj.jdbc.Drivermybatis:# 配置 mybatis xml 的⽂件路径，在 resources/mybatis 创建所有表的 xml ⽂件mapper-locations: classpath:mapper/*Mapper.xmlconfiguration: # 配置打印 MyBatis日志log-impl: org.apache.ibatis.logging.stdout.StdOutImplmap-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 {@Autowiredprivate UserMapper userMapper;@PostMapping("/login")@ResponseBodypublic 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")@ResponseBodypublic Object getUserInfo(HttpServletRequest req) {try {//拿到当前的session，false的含义：如果当前已经有session了，就使用该session，如果没有，也不会创建新的sessionHttpSession 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>

相关文章：

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

目录 一、数据库模块 1、创建数据库 2、使用MyBatis连接并操作数据库 编写后端数据库代码 二、约定前后端交互接口 三、后端代码编写 文件路径如下&#xff1a; UserAPI&#xff1a; UserMapper&#xff1a; 四、前端代码 登录页面 login.html&#xff1a; 注册页面…...

编程日记 2024/10/4 7:29:41

几种操作系统和几种cpu

常见的操作系统&#xff1a;windows&#xff0c;linux&#xff0c;macOS&#xff0c;统信&#xff0c;deepin&#xff0c;raspberry&#xff0c;andriod&#xff0c;iOS&#xff0c;鸿蒙&#xff0c;等等。 常见的cpu&#xff1a;intel&#xff0c;amd&#xff0c;龙芯&#x…...

编程日记 2024/10/4 7:28:40

[Cocoa]_[初级]_[使用NSNotificationCenter作为目标观察者实现时需要注意的事项]

场景 在开发Cocoa程序时&#xff0c;由于界面是用Objective-C写的。无法使用C的目标观察者[1]类。如果是使用第二种方案2[2],那么也需要增加一个代理类。那么有没有更省事的办法&#xff1f; 说明 开发界面的时候&#xff0c;经常是需要在子界面里传递数据给主界面&#xff0…...

编程日记 2024/10/4 7:26:36

彩虹易支付最新版源码及安装教程（修复BUG+新增加订单投诉功能）

该源码当前版本为较新的版本&#xff0c;新增了订单投诉功能和一套精美的二次元模板。 此版本为全开源版本&#xff0c;所有文件均未加密。系统默认安装完成后无法直接打开&#xff0c;需要进一步配置。 本站特别针对BUG文件进行了修复&#xff0c;且在PHP7.4环境下表现良好。…...

编程日记 2024/10/4 7:25:35

ping香港服务器超时的原因通常有哪些？

Ping命令用于测试计算机与目标服务器之间的网络连接。当您在尝试使用ping命令检测服务器时遇到超时的情况&#xff0c;通常可能是由以下原因造成的&#xff1a; 1. 网络连接问题&#xff1a; - 本地网络故障&#xff1a;如网线损坏、路由器故障或配置不当。 - ISP(互联网服务提…...

编程日记 2024/10/4 7:12:22

书生大模型实战（从入门到进阶）L3-彩蛋岛-InternLM 1.8B 模型 Android 端侧部署实践

目录 1 环境准备 1.1 安装rust 1.2 安装Android Studio 1.3 设置环境变量 2 转换模型 2.1 安装mlc-llm 2.2 (可选)转换参数 2.3 (可选)生成配置 2.4 (可选)上传到huggingface 2.5 (可选) 测试转换的模型 3 打包运行 3.1 修改配置文件 3.2 运行打包命令 3.3 创建签…...

编程日记 2024/10/4 7:09:18

setState是同步更新还是异步更新

setState是同步更新还是异步更新 先说结论setState为什么设计为异步react18之前为什么不确定是同步还是异步呢react18之后setState有哪些改动 先说结论 React18之前&#xff1a;使用了ReactDOM.render&#xff0c;setState在React调度流程中是异步更新&#xff0c;在原生事件和…...

编程日记 2024/10/4 7:08:17

TCP 流量控制 - 滑动窗口和拥塞控制算法解析

滑动窗口主要管理数据流动的速率&#xff0c;对单个连接较好&#xff0c;拥塞控制则防止网络出现过载&#xff0c;对提高整体的网络通畅较好。下面详细解析两者的原理和作用。 1. TCP 滑动窗口算法 TCP 使用滑动窗口机制来控制数据的发送和接收&#xff0c;以实现流量控制&…...

编程日记 2024/10/4 7:07:16

MongoDB聚合操作及索引底层原理

目录 链接：https://note.youdao.com/ynoteshare/index.html?id=50fdb657a9b06950fa255a82555b44a6&type=note&_time=1727951783296 本节课的内容： 聚合操作： 聚合管道操作： ​编辑 $match 进行文档筛选 ​编辑 将筛选和投影结合使用： ​编辑 多条件匹配： …...

编程日记 2024/10/4 7:06:15

C++ | Leetcode C++题解之第454题四数相加II

题目&#xff1a; 题解&#xff1a; class Solution { public:int fourSumCount(vector<int>& A, vector<int>& B, vector<int>& C, vector<int>& D) {unordered_map<int, int> countAB;for (int u: A) {for (int v: B) {count…...

编程日记 2024/10/4 7:05:14

【从零开始实现stm32无刷电机FOC】【实践】【7.2/7 完整代码编写】

目录 stm32cubemx配置芯片选择工程配置stm32基础配置SPI的配置定时器的配置ADC的配置中断优先级的配置生成工程 工程代码编写FOC代码结构搭建电机编码器角度读取PWM产生FOC开环代码编写确定电机正负旋转方向电机旋转速度计算多圈逻辑角度电流采样极对数转子角度确定 闭环控制控…...

编程日记 2024/10/4 7:04:14

谷歌收录查询工具，谷歌收录查询工具的使用指南

谷歌收录查询工具是网站管理员和SEO专业人士用于检查网站是否被谷歌搜索引擎收录及其收录情况的重要辅助手段。以下是一些常用的谷歌收录查询工具及其详细使用指南&#xff1a; 一、Google Search Console&#xff08;谷歌搜索控制台&#xff09; 简介&#xff1a; Google Sea…...

编程日记 2024/10/4 7:02:09

vue3 拖拽插件（drag）

前端vue项目中&#xff0c;经常会有弹框拖拽的需求&#xff0c;下面介绍常用方法&#xff1a; 1.如果你使用的是elementPlus插件的el-dialog组件,只需要增加draggable属性即可&#xff0c;代码如下&#xff1a; <el-dialogv-model"showDiloag"width"500&quo…...

编程日记 2024/10/4 7:00:07

数据结构--线性表（顺序结构）

1.线性表的定义和基本操作 1.1线性表以及基本逻辑 1.1.1线性表 &#xff08;1&#xff09;n(>0)个数据元素的有限序列&#xff0c;记作&#xff08;a1,a2,...an&#xff09;&#xff0c;其中ai是线性表中的数据元素&#xff0c;n是表的长度。 &#xff08;2&#xff09;…...

编程日记 2024/10/4 6:59:06

面试准备111

Java基础 反射 集合 多线程 Synchronized/volatile 线程池 cas atomic 网络 tcp 三次握手/四次挥手 流量控制 拥塞控制 数据结构 算法 Spring 循环依赖 Mybatis 如何防止sql注入 Mysql 索引 索引分类 索引设计原则 事务 四种隔离级别 MVCC 日志 Binlog…...

编程日记 2024/10/4 6:56:03

Spring 的 IOC 和 AOP 是什么，有哪些优点？解密 Spring两大核心概念：IOC与AOP的魅力所在

在现代Java开发中&#xff0c;Spring框架几乎是不可或缺的存在。它不仅简化了开发过程&#xff0c;还提高了软件的灵活性和可维护性。今天&#xff0c;我们要深入探讨Spring中的两个核心概念&#xff1a;IOC&#xff08;控制反转&#xff09;和AOP&#xff08;面向切面编程&…...

编程日记 2024/10/4 6:54:01

第二百六十四节 JPA教程 - JPA查询日期参数示例

JPA教程 - JPA查询日期参数示例 我们可以在查询中使用日期类型值。 以下代码使用EntityManager创建具有两个参数的查询。 然后它传递两个日期类型值。 em.createQuery("SELECT e " "FROM Professor e " "WHERE e.startDate BETWEEN :start AND :en…...

编程日记 2024/10/4 6:50:58

Spring MVC的运行流程详解

Spring MVC作为一个广泛使用的框架&#xff0c;提供了灵活且强大的MVC架构支持。尤其在业务系统中&#xff0c;Spring MVC能够有效地处理大量并发请求&#xff0c;提供良好的用户体验。本文将详细讲解Spring MVC的运行流程&#xff0c;以电商交易系统为案例&#xff0c;帮助读者…...

编程日记 2024/10/4 6:48:56

判断有向图是否为单连通图的算法

判断有向图是否为单连通图的算法 算法描述伪代码C语言实现解释在图论中，单连通图（singly connected graph）是指对于图中的任意两个顶点 m 和 v，如果存在从 m 到 v 的路径，则该路径是唯一的。为了判断一个有向图是否为单连通图，我们需要确保从任意顶点出发，到任意其他顶点…...

编程日记 2024/10/4 6:46:54

php与python建站的区别有哪些

php与Python建站的区别&#xff1a; 1、语言层面Python的特性比php好&#xff0c;更加规范。 2、Python的性能比php高。 3、有只需要启动服务的时候执行一次的代码&#xff0c;在php里每个请求都会被执行一次&#xff0c;Python不需要。虽然php可以通过缓存缩短这方面的差距…...

编程日记 2024/10/4 6:44:52

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

编程新知 2025/10/19 17:17:26

YSYX学习记录（八）

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

编程新知 2025/10/26 16:33:24

大数据学习（132）-HIve数据分析

​​​​&#x1f34b;&#x1f34b;大数据学习&#x1f34b;&#x1f34b; &#x1f525;系列专栏&#xff1a; &#x1f451;哲学语录: 用力所能及&#xff0c;改变世界。 &#x1f496;如果觉得博主的文章还不错的话&#xff0c;请点赞&#x1f44d;收藏⭐️留言&#x1f4…...

编程新知 2025/10/7 8:52:21

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/9/24 10:52:31

力扣-35.搜索插入位置

题目描述 给定一个排序数组和一个目标值&#xff0c;在数组中找到目标值&#xff0c;并返回其索引。如果目标值不存在于数组中&#xff0c;返回它将会被按顺序插入的位置。 请必须使用时间复杂度为 O(log n) 的算法。 class Solution {public int searchInsert(int[] nums, …...

编程新知 2025/8/22 2:47:34

第7篇：中间件全链路监控与 SQL 性能分析实践

7.1 章节导读 在构建数据库中间件的过程中&#xff0c;可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中&#xff0c;必须做到&#xff1a; &#x1f50d; 追踪每一条 SQL 的生命周期&#xff08;从入口到数据库执行&#xff09;&#…...

编程新知 2025/8/8 6:07:28

Linux 下 DMA 内存映射浅析

序 系统 I/O 设备驱动程序通常调用其特定子系统的接口为 DMA 分配内存&#xff0c;但最终会调到 DMA 子系统的dma_alloc_coherent()/dma_alloc_attrs() 等接口。 关于 dma_alloc_coherent 接口详细的代码讲解、调用流程&#xff0c;可以参考这篇文章&#xff0c;我觉得写的非常…...

编程新知 2025/10/18 3:53:21

【记录坑点问题】IDEA运行：maven-resources-production:XX: OOM: Java heap space

问题&#xff1a;IDEA出现maven-resources-production:operation-service: java.lang.OutOfMemoryError: Java heap space 解决方案&#xff1a;将编译的堆内存增加一点 位置&#xff1a;设置setting-》构建菜单build-》编译器Complier...

编程新知 2025/10/24 12:26:08

python读取SQLite表个并生成pdf文件

代码用于创建含50列的SQLite数据库并插入500行随机浮点数据&#xff0c;随后读取数据&#xff0c;通过ReportLab生成横向PDF表格&#xff0c;包含格式化&#xff08;两位小数&#xff09;及表头、网格线等美观样式。 # 导入所需库 import sqlite3 # 用于操作…...

编程新知 2025/9/30 15:19:05

Linux 内存管理调试分析：ftrace、perf、crash 的系统化使用

Linux 内存管理调试分析&#xff1a;ftrace、perf、crash 的系统化使用 Linux 内核内存管理是构成整个内核性能和系统稳定性的基础&#xff0c;但这一子系统结构复杂&#xff0c;常常有设置失败、性能展示不良、OOM 杀进程等问题。要分析这些问题&#xff0c;需要一套工具化、…...

编程新知 2025/10/27 7:37:56