devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

项目-双人五子棋对战: 登录/注册模块的具体实现(2)

作者：IT小白 | 2024-06-06 12:58:23

赞

踩

项目-双人五子棋对战: 登录/注册模块的具体实现(2)

完整代码见: 邹锦辉个人所有代码: 测试仓库 - Gitee.com

模块详细讲解

用户信息定义(数据库)

用户名称:        username

用户密码:        password

用户天梯分数:        score(假定初始值为1000)

用户游戏总场次:        totalCount 

用户获胜场次:        winCount

用户表的创建:

  1. create database if not exists java_gobang;
  2.  
  3. use java_gobang;
  4.  
  5. drop table if exists user;
  6. create table user (
  7.     userId int primary key auto_increment,
  8.     username varchar(50) unique,
  9.     password varchar(50),
  10.     score int,       -- 天梯积分
  11.     totalCount int,  -- 比赛总场数
  12.     winCount int     -- 获胜场数
  13. );
  14.  
  15. insert into user values(null, 'zhangsan', '123', 1000, 0, 0);
  16. insert into user values(null, 'lisi', '123', 1000, 0, 0);
  17. insert into user values(null, 'wangwu', '123', 1000, 0, 0);

这样我们就能够描述出一个用户的信息, 在后端model中我们同样给出对于一个用户的定义:

  1. @Data
  2. public class User {
  3.     private int userId;
  4.     private String username;
  5.     private String password;
  6.     private int score;
  7.     private int totalCount;
  8.     private int winCount;
  9. }

后端代码部分

要想进行登录操作, 必然会进入对数据库用户信息的访问, 这时我们就可以利用MyBatis访问数据库.

