万字长文！芋道 RuoYi-Vue-Pro 全方位开发指南：从入门到企业级实战-优快云博客

万字长文！芋道 RuoYi-Vue-Pro 全方位开发指南：从入门到企业级实战

【免费下载链接】ruoyi-vue-pro 🔥 官方推荐 🔥 RuoYi-Vue 全新 Pro 版本，优化重构所有功能。基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序，支持 RBAC 动态权限、数据权限、SaaS 多租户、Flowable 工作流、三方登录、支付、短信、商城、CRM、ERP、AI 等功能。你的 ⭐️ Star ⭐️，是作者生发的动力！项目地址: https://gitcode.com/yudaocode/ruoyi-vue-pro

引言：你还在为这些问题困扰吗？

作为一名开发者，你是否在寻找一个功能全面、架构优良的后台管理系统框架？你是否在为如何快速搭建企业级应用而苦恼？你是否希望掌握 Spring Boot + Vue 技术栈的最佳实践？

本文将为你提供一份全面的 RuoYi-Vue-Pro 项目开发指南，帮助你从入门到精通，轻松应对企业级应用开发挑战。读完本文，你将能够：

快速搭建 RuoYi-Vue-Pro 开发环境
深入理解项目架构设计与核心功能
掌握权限管理、工作流、多租户等高级特性
学会扩展和定制系统以满足业务需求
了解项目部署与运维的最佳实践

1. 项目简介

1.1 项目概述

RuoYi-Vue-Pro（芋道源码）是 RuoYi-Vue 的全新 Pro 版本，基于 Spring Boot + MyBatis Plus + Vue & Element 实现的后台管理系统 + 微信小程序。该项目优化重构了所有功能，提供了更强大、更灵活的企业级解决方案。

1.2 核心功能

RuoYi-Vue-Pro 提供了以下核心功能：

RBAC 动态权限管理
数据权限控制
SaaS 多租户支持
Flowable 工作流引擎
三方登录集成
支付功能支持
短信服务集成
商城系统
CRM 客户关系管理
ERP 企业资源计划
AI 功能集成

1.3 技术栈

后端技术栈

Spring Boot：快速开发 Spring 应用的框架
MyBatis Plus：MyBatis 的增强工具，提供 CRUD 操作
Spring Security：身份认证和授权框架
Redis：高性能缓存数据库
Flowable：工作流引擎
MySQL/Oracle/PostgreSQL 等：关系型数据库

前端技术栈

Vue：渐进式 JavaScript 框架
Element UI：基于 Vue 的 UI 组件库
Vue Router：Vue 的路由管理
Vuex：Vue 的状态管理
Axios：HTTP 请求库

2. 环境搭建

2.1 开发环境要求

环境	版本要求
JDK	1.8 及以上
Maven	3.0 及以上
Node.js	12.0 及以上
MySQL	5.7 及以上
Redis	3.0 及以上

2.2 项目获取

git clone https://gitcode.com/yudaocode/ruoyi-vue-pro.git

2.3 后端环境搭建

2.3.1 数据库配置

创建数据库

CREATE DATABASE ruoyi_vue_pro CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;

导入数据库脚本

项目提供了多种数据库的脚本，位于 sql 目录下。以 MySQL 为例：

cd sql/mysql
mysql -u root -p ruoyi_vue_pro < ruoyi-vue-pro.sql
mysql -u root -p ruoyi_vue_pro < quartz.sql

2.3.2 项目配置

修改 yudao-server/src/main/resources/application-dev.yml 文件，配置数据库连接：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/ruoyi_vue_pro?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
    username: root
    password: 123456

2.3.3 启动项目

cd yudao-server
mvn spring-boot:run

2.4 前端环境搭建

2.4.1 安装依赖

cd yudao-ui/yudao-ui-admin-vue3
npm install

2.4.2 启动开发服务器

npm run dev

2.4.3 访问系统

打开浏览器，访问 http://localhost:8080，使用默认账号密码登录：

用户名：admin
密码：admin123

3. 项目架构

3.1 整体架构

RuoYi-Vue-Pro 采用前后端分离的架构设计，整体分为以下几个部分：

┌─────────────────┐      ┌─────────────────┐      ┌─────────────────┐
│   前端应用      │      │   后端服务      │      │    数据存储     │
│  (Vue + Element)│◄────►│ (Spring Boot)   │◄────►│ (MySQL/Redis等) │
└─────────────────┘      └─────────────────┘      └─────────────────┘

3.2 后端架构

后端采用分层架构设计，主要分为以下几层：

