使用SpringBoot+Vue3开发项目（1）---- 设计用户注册和登录的接口及页面

news2024/9/19 10:27:07

目录

一.所用技术栈：

二.前端创建工程：

 1.使用elementplus展开前端页面格式布局：

2.基于Vue3的使用来实现登录与注册：

（1）定义数据模型：

（2）:model绑定表单：

（3）表单数据校验：

①定义表单校验规则：

②给表单绑定校验规则：

（4）前端注册功能开发：

 ①创建request.js请求工具：

②创建user.js来调用后端接口发送请求：

（5）前端登录功能开发：

（6）优化axios响应拦截器：

3.使用elementplus修改浏览器提示框：

三.后端创建工程：

 1.导入数据库big_event：

2.准备一系列包文件以及依赖：

 3.application.yml配置：

4.创建实体类pojo：

5.注册接口实现：

6.登录接口实现：

（1）导入jwt依赖以及工具包：

（2）Controller层：

（3）创建拦截器interceptor来统一拦截令牌完成登录验证：

（4）注册拦截器WebConfig：

 四.前端完整代码展示：

1.request.js

2.user.js

3.Login.vue

4.vite.config.js：

5.App.vue

6.main.js

本内容相关资料来源黑马Springboot+Vue3课程内的大事件项目，也希望你看完能够有所收获，本文狂码两万多字，话不多说进入正题 =>

一.所用技术栈：

我们在学习这个需要哪些技术栈呢？

  1. Vue3
  2. Java + SpringBoot
  3. Jwt令牌
  4. Md5加密
  5. Element-plus
  6. axios

下面的博客是三层框架的逻辑结构：Java三层框架的解析_java 三层-CSDN博客 

二.前端创建工程：

 1.使用elementplus展开前端页面格式布局：

下面先展示一下登录注册的前端页面原型：

这里很显然我们只需要根据 elementplus 进行渲染页面就好了。 

至于详细步骤我们就不过哆嗦，指详细说明如何使用 Vue3 来添加我们的事件。

下面是前端源代码：（我们在src/views/目录下建Login.vue文件）

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
//控制注册与登录表单的显示， 默认显示注册
const isRegister = ref(false)
</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-if="isRegister">
                <el-form-item>
                    <h1>注册</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码"></el-input>
                </el-form-item>
                <!-- 注册按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space>
                        注册
                    </el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = false">
                        ← 返回
                    </el-link>
                </el-form-item>
            </el-form>
            <!-- 登录表单 -->
            <el-form ref="form" size="large" autocomplete="off" v-else>
                <el-form-item>
                    <h1>登录</h1>
                </el-form-item>
                <el-form-item>
                    <el-input :prefix-icon="User" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item class="flex">
                    <div class="flex">
                        <el-checkbox>记住我</el-checkbox>
                        <el-link type="primary" :underline="false">忘记密码？</el-link>
                    </div>
                </el-form-item>
                <!-- 登录按钮 -->
                <el-form-item>
                    <el-button class="button" type="primary" auto-insert-space>登录</el-button>
                </el-form-item>
                <el-form-item class="flex">
                    <el-link type="info" :underline="false" @click="isRegister = true">
                        注册 →
                    </el-link>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
            url('@/assets/login_bg.jpg') no-repeat center / cover;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>

2.基于Vue3的使用来实现登录与注册：

（1）定义数据模型：

为了方便操作以及数据的双向交互，我们在Login.vue文件<script>内定义数据模型 =>

const registerData = ref({
    username: '',    //用户名
    password: '',    //密码
    rePassword: '',  //重新输入密码
})

（2）:model绑定表单：

既然我们已经定义完数据模型，我们就需要让数据与表单建立联系以此来双向绑定：

我们现在父组件声明 :model=" "，随后给每一个表单项绑定值 v-model=""

这里不全部代码展示 

<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" > 
<el-form-item>
    <h1>注册</h1>
</el-form-item>
<el-form-item">
    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
</el-form-item>
<el-form-item">
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
</el-form-item>
<el-form-item>
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
</el-form-item>
</el-form>

（3）表单数据校验：

①定义表单校验规则：
  1. required => true代表必须填值
  2. message => 提示信息
  3. trigger: 'blur' => 离焦时开始校验(也就是鼠标刚点一下然后点另外一处地方开始校验是否满足规则，不满足给出message提示信息)
  4. min,max => 最小最大长度 
  5. validator => 执行后面的函数来校验
//校验密码的函数checkRepassword
const checkRepassword = (rule,value,callback) =>{//规则，值，回调函数
    if(value === ''){
        callback(new Error('请再次确认密码'));
    }else if(value !== registerData.value.password){
        callback(new Error('请确保再次输入的密码一样'));
    }else{
        callback();
    }
}
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }, 
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
    ],
    rePassword: [
        {validator: checkRepassword , trigger: 'blur'}
    ],
}
②给表单绑定校验规则：