首先在yml文件中完成对数据库的配置:

  1. mybatis:
  2.   configuration:
  3.     map-underscore-to-camel-case: true
  4.     log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  5.   mapper-locations: classpath:mapper/**Mapper.xml
  7. logging:
  8.   file:
  9.     name: spring-blog.log
  11. spring:
  12.   datasource:
  13.     url: jdbc:mysql://127.0.0.1:3306/java_gobang?characterEncoding=utf8&useSSL=false
  14.     username: root
  15.     password: 你的密码
  16.     driver-class-name: com.mysql.cj.jdbc.Driver

然后我们通过mapper层, 来进行对数据库的读取:

  1. //往数据库里插入一个用户, 用于注册功能
  2. void insert(User user);
  3.  
  4. //根据用户名, 来查询用户的详细信息, 用于登录功能.
  5. User selectByName(String username);

利用xml的方式进行具体实现:

  1.     <insert id="insert">
  2.         insert into user values(null, #{username}, #{password}, 1000, 0, 0);
  3.     </insert>
  4.  
  5.     <select id="selectByName" resultType="com.example.java_gobang.model.User">
  6.         select * from user where username = #{username};
  7.     </select>

这样我们就能够顺利地读取到数据库数据.

接下来我们就需要进行controller部分的编写, 我们都知道, 这一步的关键, 首先是定义请求和响应格式, 我们做出如下定义:

 首先是请求, 这里我们定义的请求的发送类型为url, 即:

POST/login HTTP/1.1

Content-Type: application/x-www-form-urlencoded

username=zhangsan&password=123

响应:

HTTP/1.1 200 OK

{

        userId: 1,

        username: 'zhangsan',

        score: 1000,

        totalCount: 0,

        winCount: 0

}

通过上述信息我们就可以编写controller内容了:

  1.     //登录
  2.     @PostMapping("/login")
  3.     @ResponseBody
  4.     public Object login(String username, String password, HttpServletRequest req) {
  5.         //关键操作, 就是根据 username 去数据库中进行查询
  6.         //如果能找到匹配用户, 并且密码也一致, 就认为登录成功
  7.         User user = userMapper.selectByName(username);
  8.         log.info("[login] username = " + username);
  9.         if(user == null || !user.getPassword().equals(password)) {
  10.             log.info(password + " " + user.getPassword());
  11.             //登录失败
  12.             log.info("登录失败!");
  13.             //返回一个空对象
  14.             return new User();
  15.         }
  16.         //创建一个新的会话, 以应对之后多次请求的情况
  17.         HttpSession httpSession = req.getSession(true);
  18.         //设置会话的内容.
  19.         httpSession.setAttribute("user", user);
  20.         return user;
  21.     }

当登录操作完成后, 我们还需要对于当前用户的会话信息进行保存(创建一个新的会话保存), 以方便后面对于获取用户信息的请求. 

然后是注册, 这里很简单, 只需要将用户输入的用户名和密码向数据库中保存即可, 要注意的是当用户名重复时(key重复), 是不能向数据库中插入重复的内容的, 应该插入一个空对象并返回, 如果前端发现这个对象是空的, 响应也会显示注册失败.

  1.      //注册
  2.     @PostMapping("/register")
  3.     @ResponseBody
  4.     public Object register(String username, String password) {
  5.         try {
  6.             User user = new User();
  7.             user.setUsername(username);
  8.             user.setPassword(password);
  9.             userMapper.insert(user);
  10.             return user;
  11.             //抛出重复key异常
  12.         } catch (org.springframework.dao.DuplicateKeyException e) {
  13.             User user = new User();
  14.             return user;
  15.         }
  16.     }

前端代码部分

这一部分很简单, 从输入框获取到用户输入内容, 点击按钮后构造ajax请求发送给后端即可, 成功登录就会跳转到游戏大厅页面(后面实现), 成功注册则会跳转至登录页面.

登录:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>登录</title>
  7.  
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/login.css">
  10. </head>
  11. <body>
  12.     <div class="nav">
  13.         五子棋对战
  14.     </div>
  15.     <div class="login-container">
  16.         <!-- 登录界面的对话框 -->
  17.         <div class="login-dialog">
  18.             <!-- 提示信息 -->
  19.             <h3>登录</h3>
  20.             <!-- 这个表示一行 -->
  21.             <div class="row">
  22.                 <span>用户名</span>
  23.                 <input type="text" id="username">
  24.             </div>
  25.             <!-- 这是另一行  -->
  26.             <div class="row">
  27.                 <span>密码</span>
  28.                 <input type="password" id="password">
  29.             </div>
  30.             <!-- 提交按钮 -->
  31.             <div class="row">
  32.                 <button id="submit">提交</button>
  33.             </div>
  34.             <div class="row">
  35.                 <a href="http://127.0.0.1:8080/register.html">没有账号?点击注册</a>
  36.             </div>
  37.         </div>
  38.     </div>
  39.  
  40.     <script src="./js/jquery.min.js"></script>
  41.     <script>
  42.         let usernameInput = document.querySelector('#username');
  43.         let passwordInput = document.querySelector('#password');
  44.         let submitButton = document.querySelector('#submit');
  45.         submitButton.onclick = function() {
  46.             //通过ajax的方式发送请求
  47.             $.ajax({
  48.                 type: 'post',
  49.                 url: '/login',
  50.                 data: {
  51.                     username: usernameInput.value,
  52.                     password: passwordInput.value
  53.                 },
  54.                 success: function(body) {
  55.                     //请求执行成功之后的回调函数
  56.                     //判定当前是否登陆成功
  57.                     //如果登录成功, 服务器会返回当前的User对象.
  58.                     //如果登录失败, 服务器会返回一个空的User对象
  59.                     if (body && body.userId > 0) {
  60.                         //重定向到游戏大厅页面
  61.                         location.assign('/game_hall.html');
  62.                     } else {
  63.                         alert("登录失败!")
  64.                     }
  65.                 },
  66.                 error: function() {
  67.                     //请求执行失败之后的回调函数
  68.                     alert("登录失败!");
  69.                 }
  70.             });
  71.         }
  72.     </script>
  73. </body>
  74. </html>

注册:

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>注册</title>
  8.     <link rel="stylesheet" href="css/common.css">
  9.     <link rel="stylesheet" href="css/login.css">
  10. </head>
  11.  
  12. <body>
  13.     <div class="nav">
  14.         五子棋对战
  15.     </div>
  16.     <div class="login-container">
  17.         <!-- 登录界面的对话框 -->
  18.         <div class="login-dialog">
  19.             <!-- 提示信息 -->
  20.             <h3>注册</h3>
  21.             <!-- 这个表示一行 -->
  22.             <div class="row">
  23.                 <span>用户名</span>
  24.                 <input type="text" id="username">
  25.             </div>
  26.             <!-- 这是另一行  -->
  27.             <div class="row">
  28.                 <span>密码</span>
  29.                 <input type="password" id="password">
  30.             </div>
  31.             <!-- 提交按钮 -->
  32.             <div class="row">
  33.                 <button id="submit">提交</button>
  34.             </div>
  35.         </div>
  36.     </div>
  37.  
  38.     <script src="js/jquery.min.js"></script>
  39.     <script>
  40.         let usernameInput = document.querySelector('#username');
  41.         let passwordInput = document.querySelector('#password');
  42.         let submitButton = document.querySelector('#submit');
  43.  
  44.         submitButton.onclick = function () {
  45.             $.ajax({
  46.                 type: 'post',
  47.                 url: '/register',
  48.                 data: {
  49.                     username: usernameInput.value,
  50.                     password: passwordInput.value,
  51.                 },
  52.                 success: function (body) {
  53.                     //如果`注册成功, 就会返回一个注册好的用户对象
  54.                     if (body && body.username) {
  55.                         location.assign('/login.html');
  56.                     } else {
  57.                         alert("注册失败!");
  58.                     }
  59.                 },
  60.                 error: function () {
  61.                     alert("注册失败");
  62.                 }
  63.             });
  64.         }
  65.     </script>
  66. </body>
  67.  
  68. </html>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/681029
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号