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

一、初始化项目

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

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

并且参考基于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>
<!--在 Element UI 的表单组件中，prop 是用于指定表单项对应的数据对象中的属性名。它的作用是将该表单项与数据对象进行绑定，实现数据的双向绑定以及表单验证。
具体来说，当你在 <el-form-item> 中使用 prop="username" 时，它实际上告诉 Element UI 表单组件，该表单项对应的数据对象中的属性名是 username。
此外，prop 还有一个重要的作用是进行表单验证。你可以定义一些验证规则（通过 :rules 属性传递一个数组），然后在表单提交或表单项失去焦点时，Element UI 会自动根据这些验证规则验证表单项的值，并显示相应的错误信息。
综上所述，prop 用于指定表单项对应的数据对象的属性名，实现数据的双向绑定，同时也用于进行表单验证。-->
          <el-form-item prop="username">
<!--<el-form-item prop="username"> 定义了一个表单项，并将它与 user 数据对象中名为 username 的属性进行关联。这样，当用户输入文本框中的内容时，v-model="user.username" 将实现将输入的值同步到 user.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">
<!--是一个自定义组件ValidCode的使用方式，并且添加了一个事件监听器。这里的@update:value是监听了ValidCode组件中的value属性更新事件，并将更新后的值传递给名为getCode的方法。
当ValidCode组件中的value属性更新时，会触发getCode方法。getCode方法可在父组件中定义，用于处理接收到的验证码信息或进行相关操作。-->
                <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方法调用后台接口进行登录操作，登录成功后跳转到首页，并将用户数据存储在本地。

扫描二维码关注公众号，回复： 16604617 查看本文章

$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;
    }
}