RuoYi-Vue3后端API与前端交互

Source

RuoYi-Vue3后端API与前端交互

【免费下载链接】RuoYi-Vue3 🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统 【免费下载链接】RuoYi-Vue3 项目地址: https://gitcode.com/yangzongzhuan/RuoYi-Vue3

文章详细介绍了RuoYi-Vue3项目中后端API与前端交互的设计规范、Axios封装与请求拦截、权限控制与动态菜单实现以及错误处理与日志记录等核心内容。从API设计原则到具体实现，涵盖了前后端交互的各个环节，为开发者提供了高效、安全的开发实践。

API设计与规范

在RuoYi-Vue3项目中，后端API与前端交互的设计遵循了清晰的规范和最佳实践，以确保代码的可维护性和扩展性。以下从API设计原则、请求与响应规范、以及错误处理三个方面展开说明。

API设计原则

  1. RESTful风格
    项目中的API设计遵循RESTful风格，通过HTTP动词（GET、POST、PUT、DELETE等）明确操作意图。例如：

    • GET /api/menu：获取菜单列表
    • POST /api/menu：新增菜单
    • PUT /api/menu/{id}：更新菜单
    • DELETE /api/menu/{id}：删除菜单

  2. 模块化组织
    API按功能模块组织，每个模块对应一个独立的文件。例如，菜单相关的API集中在src/api/menu.js中：

    export const getRouters = () => {
  return request({
    url: '/getRouters',
    method: 'get'
  })
}

  3. 命名一致性
    API命名采用小驼峰式，动词与名词结合，如getRouters、updateUser等，确保语义清晰。

请求与响应规范

  1. 请求封装
    所有API请求通过src/utils/request.js中的axios实例统一封装，支持请求拦截和响应拦截：

    service.interceptors.request.use(config => {
  // 请求拦截逻辑
  return config
})

  2. 响应格式
    后端返回的响应体遵循统一格式：

    {
  "code": 200,
  "msg": "操作成功",
  "data": {}
}
    • code：状态码，200表示成功，其他为错误码。
    • msg：操作描述。
    • data：返回的数据。

  3. 文件下载
    对于文件下载请求，需设置responseType为blob或arraybuffer：

    if (res.request.responseType === 'blob' || res.request.responseType === 'arraybuffer') {
  // 处理文件下载
}

错误处理

  1. 全局错误拦截
    在request.js中统一拦截错误，根据code提示用户：

    service.interceptors.response.use(
  response => {
    const res = response.data
    if (res.code !== 200) {
      // 错误提示逻辑
      return Promise.reject(new Error(res.msg || 'Error'))
    }
    return res
  }
)

  2. 错误码规范
    错误码定义在src/utils/errorCode.js中，便于统一管理：

    export default {
  401: '未授权',
  403: '禁止访问',
  404: '资源不存在'
}

流程图示例

以下为API请求的流程图： mermaid

通过以上规范，RuoYi-Vue3的API设计确保了前后端交互的高效性和一致性。

Axios封装与请求拦截

在前后端分离的开发模式中，前端与后端的交互通常通过HTTP请求完成。RuoYi-Vue3项目中对Axios进行了深度封装，并添加了请求拦截和响应拦截功能，以确保请求的安全性和高效性。以下将详细介绍Axios的封装实现及其核心功能。

1. Axios实例创建与基础配置

首先，项目创建了一个Axios实例，并配置了基础URL和超时时间。基础URL通过环境变量VITE_APP_BASE_API动态获取，确保在不同环境下（开发、测试、生产）能够无缝切换。

import axios from 'axios'

const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 10000
})

2. 请求拦截器

请求拦截器的主要功能是在请求发送前对请求配置进行处理。例如：

  • Token注入：如果请求需要携带Token，则在请求头中添加Authorization字段。
  • 参数处理：对GET请求的参数进行序列化处理。
  • 防重复提交：通过缓存机制防止用户在短时间内重复提交相同请求。
service.interceptors.request.use(config => {
  const isToken = (config.headers || {}).isToken === false
  if (getToken() && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + getToken()
  }
  if (config.method === 'get' && config.params) {
    config.url = config.url + '?' + tansParams(config.params)
    config.params = {}
  }
  return config
}, error => {
  Promise.reject(error)
})

