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

SpringBoot实现登陆注册(附源码)_spring boot登录页面设计代码

作者：算法创新者 | 2024-01-30 19:28:26

赞

踩

spring boot登录页面设计代码

此项目前端由html+css+vue(发送请求)组成，后端由springboot进行处理请求,相关数据库操作语句选用的是mybatis-plus

        先看看我的项目总结吧：

先说完美的吧，因为前端登陆注册界面是之前的，这次就复制了一下，在前端部分仅书写了一些vue，使用v-model绑定username以及password，发送axios请求，后端那部分因为使用的是mybatis-plus，也没有编写一些sql语句，当然，这些sql语句也不是很复杂的，有时间的小伙伴可以直接试着编写，或在我这基础上进行修改，controller层的话，就是一些逻辑语句，例如：登陆时先判断数据库中是否存在该用户，若存在再进行密码比对，注册时则是先判断用户是否已经注册，存在数据库中，若不存在再让其进行注册。总而言之，此项目花费不到四十分钟，总体还是不错对于新手小白来说，我认为困难的部分则是在前后端交互那个地方，存在一些差异，二者的数据格式不统一。

        不足的地方，就是界面过于简单，没有啥js效果，效果非常直接，以及vue发送请求需要多加练习。

先看项目运行后主界面效果：

登陆界面如下：

注册界面如下：

 

项目目录结构如下：

 

1.数据库中表的设计

1.1 创建一个表其中有两个字段一个用户名(varcahr类型,primary key)一个密码(varchar类型)

1.2 表结构如下所示

2.需要导入的jar包(pom.xml文件)以及相关配置设置(数据库信息以及端口)

2.1文件具体相关代码如下

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.5.4</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.wz</groupId>
  12.     <artifactId>LogAndRegister</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>LogAndRegister</name>
  15.     <description>LogAndRegister</description>
  16.  
  17.     <dependencies>
  18.         <dependency>
  19.             <groupId>org.springframework.boot</groupId>
  20.             <artifactId>spring-boot-starter</artifactId>
  21.         </dependency>
  22.  
  23.         <dependency>
  24.             <groupId>org.springframework.boot</groupId>
  25.             <artifactId>spring-boot-starter-test</artifactId>
  26.             <scope>test</scope>
  27.         </dependency>
  28.  
  29.         <dependency>
  30.             <groupId>org.springframework.boot</groupId>
  31.             <artifactId>spring-boot-starter-web</artifactId>
  32.             <scope>compile</scope>
  33.         </dependency>
  34.  
  35.         <dependency>
  36.             <groupId>com.baomidou</groupId>
  37.             <artifactId>mybatis-plus-boot-starter</artifactId>
  38.             <version>3.4.2</version>
  39.         </dependency>
  40.  
  41.         <dependency>
  42.             <groupId>org.projectlombok</groupId>
  43.             <artifactId>lombok</artifactId>
  44.             <version>1.18.20</version>
  45.         </dependency>
  46.  
  47.         <dependency>
  48.             <groupId>com.alibaba</groupId>
  49.             <artifactId>fastjson</artifactId>
  50.             <version>1.2.76</version>
  51.         </dependency>
  52.  
  53.         <dependency>
  54.             <groupId>commons-lang</groupId>
  55.             <artifactId>commons-lang</artifactId>
  56.             <version>2.6</version>
  57.         </dependency>
  58.  
  59.         <dependency>
  60.             <groupId>mysql</groupId>
  61.             <artifactId>mysql-connector-java</artifactId>
  62.             <scope>runtime</scope>
  63.         </dependency>
  64.  
  65.         <dependency>
  66.             <groupId>com.alibaba</groupId>
  67.             <artifactId>druid-spring-boot-starter</artifactId>
  68.             <version>1.1.23</version>
  69.         </dependency>
  70.     </dependencies>
  71.  
  72.     <build>
  73.         <plugins>
  74.             <plugin>
  75.                 <groupId>org.springframework.boot</groupId>
  76.                 <artifactId>spring-boot-maven-plugin</artifactId>
  77.             </plugin>
  78.         </plugins>
  79.     </build>
  80.  
  81. </project>