Controller：请求入口，处理 HTTP 请求
Service：业务逻辑处理
Repository：数据访问层
Entity：数据库实体
DTO：数据传输对象
VO：视图对象
Util：工具类

3.3 模块划分

项目采用模块化设计，主要模块包括：

yudao-framework：框架核心模块
yudao-module-system：系统管理模块
yudao-module-user：用户管理模块
yudao-module-bpm：工作流模块
yudao-module-infra：基础设施模块
yudao-module-mall：商城模块
yudao-module-crm：CRM 模块
yudao-module-erp：ERP 模块
yudao-module-ai：AI 模块

4. 核心功能详解

4.1 权限管理

RuoYi-Vue-Pro 采用 RBAC（基于角色的访问控制）模型，实现了细粒度的权限控制。

4.1.1 权限模型

mermaid

4.1.2 权限注解

项目提供了灵活的权限注解，方便开发者控制接口访问权限：

@PreAuthorize("@ss.hasPermission('system:user:list')")
@GetMapping("/list")
public TableDataInfo list(SysUser user) {
    // ...
}

4.2 数据权限

RuoYi-Vue-Pro 支持数据级别的权限控制，可以根据用户角色限制其能访问的数据范围。

4.2.1 数据权限注解

@DataScope(deptAlias = "d", userAlias = "u")
@GetMapping("/list")
public TableDataInfo list(SysUser user) {
    // ...
}

4.2.2 数据权限规则

系统内置了多种数据权限规则，如：

全部数据权限
部门数据权限
部门及以下数据权限
个人数据权限
自定义数据权限

4.3 工作流

项目集成了 Flowable 工作流引擎，支持流程定义、流程实例、任务管理等功能。

4.3.1 工作流示例

mermaid

4.3.2 流程定义示例

<process id="leaveProcess" name="请假流程">
    <startEvent id="startEvent"/>
    <sequenceFlow sourceRef="startEvent" targetRef="submitTask"/>
    
    <userTask id="submitTask" name="提交申请" assignee="${submitter}"/>
    <sequenceFlow sourceRef="submitTask" targetRef="deptApproveTask"/>
    
    <userTask id="deptApproveTask" name="部门审批" assignee="${deptLeader}"/>
    <sequenceFlow sourceRef="deptApproveTask" targetRef="hrApproveTask"/>
    
    <userTask id="hrApproveTask" name="人事审批" assignee="${hr}"/>
    <sequenceFlow sourceRef="hrApproveTask" targetRef="managerApproveTask"/>
    
    <userTask id="managerApproveTask" name="经理审批" assignee="${manager}"/>
    <sequenceFlow sourceRef="managerApproveTask" targetRef="endEvent"/>
    
    <endEvent id="endEvent"/>
</process>

4.4 多租户

RuoYi-Vue-Pro 支持 SaaS 多租户模式，可通过配置实现不同租户数据隔离。

4.4.1 多租户模式

系统支持多种多租户模式：

共享数据库，独立 Schema
独立数据库

4.4.2 租户配置示例

yudao:
  tenant:
    enable: true
    type: COLUMN
    column: tenant_id
    ignore-tables:
      - sys_config
      - sys_dict_type
      - sys_dict_data

5. 核心模块详解

5.1 系统管理模块

系统管理模块提供了用户管理、角色管理、菜单管理、部门管理等基础功能。

5.1.1 用户管理

用户管理功能包括用户的增删改查、密码重置、状态管理等。

@RestController
@RequestMapping("/system/user")
public class SysUserController extends BaseController {
    @Autowired
    private ISysUserService userService;

    @GetMapping("/list")
    public TableDataInfo list(SysUser user) {
        startPage();
        List<SysUser> list = userService.selectUserList(user);
        return getDataTable(list);
    }

    @PostMapping
    public AjaxResult add(@Validated @RequestBody SysUser user) {
        if (UserConstants.NOT_UNIQUE.equals(userService.checkUserNameUnique(user.getUserName()))) {
            return AjaxResult.error("新增用户'" + user.getUserName() + "'失败，登录账号已存在");
        } else if (StringUtils.isNotEmpty(user.getPhonenumber()) 
                && UserConstants.NOT_UNIQUE.equals(userService.checkPhoneUnique(user))) {
            return AjaxResult.error("新增用户'" + user.getUserName() + "'失败，手机号码已存在");
        } else if (StringUtils.isNotEmpty(user.getEmail()) 
                && UserConstants.NOT_UNIQUE.equals(userService.checkEmailUnique(user))) {
            return AjaxResult.error("新增用户'" + user.getUserName() + "'失败，邮箱账号已存在");
        }
        user.setCreateBy(getUsername());
        return toAjax(userService.insertUser(user));
    }
}