先给父组件添加属性:rules="规则"，然后给每个表单项指定对应的校验规则prop=" "

<el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules"> 
<el-form-item>
    <h1>注册</h1>
</el-form-item>
<el-form-item prop="username">
    <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
</el-form-item>
<el-form-item prop="password">
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
</el-form-item>
<el-form-item prop="rePassword">
    <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
</el-form-item>

这样我们就可以通过前端判断输入格式是否符合标准。

（4）前端注册功能开发：

我们以下面的请求路径以及参数来开发 =>

 ①创建request.js请求工具：

不理解这部分知识请查看下面的博客：vue基础知识总结（2）--- axios的使用-CSDN博客 

//导入axios  npm install axios
import axios from 'axios';
//定义一个变量,记录公共的前缀  ,  baseURL
const baseURL = 'http://localhost:8080';  //后面会涉及到跨域问题
const instance = axios.create({baseURL})

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        return result.data;
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)
//暴露
export default instance;
②创建user.js来调用后端接口发送请求：

因为请求参数格式：x-www-form-urlencoded，不可以将参数直接写在 axios.get('url',参数)，因为这样是 json 格式传递，所以我们要借助 UrlSearchParams 来传递，先遍历参数来得到键值对，然后封装到 UrlSearchParams 对象中。

//导入request.js请求工具
import request from '@/utils/request.js';
//提供调用注册接口的函数
export const userRegisterService = (registerData)=>{
    //借助UrlSearchParams完成传递
    const params = new URLSearchParams();
    for(let key in registerData){
        params.append(key,registerData[key]);
    }
    return request.post('/user/register',params);
}
③在Login.vue中<script>标签内编写代码来使用注册函数：

我们后端响应的数据格式是 =>

所以根据后端返回数据的状态码来判断是否注册成功。 

//调用后台接口完成注册
import {userRegisterService , userLoginService} from '@/api/user.js'
const register = async ()=>{
    let result = await userRegisterService(registerData.value);
    if(result.code === 0){
        //成功
        alert(result.msg ? result.msg : '注册成功'); 
    }else{
        //失败
        alert('注册失败');
    }
}

之后在html中创建单击事件来完成注册。 

④跨域问题：

由于浏览器的同源策略限制，向不同源（不同协议，不同域名，不同端口）发送ajax请求会失败。

也就是前端一个域，后端一个域。 

所以为了解决跨域问题，我们可以通过配置代理方式来解决，若我们配置完代理，那么浏览器将要向后端服务发送请求的 ip 地址 5173（这个是我的前端地址）就可以发给前端服务，然后由前端服务转发给后端服务。这样就可以避免直接发送导致跨域（跨域是发生在浏览器端，前端服务与后端服务发送ajax请求没事）。

那么如何跨域呢？

其实非常简单，我们只需要两部：

第一部  =>  将request.js当中的baseURL修改成'/api'

// const baseURL = 'http://localhost:8080';
const baseURL = '/api';

第二部  =>  在vite.config.js中写入相关配置

 这里会自动检测请求路径是否含有'/api'，如果含有就会将源自动替换成target内的路径，并且会把'/api'替换成空串。

export default defineConfig({
  server:{
    proxy:{
      '/api':{
        //获取路径中包含了/api的请求
        target: 'http://localhost:8080',//后台服务所在的源
        changeOrigin: true,  //修改源
        rewrite: (path)=>path.replace(/^\/api/,'') // 路径重写，将/api替换成空串
      }
    }
  }
})

所以最后的注册请求路径变为：'http://localhost:8080/user/login'

（5）前端登录功能开发：

登录无非跟注册差不多，两个数据绑定，一个事件绑定和一个校验功能。

<el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
    <el-form-item>
        <h1>登录</h1>
    </el-form-item>
    <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
    </el-form-item>
    <el-form-item class="flex">
        <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
        </div>
    </el-form-item>
    <!-- 登录按钮 -->
    <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
    </el-form-item>
    <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="isRegister = true; clearRegisterData()">
            注册 →
        </el-link>
    </el-form-item>
</el-form>

校验功能我们直接复用前面注册功能的rules，之后我们开发登录函数。

在user.js内编写axios代码：（这里跟注册功能一样需要借助 UrlSearchParams 完成传递）

//登录接口
export const userLoginService = (loginData)=>{
    //借助UrlSearchParams完成传递
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key]);
    }
    return request.post('/user/login',params);
}

然后再Login.vue文件内编写使用登录函数：

//表单数据校验
const login = async()=>{
    let result = await userLoginService(registerData.value);
    if(result.code === 0){
        //成功
        alert(result.msg ? result.msg : '登录成功'); 
    }else{
        //失败
        alert('登录失败');
    }
}