2.2数据库信息以及端口

  1. server:
  2.   port: 81
  3. spring:
  4.   datasource:
  5.     druid:
  6.       driver-class-name: com.mysql.cj.jdbc.Driver
  7.       url: jdbc:mysql://localhost:3306/logandregister
  8.       username: root
  9.       password: 111111

3.后端相关代码的编写

 3.1 后端返回给前端的信息封装在R类中

  1.  
  2.  
  3. @Data
  4. public class R<T> {
  5.  
  6.     private Integer code; //编码：1成功，0和其它数字为失败
  7.  
  8.     private String msg; //错误信息
  9.  
  10.     private T data; //数据
  11.  
  12.     private Map map = new HashMap(); //动态数据
  13.  
  14.     public static <T> R<T> success(T object) {
  15.         R<T> r = new R<T>();
  16.         r.data = object;
  17.         r.code = 1;
  18.         return r;
  19.     }
  20.  
  21.     public static <T> R<T> error(String msg) {
  22.         R r = new R();
  23.         r.msg = msg;
  24.         r.code = 0;
  25.         return r;
  26.     }
  27.  
  28.     public R<T> add(String key, Object value) {
  29.         this.map.put(key, value);
  30.         return this;
  31.     }
  32.  
  33. }

3.2 User实体类(即用户的信息(账号密码))

  1.  
  2. @Data
  3. @AllArgsConstructor
  4. @NoArgsConstructor
  5. public class User {
  6.     private String username;
  7.     private String password;
  8. }

3.3 Controller(控制层相关代码，处理前端发送的请求)

  1.  
  2. @RestController
  3. @RequestMapping("/user")
  4. @Slf4j
  5. public class UserController {
  6.  
  7.     @Autowired
  8.     private UserService userService;
  9.     @PostMapping("/login")
  10.     public R<String> login(@RequestBody User user){
  11.         log.info("user:{}",user);
  12.         LambdaQueryWrapper<User> lqw = new LambdaQueryWrapper<>();
  13.         lqw.eq(User::getUsername,user.getUsername());
  14.         User one = userService.getOne(lqw);
  15.         System.out.println(one);
  16.         // 查询不到用户
  17.         if (one == null){
  18.             return R.error("用户账号不存在");
  19.         }
  20.         // 密码错误
  21.         if(!one.getPassword().equals(user.getPassword())){
  22.             return R.error("密码错误");
  23.         }
  24.         return R.success("登陆成功");
  25.     }
  26.     @PostMapping("/register")
  27.     public R<String> register(@RequestBody User user){
  28.         log.info("user:{}",user);
  29.         // 判断前端传来的数据是否正常
  30.         if (user==null){
  31.             return R.error("请输入注册信息");
  32.         }
  33.         // 判断账号是否存在
  34.         String username = user.getUsername();
  35.         LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper<>();
  36.         lambdaQueryWrapper.eq(User::getUsername,username);
  37.         User one = userService.getOne(lambdaQueryWrapper);
  38.         if (one!=null){
  39.             return R.error("用户账号已注册");
  40.         }
  41.         // 二者都满足则以下
  42.         userService.save(user);
  43.         return R.success("注册成功");
  44.  
  45.     }
  46.  
  47. }

3.4 Mapper层相关代码

  1.  
  2. @Mapper
  3. public interface UserMapper extends BaseMapper<User> {
  4. }

3.5 定义的Service接口代码

  1.  
  2. public interface UserService extends IService<User> {
  3. }

3.6实现Service接口的实现类

  1. @Service
  2. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService {
  3. }

4.前端相关代码