5.2 基础设施模块

基础设施模块提供了字典管理、参数配置、日志管理等功能。

5.2.1 字典管理

字典管理用于维护系统中的静态数据，如性别、状态等。

@Service
public class SysDictTypeServiceImpl implements ISysDictTypeService {
    @Autowired
    private SysDictTypeMapper dictTypeMapper;

    @Override
    public List<SysDictType> selectDictTypeList(SysDictType dictType) {
        return dictTypeMapper.selectDictTypeList(dictType);
    }

    @Override
    @CacheEvict(value = "dict", allEntries = true)
    public int insertDictType(SysDictType dictType) {
        return dictTypeMapper.insertDictType(dictType);
    }
}

5.3 工作流模块

工作流模块基于 Flowable 实现，提供流程定义、流程实例、任务管理等功能。

5.3.1 流程实例管理

@Service
public class BpmProcessInstanceServiceImpl implements BpmProcessInstanceService {
    @Autowired
    private RuntimeService runtimeService;

    @Autowired
    private TaskService taskService;

    @Override
    public ProcessInstance createProcessInstance(Long processDefinitionId, String businessKey, 
                                                Map<String, Object> variables) {
        ProcessDefinition processDefinition = repositoryService.createProcessDefinitionQuery()
                .processDefinitionId(processDefinitionId)
                .singleResult();
        
        return runtimeService.startProcessInstanceById(processDefinitionId, businessKey, variables);
    }
}

6. 前端开发

6.1 项目结构

yudao-ui-admin-vue3 目录结构如下：

├── public/
├── src/
│   ├── api/           # API 请求
│   ├── assets/        # 静态资源
│   ├── components/    # 公共组件
│   ├── directive/     # 自定义指令
│   ├── hooks/         # 自定义钩子
│   ├── layouts/       # 布局组件
│   ├── router/        # 路由配置
│   ├── store/         # 状态管理
│   ├── styles/        # 样式文件
│   ├── utils/         # 工具函数
│   ├── views/         # 页面组件
│   ├── App.vue        # 应用入口
│   └── main.js        # 入口文件
├── .env.development   # 开发环境配置
├── .env.production    # 生产环境配置
├── package.json       # 项目依赖
└── vite.config.js     # Vite 配置

6.2 组件开发

以用户列表组件为例：

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-input v-model="queryParams.username" placeholder="请输入用户名" clearable @keyup.enter="handleQuery" />
      </el-col>
      <el-col :span="8">
        <el-input v-model="queryParams.phonenumber" placeholder="请输入手机号码" clearable @keyup.enter="handleQuery" />
      </el-col>
      <el-col :span="8">
        <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="resetQuery">重置</el-button>
      </el-col>
    </el-row>

    <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="用户ID" prop="userId" width="100" align="center" />
      <el-table-column label="用户名" prop="username" width="120" />
      <el-table-column label="姓名" prop="nickName" width="120" />
      <el-table-column label="部门" prop="deptName" width="150" />
      <el-table-column label="手机号码" prop="phonenumber" width="130" />
      <el-table-column label="状态" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleView(scope.row)">查看</el-button>
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="text" size="small" @click="handleResetPwd(scope.row)">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination 
      v-show="total > 0" 
      :total="total" 
      :page.sync="queryParams.pageNum" 
      :limit.sync="queryParams.pageSize" 
      @pagination="handleQuery"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { listUser, getUser, delUser, putUser, addUser, resetUserPwd } from '@/api/system/user';
import Pagination from '@/components/Pagination/index.vue';

const userList = ref([]);
const loading = ref(false);
const total = ref(0);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  username: '',
  phonenumber: ''
});