因为这里在切换的时候还会保留值，所以我们在返回以及注册按钮绑定 clearRegisterData() 清除事件：

const clearRegisterData = ()=>{
    registerData.value={
        username: '',
        password: '',
        rePassword: '',
    }
}

（6）优化axios响应拦截器：

因为登录以及注册的事件函数内if判断是否成功的代码过于繁琐，所以我们可以添加响应拦截器，将公共代码放入响应拦截器来统一完成 =>

在request.js文件内添加：

//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        //判断业务状态码
        if(result.data.code === 0){
            return result.data;
        }
        //操作失败
        alert(result.data.message ? result.data.message : '服务异常')
        //异步操作的状态转换为失败
        return Promise.reject(result.data);
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

而如果我们既然不会被拦截器拦截到错误，那我们就可以在 Login.vue 文件直接向前端响应成功：

//调用后台接口完成注册
import {userRegisterService , userLoginService} from '@/api/user.js'
const register = async ()=>{
    let result = await userRegisterService(registerData.value);
    alert(result.msg ? result.msg : '注册成功'); 
}
//表单数据校验
const login = async()=>{
    let result = await userLoginService(registerData.value);
    alert(result.msg ? result.msg : '登录成功'); 
}

3.使用elementplus修改浏览器提示框：

原来的浏览器提示框：

我们打开elementplus官网：Message 消息提示 | Element Plus (element-plus.org)

在这里有个不同状态，点击查看源代码，我们就可以使用内部代码修改浏览器提示框。

我们引入ElMessage就可以修改了：

import { ElMessage } from 'element-plus';
//调用后台接口完成注册
import {userRegisterService , userLoginService} from '@/api/user.js'
const register = async ()=>{
    let result = await userRegisterService(registerData.value);
    // alert(result.msg ? result.msg : '注册成功'); 
    ElMessage.success(result.msg ? result.msg : '注册成功');
}
//表单数据校验
const login = async()=>{
    let result = await userLoginService(registerData.value);
    // alert(result.msg ? result.msg : '登录成功'); 
    ElMessage.success(result.msg ? result.msg : '登录成功');
}

这样成功的框框就变成下面这样：

 前端工程就介绍到这里，作品最底下会呈上完整代码，下面我们讲述后端工程创建。

三.后端创建工程：

 1.导入数据库big_event：

-- 创建数据库
create database big_event;

-- 使用数据库
use big_event;

-- 用户表
create table user (
                      id int unsigned primary key auto_increment comment 'ID',
                      username varchar(20) not null unique comment '用户名',
                      password varchar(32)  comment '密码',
                      nickname varchar(10)  default '' comment '昵称',
                      email varchar(128) default '' comment '邮箱',
                      user_pic varchar(128) default '' comment '头像',
                      create_time datetime not null comment '创建时间',
                      update_time datetime not null comment '修改时间'
) comment '用户表';

-- 分类表
create table category(
                         id int unsigned primary key auto_increment comment 'ID',
                         category_name varchar(32) not null comment '分类名称',
                         category_alias varchar(32) not null comment '分类别名',
                         create_user int unsigned not null comment '创建人ID',
                         create_time datetime not null comment '创建时间',
                         update_time datetime not null comment '修改时间',
                         constraint fk_category_user foreign key (create_user) references user(id) -- 外键约束
);

-- 文章表
create table article(
                        id int unsigned primary key auto_increment comment 'ID',
                        title varchar(30) not null comment '文章标题',
                        content varchar(10000) not null comment '文章内容',
                        cover_img varchar(128) not null  comment '文章封面',
                        state varchar(3) default '草稿' comment '文章状态: 只能是[已发布] 或者 [草稿]',
                        category_id int unsigned comment '文章分类ID',
                        create_user int unsigned not null comment '创建人ID',
                        create_time datetime not null comment '创建时间',
                        update_time datetime not null comment '修改时间',
                        constraint fk_article_category foreign key (category_id) references category(id),-- 外键约束
                        constraint fk_article_user foreign key (create_user) references user(id) -- 外键约束
)

2.准备一系列包文件以及依赖：

这里我们需要导入web,mybatis,lombok,mysql,jwt,validation等依赖。

下图是我们的项目目录结构：

 3.application.yml配置：

这里不懂可以看下面的文章：

Mybatis不明白？就这一篇带你轻松入门_mapper 新建一张表在哪里配置-CSDN博客

spring:
  datasource:
      driver-class-name: com.mysql.cj.jdbc.Driver
      url: jdbc:mysql://localhost:3306/big_event
      username: root
      password: 1234
mybatis:
  configuration:
    map-underscore-to-camel-case: true #驼峰命名

4.创建实体类pojo：

我们为了方便操作数据库，会创建实体类 =>

