SpringBoot+Vue 登录（含验证码）、注册功能

ゞ浴缸里的玫瑰 2023-10-15 08:05 20阅读 0赞

## 一、初始化项目 ##

参考下面文章，初始vue项目并且引入ElementUI组件

[网页制作神器—ElementUI（小白入门超详细）][ElementUI]

并且参考[基于Axios完成前后端分离项目数据交互][Axios] 完成 request 请求工具的封装。

最终Vue.js 框架的应用程序的入口文件 main.js 的代码如下：

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    import '@/assets/css/global.css'
    import '@/assets/css/iconfont/iconfont.css'
    import '@/assets/css/theme/index.css'
    import request from "@/utils/request";
    // 首先，导入了 Vue、App 组件、router、ElementUI 组件库以及相关CSS 文件。
    // 其中，Vue 是 Vue.js 框架的核心库，App 是根组件，router 是路由配置文件，ElementUI 是基于 Vue.js 的 UI 组件库，包括一些常用的界面元素和样式。
    
    //设置了 Vue.config.productionTip 的值为 false，这是对 Vue 配置项的修改，表示阻止在生产环境下产生提示信息。
    Vue.config.productionTip = false
    // 通过 Vue.use(ElementUI, { size: 'small' }) 使用 ElementUI 插件，并设置全局的默认组件尺寸为 small。
    Vue.use(ElementUI, { size: 'small' });
    // 通过Vue.prototype.request=request将自定义的request对象挂载到Vue实例的原型上，以便在组件中可以通过this.request 访问到该对象。
    // 这个request对象可能是用于发送HTTP请求的工具类或者封装了接口请求的方法。
    Vue.prototype.$request=request
    // 创建了一个新的 Vue 实例，配置了 router 和 App 组件，并通过 $mount 方法将实例挂载到 id 为 app 的 HTML 元素上，实现应用程序的渲染和启动。
    new Vue({
      router,
      render: h => h(App) // 行代码导入了名为 App 的根组件，并在 render 函数中将其渲染到页面上。h 是 createElement 的别名，用于创建虚拟 DOM 元素
    }).$mount('#app')

`render: h => h(App)` 是 Vue.js 中的渲染函数 (render function) 的书写方式。它使用箭头函数的语法规则，表示一个匿名函数，接收一个参数 `h`，并返回 `h(App)`。在 Vue.js 中，组件的模板可以通过 `template` 属性来定义，也可以使用渲染函数进行动态渲染。渲染函数可以通过编程方式创建虚拟 DOM，并最终渲染成实际的 DOM 元素。在这里，`h` 实际上是 `createElement` 的缩写，它是一个用于创建虚拟 DOM 元素的函数。`h(App)` 表示调用 `createElement` 函数来创建一个根据 App 组件生成的虚拟 DOM 对象。

所以，`render: h => h(App)` 的意思是将 App 组件渲染为虚拟 DOM 元素，并最终展示在页面上。这种写法在单文件组件中常见，用于使用渲染函数进行动态渲染的情况。

**当然还要引入一个验证码插件：ValidCode.vue**

