品牌推广营销平台,wordpress优化检测,物联网就业方向,h5视频直播源码网页版Java五子棋项目#xff08;二#xff09;前后端实现用户的登录和注册功能【用户模块】 在用户模块我们要清楚要完成的任务一、MyBatis后端操作数据库1. 需要在数据库创建用户数据库1. 用户id2. 用户名3. 密码4. 天梯积分5. 总场数6. 获胜场数 2. 创建用户类User和数据库… 网页版Java五子棋项目二前后端实现用户的登录和注册功能【用户模块】 在用户模块我们要清楚要完成的任务一、MyBatis后端操作数据库1. 需要在数据库创建用户数据库1. 用户id2. 用户名3. 密码4. 天梯积分5. 总场数6. 获胜场数 2. 创建用户类User和数据库的数据一一对应 3. 用MyBatis操作数据库1. 连接数据库application.yml连接数据库这个可以直接赋值代码 2. 创建UserMapper的Java接口interface UserMapper创建接口在UserMapper.xml实现在model中创建需要实现Mapper注释 3. 创建UserMapper.xml 实现数据库操作实现具体数据库操作利用标签mapper标签地址要对应好不同操作 标签不同 二、约定前后端接口1. 登录接口前端发送post请求具体内容是直接对应的所以后端的参数也是对应的然后后端返回一个用户类1. 后端通过前端传的用户名查询数据库2. 如果数据库为空返回一个新的 用户类3. 否则把Session置为true4. 然后返回用户类 2. 注册接口前端POST请求参数是一一对应后端参数接受一个一一对应1. 创建一个User类2. 调用userMapper插入如果创建重复 则抛出异常 返回一个新的User 3. 从服务器获取当前登录的信息前端GET请求后端1. 判断用户是否Session中2. 查询数据库 返回对应类如果没有在则返回一个新的user 4. UserAPI 三、实现前端页面1. 登录页面2. 注册页面 在用户模块我们要清楚要完成的任务
一、MyBatis后端操作数据库
1. 需要在数据库创建用户数据库
1. 用户id
2. 用户名
3. 密码
4. 天梯积分
5. 总场数
6. 获胜场数
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, 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. 创建用户类User
和数据库的数据一一对应
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操作数据库
1. 连接数据库application.yml连接数据库
这个可以直接赋值代码
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncodingutf8useSSLfalseserverTimezoneGMT%2B8username: rootpassword: 123456driver-class-name: com.mysql.cj.jdbc.Drivermybatis:mapper-locations: classpath:mapper/**Mapper.xmllogging:pattern:console: [%-5level] - %msg%n2. 创建UserMapper的Java接口interface UserMapper
创建接口在UserMapper.xml实现
在model中创建
需要实现Mapper注释
package com.example.java_gobang.model;import org.apache.ibatis.annotations.Mapper;Mapper
public interface UserMapper {// 往数据库里插入一个用户. 用于注册功能.void insert(User user);// 根据用户名, 来查询用户的详细信息. 用于登录功能User selectByName(String username);// 总比赛场数 1, 获胜场数 1, 天梯分数 30void userWin(int userId);// 总比赛场数 1, 获胜场数 不变, 天梯分数 - 30void userLose(int userId);
}
3. 创建UserMapper.xml 实现数据库操作
实现具体数据库操作
利用标签
mapper标签地址要对应好
不同操作 标签不同
?xml version1.0 encodingUTF-8?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//EN http://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.example.java_gobang.model.UserMapperinsert idinsertinsert into user values(null, #{username}, #{password}, 1000, 0, 0);/insertselect idselectByName resultTypecom.example.java_gobang.model.Userselect * from user where username #{username};/selectupdate iduserWinupdate user set totalCount totalCount 1, winCount winCount 1, score score 30where userId #{userId}/updateupdate iduserLoseupdate user set totalCount totalCount 1, score score - 30where userId #{userId}/update
/mapper二、约定前后端接口
1. 登录接口 前端发送post请求具体内容是直接对应的
所以后端的参数也是对应的然后后端返回一个用户类
1. 后端通过前端传的用户名查询数据库
2. 如果数据库为空返回一个新的 用户类
3. 否则把Session置为true
4. 然后返回用户类
PostMapping(/login)
ResponseBody
public Object login(String username, String password, HttpServletRequest req) {// 关键操作, 就是根据 username 去数据库中进行查询.// 如果能找到匹配的用户, 并且密码也一致, 就认为登录成功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请求参数是一一对应
后端参数接受一个一一对应
1. 创建一个User类
2. 调用userMapper插入
如果创建重复 则抛出异常 返回一个新的User PostMapping(/register)ResponseBodypublic 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. 从服务器获取当前登录的信息 前端GET请求
后端
1. 判断用户是否Session中
2. 查询数据库 返回对应类
如果没有在则返回一个新的user
GetMapping(/userInfo)
ResponseBody
public Object getUserInfo(HttpServletRequest req) {try {HttpSession httpSession req.getSession(false);User user (User) httpSession.getAttribute(user);// 拿着这个 user 对象, 去数据库中找, 找到最新的数据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 {Resourceprivate UserMapper userMapper;PostMapping(/login)ResponseBodypublic Object login(String username, String password, HttpServletRequest req) {// 关键操作, 就是根据 username 去数据库中进行查询.// 如果能找到匹配的用户, 并且密码也一致, 就认为登录成功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)ResponseBodypublic 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)ResponseBodypublic Object getUserInfo(HttpServletRequest req) {try {HttpSession httpSession req.getSession(false);User user (User) httpSession.getAttribute(user);// 拿着这个 user 对象, 去数据库中找, 找到最新的数据User newUser userMapper.selectByName(user.getUsername());return newUser;} catch (NullPointerException e) {return new User();}}
}
三、实现前端页面
1. 登录页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title登录/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/login.css
/head
bodydiv classnav五子棋对战/divdiv classlogin-container!-- 登录界面的对话框 --div classlogin-dialog!-- 提示信息 --h3登录/h3!-- 这个表示一行 --div classrowspan用户名/spaninput typetext idusername/div!-- 这是另一行 --div classrowspan密码/spaninput typepassword idpassword/div!-- 提交按钮 --div classrowbutton idsubmit提交/button/div/div/divscript src./js/jquery.min.js/scriptscriptlet 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) {// 登录成功alert(登录成功!);// 重定向跳转到 游戏大厅页面.location.assign(/game_hall.html);} else {alert(登录失败!);}},error: function() {// 请求执行失败之后的回调函数alert(登录失败!);}});}/script
/body
/html2. 注册页面
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title注册/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/login.css
/head
bodydiv classnav五子棋对战/divdiv classlogin-container!-- 登录界面的对话框 --div classlogin-dialog!-- 提示信息 --h3注册/h3!-- 这个表示一行 --div classrowspan用户名/spaninput typetext idusername/div!-- 这是另一行 --div classrowspan密码/spaninput typepassword idpassword/div!-- 提交按钮 --div classrowbutton idsubmit提交/button/div/div/div script srcjs/jquery.min.js/scriptscriptlet 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
