一、需求分析
每一个内容管理系统，必不可少的是文章管理，文章管理关联的往往是分类 id，如何实现在文章列表中通过分类 id 显示文章分类名称，这个需求小编先给查看下截图
实例来自于开源项目：https://github.com/huangxing2010/RuoYi-fast-cms
二、开发思路
Ruoyi-fast 是一个基于 Spring Boot 快速开发平台，为单体应用架构，那么构建一个内容管理系统（CMS）可以按照以下步骤进行：
-
要将文章列表按照分类名称显示，你需要先根据每篇文章的 id 找到对应的分类 id，然后再根据分类 id 找到对应的分类名称。可以使用数据库查询或者 API 请求来实现这个功能。
-
以下是一个示例的伪代码，假设你有一个包含文章信息的列表 articles，每篇文章都有一个 category_id 字段表示分类 id，同时你有一个包含分类信息的列表 ，每个分类都有一个 id 字段和一个 name 字段表示分类 id 和分类名称。
2.1 确定需求
- 内容类型：文章、图片、视频等。
- 用户角色：管理员、编辑、普通用户等。
- 功能模块：内容发布、审核、分类管理、标签管理等。
2.2 设计数据库
• 内容表：存储文章标题、内容、分类、图片等内容的基本信息。
CREATE TABLE `sys_article` (
`article_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '文章ID',
`dept_id` bigint(20) NOT NULL COMMENT '部门ID',
`article_title` varchar(126) COLLATE utf8mb4_bin DEFAULT '' COMMENT '文章标题',
`subhead` varchar(126) COLLATE utf8mb4_bin DEFAULT '' COMMENT '副标题',
`category_id` bigint(20) DEFAULT NULL COMMENT '分类ID',
`source` varchar(64) COLLATE utf8mb4_bin DEFAULT '' COMMENT '文章来源',
`description` varchar(500) COLLATE utf8mb4_bin DEFAULT '' COMMENT '描述',
`thumbnail` varchar(126) COLLATE utf8mb4_bin DEFAULT '' COMMENT '缩略图',
`content` text COLLATE utf8mb4_bin COMMENT '内容',
`degree_num` int(11) DEFAULT '0' COMMENT '访问次数',
`remark` varchar(256) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '备注',
`create_by` varchar(32) COLLATE utf8mb4_bin DEFAULT '' COMMENT '创建者',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_by` varchar(32) COLLATE utf8mb4_bin DEFAULT '' COMMENT '更新者',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
PRIMARY KEY (`article_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='文章内容表';
• 分类表：存储内容的分类信息。
CREATE TABLE `sys_category` (
`category_id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '分类ID',
`parent_id` bigint(20) DEFAULT '0' COMMENT '父分类ID',
`category_name` varchar(30) COLLATE utf8mb4_bin DEFAULT '' COMMENT '分类名称',
`sort_num` int(6) DEFAULT '0' COMMENT '显示顺序',
`cat_status` char(1) COLLATE utf8mb4_bin DEFAULT '0' COMMENT '状态（0正常 1停用）',
`thumbnail` varchar(126) COLLATE utf8mb4_bin DEFAULT '' COMMENT '缩略图',
`remark` varchar(256) COLLATE utf8mb4_bin DEFAULT NULL COMMENT '备注',
`create_by` varchar(32) COLLATE utf8mb4_bin DEFAULT '' COMMENT '创建者',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_by` varchar(32) COLLATE utf8mb4_bin DEFAULT '' COMMENT '更新者',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
PRIMARY KEY (`category_id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_bin COMMENT='文章分类表';
2.3 开发环境
• Maven 版本使用的 3.8.5；
• jdk 使用的 jdk8；
• Thymeleaf 作为前端模板引擎。
2.4 配置依赖
在 pom.xml 中添加必要的依赖：
<!-- Spring Boot Starter Web -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- Thymeleaf -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- MySQL Connector -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<!-- MyBatis Plus -->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.2</version>
</dependency>
2.5 配置数据库
在 application.yml 中配置数据源：
spring:
datasource:
url: jdbc:mysql://localhost:3306/cms?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=UTC
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
三、CRUD
使用框架自身的代码生成工具
四、Thymeleaf 网站PC端最佳选择
-
易于学习和使用：Thymeleaf使用简单的HTML模板语法，与HTML标签紧密结合，使得开发者可以快速上手和使用。
-
强大的表达能力：Thymeleaf提供了丰富的表达式语言，可以在模板中使用表达式进行条件判断、循环展示、数据转换等操作，使得模板具备了强大的逻辑处理能力。
-
完善的国际化支持：Thymeleaf内置了对多语言的支持，可以根据不同的区域设置来展示不同的文本内容，方便开发多语言环境下的应用程序。
-
可以与Spring框架无缝集成：Thymeleaf与Spring框架紧密结合，可以很方便地使用Thymeleaf作为Spring MVC的视图技术，实现动态的页面展示。
-
可以渲染静态HTML文件：Thymeleaf不仅可以渲染动态页面，还可以渲染静态的HTML文件，使得开发者可以在页面中嵌入动态内容，提升用户体验。
-
支持模板片段的重用：Thymeleaf可以将页面的部分代码定义为模板片段，然后在不同的页面中重用这些模板片段，减少了代码的重复编写，提高了开发效率。
五、调用分类名称
重点往往在下面
5.1修改前端代码
前端采用 ajax 调用分类方法
前端 get 类型传递分类 id 到后端，数据类型采用 jsong格式
{
field: 'categoryId',
title: '栏目分类',
formatter: function (value, row, index) {
if (value > 0) {
let targetElement = 'cat' + row.articleId
$.ajax({
type: "get",
url: prefix + "/getCategory/" + value,
datatype: 'json',
cache: false,
contentType: false,
processData: false,
success: function (data) {
$('#' + targetElement).text(data.cname);
},
error: function (error) {
console.log('Error: ' + error);
}
})
return '<span id="' + targetElement + '" style="color: #2b2b2b">0</span>'
}
}
},
5.2 后端方法
定义一个控制器方法来处理前端的请求。
当用户点击页面上的按钮时，前端会通过 Ajax 向指定的后端 URL 发送一个 GET 请求。后端接收到请求后，由Controller类中的getCategoryInfo方法处理，并返回一个map给前端。
/**
* 文章列表里的分类
*/
@GetMapping("/getCategory/{categoryId}")
@ResponseBody
public AjaxResult getCategoryInfo(@PathVariable(value = "categoryId", required = false) Long categoryId){
PortalCategory category = portalCategoryService.selectPortalCategoryByCategoryId(categoryId);
AjaxResult ajax = AjaxResult.success();
ajax.put("cname", category.getCategoryName());
ajax.put("cid", category.getCategoryId());
return ajax;
}
六、总结
- 通过以上步骤和代码示例，可以在内容管理系统中实现文章列表显示分类的功能。具体的实现方式可以根据使用的技术栈和具体需求进行调整和扩展。
- 你可以基于 Ruoyi-fast 单体版构建一个基本的内容管理系统。如果有更多复杂的需求，可以根据实际情况进行扩展和优化；
你如果想借助一套脚手架 java cms 内容管理系统，推荐开源项目：ruoyi-fast-cms,功能简洁实用，没有复杂的封装，开箱即用。 - 总体而言，Ruoyi-fast 单体版可以作为一个快速搭建网站的选择，但在使用之前，你需要充分考虑项目的具体需求、技术要求和未来的发展规划。如果项目需求相对简单，对灵活性和性能要求不是特别高，那么 ruoyi-fast-cms,可以是一个不错的选择。但如果项目有较高的定制化需求或对性能和技术更新有较高要求，可能需要考虑更加灵活的架构或定制开发。
扫一扫
819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
