新闻模块说明

模块概述

新闻模块是一个用于管理系统新闻资讯的功能模块，支持富文本内容编辑和发布管理。

功能特性

• 新闻列表展示和管理
• 富文本内容编辑（使用wangEditor）
• 新闻状态管理（草稿、发布、关闭）
• 前端新闻展示页面
• 响应式设计

数据库表结构

CREATE TABLE `t_news` (
  `id` bigint NOT NULL AUTO_INCREMENT,
  `title` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NOT NULL,
  `content` longtext CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci,
  `summary` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
  `cover_image` varchar(500) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
  `author` varchar(100) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci DEFAULT NULL,
  `view_count` int NOT NULL DEFAULT '0',
  `state` int NOT NULL DEFAULT '1' COMMENT '0:草稿，1：发布，2：关闭',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  `create_user_id` bigint DEFAULT NULL,
  `update_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `update_user_id` bigint DEFAULT NULL,
  `version` bigint NOT NULL DEFAULT '0',
  PRIMARY KEY (`id`) USING BTREE,
  KEY `idx_t_news_state` (`state`) USING BTREE,
  KEY `idx_t_news_create_time` (`create_time`) USING BTREE
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci COMMENT='新闻资讯表';

后端代码结构

com.rongyichuang.news
├── entity
│   └── News.java
├── dto
│   ├── NewsInput.java
│   └── NewsResponse.java
├── repository
│   └── NewsRepository.java
├── service
│   └── NewsService.java
└── resolver
    └── NewsResolver.java

前端代码结构

src/views/
├── news-list.vue          # 后台新闻管理列表
├── NewsForm.vue           # 后台新闻编辑表单
├── NewsListPage.vue       # 前台新闻列表展示
└── NewsDetail.vue         # 前台新闻详情展示

src/api/
└── news.js               # 新闻相关API接口

GraphQL API接口

查询接口

1. newsList - 获取新闻列表（后台管理）
2. news - 获取新闻详情（后台管理）
3. publishedNews - 获取已发布的新闻详情（前端展示）
4. publishedNewsList - 获取已发布的新闻列表（前端展示）

变更接口

1. saveNews - 保存新闻
2. deleteNews - 删除新闻（软删除）
3. updateNewsState - 更新新闻状态

路由配置

• /news - 新闻管理列表
• /news/new - 新增新闻
• /news/edit/:id - 编辑新闻
• /news/list - 前台新闻列表
• /news/detail/:id - 前台新闻详情

依赖安装

npm install @wangeditor/editor @wangeditor/editor-for-vue --legacy-peer-deps

使用说明

1. 在后台管理系统中，通过"新闻管理"菜单进入新闻列表页面
2. 可以新增、编辑、删除新闻
3. 设置新闻状态为"发布"后，新闻将在前端展示页面显示
4. 前端用户可以通过新闻列表页面查看已发布的新闻

注意事项

1. 需要Java 17环境编译后端代码
2. 前端需要安装wangEditor富文本编辑器依赖
3. 数据库需要执行t_news表的创建语句