3. 响应拦截器

响应拦截器用于统一处理后端返回的数据。主要功能包括：

  • 状态码检查：根据状态码判断请求是否成功，失败时显示错误提示。
  • 二进制数据处理：针对文件下载等场景，直接返回二进制数据。
  • 会话过期处理：当检测到会话过期时，提示用户重新登录。
service.interceptors.response.use(res => {
  const code = res.data.code || 200
  const msg = errorCode[code] || res.data.msg || errorCode['default']
  if (code === 401) {
    ElMessageBox.confirm('会话已过期，请重新登录', '提示', {
      confirmButtonText: '重新登录',
      cancelButtonText: '取消'
    }).then(() => {
      useUserStore().logOut().then(() => {
        location.href = '/index'
      })
    })
    return Promise.reject('会话已过期')
  } else if (code !== 200) {
    ElMessage.error(msg)
    return Promise.reject(msg)
  }
  return res.data
}, error => {
  ElMessage.error(error.message)
  return Promise.reject(error)
})

4. 通用下载方法

项目封装了一个通用的文件下载方法，支持Blob数据处理和错误提示。

export function download(url, params, filename) {
  return service.post(url, params, {
    responseType: 'blob'
  }).then(data => {
    const blob = new Blob([data])
    saveAs(blob, filename)
  }).catch(error => {
    ElMessage.error('下载失败')
  })
}

5. 流程图展示

以下是Axios请求的完整流程：

mermaid

通过以上封装，RuoYi-Vue3项目实现了高效、安全的HTTP请求管理，为开发者提供了便捷的API调用方式。

权限控制与动态菜单实现

RuoYi-Vue3 是一个基于 SpringBoot 和 Vue3 的前后端分离快速开发框架，其权限控制与动态菜单功能是其核心特性之一。通过结合 Vue3 的响应式特性和后端 API 的动态数据加载，实现了灵活且高效的权限管理机制。以下将详细介绍其实现原理和关键代码示例。

权限控制实现

权限控制的核心在于前端根据用户的角色动态加载可访问的路由和菜单。RuoYi-Vue3 通过以下步骤实现：

  1. 用户登录与权限获取
    用户登录后，后端返回用户的角色信息和权限标识。前端通过 src/api/login.js 中的 getInfo 方法获取用户权限数据。

    export function getInfo() {
  return request({
    url: '/getInfo',
    method: 'get'
  })
}

  2. 权限校验
    前端通过 src/directive/permission 中的指令（如 hasPermi 和 hasRole）对按钮和菜单进行权限校验。例如：

    // hasPermi.js
export default {
  mounted(el, binding) {
    const { value } = binding
    const permissions = store.getters && store.getters.permissions
    if (value && !permissions.includes(value)) {
      el.parentNode && el.parentNode.removeChild(el)
    }
  }
}

  3. 动态路由加载
    通过 src/router/index.js 中的 addRoutes 方法动态加载用户可访问的路由：

    const addRoutes = () => {
  const routes = filterAsyncRoutes(asyncRoutes, roles)
  router.addRoutes(routes)
}

动态菜单实现

动态菜单的实现依赖于后端返回的菜单数据和前端的递归渲染。以下是关键步骤：

  1. 菜单数据获取
    后端通过 src/api/menu.js 中的 getRouters 方法返回用户的菜单数据：

    export function getRouters() {
  return request({
    url: '/getRouters',
    method: 'get'
  })
}

  2. 菜单递归渲染
    前端通过 src/layout/components/Sidebar 组件递归渲染菜单树：

    <template>
  <el-menu :default-active="activeMenu" :collapse="isCollapse">
    <sidebar-item v-for="route in routes" :key="route.path" :item="route" />
  </el-menu>
</template>

  3. 状态管理
    菜单和权限数据存储在 Vuex 中（src/store/modules/permission.js），便于全局共享：

    const state = {
  routes: [],
  addRoutes: []
}

流程图示例

以下是一个权限控制与动态菜单加载的流程图：

mermaid

关键代码示例

