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

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

news 文章来源：https://blog.csdn.net/cool_tao6/article/details/142597109 2024/12/22 2:56:34

目录

一、数据库模块

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

模型评估与验证：确保模型在未知数据上的表现----示例：使用K折交叉验证评估分类模型、房价预测问题使用K折交叉验证来评估一个线性回归模型的性能

模型评估与验证是机器学习流程中的关键步骤&#xff0c;它帮助我们了解模型在未见过的数据上的泛化能力。交叉验证&#xff08;Cross-Validation, CV&#xff09;是一种常用的技术&#xff0c;通过将数据集划分为多个子集并进行多次训练和测试来估计模型的性能。此外&#xff0…...

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

awd基础学习

一、常用防御手段 1、改ssh密码 passwd [user] 2、改数据库密码 进入数据库 mysql -uroot -proot 改密码 update mysql.user set passwordpassword(新密码) where userroot; 查看用户信息密码 select host,user,password from mysql.user; 改配置文件 &#xff08;否则会宕机…...

编程日记 2024/10/4 6:42:45

C#基于SkiaSharp实现印章管理（10）

向PDF文件插入印章图片比之前实现的向图片文件插入印章麻烦得多。   最初的想法是使用PDF浏览控件在线打开PDF文件&#xff0c;然后在控件中实现鼠标移动时动态显示印章&#xff0c;点击鼠标时向当前PDF页面的鼠标点击位置插入图片。由于是.net 8的Winform项目&#xff0c;选…...

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

通过栈实现字符串中查找是否有指定字符串的存在

题目示例&#xff1a; 分析 由与没有给出字符串的长度&#xff0c;所以只能通过getline一次性处理&#xff0c;而在输入后恰好能倒序处理字符串&#xff0c;以标点符号为分界点&#xff0c;将数字当成字符放到栈里&#xff0c;遇到下一个标点符号时执行查找操作&#xff0c;…...

编程日记 2024/10/4 6:38:41

MongoDB伪分布式部署（mac M2）

1. 序言 本博客是上一博客的进阶版&#xff1a;mac M2安装单机版 MongoDB 7.x&#xff0c;上一博客可以看做是单机、单节点部署MongoDB本博客将介绍单机、多服务部署MongoDB&#xff0c;实际就是伪分布式部署 2. 副本集(Replica Set)方式部署 2.1 什么是副本集&#xff1f; …...

编程日记 2024/10/4 6:37:39

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

题目&#xff1a; 题解&#xff1a; func fourSumCount(a, b, c, d []int) (ans int) {countAB : map[int]int{}for _, v : range a {for _, w : range b {countAB[vw]}}for _, v : range c {for _, w : range d {ans countAB[-v-w]}}return }...

编程日记 2024/10/4 6:35:37

[ComfyUI]Flux：超美3D微观山水禅意，经典中文元素AI重现，佛陀楼阁山水画卷

在数字艺术和创意领域&#xff0c;[ComfyUI]Flux以其独特的虚实结合技术&#xff0c;已经成为艺术家和设计师们手中的利器。今天&#xff0c;我们激动地宣布&#xff0c;[ComfyUI]Flux带来了一款超美的3D微观山水禅意作品&#xff0c;经典中文元素通过AI技术重现&#xff0c;包…...

编程日记 2024/10/4 6:34:36

Linux 系统 nvm 管理node无法使用

文章目录 一、报错说明二、报错原因三、解决办法四、验证 一、报错说明 centos7服务器使用nvm安装的node之后&#xff0c;只要使用npm或者node&#xff0c;均会出现以下问题。 npm -v node: /lib64/libm.so.6: version GLIBC_2.27 not found (required by node) node: /lib64…...

编程日记 2024/10/4 6:32:34

信号处理快速傅里叶变换(FFT)的学习

FFT是离散傅立叶变换的快速算法&#xff0c;可以将一个信号变换到频域。有些信号在时域上是很难看出什么特征的&#xff0c;但是如果变换到频域之后&#xff0c;就很容易看出特征了。这就是很多信号分析采用FFT变换的原因。另外&#xff0c;FFT可以将一个信号的频谱提取出来&am…...

编程日记 2024/10/4 6:30:33

vue3项目el-table表格行内编辑加输入框校验

核心点 1. el-form的model属性需要跟el-form-item的prop要对应 2. el-form的model属性绑定tableData 3. el-form-item的prop绑定字符串&#xff1a;scope.index.列名&#xff08;注意有个点&#xff09; 4. el-form-item需要单独设置rules属性 代码示例 <el-form :mod…...

编程日记 2024/10/4 6:27:29

怎样做网站制作/龙岗网站设计

本文转载自&#xff1a;https://my.oschina.net/u/3837179/blog/1920756 在ubuntu中配置GPU的深度学习环境相较于win问题要多很多&#xff0c;这几天琢磨了一下Ubuntu下的环境配置&#xff0c;参考很多人的博客&#xff0c;也遇到了不少坑&#xff0c;好不容易配置成功了&#…...

编程日记 2024/12/22 2:11:40

怎样用网站做淘宝客/seo快速优化技术

&#xff08;1&#xff09; Rsync&#xff08;remote synchronize&#xff09;是一个远程数据同步工具&#xff0c;可通过LAN/WAN快速同步多台主机间的文件&#xff0c;也可以使用 Rsync 同步本地硬盘中的不同目录。&#xff08;2&#xff09;Rsync 是用于取代rcp的一个工具&am…...

编程日记 2024/12/21 19:30:48

做c语言的题目的网站/爱站网seo工具

https://github.com/cihub/seelog 文档学习&#xff1a;https://github.com/cihub/seelog/wiki 1.安装&#xff1a; go get github.com/cihub/seelog 2.快速启动 Seelog的设计非常方便。它的默认配置和包级别的日志记录器是现成的&#xff0c;所以开始你只需要两行代码: packag…...

编程日记 2024/12/21 16:43:49

苏州书生商友专业做网站/网站推广步骤

http://mp.weixin.qq.com/s?__bizMzAwNDY1ODY2OQ&mid207243549&idx1&sn4ebe4beb8123f1b5ab58810ac8bc5994&scene4#wechat_redirect Android微信智能心跳方案 原创 2015-08-17 phoenix WeMobileDev前言&#xff1a;在13年11月中旬时&#xff0c;因为基础组件组…...

编程日记 2024/12/21 16:14:33

自己如何免费制作一个网站/公司宣传推广方案

使用DHT11温湿度传感器测量温湿度&#xff0c;使用BH1750测量光照强度&#xff0c;使用土壤湿度传感器测量土壤湿度。需要做PCB板子&#xff0c;32pcb传感器oled显示这几个数据 1、项目简介 2、实现逻辑 #通过dht11检测温湿度 #通过bh1750检测光照强度 #通过adc检测土壤湿度 …...

编程日记 2024/12/21 14:30:47

wordpress ftp 权限/今天的新闻最新消息

问&#xff1a;紫苹果装饰怎么样&#xff1f;有找紫苹果装修过的吗&#xff1f;答&#xff1a;首先找紫苹果装修的话&#xff0c;你一定要找正牌紫苹果&#xff0c;不要被冒牌的误导。名声大、口碑好的紫苹果装饰总部是在上海&#xff0c;目前在12座城市有14家直营公司&#xf…...

编程日记 2024/12/21 13:03:48