eg：这里用lombok注解配置 get,set 方法，不会可以查一下。

@Data
public class User {
    private Integer id;//主键ID
    private String username;//用户名
    private String password;//密码
    private String nickname;//昵称
    private String email;//邮箱
    private String userPic;//用户头像地址
    private LocalDateTime createTime;//创建时间
    private LocalDateTime updateTime;//更新时间
}

这里不一一展示了。

5.注册接口实现：

我们需要传递上面这三个数据，所以一般会封装成Result类来返回响应数据：

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Result<T> {
    private Integer code;//业务状态码  0-成功  1-失败
    private String message;//提示信息
    private T data;//响应数据

    //快速返回操作成功响应结果(带响应数据)
    public static <E> Result<E> success(E data) {
        return new Result<>(0, "操作成功", data);
    }

    //快速返回操作成功响应结果
    public static Result success() {
        return new Result(0, "操作成功", null);
    }

    public static Result error(String message) {
        return new Result(1, message, null);
    }
}

注册接口是很好写的，注意判断数据格式，然后从数据库访问拿到数据判断是否存在该用户，如果不存在就注册，存在就返回错误msg。 

 然后我们就编写Controller层：

注意，这里是使用了Spring validation参数校验框架，使用预定义的注解完成后参数校验。

我们使用该框架只需要三步：

  1. 引入Spring validation起步依赖
  2. 在参数前面添加@Patten（"正则表达式"）
  3. 在Controller类上添加@Validated注解
@RestController
@RequestMapping("/user")
@Validated
public class UserController {

    @Autowired
    private UserService userService;

    /**
     * 注册用户
     * @param username
     * @param password
     * @return
     */
    @PostMapping("/register")
    public Result register(@Pattern(regexp = "^\\S{5,16}$") String username ,@Pattern(regexp = "^\\S{5,16}$") String password){
        User user = userService.findByUserName(username);
        if(user == null){
            userService.register(username,password);
            return Result.success();
        }else{
            return Result.error("用户名已被占用");
        }
    }
}

然后是Service层：

什么是Md5 => Md5是一种加密方式，我们就需要引入Md5工具类，使用类内方法即可。

不会Md5请看下面博客： 使用Md5加密密码-CSDN博客

注意这里不可以直接将密码保存到数据库，需要使用Md5加密一下密码，所以先导入MD5工具类，在编写代码。 

@Service
public class UserServiceImpl implements UserService {

    @Autowired
    private UserMapper userMapper;

    @Override
    public User findByUserName(String username) {
        return userMapper.findByUserName(username);
    }

    @Override
    public void register(String username, String password) {
        //加密
        String md5String = Md5Util.getMD5String(password);
        userMapper.add(username,md5String);
    }
}
}

最后是Mapper层：

@Mapper
public interface UserMapper {

    @Select("select * from user where username = #{username}")
    User findByUserName(String username);

    @Insert("insert into user(username, password, create_time, update_time) " +
            " values(#{username},#{password},now(),now()) ")
    void add(String username, String password);
}

注意，为了对异常处理我们可以使用全局异常处理器来处理异常：

在exception包下创建 =>

//全局异常处理器
@RestControllerAdvice
public class GlobalExceptionHandler {
    //捕获异常
    @ExceptionHandler(Exception.class)
    public Result handleException(Exception e){
        //向后台输入异常信息
        e.printStackTrace();
        //给浏览器响应信息返回
        return Result.error(StringUtils.hasLength(e.getMessage()) ? e.getMessage() : "操作失败");
    }
}

之后我们可以使用postman调试一下后端项目。使用body下的 x-www-form-urlencoded输入请求参数。

6.登录接口实现：

登录接口实际上是比注册接口难了一些，但无外乎加了jwt令牌的一些相关操作，若不了解jwt可以查看下面的博客：JWT令牌在项目中的实战操作-CSDN博客。

（1）导入jwt依赖以及工具包：

import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;

import java.util.Date;
import java.util.Map;
public class JwtUtil {

    private static final String KEY = "itheima";

	//接收业务数据,生成token并返回
    public static String genToken(Map<String, Object> claims) {
        return JWT.create()
                .withClaim("claims", claims)
                .withExpiresAt(new Date(System.currentTimeMillis() + 1000 * 60 * 60 * 12))
                .sign(Algorithm.HMAC256(KEY));
    }

	//接收token,验证token,并返回业务数据
    public static Map<String, Object> parseToken(String token) {
        return JWT.require(Algorithm.HMAC256(KEY))
                .build()
                .verify(token)
                .getClaim("claims")
                .asMap();
    }
}

（2）Controller层：

先在数据库查询用户，判断是否有该用户，然后判断密码是否正确，这里需要将请求参数密码使用MD5加密，再用equals判断是否一致，如果一致就将id以及用户名封装Map集合，并调用jwt工具类，将集合传入得到令牌并return返回给前端，如果不一致就返回错误信息msg。

