从零到一：独立运行若依框架系统并进行本地二次开发

#### 一、环境准备

1. **基础环境**：

– JDK 1.8+（推荐 JDK 17）

– Maven 3.6+

– MySQL 5.7+（推荐 8.0）

– Redis 5.0+

– Node.js 16+（前端依赖）

– IDE：IntelliJ IDEA（后端）、VSCode（前端）

2. **开发工具**：

“`bash

# 验证环境

java -version

mvn -v

mysql –version

redis-server –version

node -v

“`

#### 二、项目获取与初始化

1. **克隆代码**：

“`bash

git clone https://gitee.com/y_project/RuoYi-Vue.git

cd RuoYi-Vue

“`

2. **数据库初始化**：

– 创建数据库 `ry-vue`

– 执行 SQL 文件：

– `/sql/ry_2023xxxx.sql`（主业务表）

– `/sql/quartz.sql`（定时任务表）

– 修改后端配置：`
ruoyi-admin/src/main/resources/application-druid.yml`

“`yaml

url: jdbc:mysql://localhost:3306/ry-vue?useUnicode=true

username: root

password: 你的密码

“`

3. **Redis配置**：

“`yaml

# ruoyi-admin/src/main/resources/application.yml

redis:

host: localhost

port: 6379

password:

database: 0

“`

#### 三、启动项目

1. **后端启动**：

“`bash

# 在项目根目录

mvn clean install

cd ruoyi-admin

mvn spring-boot:run

“`

– 访问 `http://localhost:8080` 查看后台API文档

2. **前端启动**：

“`bash

cd ruoyi-ui

npm install –registry=https://registry.npmmirror.com

npm run dev

“`

– 访问 `http://localhost:80`

– 默认账号：`admin` 密码：`admin123`

#### 四、核心目录结构解析

“`markdown

├── ruoyi-admin # 后台核心模块

│ ├── src/main

│ │ ├── java/com/ruoyi

│ │ │ ├── common # 通用组件

│ │ │ ├── system # 系统模块（核心）

│ │ │ └── project # 业务模块（二次开发区域）

│ │ └── resources

│ │ ├── mapper # MyBatis XML

│ │ └── static # 静态资源

│

├── ruoyi-ui # 前端Vue项目

│ ├── src

│ │ ├── api # 接口定义

│ │ ├── views # 页面组件（二次开发重点）

│ │ └── store # 状态管理

│

├── sql # 数据库脚本

└── ruoyi-generator # 代码生成器模块

“`

#### 五、二次开发实战（示例：新增公告模块）

1. **数据库操作**：

“`sql

CREATE TABLE sys_notice (

notice_id BIGINT AUTO_INCREMENT COMMENT '公告ID',

notice_title VARCHAR(100) NOT NULL COMMENT '公告标题',

notice_content TEXT NOT NULL COMMENT '公告内容',

status CHAR(1) DEFAULT '0' COMMENT '状态（0正常 1关闭）',

PRIMARY KEY (notice_id)

) COMMENT = '公告表';

“`

2. **代码生成器**：

– 访问 `系统工具 → 代码生成`

– 导入 `sys_notice` 表

– 生成代码（ZIP包），解压到对应模块：

– Java 文件 → `ruoyi-admin/src/main/java`

– XML 文件 → `
ruoyi-admin/src/main/resources/mapper`

– Vue 文件 → `
ruoyi-ui/src/views/system/notice`

3. **后端开发**：

– 业务层扩展：`NoticeServiceImpl.java`

“`java

@Service

public class NoticeServiceImpl implements INoticeService {

// 自定义公告状态切换方法

public int toggleNoticeStatus(Long noticeId) {

SysNotice notice = noticeMapper.selectNoticeById(noticeId);

notice.setStatus(“1”.equals(notice.getStatus()) ? “0” : “1”);

return noticeMapper.updateNotice(notice);

}

}

“`

4. **前端开发**：

– 在 `notice.vue` 中添加状态切换按钮：

“`vue

<el-button @click=”handleToggleStatus(scope.row)”>

{{ scope.row.status === '0' ? '禁用' : '启用' }}

</el-button>

“`

– API 对接：

“`javascript

// src/api/system/notice.js

export function toggleNoticeStatus(noticeId) {

return request({

url: '/system/notice/toggleStatus/' + noticeId,

method: 'post'

})

}

“`

#### 六、权限配置

1. **菜单管理**：

– `系统管理 → 菜单管理 → 新增`

– 路由地址：`/system/notice`

– 权限标识：`system:notice:list`

2. **角色授权**：

– `系统管理 → 角色管理 → 修改权限`

– 勾选新添加的公告菜单权限

#### 七、定制化开发技巧

1. **修改系统主题**：

– 前端路径：`
ruoyi-ui/src/styles/variables.scss`

“`scss

$–color-primary: #FF6A00; // 主色调改为橙色

$–sidebar-bg-color: #304156; // 侧边栏背景

“`

2. **自定义登录页**：

– 修改 `
ruoyi-ui/src/views/login.vue`

– 添加背景图：

“`vue

<div :style=”{backgroundImage: 'url(' + require('@/assets/login-bg.jpg') + ')'}”></div>

“`

3. **接口拦截扩展**：

“`java

// ruoyi-framework/src/main/java/com/ruoyi/framework/web/controller/BaseController.java

protected void startPage() {

// 自定义分页参数接收逻辑

PageDomain pageDomain = TableSupport.buildPageRequest();

Integer pageNum = pageDomain.getPageNum();

Integer pageSize = pageDomain.getPageSize();

PageHelper.startPage(pageNum, pageSize);

}

“`

#### 八、部署上线

1. **后端打包**：

“`bash

mvn clean package -DskipTests

# 生成 target/ruoyi-admin.jar

“`

2. **前端打包**：

“`bash

cd ruoyi-ui

npm run build:prod

# 生成 dist 文件夹

“`

3. **生产启动**：

“`bash

nohup java -jar ruoyi-admin.jar > app.log 2>&1 &

# 前端使用Nginx部署：

location / {

root /home/ruoyi/dist;

index index.html;

try_files $uri $uri/ /index.html;

}

“`

#### 九、开发提议

1. **安全规范**：

– 密码加密：`BCryptPasswordEncoder`

– XSS过滤：`@Xss` 注解

– 权限校验：`@PreAuthorize(hasPermi = “system:user:list”)`

2. **性能优化**：

– 启用二级缓存：`redis: true`

– 分页拦截器：`PageHelper.startPage()`

– 异步日志：`@Async`

3. **扩展机制**：

– 自定义注解：`@DataScope` 数据权限

– 监听器：`ApplicationListener` 系统启动任务

– 自定义Starter：封装通用模块

> 完整文档参考：[若依官方文档](https://doc.ruoyi.vip/)

> 常见问题解决方案：

> 1. 端口冲突：修改 `application.yml` 的 `server.port`

> 2. 跨域问题：配置 `ruoyi-gateway` 的 CorsFilter

> 3. 页面缓存：清理浏览器缓存或使用 `Ctrl+F5` 强制刷新