4.1 登陆界面login.html(包含vue发送请求)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>login</title>
  7.     <link href="css/login.css" rel="stylesheet">
  8. </head>
  9.  
  10. <body>
  11. <div id="loginDiv">
  12.     <form  id="form" >
  13.         <h1 id="loginMsg">LOGIN IN</h1>
  14.         <p>Username:<input id="username" name="username" type="text" v-model="userName"></p>
  15.         <p>Password:<input id="password" name="password" type="password" v-model="passWord"></p>
  16.  
  17.         <div id="subDiv">
  18.             <input type="submit" class="button" value="login up" @click="login">
  19.             <input type="reset" class="button" value="reset" >
  20.             <a href="register.html">没有账号？点击注册</a>
  21.         </div>
  22.     </form>
  23. </div>
  24. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  25. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  26. <script>
  27.     var app = new Vue({
  28.         el: "#loginDiv",
  29.         data: {
  30.             userName: "",
  31.             passWord: "",
  32.         },
  33.         methods: {
  34.             login:function (){
  35.                 console.log(this.userName,this.passWord);
  36.                 axios.post('http://localhost:81/user/login',
  37.                     {
  38.                     username: this.userName,
  39.                     password: this.passWord,
  40.                 }).then( resp=> {
  41.                     console.log(resp)
  42.                     if (resp.data.code == '1') {
  43.                         window.location.href = 'loginSuccess.html';
  44.                     }else {
  45.                         alert("账号或密码错误");
  46.                         this.userName='';
  47.                         this.passWord='';
  48.                         }
  49.                     })
  50.                 }
  51.         }
  52.     })
  53. </script>
  54. </body>
  55. </html>

4.2 注册界面register.html(包含vue发送请求)

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>欢迎注册</title>
  6.     <link href="css/register.css" rel="stylesheet">
  7. </head>
  8. <body>
  9.  
  10. <div class="form-div">
  11.     <div class="reg-content">
  12.         <h1>欢迎注册</h1>
  13.         <span>已有帐号？</span> <a href="login.html">登录</a>
  14.     </div>
  15.     <form id="reg-form">
  16.  
  17.         <table>
  18.  
  19.             <tr>
  20.                 <td>用户名</td>
  21.                 <td class="inputs">
  22.                     <input name="username" type="text" id="username" v-model="userName">
  23.                     <br>
  24.                     <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span>
  25.                 </td>
  26.  
  27.             </tr>
  28.  
  29.             <tr>
  30.                 <td>密码</td>
  31.                 <td class="inputs">
  32.                     <input name="password" type="password" id="password" v-model="passWord">
  33.                     <br>
  34.                     <span id="password_err" class="err_msg" style="display: none">密码格式有误</span>
  35.                 </td>
  36.             </tr>
  37.  
  38.         </table>
  39.  
  40.         <div class="buttons">
  41.             <input value="注 册" type="submit" id="reg_btn" @click="register">
  42.         </div>
  43.         <br class="clear">
  44.     </form>
  45.  
  46. </div>
  47. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  48. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  49. <script>
  50.     var app = new Vue({
  51.         el: "#reg-form",
  52.         data: {
  53.             userName: "",
  54.             passWord: "",
  55.         },
  56.         methods: {
  57.             register: function () {
  58.                 console.log(this.userName, this.passWord);
  59.                 axios.post('http://localhost:81/user/register',
  60.                     {
  61.                         username: this.userName,
  62.                         password: this.passWord,
  63.                     }).then(resp => {
  64.                     console.log(resp)
  65.                     if (resp.data.code == '1') {
  66.                         alert(resp.data.data);
  67.                         window.location.href = 'login.html';
  68.                     } else {
  69.                         console.log(resp.data.data);
  70.                         alert(resp.data.data);
  71.                         this.userName = '';
  72.                         this.passWord = '';
  73.                     }
  74.                 })
  75.             }
  76.         }
  77.     })
  78. </script>
  79. </body>
  80. </html>

5.项目完毕总结

        先说完美的吧，因为前端登陆注册界面是之前的，这次就复制了一下，在前端部分仅书写了一些vue，使用v-model绑定username以及password，发送axios请求，后端那部分因为使用的是mybatis-plus，也没有编写一些sql语句，当然，这些sql语句也不是很复杂的，有时间的小伙伴可以直接试着编写，或在我这基础上进行修改，controller层的话，就是一些逻辑语句，例如：登陆时先判断数据库中是否存在该用户，若存在再进行密码比对，注册时则是先判断用户是否已经注册，存在数据库中，若不存在再让其进行注册。总而言之，此项目花费不到四十分钟，总体还是不错对于新手小白来说，我认为困难的部分则是在前后端交互那个地方，存在一些差异，二者的数据格式不统一。

        不足的地方，就是界面过于简单，没有啥js效果，效果非常直接，以及vue发送请求需要多加练习。

有需要的小伙伴可以后台私信我发源码哦，码文不易，小伙伴可以点个赞哦！！！

        

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

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

  

闽ICP备14008679号