Vue + RuoYi 前后端分离入门手册

发布于：2025-07-03 ⋅ 阅读:(34) ⋅ 点赞:(0)

Vue + RuoYi 前后端分离技术栈是一个非常流行且成熟的企业级后台管理系统开发方案，尤其在国内 Java 开发社区中广泛应用。它结合了现代化的前端框架 Vue.js 和基于 Spring Boot 的后端框架 RuoYi，提供了开箱即用的权限管理、代码生成、监控等功能，极大地加速了后台管理系统的开发。

以下是该技术栈的核心要点解析：

1. 技术栈组成

  • 前端 (Frontend):

    • Vue.js: 渐进式 JavaScript 框架，负责构建用户界面和交互逻辑。核心库 + 生态系统 (Vue Router, Vuex)。

    • Vue CLI / Vite: 项目脚手架和构建工具。

    • UI 框架: 通常采用 Element UI (Vue 2) 或 Element Plus (Vue 3)，提供丰富的后台管理组件。RuoYi-Vue 默认集成 Element UI。

    • Axios: 主流的 HTTP 客户端库，用于向后端 API 发起请求。

    • Vue Router: 实现单页面应用 (SPA) 的路由管理。

    • Vuex / Pinia: 状态管理模式库，管理跨组件的共享状态（用户信息、权限等）。

    • 其他工具: ESLint, Prettier, Sass/Less 等。

  • 后端 (Backend):

    • RuoYi: 基于 Spring Boot、Spring Security、MyBatis / MyBatis-Plus 构建的开源权限管理系统框架。

    • Spring Boot: 快速构建独立、生产级的 Spring 应用。

    • Spring Security: 提供强大的认证 (Authentication) 和授权 (Authorization) 功能，是 RuoYi 权限体系的核心。

    • MyBatis / MyBatis-Plus: ORM 框架，操作数据库。MyBatis-Plus 提供了大量便捷的 CRUD 方法。

    • 数据库: 支持 MySQL, Oracle, PostgreSQL, SQL Server 等主流关系型数据库。

    • Redis: 常用于缓存（菜单、字典、配置等）、会话管理、分布式锁。

    • Maven / Gradle: 项目构建和依赖管理。

    • Swagger / Knife4j: API 文档生成工具，方便前后端协作。

2. 前后端分离架构原理

  1. 物理分离：

    • 前端项目 (Vue) 和后端项目 (RuoYi) 是两个独立的代码仓库和部署单元。

    • 前端代码最终被构建成静态文件 (HTML, CSS, JS)。

  2. 通信方式：

    • 前端 Vue 应用通过 HTTP(S) 协议，使用 RESTful API 或 自定义 API 与后端 RuoYi 进行数据交互。

    • 主要使用 axios 发送 GET, POST, PUT, DELETE 等请求。

    • 数据格式通常为 JSON。

  3. 职责清晰：

    • 前端 (Vue): 负责 UI 渲染、用户交互、路由导航、调用后端 API 获取/提交数据、管理前端状态 (Vuex/Pinia)。不直接操作数据库。

    • 后端 (RuoYi): 负责接收 HTTP 请求、业务逻辑处理、数据访问 (操作数据库)、权限校验、数据处理、返回 JSON 响应。不关心 HTML 渲染。

  4. 部署独立：

    • 前端: 静态文件部署到 Nginx、Apache、Tomcat (作为静态资源)、对象存储 (OSS)、CDN 等 Web 服务器或云服务上。

    • 后端: 打包成可执行的 JAR/WAR 文件，部署到 Tomcat、Jetty 等 Servlet 容器，或直接通过 java -jar 运行 (Spring Boot 内嵌容器)。

    • Nginx 常作为反向代理: 统一接收客户端请求，根据路径 (/api/ 转发给后端，/ 或 /static/ 返回前端静态文件)，并解决跨域问题。

3. RuoYi-Vue 前后端分离版关键特性

  • 登录认证: JWT (JSON Web Token) 或 Session 方式实现登录状态管理。RuoYi 后端提供登录接口 /login，前端调用获取 token/session，后续请求携带 token/session 进行认证。

  • 权限控制:

    • 后端: Spring Security 基于 URL 和方法注解 (@PreAuthorize) 进行细粒度权限校验。

    • 前端: Vue Router 的导航守卫 (beforeEach) 根据从后端获取的用户角色/权限信息，动态生成可访问的路由表，控制菜单和按钮 (v-hasPermi, v-hasRole) 的显示/隐藏。核心是后端控制权限，前端负责展示控制。

  • 动态路由: 前端根据后端返回的用户菜单权限列表，使用 Vue Router 的 addRoutes (Vue2) 或 addRoute (Vue3) 动态添加可访问的路由。

  • 状态管理 (Vuex/Pinia): 集中管理用户信息、权限信息、全局配置、标签页状态等，方便组件间共享和响应式更新。

  • API 交互: Axios 被封装，统一处理请求拦截 (添加 token)、响应拦截 (处理错误、消息提示)、基础 URL 设置等。

  • 跨域问题 (CORS): 开发环境下，Vue CLI 通过 devServer.proxy 配置代理解决。生产环境下，由 Nginx 反向代理或后端配置 CORS (@CrossOrigin 或全局配置) 解决。