const getList = () => {
  loading.value = true;
  listUser(queryParams).then(response => {
    userList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
};

onMounted(() => {
  getList();
});

const handleQuery = () => {
  queryParams.pageNum = 1;
  getList();
};

const resetQuery = () => {
  queryParams.username = '';
  queryParams.phonenumber = '';
  handleQuery();
};
</script>

6.3 API 请求

使用 axios 封装 API 请求：

// src/api/system/user.js
import request from '@/utils/request';

export function listUser(query) {
  return request({
    url: '/system/user/list',
    method: 'get',
    params: query
  });
}

export function getUser(userId) {
  return request({
    url: '/system/user/' + userId,
    method: 'get'
  });
}

export function addUser(data) {
  return request({
    url: '/system/user',
    method: 'post',
    data: data
  });
}

7. 扩展与定制

7.1 新增业务模块

以新增"客户管理"模块为例：

创建后端模块 yudao-module-customer
定义实体类 Customer
创建 Mapper、Service、Controller
配置路由和权限
开发前端页面

7.2 自定义权限

新增权限标识
在代码中使用 @PreAuthorize 注解
在前端配置权限按钮

7.3 集成第三方服务

以集成短信服务为例：

@Service
public class SmsServiceImpl implements ISmsService {
    @Autowired
    private SmsConfig smsConfig;
    
    @Autowired
    private AliyunSmsClient aliyunSmsClient;
    
    @Override
    public boolean sendSms(String phone, String templateId, Map<String, String> params) {
        if (SmsPlatform.ALIYUN.equals(smsConfig.getPlatform())) {
            return aliyunSmsClient.send(phone, templateId, params);
        }
        // 其他平台实现
        return false;
    }
}

8. 部署与运维

8.1 打包

8.1.1 后端打包

mvn clean package -Dmaven.test.skip=true

8.1.2 前端打包

cd yudao-ui/yudao-ui-admin-vue3
npm run build:prod

8.2 Docker 部署

项目提供了 Docker 部署配置，位于 script/docker 目录下：

# docker-compose.yml
version: '3'
services:
  ruoyi-vue-pro:
    build:
      context: ../
      dockerfile: ./yudao-server/Dockerfile
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
      - DB_HOST=mysql
      - DB_PORT=3306
      - DB_NAME=ruoyi_vue_pro
      - DB_USER=root
      - DB_PASSWORD=root
    depends_on:
      - mysql
      - redis

  mysql:
    image: mysql:8.0
    ports:
      - "3306:3306"
    environment:
      - MYSQL_ROOT_PASSWORD=root
      - MYSQL_DATABASE=ruoyi_vue_pro
    volumes:
      - ./sql/mysql:/docker-entrypoint-initdb.d

  redis:
    image: redis:6.2
    ports:
      - "6379:6379"

启动服务：

cd script/docker
docker-compose up -d

8.3 服务器部署

项目提供了部署脚本，位于 script/shell 目录下：

# deploy.sh
#!/bin/bash
# 部署后端服务
cd /data/web/disk1/git_repo/yudaocode/ruoyi-vue-pro
git pull
mvn clean package -Dmaven.test.skip=true
cp yudao-server/target/yudao-server.jar /data/server/
cd /data/server
nohup java -jar yudao-server.jar --spring.profiles.active=prod > log.out 2>&1 &

# 部署前端服务
cd /data/web/disk1/git_repo/yudaocode/ruoyi-vue-pro/yudao-ui/yudao-ui-admin-vue3
npm run build:prod
rm -rf /data/nginx/html/*
cp -r dist/* /data/nginx/html/
nginx -s reload

9. 常见问题与解决方案

9.1 环境配置问题

问题：启动项目时，数据库连接失败。

解决方案：

检查数据库是否启动
检查数据库连接配置是否正确
检查数据库用户权限

9.2 权限问题

问题：访问接口时提示"没有权限"。

解决方案：

检查用户是否拥有相应权限
检查权限配置是否正确
清除缓存后重试

9.3 性能问题

问题：系统运行缓慢。

解决方案：

检查 SQL 是否需要优化
检查是否缺少索引
检查缓存配置是否合理
考虑使用分布式缓存和集群部署

10. 总结与展望

10.1 总结

本文全面介绍了 RuoYi-Vue-Pro 项目的开发指南，包括环境搭建、项目架构、核心功能、模块详解、前端开发、扩展定制、部署运维等方面。通过本文的学习，你应该能够快速掌握 RuoYi-Vue-Pro 的使用和开发技巧，为企业级应用开发提供有力支持。

10.2 展望

RuoYi-Vue-Pro 项目仍在持续迭代和优化中，未来将提供更多强大的功能和更好的用户体验。作为开发者，我们可以：

关注项目的最新动态和更新
参与社区贡献，提交 Issue 和 PR
分享使用经验和最佳实践
基于项目开发更多创新应用

结语

RuoYi-Vue-Pro 是一个功能强大、架构优良的企业级后台管理系统框架，它不仅提供了丰富的功能组件，还展示了 Spring Boot + Vue 技术栈的最佳实践。希望本文能够帮助你更好地理解和使用 RuoYi-Vue-Pro，在企业级应用开发的道路上走得更远。

如果你觉得本文对你有帮助，请点赞、收藏并关注项目的更新。你的支持是我们持续改进的动力！

祝大家开发愉快，项目顺利！

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考