基于若依框架快速构建企业级CMS：前后端分离架构与二次开发实战

简介这是一套基于Ruoyi框架开发的前后端分离内容管理系统CMS完整源码资源面向Java后端开发者、全栈初学者及企业级Web项目实践者旨在解决内容建站中快速搭建可维护、易扩展后台系统的核心需求。资源包共2个文件含1个ZIP格式源码压缩包涵盖Vue前端Spring Boot后端完整工程与1个SQL脚本文件用于初始化MySQL数据库结构及基础数据整体大小为17.47MB结构清晰、开箱即用。已有159人下载学习适合用于课程设计、毕业项目、中小型企业官网或资讯类平台二次开发。用户可直接导入IDE运行调试掌握Ruoyi权限体系集成、动态表单配置、多数据源管理、CMS核心模块内容发布/分类管理/富文本编辑实现逻辑并复用其安全防护机制如XSS过滤、CSRF防护与标准化RESTful接口设计范式。1. 项目背景与核心价值为什么选择若依Ruoyi作为CMS的起点如果你正在寻找一个能快速启动企业级内容管理系统的方案并且希望这个系统是前后端分离、技术栈主流、文档齐全、社区活跃的那么“基于Ruoyi开发的前后端分离内容管理系统”这个组合大概率会出现在你的备选清单前列。这不仅仅是一个源码包更是一个经过大量实战项目验证的、开箱即用的开发脚手架。我接触过不少从零开始搭建后台管理系统的团队前期在技术选型、权限设计、基础模块开发上耗费的时间往往远超业务功能开发本身。而Ruoyi框架正是为了解决这个“重复造轮子”的痛点而生。简单来说这个项目提供了一个内容管理系统CMS的完整实现它构建在若依Ruoyi这个流行的开源Java快速开发框架之上并采用了前后端分离的架构。你拿到的不只是一堆代码而是一个已经具备了用户管理、角色权限、菜单管理、部门管理、操作日志、代码生成器等后台管理核心功能的、可直接运行的系统。它的核心价值在于“快速”和“规范”。对于需要定制化CMS的开发者而言你无需再从登录认证、权限拦截这些底层模块写起可以直接基于它成熟的架构专注于内容模型、栏目管理、文章发布、模板渲染等业务功能的开发将项目交付周期缩短60%以上。为什么Ruoyi框架能成为众多企业级后台的首选从技术生态看它的后端基于Spring Boot、MyBatis-Plus、Shiro/Spring Security前端基于Vue2/3和Element UI这套组合是当前国内Java领域最主流、最成熟的技术栈意味着招聘容易、学习成本低、社区资源丰富。从功能完整性看它提供的权限管理模型用户-角色-菜单精细到了按钮级别日志记录完备多数据源支持、定时任务、系统监控等企业级特性一应俱全。对于CMS开发来说这些基础能力是刚需。因此基于Ruoyi二次开发一个CMS相当于站在了一个坚实、可靠且功能丰富的肩膀上。2. 项目架构深度解析前后端分离如何在此CMS中高效协作理解这个CMS项目的运作机制关键在于吃透它的“前后端分离”架构。这不仅仅是把前端页面和后端Java代码放在两个工程里那么简单而是一套完整的、基于HTTP API的协作范式。在这个项目中这种分离被清晰地体现在目录结构和通信流程上。2.1 后端Ruoyi架构与核心模块后端工程通常是一个标准的Spring Boot项目。其核心目录结构清晰地划分了职责ruoyi-admin: 应用启动模块包含全局配置、过滤器、拦截器。ruoyi-common: 通用工具类、常量定义、核心异常处理。ruoyi-system:系统核心模块也是CMS需要重点理解和扩展的部分。这里包含了用户、角色、菜单、部门、岗位、字典、参数、通知公告等实体、Mapper、Service和Controller。未来CMS的业务实体如栏目、文章的代码最佳实践也是在此模块下新建类似结构的包进行管理。ruoyi-framework: 框架核心包含权限认证Shiro/Security配置、数据权限过滤、Web通用处理等。ruoyi-generator: 代码生成器模块这是Ruoyi的“王牌功能”之一。你可以通过设计数据库表一键生成Entity、Mapper、Service、Controller以及前端Vue页面代码这对于快速创建CMS的内容管理功能至关重要。后端为前端提供纯粹的RESTful API接口。所有对数据用户、角色、文章等的增删改查操作都通过对应的Controller暴露为HTTP接口。权限控制由Shiro或Spring Security在接口层实现确保只有拥有相应权限的角色才能访问特定API。2.2 前端Vue Element UI架构与路由控制前端工程是一个独立的Vue项目使用Vue CLI构建界面基于Element UI组件库。它的核心是SPA单页应用。src/api/: 这里存放所有与后端API交互的JavaScript模块。每个后端Controller通常对应一个前端的api文件里面是用Axios封装的HTTP请求函数。这是前后端连接的“桥梁”。src/views/: 存放所有Vue页面组件。系统内置的页面用户管理、角色管理等和未来CMS的业务页面栏目管理、文章编辑等都放在这里。src/router/: 路由配置中心。菜单的访问路径在这里定义。一个关键点路由权限与后端菜单数据动态关联。用户登录后后端会返回该用户有权限访问的菜单列表前端路由器会根据这个列表动态加载和注册路由从而实现“千人千面”的菜单展示和访问控制。src/store/: Vuex状态管理用于全局共享用户信息、权限令牌、应用设置等。src/components/: 可复用的Vue组件。2.3 前后端数据流与权限联动一次典型的“编辑文章”操作完整的数据流如下用户登录前端调用/loginAPI提交用户名密码。后端验证成功后生成一个唯一的Token如JWT并返回同时返回该用户的权限菜单列表。前端初始化前端将Token存储在本地如localStorage或Vuex并根据返回的菜单列表动态生成侧边栏导航。访问页面用户点击“内容管理 - 文章列表”。前端路由器匹配到对应的Vue组件src/views/cms/article/index.vue并渲染。加载数据该Vue组件的created或mounted生命周期钩子中会调用src/api/cms/article.js中定义的listArticle函数。该函数使用Axios携带存储在请求头中的Token发起GET请求到后端API例如/cms/article/list。后端处理请求首先经过权限拦截器校验Token有效性及用户是否有“文章列表”的访问权限。通过后请求抵达ArticleController调用ArticleService查询数据库将结果封装成统一的分页响应格式如{ code: 200, msg: “成功” rows: […], total: 100 }返回。前端渲染前端接收到响应后将rows数据绑定到表格组件进行渲染。这种分离的好处是巨大的前后端可以并行开发通过API文档约定接口即可前端可以独立部署享受更快的页面响应和更优的用户体验后端专注于业务逻辑和数据安全API可以被多种客户端Web、App、小程序复用。注意在部署时开发环境可以通过Vue CLI的代理解决跨域问题生产环境则通常将前端编译后的静态文件dist目录放入后端Spring Boot的static目录或通过Nginx等Web服务器将API请求反向代理到后端服务静态文件直接由Nginx服务。3. 从零到一部署与运行此CMS项目详解拿到源码和数据库后第一件事就是让它在本地跑起来。这个过程会涉及到环境准备、数据库初始化、前后端配置和启动。下面是我根据常见实践整理的详细步骤。3.1 环境准备与工具清单在开始之前请确保你的开发机上已经安装了以下软件版本尽量与项目推荐保持一致以避免兼容性问题JDK 8/11/17根据Ruoyi版本要求选择。较新的Ruoyi版本可能要求JDK 17。安装后配置好JAVA_HOME环境变量。Maven 3.6用于后端项目的依赖管理和构建。Node.js 14 npm 6用于前端项目的依赖安装和运行。建议安装Node.js时一并安装yarn可选但速度可能更快。MySQL 5.7/8.0项目的主要数据库。你需要启动MySQL服务并创建一个新的数据库例如ry_cms。IDE后端推荐IntelliJ IDEA或Eclipse前端推荐Visual Studio Code或WebStorm。Git用于克隆源码如果从Git仓库获取。Redis可选但强烈推荐Ruoyi的会话管理、缓存等特性依赖Redis。如果不用需要在配置中关闭相关功能。3.2 数据库初始化与配置通常项目会提供一个SQL脚本文件如ry_yyyyMMdd.sql或quartz.sql。用MySQL客户端如命令行、Navicat、DBeaver连接到你的MySQL服务器。创建数据库CREATE DATABASE IF NOT EXISTS ry_cms CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci;。使用utf8mb4字符集可以避免未来存储emoji等特殊字符出现问题。选择该数据库USE ry_cms;执行提供的SQL脚本。这个脚本会创建所有必要的系统表sys_user, sys_role, sys_menu等并插入初始数据如默认管理员账号admin/admin123。3.3 后端项目配置与启动导入项目用IDEA打开后端项目根目录包含pom.xml的文件夹IDEA会自动识别为Maven项目并开始下载依赖。修改数据库配置找到核心配置文件通常是ruoyi-admin/src/main/resources/application-druid.yml如果使用Druid数据源或application.yml中的数据源部分。# 数据源配置 spring: datasource: type: com.alibaba.druid.pool.DruidDataSource driverClassName: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/ry_cms?useUnicodetruecharacterEncodingutf8zeroDateTimeBehaviorconvertToNulluseSSLfalseserverTimezoneGMT%2B8 username: root # 改为你的MySQL用户名 password: 123456 # 改为你的MySQL密码请将url中的数据库名、username和password修改为你实际的环境信息。Redis配置如果使用在application.yml中配置Redis连接。如果未安装Redis需要找到关于Redis的配置并将其enabled设为false或者注释掉相关依赖。启动后端找到主启动类RuoYiApplication通常在ruoyi-admin/src/main/java/com/ruoyi下运行它的main方法。看到控制台输出类似“RuoYiApplication启动成功”的日志并且没有报错说明后端服务已启动。默认端口是8080你可以通过http://localhost:8080访问后端健康检查等接口如/或/actuator/health。3.4 前端项目配置与启动打开前端项目用VS Code打开前端项目根目录包含package.json的文件夹。安装依赖在终端中执行npm install或yarn install。这个过程会下载Vue、Element UI、Axios等所有依赖包。国内网络环境建议配置淘宝镜像。配置API代理开发环境下前端运行在独立端口如8081直接调用后端8080端口会遇到跨域问题。解决方案是配置Vue的开发服务器代理。修改vue.config.js文件如果没有则创建module.exports { devServer: { port: 8081, // 前端开发服务器端口 proxy: { // 代理所有以 /prod-api 开头的请求到后端 /prod-api: { target: http://localhost:8080, // 后端服务地址 changeOrigin: true, // 允许跨域 pathRewrite: { ^/prod-api: // 重写路径去掉前缀 } } } } }这样前端代码中请求/prod-api/system/user/list会被代理到http://localhost:8080/system/user/list。启动前端在终端执行npm run dev或yarn dev。命令成功后会输出本地访问地址通常是http://localhost:8081。登录系统打开浏览器访问http://localhost:8081使用数据库初始化的默认账号admin/admin123登录。如果一切顺利你将看到Ruoyi框架默认的管理后台界面。踩坑提示最常见的启动失败原因是端口冲突。检查8080和8081端口是否被其他程序占用。另一个常见问题是数据库连接失败请仔细检查配置文件中的数据库地址、端口、库名、用户名和密码并确保MySQL服务已启动且允许远程连接如果非本地。4. 核心功能扩展如何基于此框架打造专属CMS一个基础的管理后台不是终点我们的目标是将其扩展为一个功能完备的内容管理系统。这意味着需要在现有框架上增加CMS特有的数据模型和业务逻辑。下面以创建一个简单的“新闻文章”模块为例演示完整的二次开发流程。4.1 数据库设计规划内容模型首先我们需要设计存储文章的表。这步规划很重要要考虑字段的扩展性。CREATE TABLE cms_article ( article_id bigint(20) NOT NULL AUTO_INCREMENT COMMENT 文章ID, category_id bigint(20) DEFAULT NULL COMMENT 所属栏目ID, title varchar(255) NOT NULL COMMENT 文章标题, cover_image varchar(500) DEFAULT COMMENT 封面图, summary varchar(500) DEFAULT COMMENT 摘要, content longtext COMMENT 文章内容富文本, author varchar(100) DEFAULT COMMENT 作者, source varchar(255) DEFAULT COMMENT 来源, status char(1) DEFAULT 0 COMMENT 状态0草稿 1已发布 2已下架, is_top char(1) DEFAULT 0 COMMENT 是否置顶0否 1是, is_hot char(1) DEFAULT 0 COMMENT 是否热门0否 1是, publish_time datetime DEFAULT NULL COMMENT 发布时间, view_count int(11) DEFAULT 0 COMMENT 浏览量, del_flag char(1) DEFAULT 0 COMMENT 删除标志0代表存在 2代表删除, create_by varchar(64) DEFAULT COMMENT 创建者, create_time datetime DEFAULT NULL COMMENT 创建时间, update_by varchar(64) DEFAULT COMMENT 更新者, update_time datetime DEFAULT NULL COMMENT 更新时间, remark varchar(500) DEFAULT NULL COMMENT 备注, PRIMARY KEY (article_id) ) ENGINEInnoDB AUTO_INCREMENT1 DEFAULT CHARSETutf8mb4 COMMENT文章表;同时可能还需要一个栏目表cms_category来管理文章分类。这里为了简化假设栏目信息直接通过字典或简单表管理。4.2 使用代码生成器快速创建基础代码Ruoyi的代码生成器是效率利器。你需要将新建的表同步到生成器的配置中。在菜单系统工具 - 代码生成中点击“导入”按钮从数据库中选择你刚创建的cms_article表。导入后在列表中找到该表点击“编辑”进行配置。这是关键步骤基本信息设置模块名如cms、业务名如article、类名如CmsArticle。这决定了生成代码的包路径和类名。字段信息检查每个字段的生成配置。例如article_id应设为“主键”create_time设为“插入”update_time设为“更新”del_flag设为“逻辑删除”。对于status,is_top等字段可以设置“字典类型”关联到系统字典这样前端会自动生成下拉框。生成信息选择模板通常用默认的“单表”设置前端路径如vue。配置完成后点击“生成代码”。会下载一个ZIP包里面包含了后端Java代码Entity, Mapper, Service, Controller和前端Vue代码api, views。4.3 后端代码整合与业务逻辑定制将生成的后端代码解压放入对应模块通常是ruoyi-system的相应包下。CmsArticle.java(Entity) -ruoyi-system/src/main/java/com/ruoyi/system/domain/CmsArticleMapper.java-.../system/mapper/ICmsArticleService.javaCmsArticleServiceImpl.java-.../system/service/CmsArticleController.java-.../system/controller/此时基础的增删改查API已经就绪。但CMS业务通常需要定制逻辑在Service层你可以在CmsArticleServiceImpl中重写或新增方法。例如增加一个publishArticle方法用于发布文章将状态改为1并设置发布时间。Override public int publishArticle(Long articleId) { CmsArticle article new CmsArticle(); article.setArticleId(articleId); article.setStatus(1); // 已发布 article.setPublishTime(DateUtils.getNowDate()); // 当前时间 return cmsArticleMapper.updateById(article); }在Controller层新增一个对应的接口/cms/article/publish/{articleId}调用上述Service方法。权限控制在Controller的方法上使用PreAuthorize注解如果使用Spring Security或配置Shiro的权限字符串来控制哪些角色可以发布文章。例如PreAuthorize(ss.hasPermi(cms:article:publish))。4.4 前端页面整合与功能增强将生成的前端代码解压放入前端项目。article.js-src/api/cms/index.vue(列表页),add.vue(新增页),edit.vue(编辑页) -src/views/cms/article/启动前端你会在菜单管理中发现一个名为“文章管理”的菜单如果生成时代码配置了生成菜单。但生成的基础页面可能不满足CMS需求需要改造富文本编辑器集成文章内容字段需要富文本编辑器。Ruoyi框架通常集成了Tinymce或WangEditor。在add.vue和edit.vue中将内容字段的表单项从普通的el-input替换为富文本编辑器组件。你需要引入对应的组件并处理其数据绑定。封面图上传集成文件上传组件将上传后的文件路径URL保存到cover_image字段。列表页增强在index.vue的表格中可以增加“发布”、“置顶”等操作按钮并绑定到新的API方法。可以增加对状态、是否置顶等字段的筛选条件。路由与菜单检查生成的路由配置确保路径正确。在系统管理的“菜单管理”中可以调整“文章管理”菜单的图标、顺序和权限标识符使其与后端PreAuthorize注解中的权限字符串匹配。通过以上步骤一个具备基本CRUD、富文本编辑、图片上传、状态管理的文章管理模块就初步完成了。同样的模式可以复制用于创建“栏目管理”、“专题管理”、“评论管理”等模块逐步构建起完整的CMS后台。5. 高级特性与生产环境部署考量当CMS功能开发完毕准备上线时我们需要关注一些超越基础CRUD的高级特性和部署实践以确保系统的稳定性、安全性和可维护性。5.1 数据权限与内容隔离在大型CMS或多租户场景中不同部门或用户只能管理自己创建的内容。Ruoyi框架内置了基于“数据权限”的过滤机制。其原理是通过在Mapper的SQL查询中自动注入数据过滤条件如AND dept_id ?或AND create_by ?。实体类标注在你的CmsArticle实体类中添加部门ID字段deptId和用户ID字段userId。Service层注解在CmsArticleServiceImpl的查询方法上使用DataScope注解。这个注解可以指定过滤依据是部门表dept还是用户表user。DataScope(deptAlias d, userAlias u) Override public ListCmsArticle selectArticleList(CmsArticle article) { return cmsArticleMapper.selectArticleList(article); }SQL映射在CmsArticleMapper.xml中对应的selectArticleListSQL语句里需要包含部门或用户的关联查询并且使用${params.dataScope}来接收注解动态生成的数据权限过滤条件。select idselectArticleList resultMapCmsArticleResult SELECT a.*, d.dept_name, u.nick_name FROM cms_article a LEFT JOIN sys_dept d ON a.dept_id d.dept_id LEFT JOIN sys_user u ON a.user_id u.user_id WHERE a.del_flag 0 if testtitle ! null and title ! AND a.title like concat(%, #{title}, %)/if !-- 数据范围过滤 -- ${params.dataScope} /select前端配置在角色管理界面可以为不同角色配置不同的“数据权限”如“全部数据权限”、“本部门数据权限”、“仅本人数据权限”。这样当不同角色的用户登录后他们查询文章列表时会自动只能看到自己权限范围内的数据。5.2 缓存策略与性能优化CMS的首页、栏目页等经常被访问但数据变化不频繁非常适合使用缓存。Spring Cache集成Ruoyi默认集成了Redis和Spring Cache。你可以在Service方法上使用Cacheable、CacheEvict等注解。例如在查询文章详情的方法上添加缓存在更新或删除文章的方法上清除缓存。Cacheable(key “‘article:’ #articleId”, unless “#result null”) public CmsArticle selectArticleById(Long articleId) { ... } CacheEvict(key “‘article:’ #article.articleId”) public int updateArticle(CmsArticle article) { ... }静态化高阶对于极少变化的页面如公司介绍可以考虑在文章发布时直接由后端程序生成静态HTML文件部署到Nginx等Web服务器。用户访问时直接命中静态文件性能极高。这需要额外的发布流程和文件同步机制。5.3 生产环境部署实践本地运行成功只是第一步生产环境部署需要考虑更多。后端打包与运行在项目根目录执行mvn clean package -DskipTests会在ruoyi-admin/target下生成一个可执行的JAR包如ruoyi-admin.jar。上传JAR包到服务器。使用nohup java -jar ruoyi-admin.jar --spring.profiles.activeprod app.log 21 命令在后台启动。prod配置文件application-prod.yml需要提前配置好生产环境的数据库、Redis地址等。更推荐使用Docker容器化部署可以编写Dockerfile基于OpenJDK镜像构建应用镜像便于版本管理和水平扩展。前端构建与部署在前端目录执行npm run build:prod会在dist目录生成优化后的静态文件。有两种主流部署方式方式一前后端分离部署将dist目录下的文件部署到独立的Nginx服务器。在Nginx配置中将API请求反向代理到后端服务地址如http://backend-server:8080静态文件由Nginx直接服务。这种方式前后端完全解耦。方式二前后端合并部署将dist目录下的所有文件复制到后端Spring Boot项目的resources/static目录下然后打包。这样JAR包就包含了前端资源访问http://server:port即可。这种方式部署简单但耦合度高前端更新需要重新打包后端。安全加固修改默认密码务必修改默认管理员密码。关闭Swagger生产环境务必在配置文件中禁用Swagger等API文档工具swagger.enabledfalse。配置HTTPS通过Nginx配置SSL证书强制使用HTTPS访问。防火墙与端口服务器防火墙只开放必要端口如80、443后端服务的端口如8080不应直接暴露在公网。定期更新关注Ruoyi官方GitHub仓库的Release及时修复安全漏洞。5.4 监控与日志一个健壮的系统离不开监控。内置监控Ruoyi自带了一个简单的系统监控页面可以查看服务器CPU、内存、磁盘、JVM信息。确保生产环境有相应的权限控制。日志收集配置Logback或Log4j2将日志按级别INFO, ERROR输出到不同文件并定期归档。可以使用ELKElasticsearch, Logstash, Kibana或Graylog等工具进行集中式日志管理和分析便于排查线上问题。健康检查Spring Boot Actuator提供了/actuator/health端点可以集成到Kubernetes的存活探针或外部监控系统中。从拿到一个基于Ruoyi的CMS源码到将其扩展为一个符合业务需求、性能可靠、安全稳定的生产系统这个过程充满了细节。关键在于充分利用Ruoyi框架提供的“轮子”同时清晰地规划自己的业务数据模型。在开发中多使用代码生成器提升效率在设计中提前考虑权限和数据隔离在部署前做好性能优化和安全加固的功课。这套组合拳下来你构建的不仅仅是一个CMS更是一个符合现代软件开发规范的企业级应用基石。本文还有配套的精品资源点击获取