@RestController
@RequestMapping("/user")
@Validated
public class UserController {

    @Autowired
    private UserService userService;
    /**
     * 用户登录
     * @param username
     * @param password
     * @return
     */
    @PostMapping("/login")
    public Result<String> login(@Pattern(regexp = "^\\S{5,16}$") String username ,@Pattern(regexp = "^\\S{5,16}$") String password){
        //根据username查询用户
        User loginUser = userService.findByUserName(username);
        //判断是否存在
        if(loginUser == null){
            return Result.error("用户名错误");
        }
        //判断密码是否正确
        if(Md5Util.getMD5String(password).equals(loginUser.getPassword())){
            //登录成功，创建JWT令牌
            Map<String,Object> claims = new HashMap<>();
            claims.put("id",loginUser.getId());
            claims.put("username",loginUser.getUsername());
            String token = JwtUtil.genToken(claims);
            return Result.success(token);
        }
        return Result.error("密码错误");
    }
}

（3）创建拦截器interceptor来统一拦截令牌完成登录验证：

重写preHandle()方法，调用request.getHeader()方法查看jwt令牌字符串，执行JwtUtil.parseToken()方法，如果方法没有抛出异常就代表成功，于是返回true代表放行 ，如果失败就设置响应状态码为401并返回false不放行。

//拦截器
@Component
public class LoginInterceptor implements HandlerInterceptor {

    @Override
    public boolean preHandle(HttpServletRequest request , HttpServletResponse response , Object handle) throws Exception{
        String token = request.getHeader("Authorization"); //Authorization为请求头的名字
        try {
            //令牌验证
            Map<String,Object> claims = JwtUtil.parseToken(token);
            //放行
            return true;
        }catch (Exception e){
            //http响应状态码为401
            response.setStatus(401);
            //不放行
            return false;
        }
    }
}

（4）注册拦截器WebConfig：

在config包下创建配置类：

为了获取拦截器对象，我们DI（依赖注入）一个拦截器对象，重写addInterceptors()方法，随后调用registry注册器内的addInterceptor()方法，但是此时是拦截所有请求，所以我们在调用excludePathPatterns()方法来放行登录以及注册接口。

//注册拦截器
//当需要对目标对象（target object）执行某种横切关注点（cross-cutting concern）操作，
//比如日志记录、事务处理等，开发者会将相关的拦截器注册到registry里。当匹配的条件触发时，
//registry会按照配置顺序查找并执行相应的拦截器，实现了对业务流程的动态增强。
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Autowired
    private LoginInterceptor loginInterceptor;

    @Override
    public void addInterceptors(InterceptorRegistry registry) { //registry是注册器，用来管理拦截器
        registry.addInterceptor(loginInterceptor).excludePathPatterns("/user/login","/user/register");
    }
}

 四.前端完整代码展示：

到这里我们就可以实现前后端联调了，也就是我们已经成功可以编写前后端的代码实现注册以及登录功能了。下面呈现完整代码。 

1.request.js

//定制请求的实例

//导入axios  npm install axios
import axios from 'axios';
import { ElMessage } from 'element-plus'
//定义一个变量,记录公共的前缀  ,  baseURL
// const baseURL = 'http://localhost:8080';
const baseURL = '/api';
const instance = axios.create({baseURL})


//添加响应拦截器
instance.interceptors.response.use(
    result=>{
        //判断业务状态码
        if(result.data.code === 0){
            return result.data;
        }
        //操作失败
        // alert(result.data.message ? result.data.message : '服务异常')
        ElMessage.error(result.data.message ? result.data.message : '服务异常')
        //异步操作的状态转换为失败
        return Promise.reject(result.data);
    },
    err=>{
        alert('服务异常');
        return Promise.reject(err);//异步的状态转化成失败的状态
    }
)

export default instance;

2.user.js

//导入request.js请求工具
import request from '@/utils/request.js';
//提供调用注册接口的函数
export const userRegisterService = (registerData)=>{
    //借助UrlSearchParams完成传递
    const params = new URLSearchParams();
    for(let key in registerData){
        params.append(key,registerData[key]);
    }
    return request.post('/user/register',params);
}
//登录接口
export const userLoginService = (loginData)=>{
    //借助UrlSearchParams完成传递
    const params = new URLSearchParams();
    for(let key in loginData){
        params.append(key,loginData[key]);
    }
    return request.post('/user/login',params);
}

3.Login.vue

<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
//控制注册与登录表单的显示，默认显示注册
const isRegister = ref(false)
//定义数据模型
const registerData = ref({
    username: '',
    password: '',
    rePassword: '',
})
//校验密码的函数checkRepassword
const checkRepassword = (rule,value,callback) =>{
    if(value === ''){
        callback(new Error('请再次确认密码'));
    }else if(value !== registerData.value.password){
        callback(new Error('请确保再次输入的密码一样'));
    }else{
        callback();
    }
}

