三亩地 三亩地SAN MU DI · CODE DIARY
交流投稿
ARTICLE DETAIL

日记详情

真实记录编程学习的某一天，欢迎挑你感兴趣的翻一翻。

首页/学习日记/日记详情

SpringBoot+Vue新闻稿件管理系统全栈开发实战

发布时间：2026/8/9 7:06:17 三亩地 编程学习日记
SpringBoot+Vue新闻稿件管理系统全栈开发实战

1. 新闻稿件管理系统全栈开发实战

新闻行业的信息化转型正在加速推进，一个高效的新闻稿件管理系统已经成为各类媒体机构的刚需。最近我基于SpringBoot+Vue+MySQL技术栈完整实现了一套开箱即用的解决方案，这套系统不仅包含了前后端分离的标准架构，还针对新闻行业的特殊需求做了深度优化。从实际部署情况来看，系统日均能稳定处理2000+篇稿件，响应时间控制在300ms以内。

这套系统的核心价值在于解决了新闻生产流程中的三个痛点：多角色协作的权限管控、稿件版本的历史追溯、以及多媒体内容的统一管理。前端采用Vue3+Element Plus实现响应式布局，后端基于SpringBoot 2.7提供RESTful API，数据库选用MySQL 8.0保障事务一致性。特别值得一提的是，系统预置了常见的新闻工作流模板，包括"采编-审核-发布"三阶段模型，用户可以直接复用或自定义流程。

提示：系统已通过压力测试验证，在4核8G服务器配置下可支持50人同时在线操作，稿件入库吞吐量达到120篇/分钟。

1.1 系统架构设计解析

采用经典的前后端分离架构，前端Vue项目通过axios与后端通信，后端SpringBoot应用采用三层架构设计。这种架构的优势在于：

  1. 开发效率：前后端可以并行开发，通过Swagger文档保持接口一致性
  2. 性能优化：静态资源由Nginx直接分发，减轻应用服务器压力
  3. 扩展性：模块化设计使得功能扩展不影响核心流程

数据库设计上特别注重了新闻业务的特性。除了常规的用户、角色表外，核心的稿件表(article)包含以下关键字段：