4. 开发流程 (简化版)

  1. 环境准备: 安装 Node.js, npm/yarn/pnpm, Java JDK, Maven/Gradle, IDE (VSCode/WebStorm, IDEA/Eclipse), 数据库 (MySQL), Redis。

  2. 获取代码:

    • 从 RuoYi 官方 Gitee/GitHub 克隆或下载 RuoYi-Vue 前后端分离版本项目。

    • 通常包含 ruoyi-ui (前端 Vue) 和 ruoyi (后端 Spring Boot) 两个目录或项目。

  3. 后端启动:

    • 导入后端项目到 IDEA/Eclipse。

    • 配置 application.yml (数据库连接、Redis 连接、项目端口等)。

    • 运行主启动类 (RuoYiApplication.java)。

    • 初始化数据库脚本 (sql 目录)。

  4. 前端启动:

    • 进入 ruoyi-ui 目录。

    • 运行 npm install / yarn install / pnpm install 安装依赖。

    • 配置 vue.config.js 中的 devServer.proxy 指向后端地址 (解决开发环境跨域)。

    • 运行 npm run dev / yarn dev / pnpm dev 启动开发服务器。

  5. 开发与联调:

    • 前端：开发 Vue 组件、页面、路由、调用 API。

    • 后端：开发 Controller 接口、Service 业务逻辑、Mapper 数据访问。

    • 使用 Swagger/Knife4j (http://localhost:后端端口/doc.html) 查看和测试 API。

    • 前后端通过定义好的 API 接口和数据结构进行联调。

  6. 构建与部署:

    • 前端: 运行 npm run build:prod / yarn build:prod / pnpm build:prod 生成 dist 静态文件目录。部署到 Nginx 等 Web 服务器。

    • 后端: 运行 Maven mvn clean package (或 IDE 打包) 生成 ruoyi-admin/target/ruoyi-admin.jar。通过 java -jar ruoyi-admin.jar 运行或部署到 Tomcat。

    • Nginx 配置示例:

      server {
    listen 80;
    server_name yourdomain.com; # 或 localhost

    # 前端静态资源
    location / {
        root   /path/to/ruoyi-ui/dist; # 替换为你的 dist 目录实际路径
        index  index.html index.htm;
        try_files $uri $uri/ /index.html; # 支持 Vue Router history 模式
    }

    # 后端 API 代理
    location /prod-api/ { # 注意：RuoYi 前端请求通常以 /prod-api/ 开头代理到后端
        proxy_pass http://localhost:8080/; # 替换为后端实际地址和端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        # 如果后端有上下文路径，可能需要添加：proxy_set_header X-Forwarded-Prefix /context-path;
    }

    # 可能还需要代理 websocket、文件上传下载等路径
}

5. 优势

  • 高效开发: RuoYi 提供基础架构和常用功能（权限、监控、代码生成），Vue 提供现代化的高效前端开发体验。

  • 职责分离: 前后端团队可并行开发，通过 API 契约协作。

  • 技术栈先进: Vue 生态丰富，Spring Boot 成熟稳定。

  • 可维护性好: 代码结构清晰，模块化程度高。

  • 性能与扩展性: 前端 SPA 体验好，后端微服务友好（RuoYi 可拆分为模块）。

  • 社区活跃: RuoYi 在国内有庞大的用户群和完善的中文文档、社区支持。

6. 学习资源

  1. 官方文档:

    • RuoYi 官方文档: 这是最核心的资源，包含部署指南、使用手册、常见问题解答。务必仔细阅读。

    • Vue.js 官方文档: 掌握 Vue 核心概念 (组件、指令、生命周期、响应式、路由、状态管理)。

    • Element UI / Element Plus 文档: 熟悉常用组件的用法和 API。

    • Spring Boot 官方文档: 理解 Spring Boot 核心原理和配置。

    • Spring Security 官方文档: 深入理解权限控制的实现。

    • MyBatis-Plus 文档: 学习高效的数据库操作方式。

  2. 代码本身: 下载 RuoYi-Vue 项目源码，仔细阅读前后端代码，尤其是登录认证、权限控制、动态路由、API 封装、代码生成器实现等核心模块。

  3. 在线教程/博客: Gitee/GitHub Issues, CSDN, 掘金，知乎等平台有大量关于 RuoYi-Vue 的部署、使用、二次开发、问题解决的教程和文章。

  4. 视频教程: Bilibili, 慕课网等平台有相关的入门和实战视频。

总结： Vue + RuoYi 前后端分离技术栈为开发企业级后台管理系统提供了一个功能强大、开箱即用、社区支持良好的全栈解决方案。掌握它需要理解前后端分离的架构思想、Vue 前端开发技术、Spring Boot (特别是 Spring Security) 后端开发技术以及两者的协作方式（API 设计、权限控制、动态路由、状态管理）。通过阅读官方文档、研究源码和不断实践，可以高效地利用该技术栈构建复杂的后台管理系统。

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布