//定义表单校验规则
const rules = {
    username: [
        { required: true, message: '请输入用户名', trigger: 'blur' }, //trigger: 'blur'表示失焦时开始校验
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { min: 5, max: 16, message: '长度为5~16位非空字符', trigger: 'blur' },
    ],
    rePassword: [
        {validator: checkRepassword , trigger: 'blur'}
    ],
}
//调用后台接口完成注册
import {userRegisterService , userLoginService} from '@/api/user.js'
const register = async ()=>{
    let result = await userRegisterService(registerData.value);
    // alert(result.msg ? result.msg : '注册成功'); 
    ElMessage.success(result.msg ? result.msg : '注册成功');
}
//表单数据校验
const login = async()=>{
    let result = await userLoginService(registerData.value);
    // alert(result.msg ? result.msg : '登录成功'); 
    ElMessage.success(result.msg ? result.msg : '登录成功');
}
const clearRegisterData = ()=>{
    registerData.value={
        username: '',
        password: '',
        rePassword: '',
    }
}
</script>

<template>
    <el-row class="login-page">
        <el-col :span="12" class="bg"></el-col>
        <el-col :span="6" :offset="3" class="form">
            <!-- 注册表单 -->
            <!-- :rules="rules"用来绑定校验规则 -->
            <!-- prop=""用来指定校验项  -->
            <!-- :model=""是父组件给v-model子组件传参 -->
            <el-form ref="form" size="large" autocomplete="off" v-if="isRegister" :model="registerData" :rules="rules"> 
            <el-form-item>
                <h1>注册</h1>
            </el-form-item>
            <el-form-item prop="username">
                <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
            </el-form-item>
            <el-form-item prop="rePassword">
                <el-input :prefix-icon="Lock" type="password" placeholder="请输入再次密码" v-model="registerData.rePassword"></el-input>
            </el-form-item>
            <!-- 注册按钮 -->
            <el-form-item>
                <el-button class="button" type="primary" auto-insert-space @click="register">
                    注册
                </el-button>
            </el-form-item>
            <el-form-item class="flex">
                <el-link type="info" :underline="false" @click="isRegister = false; clearRegisterData()">
                    ← 返回
                </el-link>
            </el-form-item>
            </el-form>
            <!-- 登录表单 -->
<el-form ref="form" size="large" autocomplete="off" v-else :model="registerData" :rules="rules">
    <el-form-item>
        <h1>登录</h1>
    </el-form-item>
    <el-form-item prop="username">
        <el-input :prefix-icon="User" placeholder="请输入用户名" v-model="registerData.username"></el-input>
    </el-form-item>
    <el-form-item prop="password">
        <el-input name="password" :prefix-icon="Lock" type="password" placeholder="请输入密码" v-model="registerData.password"></el-input>
    </el-form-item>
    <el-form-item class="flex">
        <div class="flex">
            <el-checkbox>记住我</el-checkbox>
            <el-link type="primary" :underline="false">忘记密码？</el-link>
        </div>
    </el-form-item>
    <!-- 登录按钮 -->
    <el-form-item>
        <el-button class="button" type="primary" auto-insert-space @click="login">登录</el-button>
    </el-form-item>
    <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="isRegister = true; clearRegisterData()">
            注册 →
        </el-link>
    </el-form-item>
</el-form>
        </el-col>
    </el-row>
</template>

<style lang="scss" scoped>
/* 样式 */
.login-page {
    height: 100vh;
    background-color: #fff;

    .bg {
        background: url('@/assets/logo2.png') no-repeat 60% center / 240px auto,
            url('@/assets/login_bg.jpg') no-repeat center / cover;
        border-radius: 0 20px 20px 0;
    }

    .form {
        display: flex;
        flex-direction: column;
        justify-content: center;
        user-select: none;

        .title {
            margin: 0 auto;
        }

        .button {
            width: 100%;
        }

        .flex {
            width: 100%;
            display: flex;
            justify-content: space-between;
        }
    }
}
</style>

4.vite.config.js：

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server:{
    proxy:{
      '/api':{
        //获取路径中包含了/api的请求
        target: 'http://localhost:8080',//后台服务所在的源
        changeOrigin: true,  //修改源
        rewrite: (path)=>path.replace(/^\/api/,'') // /api替换成空串
      }
    }
  }
})

5.App.vue

<template>
 <LoginVue/>
</template>

<script setup>
  import LoginVue from '@/views/Login.vue'
</script>

<style>

</style>

6.main.js

import './assets/main.scss'

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app')

