成都html5网站建设,wordpress the_tags,网站可以做腾讯广告联盟,网站关键词优化推广目录
一、数据库模块
1、创建数据库
2、使用MyBatis连接并操作数据库
编写后端数据库代码
二、约定前后端交互接口
三、后端代码编写
文件路径如下#xff1a;
UserAPI#xff1a;
UserMapper#xff1a;
四、前端代码
登录页面 login.html#xff1a;
注册页面…目录
一、数据库模块
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连接并操作数据库 加入依赖 dependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion3.0.3/version/dependencydependencygroupIdcom.mysql/groupIdartifactIdmysql-connector-j/artifactIdscoperuntime/scope/dependency 配置yml文件连接本地数据库
spring:datasource:url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncodingutf8useSSLfalseusername: 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 {//拿到当前的sessionfalse的含义如果当前已经有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 langenheadmeta charsetUTF-8title登录/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/login.css
/headbodydiv 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) {//登录成功//重定向跳转到 “游戏大厅页面”location.assign(/game_hall.html);} else {//登录失败alert(登录失败);}},error: function (body) {//请求执行失败的回调函数alert(登录失败);}});}/script
/body/html
注册页面 register.html
!DOCTYPE html
html langenheadmeta charsetUTF-8title注册/titlelink relstylesheet hrefcss/common.csslink relstylesheet hrefcss/login.css
/headbodydiv 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: /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
