【若依】框架：从零构建前后端分离项目实战

1. 环境准备与项目初始化第一次接触若依框架时我被它开箱即用的特性惊艳到了。这个基于Spring Boot的权限管理系统前后端分离架构设计得非常清晰。下面我会手把手带你完成环境搭建过程中遇到的坑也会一并说明。开发环境需要准备以下工具JDK 1.8建议使用Oracle JDKMaven 3.6Node.js 14Redis 5.0MySQL 5.7注意若依对MySQL 8.0的兼容性需要额外配置新手建议先用5.7版本避免踩坑下载完源码后用IDEA导入时有个小技巧不要直接打开pom.xml而是先关闭所有项目在欢迎界面选择New Project from Existing Sources这样能避免Maven依赖解析异常。导入成功后重点观察这两个模块ruoyi-admin存放控制器和配置类ruoyi-system核心业务模块包含实体、Mapper和Service前端项目ruoyi-ui需要用VS Code打开。第一次启动时记得在终端先执行npm install --registryhttps://registry.npmmirror.com这个命令会安装所有依赖国内用户建议使用这个镜像源加速下载。2. 数据库设计与后端开发我们以内容栏目管理功能为例从数据库到接口完整走一遍开发流程。首先在MySQL中创建表CREATE TABLE cms_channel ( id varchar(32) NOT NULL COMMENT 主键ID, channel_name varchar(50) NOT NULL COMMENT 栏目名称, is_show tinyint(1) DEFAULT 1 COMMENT 是否显示, update_time datetime DEFAULT NULL COMMENT 更新时间, PRIMARY KEY (id) ) ENGINEInnoDB DEFAULT CHARSETutf8mb4;实体类编写时有个实用技巧继承BaseEntity可以直接获得分页、日志等基础字段。下面是Channel类的典型写法public class Channel extends BaseEntity { private String id; private String channelName; private Integer isShow; // 手动生成getter/setter // 建议安装Lombok插件简化代码 }Mapper接口的设计要遵循若依的命名规范这里给出一个带条件查询的示例public interface ChannelMapper { ListChannel selectChannelList(Param(channel) Channel channel); }对应的XML映射文件要注意namespace必须与Mapper接口全限定名一致。动态SQL可以这样写select idselectChannelList resultMapChannelResult SELECT * FROM cms_channel where if testchannel.channelName ! null and channel.channelName ! AND channel_name LIKE CONCAT(#{channel.channelName}, %) /if if testchannel.isShow ! null AND is_show #{channel.isShow} /if /where /select3. 业务逻辑与接口实现Service层我习惯先定义接口再写实现类这样结构更清晰。注意事务注解的使用public interface IChannelService { int insertChannel(Channel channel); } Service public class ChannelServiceImpl implements IChannelService { Autowired private ChannelMapper channelMapper; Override Transactional public int insertChannel(Channel channel) { channel.setId(UUID.randomUUID().toString().replace(-, )); return channelMapper.insertChannel(channel); } }Controller的编写要特别注意几点继承BaseController可以直接使用分页方法使用Log注解自动记录操作日志返回结果统一用AjaxResult包装RestController RequestMapping(/basic/channel) public class ChannelController extends BaseController { Autowired private IChannelService channelService; PostMapping(/add) Log(title 栏目管理, businessType BusinessType.INSERT) public AjaxResult add(Validated Channel channel) { return toAjax(channelService.insertChannel(channel)); } }4. 前端对接与联调测试前端开发主要在ruoyi-ui的src目录下进行。api文件夹存放接口定义建议按模块组织// api/channel.js import request from /utils/request export function listChannel(query) { return request({ url: /basic/channel/list, method: get, params: query }) }页面组件开发时若依已经封装好了常用的组件。表格页面的典型结构template div classapp-container el-table :datalist border el-table-column propchannelName label栏目名称 / el-table-column propisShow label状态 template #default{row} dict-tag :valuerow.isShow :optionssys_show_hide / /template /el-table-column /el-table /div /template script import { listChannel } from /api/channel export default { data() { return { list: [] } }, created() { this.getList() }, methods: { getList() { listChannel().then(response { this.list response.rows }) } } } /script联调时常见的跨域问题可以通过配置解决。在后端的application.yml中添加ruoyi: cors: allowed-origins: * allowed-methods: * allowed-headers: *5. 项目打包与部署开发完成后我们需要将项目部署到服务器。后端打包命令mvn clean package -DskipTests前端打包前记得修改生产环境配置// .env.production VUE_APP_BASE_API /prod-apiNginx配置示例server { listen 80; server_name yourdomain.com; location / { root /home/ruoyi-ui/dist; index index.html; try_files $uri $uri/ /index.html; } location /prod-api/ { proxy_pass http://localhost:8080/; proxy_set_header Host $host; } }启动顺序建议Redis → MySQL → 后端服务 → Nginx。我在实际部署中发现若依对Java内存要求较高建议给JVM分配至少1G内存java -Xms1024m -Xmx1024m -jar ruoyi-admin.jar