好了，如果你能看到这里，想必也是非常有耐心，同时也是感谢你的观看，既然看到这里也希望你能给个三连支持一下，码子不易，后序会继续更新黑马大事件前后端代码解析，关注一波不迷路，同时希望你有所收货，感谢收看！！！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1985148.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

WPF学习（9）-CheckBox复选框+RadioButton单选框+RepeatButton重复按钮

WPF学习（9）-CheckBox复选框+RadioButton单选框+RepeatButton重复按钮

CheckBox复选框 CheckBox继承于ToggleButton&#xff0c;而ToggleButton继承于ButtonBase基类。 案例 前端代码 <StackPanel Orientation"Horizontal" HorizontalAlignment"Center" VerticalAlignment"Center"><TextBlock Text"…
阅读更多...
Transformer学习之DETR

Transformer学习之DETR

文章目录 1.算法简介1.1 算法主要贡献1.2 算法网络结构 2.损失函数设计2.1 二分图匹配(匈牙利算法)2.2 二分图匹配Loss_match2.3 训练Loss_Hungarian 3.网络核心模块3.1 BackBone模块3.2 空间位置编码(spatial positional encoding)3.2.1 输入与输出3.2.2 空间位置编码原理 3.3…
阅读更多...
【教学类-74-01】袜子配对01（UIBOT图片背景填充白色）

【教学类-74-01】袜子配对01（UIBOT图片背景填充白色）

背景需求&#xff1a; 前期用PS修图&#xff08;灰色背景变成白色背景&#xff09;&#xff0c;200张图片用了6个小时。 【教学类-73-02】20240805广口瓶&#xff08;宽口瓶&#xff09;02-CSDN博客文章浏览阅读744次&#xff0c;点赞17次&#xff0c;收藏20次。【教学类-73-…
阅读更多...
鸿萌成功案例：Lenovo SystemX 3650M5 MT:5462 数据“起死回生”

鸿萌成功案例：Lenovo SystemX 3650M5 MT:5462 数据“起死回生”

鸿萌数据恢复中心&#xff0c;自 2003 年创立伊始&#xff0c;便凭借其出类拔萃的专业数据恢复技术&#xff0c;在形形色色、错综复杂的数据恢复情境中展露了令人叹服的强大实力&#xff0c;铸就了数不胜数的成功范例。涵盖的情形包括但不限于服务器突发故障、硬盘意外损毁、文…
阅读更多...
AI 汹涌而至！三波冲击下将淘汰大部分程序员

AI 汹涌而至！三波冲击下将淘汰大部分程序员

作者&#xff1a;老余捞鱼 原创不易&#xff0c;转载请标明出处及原作者。 写在前面的话&#xff1a; 最近到处都能听到“人工智能会不会在不久的将来取代程序员”的争论。本人的观点为&#xff1a;人工智能将会取代程序员&#xff0c;本文将对此予以阐述。&#xff08;注&…
阅读更多...
指针小课堂

指针小课堂

目录 一.内存和地址 二.指针变量和地址 1.取地址操作符&#xff08;&&#xff09; 2.指针变量和解引⽤操作符&#xff08;*&#xff09; 2.1指针变量 2.2如何理解指针类型 2.3解引用操作符 2.4 指针的解引用 2.5.不同指针类型的运加减性质 2.5.1指针与整数相加&am…
阅读更多...
写一个gradio录音的webui界面并展现波形图

写一个gradio录音的webui界面并展现波形图

如图下&#xff1a;这是需求 要创建一个 Gradio 录音的 Web UI 界面&#xff0c;你可以使用 Gradio 的 Audio 组件来实现。下面是一个简单的示例&#xff0c;展示了如何创建一个 Gradio 应用程序&#xff0c;其中包含一个录音按钮&#xff0c;用户可以录制音频并提交给服务器处…
阅读更多...
JVM详解（个人学习笔记）

JVM详解（个人学习笔记）

前言 本篇文章为我个人在学习JVM时所记录的笔记&#xff0c;内容把部分来自《深入理解java虚拟机》一书&#xff0c;笔记中总结了JVM中一些比较重要的知识点并作出了自己的解释。 java运行时数据区域 程序计数器&#xff08;线程内私有&#xff09; 程序计数器&#xff08;P…
阅读更多...
Java每日一练_模拟面试题4（volatile和synchronized）

Java每日一练_模拟面试题4（volatile和synchronized）

volatile加原子操作能取代synchronized和锁吗&#xff1f;答案是否定的。它能保证单操作原子性&#xff0c;对任意单个volatile变量的读写具有原子性&#xff0c;但对于复合操作不保证原子性&#xff0c;如x。
阅读更多...
智慧公厕系统的重要性与发展

智慧公厕系统的重要性与发展

