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

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

二、登录界面：

        这是一个使用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') 的作用是跳转到注册页面。当用户点击“还没有账号？请注册”时，就会触发这个方法并跳转到注册页面。

三、注册界面

 四、后端接口

@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);
    }

}

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

  cn.hutool
  hutool-all
  5.8.18

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