文件路径 功能描述 代码片段
src/api/login.js 获取用户权限数据 getInfo()
src/directive/permission 权限校验指令 hasPermi 和 hasRole
src/router/index.js 动态路由加载 addRoutes()
src/layout/components/Sidebar 动态菜单渲染 递归渲染 sidebar-item
src/store/modules/permission.js 权限状态管理 state.routes 和 state.addRoutes

通过以上机制，RuoYi-Vue3 实现了灵活的权限控制和动态菜单功能，为开发者提供了高效的管理工具。

错误处理与日志记录

在RuoYi-Vue3中，错误处理与日志记录是前后端交互中至关重要的一环。通过合理的错误处理和日志记录机制，可以快速定位问题、优化系统性能，并提升用户体验。本节将详细介绍RuoYi-Vue3中的错误处理与日志记录实现方式，包括错误码定义、日志记录API以及前后端交互中的错误捕获与处理。

错误码定义

RuoYi-Vue3通过errorCode.js文件定义了常见的错误码及其对应的错误信息。以下是一个简单的错误码定义示例：

export default {
  '401': '认证失败，无法访问系统资源',
  '403': '当前操作没有权限',
  '404': '访问资源不存在',
  'default': '系统未知错误，请反馈给管理员'
}

这些错误码会在前后端交互中被捕获并显示给用户，帮助用户理解操作失败的原因。

日志记录API

RuoYi-Vue3提供了丰富的日志记录功能，包括操作日志和登录日志。以下是一些关键的日志记录API：

  1. 操作日志
    操作日志用于记录用户的操作行为，例如添加、修改或删除数据。相关API定义在src/api/monitor/operlog.js中：
export function listOperlog(query) {
  return request({
    url: '/monitor/operlog/list',
    method: 'get',
    params: query
  })
}

export function cleanOperlog() {
  return request({
    url: '/monitor/operlog/clean',
    method: 'delete'
  })
}
  1. 登录日志
    登录日志用于记录用户的登录行为，包括登录成功和失败的信息。相关API定义在src/api/monitor/logininfor.js中：
export function listLogininfor(query) {
  return request({
    url: '/monitor/logininfor/list',
    method: 'get',
    params: query
  })
}

export function cleanLogininfor() {
  return request({
    url: '/monitor/logininfor/clean',
    method: 'delete'
  })
}

前后端交互中的错误处理

在前后端交互中，RuoYi-Vue3通过request.js文件实现了统一的错误处理机制。以下是一个典型的错误处理流程：

mermaid

错误捕获与日志记录

在开发过程中，可以通过以下方式捕获并记录错误：

  1. 前端错误捕获
    前端可以通过try-catch或全局错误处理器捕获异常，并将其记录到日志中：
try {
  // 业务逻辑
} catch (error) {
  console.error('捕获到错误:', error);
  ElMessage.error('操作失败，请重试或联系管理员');
}
  1. 后端日志记录
    后端可以通过日志框架（如Log4j或Slf4j）记录详细的错误信息，便于后续排查问题：
@RestController
@RequestMapping("/monitor/operlog")
public class OperLogController {
    private static final Logger log = LoggerFactory.getLogger(OperLogController.class);

    @GetMapping("/list")
    public TableDataInfo list(SysOperLog operLog) {
        log.info("查询操作日志列表，参数: {}", operLog);
        // 业务逻辑
    }
}

总结

通过上述机制，RuoYi-Vue3实现了完善的错误处理与日志记录功能，帮助开发者快速定位问题并优化系统性能。在实际开发中，建议结合业务需求进一步扩展日志记录的内容和范围，以提升系统的可维护性和稳定性。

总结

通过本文的介绍，我们了解到RuoYi-Vue3在前后端交互方面的完整设计和实现。从API的RESTful风格设计到Axios的深度封装，再到权限控制和动态菜单的实现，以及完善的错误处理与日志记录机制，RuoYi-Vue3为开发者提供了一套高效、安全且易于维护的前后端分离解决方案。这些最佳实践不仅提升了开发效率，也增强了系统的稳定性和可扩展性。

【免费下载链接】RuoYi-Vue3 🎉 (RuoYi)官方仓库 基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统 【免费下载链接】RuoYi-Vue3 项目地址: https://gitcode.com/yangzongzhuan/RuoYi-Vue3