在城市发展的进程中&#xff0c;智慧公厕系统正逐渐成为一项不可或缺的重要设施。智慧公厕系统利用信息技术和物联网等先进手段&#xff0c;将公共厕所的建设、使用、运营和管理进行信息化整合与优化&#xff0c;实现了公厕运行的高效、智能和可持续发展。 智慧公厕系统的重要性…
阅读更多...
MySQL —— CRUD

MySQL —— CRUD

CRUD CRUD 即增加(Create)、查询(Retrieve)、更新(Update)、删除(Delete)四个单词的首字母缩写。 我们常说增删查改&#xff0c;增删改查… 这里我们的增删查改是对表格的数据行进行操作的~~ 新增 1.1.1 单行数据 全列插入 插入一行新数据行&#xff0c;使用 insert into t…
阅读更多...
【Bug记录】函数错误匹配，非法的间接寻址

【Bug记录】函数错误匹配，非法的间接寻址

项目场景&#xff1a; 当我写模拟vector的时候&#xff0c;写出下面测试代码准备稍微测试一下新写的构造函数 新写的构造函数&#xff0c;n个value构造 问题描述 当写出上面测试代码的时候&#xff0c;会报错&#xff1a; 这是什么鬼&#xff1f;&#xff1f;&#xff1f…
阅读更多...
【老张的程序人生】我命由我不由天：我的计算机教师中级岗之旅

【老张的程序人生】我命由我不由天：我的计算机教师中级岗之旅

在计算机行业的洪流中&#xff0c;作为一名20年计算机专业毕业的博主&#xff0c;我深知这几年就业的坎坷与辉煌。今天&#xff0c;我想与大家分享我的故事&#xff0c;一段关于梦想、挑战与坚持的计算机教师中级岗之旅。希望我的经历能为大家提供一个发展方向&#xff0c;在计…
阅读更多...
CCRC-CISAW信息安全保障人员证书含金量

CCRC-CISAW信息安全保障人员证书含金量

在数字化时代背景下&#xff0c;CISAW认证受到越来越多个人的青睐。 特别是在互联网技术高速发展的今天&#xff0c;随着5G技术的广泛应用&#xff0c;市场对CISAW专业人才的需求急剧增加。 这种职业不仅地位显著&#xff0c;而且职业生涯相对较长。 目前市场上&#xff0c;…
阅读更多...
SAP MIGO新增字段 自定义字段

SAP MIGO新增字段 自定义字段

效果 原先是没有的 清单里面找了没有 自定义字段 待新增字段 F1打开200 screen 加字段 zzplusl
阅读更多...
非负数（0和正数） 限制最大值且保留两位小数，在elementpuls表单中正则自定义验证传更多参数

非负数（0和正数） 限制最大值且保留两位小数，在elementpuls表单中正则自定义验证传更多参数

一、结构 <el-form-item label="单价：" prop="price"><el-inputv-model.trim="formData.price"placeholder="请输入"><template #append>(元)</template></el-input></el-form-item>二、验证方…
阅读更多...
一个为90后设计的Shell，早知道，当年学Shell也不至于那么痛苦了，Star 25K+！

一个为90后设计的Shell，早知道，当年学Shell也不至于那么痛苦了，Star 25K+！

一个现代、用户友好的命令行界面&#xff0c;以其智能特性、语法高亮、实时自动建议、花式标签补全、直观的历史搜索和跨平台支持而著称。它提供了一个美观、易用且功能丰富的Shell环境&#xff0c;旨在简化Shell命令行操作&#xff0c;提高用户的工作效率。号称一个为90后设计…
阅读更多...
数据库|SQLServer数据库：企业管理器的使用

数据库|SQLServer数据库：企业管理器的使用

哈喽&#xff0c;你好啊&#xff0c;我是雷工&#xff01; 之前学习了通过脚本创建数据库数据表以及增删改查的相关操作。 接下来了解企业管理器的使用。 以下为学习笔记。 01 新建数据库 1.1、登录数据库后&#xff0c;选中【数据库】-->右击【新建数据库】。 1.2、可以…
阅读更多...
swift 自定义DatePacker

swift 自定义DatePacker

import Foundationenum AppDatePickerStyle {case KDatePickerDate //年月日case KDatePickerTime //年月日时分case kDatePickerMonth // 年月case KDatePickerSecond //秒}class AppDatePicker: UIView {private let jk_rootView UIApplication.shared.keyWindow!pri…
阅读更多...
电池放电的速率对电池寿命有影响吗？

电池放电的速率对电池寿命有影响吗？

电池放电的速率对电池寿命确实有很大的影响&#xff0c;电池的寿命通常是指电池在正常使用条件下&#xff0c;能够保持其额定容量的时间。电池的容量会随着充放电次数的增加而逐渐减少&#xff0c;这个过程被称为电池的老化。电池的老化速度受到许多因素的影响&#xff0c;其中…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023