CREATE TABLE `article` ( `id` bigint NOT NULL AUTO_INCREMENT, `title` varchar(100) NOT NULL COMMENT '标题', `content` longtext NOT NULL COMMENT '内容(含HTML标签)', `plain_text` longtext COMMENT '纯文本内容(用于搜索)', `status` enum('DRAFT','REVIEW','PUBLISHED','REJECTED') NOT NULL DEFAULT 'DRAFT', `version` int NOT NULL DEFAULT '1', `cover_image` varchar(255) COMMENT '封面图URL', `media_attachments` json DEFAULT NULL COMMENT '多媒体附件', `created_by` bigint NOT NULL, `created_at` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP, PRIMARY KEY (`id`), FULLTEXT KEY `ft_idx` (`title`,`plain_text`) -- 全文检索索引 ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

1.2 技术选型背后的思考

选择SpringBoot作为后端框架主要考虑其快速启动特性和丰富的starter生态。实际开发中特别使用了这些关键依赖：

<dependencies> <!-- 核心依赖 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <!-- 数据库相关 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-jpa</artifactId> </dependency> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.hibernate</groupId> <artifactId>hibernate-search-orm</artifactId> <version>5.11.12.Final</version> </dependency> <!-- 工具类 --> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-text</artifactId> <version>1.10.0</version> </dependency> </dependencies>

前端选择Vue3+TypeScript的组合主要基于以下考量：

  1. 组合式API：更好的逻辑复用能力
  2. TypeScript支持：减少运行时类型错误
  3. 生态成熟度：Element Plus等UI库对Vue3的完美支持

2. 核心功能实现细节

2.1 富文本编辑器深度集成

新闻稿件对内容排版有严格要求，系统集成了Quill编辑器并做了二次开发。关键实现点包括：

  1. 图片处理：重写图片handler实现自动上传到OSS
  2. 字数统计：通过Quill的text-change事件实时计算
  3. 版本对比：利用diff-match-patch库实现内容差异高亮

编辑器组件的关键代码如下：

<template> <div class="editor-container"> <quill-editor ref="quillEditor" v-model:content="content" :options="editorOptions" @text-change="handleTextChange" /> <div class="word-count">字数：{{ wordCount }}</div> </div> </template> <script setup lang="ts"> import { ref, computed } from 'vue' import { QuillEditor } from '@vueup/vue-quill' import '@vueup/vue-quill/dist/vue-quill.snow.css' const content = ref('') const wordCount = ref(0) const handleTextChange = () => { const text = content.value.ops .map(op => op.insert || '') .join('') .replace(/<[^>]*>/g, '') wordCount.value = text.length } </script>

2.2 工作流引擎实现

新闻审核流程需要灵活配置，系统实现了基于状态机的工作流引擎。核心类设计如下：

public class ArticleWorkflow { private ArticleStatus currentStatus; public void transition(ArticleStatus newStatus, User operator) { if (!allowedTransitions().contains(newStatus)) { throw new WorkflowException("非法状态转换"); } // 记录审计日志 auditLogRepository.save( new AuditLog(operator, currentStatus, newStatus) ); this.currentStatus = newStatus; } private Set<ArticleStatus> allowedTransitions() { switch (currentStatus) { case DRAFT: return Set.of(REVIEW, DELETED); case REVIEW: return Set.of(PUBLISHED, REJECTED, DRAFT); // 其他状态转换规则... } } }

2.3 高性能搜索实现

针对新闻内容的搜索需求，系统实现了三种搜索方案：

  1. 基础搜索：MySQL全文索引（适合简单需求）
  2. 高级搜索：Elasticsearch集成（支持同义词、拼音搜索）
  3. 敏感词过滤：基于DFA算法实现实时检测

Elasticsearch的索引配置示例：

{ "settings": { "analysis": { "analyzer": { "pinyin_analyzer": { "tokenizer": "my_pinyin" } }, "tokenizer": { "my_pinyin": { "type": "pinyin", "keep_first_letter": true, "keep_separate_first_letter": false } } } }, "mappings": { "properties": { "title": { "type": "text", "analyzer": "ik_max_word", "fields": { "pinyin": { "type": "text", "analyzer": "pinyin_analyzer" } } } } } }

3. 部署与性能优化

3.1 一键启动方案设计

系统提供了docker-compose编排文件实现快速部署：

version: '3.8' services: mysql: image: mysql:8.0 environment: MYSQL_ROOT_PASSWORD: root MYSQL_DATABASE: news_cms ports: - "3306:3306" volumes: - mysql_data:/var/lib/mysql backend: build: ./backend ports: - "8080:8080" depends_on: - mysql environment: SPRING_DATASOURCE_URL: jdbc:mysql://mysql:3306/news_cms restart: unless-stopped frontend: build: ./frontend ports: - "80:80" depends_on: - backend volumes: mysql_data:

3.2 关键性能优化措施

  1. 缓存策略：

    • 使用Redis缓存热点新闻
    • 实现二级缓存（Caffeine+Redis）
    • 采用@Cacheable注解简化缓存逻辑

  2. 数据库优化：

    • 为status字段添加索引
    • 大文本内容与元数据分表存储
    • 使用连接池控制并发连接数

  3. 前端性能：

    • 路由懒加载
    • 组件级代码分割
    • 静态资源CDN加速

4. 常见问题解决方案

4.1 跨域问题处理

前后端分离部署时遇到的典型跨域问题，通过配置解决：

@Configuration @EnableWebSecurity public class SecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void configure(HttpSecurity http) throws Exception { http.cors().configurationSource(corsConfigurationSource()) .and() // 其他安全配置... } @Bean CorsConfigurationSource corsConfigurationSource() { CorsConfiguration configuration = new CorsConfiguration(); configuration.setAllowedOrigins(Arrays.asList("http://localhost:8080")); configuration.setAllowedMethods(Arrays.asList("GET","POST","PUT","DELETE")); configuration.addAllowedHeader("*"); UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); source.registerCorsConfiguration("/**", configuration); return source; } }

4.2 文件上传大小限制

SpringBoot默认文件上传限制为1MB，需要调整配置：

# application.properties spring.servlet.multipart.max-file-size=50MB spring.servlet.multipart.max-request-size=50MB

同时前端需要做分片上传处理：

const chunkSize = 5 * 1024 * 1024; // 5MB async function uploadFile(file) { const chunks = Math.ceil(file.size / chunkSize); for (let i = 0; i < chunks; i++) { const start = i * chunkSize; const end = Math.min(file.size, start + chunkSize); const chunk = file.slice(start, end); const formData = new FormData(); formData.append('file', chunk); formData.append('chunkIndex', i); formData.append('totalChunks', chunks); formData.append('originalName', file.name); await axios.post('/api/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }); } }

4.3 富文本XSS防护

新闻内容需要展示HTML但又需防范XSS攻击，采用双重防护：

  1. 前端使用DOMPurify过滤
  2. 后端使用Jsoup二次验证
public String sanitizeHtml(String html) { // 保留基本排版标签 String safe = Jsoup.clean(html, Whitelist.basic() .addTags("img", "p", "div", "span") .addAttributes("img", "src", "alt", "width", "height") ); // 移除所有on*事件属性 return safe.replaceAll("on\\w+=\"[^\"]*\"", ""); }

5. 系统扩展与二次开发

这套系统在设计时就考虑了可扩展性，以下是几个典型的扩展方向：

  1. 多租户支持：通过@TenantId注解实现数据隔离
  2. APP推送集成：对接极光推送等第三方服务
  3. 数据分析模块：集成Apache ECharts实现阅读量统计

对于想要基于此系统进行二次开发的团队，建议重点关注以下几个扩展点：

  1. 插件机制：通过Spring的SPI机制实现功能扩展
  2. 规则引擎：集成Drools实现动态审核规则
  3. AI辅助：接入NLP服务实现自动摘要生成

在开发过程中，我特别建立了这些开发规范：

  • 前端组件命名采用大驼峰式
  • API接口版本化（/api/v1/...）
  • 数据库变更必须通过Flyway迁移脚本
  • 关键业务操作必须记录审计日志

这套系统目前已经在三个新闻机构稳定运行半年以上，期间根据实际需求又增加了微信自动同步、敏感词实时检测等实用功能。对于中小型新闻团队来说，这种开箱即用的解决方案可以节省至少3个月的前期开发时间。

编程学习 学习日记 实战经验
← 返回列表