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

#### 一、环境准备

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 class="login-bg" :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` 强制刷新