<template>
      <div class="ValidCode disabled-select" style="width: 100%; height: 100%" @click="refreshCode">
        <span v-for="(item, index) in codeList" :key="index" :style="getStyle(item)">{
       {item.code}}</span>
      </div>
    </template>
    
    <script>
    export default {
      name: 'validCode',
      data () {
        return {
          length: 4,
          codeList: []
        }
      },
      mounted () {
        this.createdCode()
      },
      methods: {
        refreshCode () {
          this.createdCode()
        },
        createdCode () {
          let len = this.length,
              codeList = [],
              chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz0123456789',
              charsLen = chars.length
          // 生成
          for (let i = 0; i < len; i++) {
            let rgb = [Math.round(Math.random() * 220), Math.round(Math.random() * 240), Math.round(Math.random() * 200)]
            codeList.push({
              code: chars.charAt(Math.floor(Math.random() * charsLen)),
              color: `rgb(${rgb})`,
              padding: `${[Math.floor(Math.random() * 10)]}px`,
              transform: `rotate(${Math.floor(Math.random() * 90) - Math.floor(Math.random() * 90)}deg)`
            })
          }
          // 指向
          this.codeList = codeList
          // 将当前数据派发出去
          this.$emit('update:value', codeList.map(item => item.code).join(''))
        },
        getStyle (data) {
          return `color: ${data.color}; font-size: ${data.fontSize}; padding: ${data.padding}; transform: ${data.transform}`
        }
      }
    }
    </script>
    
    <style>
    .ValidCode{
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .ValidCode span {
      display: inline-block;
      font-size: 18px;
    }
    </style>

> 在登录、注册界面处进行引用： import ValidCode from "@/conponents/ValidCode";即可

## 二、登录界面： ##

<template>
      <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #0f9876">
        <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden">
          <div style="flex: 1">
            <img src="@/assets/login.png" alt="" style="width: 100%">
          </div>
          <div style="flex: 1; display: flex; align-items: center; justify-content: center">
            <el-form :model="user" style="width: 80%" :rules="rules" ref="loginRef">
              <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">欢迎登录后台管理系统</div>
    
              <el-form-item prop="username">
    
                <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
              </el-form-item>
              <el-form-item prop="code">
                <div style="display: flex">
                  <el-input placeholder="请输入验证码" prefix-icon="el-icon-circle-check" size="medium" style="flex: 1" v-model="user.code"></el-input>
                  <div style="flex: 1; height: 36px">
    
                    <valid-code @update:value="getCode" />
                  </div>
                </div>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" style="width: 100%" @click="login">登 录</el-button>
              </el-form-item>
              <div style="display: flex">
                <div style="flex: 1">还没有账号？请 <span style="color: #0f9876; cursor: pointer" @click="$router.push('/register')">注册</span></div>
                <div style="flex: 1; text-align: right"><span style="color: #0f9876; cursor: pointer" @click="handleForgetPass">忘记密码</span></div>
              </div>
            </el-form>
          </div>
        </div>
    
    
        <el-dialog title="忘记密码" :visible.sync="forgetPassDialogVis" width="30%">
          <el-form :model="forgetUserForm" label-width="80px" style="padding-right: 20px">
            <el-form-item label="用户名">
              <el-input v-model="forgetUserForm.username" autocomplete="off" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="手机号">
              <el-input v-model="forgetUserForm.phone" autocomplete="off" placeholder="请输入手机号"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="forgetPassDialogVis = false">取 消</el-button>
            <el-button type="primary" @click="resetPassword">确 定</el-button>
          </div>
        </el-dialog>
    
      </div>
    </template>
    
    <script>
    import ValidCode from "@/conponents/ValidCode";
    // 在components属性中，将ValidCode作为一个组件注册进来。这样就可以在模板中使用<valid-code>标签。
    export default {
      name: "Login",
      components: {
        ValidCode
      },
      data() {
    
        // 验证码校验
        const validateCode = (rule, value, callback) => {
          if (value === '') {
            callback(new Error('请输入验证码'))
          } else if (value.toLowerCase() !== this.code) {
            callback(new Error('验证码错误'))
          } else {
            callback()
          }
        }
    
        return {
          forgetUserForm: {},   // 忘记密码的表单数据
          forgetPassDialogVis: false,
          code: '',  // 验证码组件传递过来的code
          user: {
            code: '',   // 表单里用户输入的code 验证码
            username: '',
            password: ''
          },
          // trigger属性指定了触发校验的事件类型，这里是在字段失去焦点时触发校验（blur事件）。
          rules: {
            username: [
              { required: true, message: '请输入账号', trigger: 'blur' },
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
            ],
            code: [
              { validator: validateCode, trigger: 'blur' }
            ],
          }
        }
      },
      created() {
    
      },
      methods: {
        handleForgetPass() {   //  初始化表单的数据
          this.forgetUserForm = {}
          this.forgetPassDialogVis = true
        },
        resetPassword() {
          this.$request.put('/password', this.forgetUserForm).then(res => {
            if (res.code === '200') {
              this.$message.success('重置成功')
              this.forgetPassDialogVis = false
            } else {
              this.$message.error(res.msg)
            }
          })
        },
        getCode(code) {
          this.code = code.toLowerCase()
        },
        login() {
          this.$refs['loginRef'].validate((valid) => {
            if (valid) {
              // 验证通过
              this.$request.post('/login', this.user).then(res => {
                if (res.code === '200') {
                  this.$router.push('/')
                  this.$message.success('登录成功')
                  localStorage.setItem("honey-user", JSON.stringify(res.data))  // 存储用户数据
                } else {
                  this.$message.error(res.msg)
                }
              })
            }
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

这是一个使用Vue.js编写的登录页面组件，主要包括一个表单和验证码功能。用户可以输入账号、密码和验证码进行登录操作。

在模板部分，使用了Flex布局将登录框居中显示，并设置了背景颜色。登录框内部分为左右两个部分，左侧为图片展示，右侧为登录表单。登录表单使用了Element UI组件库的`el-form`和`el-input`组件，分别用于输入账号、密码和验证码。验证码部分还引入了自定义组件`ValidCode`来生成验证码。登录按钮点击后会触发`login`方法进行登录操作。下方还有一个注册和忘记密码的链接。

在脚本部分，定义了`validateCode`方法来验证用户输入的验证码是否正确，并在`data`中定义了相关数据和验证规则。`getCode`方法用于接收验证码组件传递过来的验证码值。`login`方法调用后台接口进行登录操作，登录成功后跳转到首页，并将用户数据存储在本地。

`$router.push('/register')` 是Vue.js中的路由跳转方法。在这段代码中，点击注册链接时会调用`$router.push('/register')`方法，将当前页面的路由跳转到`/register`，即注册页面。

`$router` 是Vue Router提供的路由实例，它包含了一些用于导航的方法，如`push`用于向history栈中添加新的记录，并跳转到指定的地址。

所以，`$router.push('/register')` 的作用是跳转到注册页面。当用户点击“还没有账号？请注册”时，就会触发这个方法并跳转到注册页面。

## 三、注册界面 ##

<template>
      <div style="height: 100vh; display: flex; align-items: center; justify-content: center; background-color: #669fef">
        <div style="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow: hidden">
          <div style="flex: 1">
            <img src="@/assets/register.png" alt="" style="width: 100%">
          </div>
          <div style="flex: 1; display: flex; align-items: center; justify-content: center">
            <el-form :model="user" style="width: 80%" :rules="rules" ref="registerRef">
              <div style="font-size: 20px; font-weight: bold; text-align: center; margin-bottom: 20px">欢迎注册后台管理系统</div>
              <el-form-item prop="username">
                <el-input prefix-icon="el-icon-user" size="medium" placeholder="请输入账号" v-model="user.username"></el-input>
              </el-form-item>
              <el-form-item prop="password">
                <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请输入密码" v-model="user.password"></el-input>
              </el-form-item>
              <el-form-item prop="confirmPass">
                <el-input prefix-icon="el-icon-lock" size="medium" show-password placeholder="请确认密码" v-model="user.confirmPass"></el-input>
              </el-form-item>
              <el-form-item prop="role">
                <el-radio-group v-model="user.role">
                  <el-radio label="用户"></el-radio>
                  <el-radio label="商家"></el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type="info" style="width: 100%" @click="register">注 册</el-button>
              </el-form-item>
              <div style="display: flex">
                <div style="flex: 1">已经有账号了？请 <span style="color: #6e77f2; cursor: pointer" @click="$router.push('/login')">登录</span></div>
              </div>
            </el-form>
          </div>
        </div>
    
      </div>
    </template>
    
    <script>
    // export default 的作用是将整个组件对象作为模块的默认导出，方便其他文件引入和使用。
    export default {
      name: "Register",
      data() {
        // 验证码校验
        const validatePassword = (rule, confirmPass, callback) => {
          if (confirmPass === '') {
            callback(new Error('请确认密码'))
          } else if (confirmPass !== this.user.password) {
            callback(new Error('两次输入的密码不一致'))
          } else {
            callback()
          }
        }
        return {
          user: {
            username: '',
            password: '',
            confirmPass: ''
          },
          rules: {
            username: [
              { required: true, message: '请输入账号', trigger: 'blur' },
            ],
            password: [
              { required: true, message: '请输入密码', trigger: 'blur' },
            ],
            confirmPass: [
              { validator: validatePassword, trigger: 'blur' }
            ],
            role: [
              { required: true, message: '请选择角色', trigger: 'blur' },
            ],
          }
        }
      },
      created() {
    
      },
      methods: {
        register() {
          this.$refs['registerRef'].validate((valid) => {
            if (valid) {
              // 验证通过
              this.$request.post('/register', this.user).then(res => {
                if (res.code === '200') {
                  this.$router.push('/login')
                  this.$message.success('注册成功')
                } else {
                  this.$message.error(res.msg)
                }
              })
            }
          })
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

## 四、后端接口 ##

@RestController
    public class WebController {
    
        @Resource
        UserService userService;
    
    
        @PostMapping("/login")
        public Result login(@RequestBody User user) {
            if (StrUtil.isBlank(user.getUsername()) || StrUtil.isBlank(user.getPassword())) {
                return Result.error("数据输入不合法");
            }
            user = userService.login(user);
            return Result.success(user);
        }
    
        @AuthAccess
        @PostMapping("/register")
        public Result register(@RequestBody User user) {
            if (StrUtil.isBlank(user.getUsername()) || StrUtil.isBlank(user.getPassword()) || StrUtil.isBlank(user.getRole())) {
                return Result.error("数据输入不合法");
            }
            if (user.getUsername().length() > 10 || user.getPassword().length() > 20) {
                return Result.error("数据输入不合法");
            }
            user = userService.register(user);
            return Result.success(user);
        }
    
    }

当然，此处还要引入一个 国产的工具类依赖：（或者使用别的工具包也行）

<dependency>
      <groupId>cn.hutool</groupId>
      <artifactId>hutool-all</artifactId>
      <version>5.8.18</version>
    </dependency>

@Service
    public class UserService {
    
        @Autowired
        UserMapper userMapper;
    
        // 验证用户账户是否合法
        public User login(User user) {
            // 根据用户名查询数据库的用户信息
            User dbUser = userMapper.selectByUsername(user.getUsername());
            if (dbUser == null) {
                // 抛出一个自定义的异常
                throw new ServiceException("用户名或密码错误");
            }
            if (!user.getPassword().equals(dbUser.getPassword())) {
                throw new ServiceException("用户名或密码错误");
            }
            // 生成token
            String token = TokenUtils.createToken(dbUser.getId().toString(), dbUser.getPassword());
            dbUser.setToken(token);
            return dbUser;
        }
    
        public User register(User user) {
            User dbUser = userMapper.selectByUsername(user.getUsername());
            if (dbUser != null) {
                // 抛出一个自定义的异常
                throw new ServiceException("用户名已存在");
            }
            user.setName(user.getUsername());
            userMapper.insert(user);
            return user;
        }
    
    }

**全局异常和自定义异常：**

package com.example.springboot.exception;
    
    import com.example.springboot.common.Result;
    import org.springframework.web.bind.annotation.ControllerAdvice;
    import org.springframework.web.bind.annotation.ExceptionHandler;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    @ControllerAdvice
    public class GlobalException {
    
        @ExceptionHandler(ServiceException.class)
        @ResponseBody
        public Result serviceException(ServiceException e) {
            return Result.error(e.getCode(), e.getMessage());
        }
    
        @ExceptionHandler(Exception.class)
        @ResponseBody
        public Result globalException(Exception e) {
            e.printStackTrace();
            return Result.error("500", "系统错误");
        }
    }

package com.example.springboot.exception;
    
    import lombok.Getter;
    
    @Getter
    public class ServiceException extends RuntimeException {
    
        private final String code;
    
        public ServiceException(String msg) {
            super(msg);
            this.code = "500";
        }
    
        public ServiceException(String code, String msg) {
            super(msg);
            this.code = code;
        }
    }

[ElementUI]: https://blog.csdn.net/weixin_49171365/article/details/132203500
[Axios]: https://blog.csdn.net/weixin_49171365/article/details/132376352