若依【（前后端分离版）SpringBoot+Vue3】-EW帮帮网

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

什么是若依
使用若依
验证码的前端实现
- 📌 前后端验证码流程说明文档

什么是若依

提示：这里可以添加本文要记录的大概内容：

若依是开源项目，便于二次开发，百度直接搜索：若依官网

1、减少了自己的代码量

2、学习优秀开源项目底层的编程思想，设计思路，提高自己的编程能力

使用若依

使用开源项目的步骤：

1、下载并运行
在这里插入图片描述
启动后端：

启动前端：VS CODE 插件GitHub Copilot Chat，Agent模式下
在这里插入图片描述

在这里插入图片描述
项目成功启动页面：

2、看懂业务流程

3、进行二次开发

验证码的前端实现

后端生成一个表达式

1+1=2
1+1=?@2

1+1=?转成图片，传到前端展示，答案2存入Redis

输入答案点击登录，就把表单存入后台了，这时候从Redis中把正确答案拿出来，两个答案对比

📌 前后端验证码流程说明文档

1、前端初始化验证码

在 Vue 的 <script setup> 中，组件挂载时会调用 getCode() 函数初始化验证码。

getCode() 函数逻辑：

getCode().then(res => {
  captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled

  if (captchaEnabled.value) {
    codeUrl.value = "data:image/gif;base64," + res.img
    loginForm.value.uuid = res.uuid
  }
})

captchaEnabled.value：根据后端返回决定是否启用验证码（默认启用）
codeUrl.value：将 base64 图片数据拼接为可直接显示的 URL
loginForm.value.uuid：保存后端返回的验证码唯一标识（UUID）

2、前端界面显示

在模板中通过 v-if="captchaEnabled" 控制验证码区域的显示：

<el-form-item prop="code" v-if="captchaEnabled">
  <el-input v-model="loginForm.code" placeholder="验证码" />
  <div class="login-code">
    <img :src="codeUrl" @click="getCode" title="点击刷新验证码" />
  </div>
</el-form-item>

点击图片时重新调用 getCode()，刷新验证码
用户输入验证码后，与 uuid 一起提交给后端

3、后端生成验证码接口（GET /captchaImage）

通过getCodeImg引入
在这里插入图片描述

找到对应代码：
在这里插入图片描述
解释：
定义一个名为 getCodeImg 的函数
request：这是封装好的 Axios 请求函数，通常是项目中封装的 HTTP 请求方法。
整个 request({ ... }) 是一个 HTTP 请求配置对象。
请求的后端接口地址是 /captchaImage

使用 HTTP 的 GET 方法发送请求，用于获取数据

设置请求超时时间为 20 秒（20000 毫秒），如果 20 秒内没有返回结果，请求将自动中断，并进入 .catch() 分支。

在登录页F12
在这里插入图片描述

打开 request 文件
在这里插入图片描述
创建一个 Axios 实例 service，用于发起 HTTP 请求
配置该实例的基础 URL 为一个环境变量，实现环境自适应
设置请求超时时间为 10 秒，防止请求长时间挂起

值在配置文件中定义，配置文件：
在这里插入图片描述

4、用户提交登录信息

用户点击登录时，前端调用 handleLogin() 提交数据：

userStore.login(loginForm.value)

提交内容包括：

username：用户名
password：密码
code：用户输入的验证码
uuid：当前验证码的唯一标识

5、后端验证验证码逻辑（POST /login）

登录请求：

export function login(username, password, code, uuid) {
  return request({
    url: '/login',
    method: 'post',
    data: { username, password, code, uuid }
  })
}

后端伪代码逻辑：

function login(username, password, code, uuid) {
  // 1. 检查是否启用验证码
  if (captchaEnabled) {

    // 2. 从 Redis 获取验证码
    String redisCode = redis.get(uuid);

    // 3. 验证码比对（忽略大小写）
    if (!redisCode || !redisCode.equalsIgnoreCase(code)) {
      return error("验证码错误");
    }

    // 4. 删除已使用的验证码
    redis.delete(uuid);
  }

  // 5. 继续账号密码验证...
}

6、登录失败处理（前端）

userStore.login(loginForm.value).catch(() => {
  loading.value = false
  if (captchaEnabled.value) {
    getCode() // 登录失败时刷新验证码
  }
})

登录失败时自动刷新验证码，防止暴力破解
用户点击图片也可手动刷新验证码

📋完整流程图

getCodeImg()
    ↓
调用 request()
    ↓
发送 GET 请求到 /captchaImage
    ↓
请求头中设置 isToken = false（表示不需要 token）
    ↓
等待响应（最多 20 秒）
    ↓
返回 base64 图片和 uuid

若依【（前后端分离版）SpringBoot+Vue3】