1. 项目背景与技术选型
新闻资讯系统作为典型的Web应用，采用前后端分离架构已成为行业主流方案。这个毕业设计项目选择SpringBoot+Vue+MySQL的技术组合，充分考虑了教学实践与工业实践的平衡点。
技术栈优势分析：
- SpringBoot：简化了传统Spring应用的初始搭建和开发过程，通过自动配置和起步依赖大幅减少XML配置。对于新闻系统这类需要快速迭代的项目，其内嵌Tomcat和约定优于配置的特性尤为实用。
- Vue.js：渐进式前端框架的轻量级特性非常适合内容展示型应用。其响应式数据绑定和组件化开发模式，能够高效实现新闻分类、列表渲染和详情页交互。
- MySQL：作为关系型数据库的经典选择，在保证ACID特性的同时，5.7+版本对JSON字段的良好支持，能够适应新闻内容中的非结构化数据存储需求。
提示：实际开发中推荐使用SpringBoot 2.7.x + Vue 3.x + MySQL 8.0的组合，这些版本在2023年已形成稳定的生态兼容性。
2. 系统架构设计
2.1 前后端分离架构
系统采用典型的三层架构：
code复制┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Vue前端工程 │ ←→ │ SpringBoot应用 │ ←→ │ MySQL │
└─────────────────┘ └─────────────────┘ └─────────────────┘
↑ ↑
Nginx代理 MyBatis-Plus ORM
2.2 数据库核心表设计
新闻系统的数据库应包含以下核心表：
1. 用户表(users)
sql复制CREATE TABLE `users` (
`user_id` INT NOT NULL AUTO_INCREMENT,
`username` VARCHAR(50) NOT NULL,
`password` VARCHAR(100) NOT NULL COMMENT 'BCrypt加密存储',
`role` ENUM('admin','editor','user') DEFAULT 'user',
`avatar` VARCHAR(255) DEFAULT NULL,
PRIMARY KEY (`user_id`),
UNIQUE KEY `idx_username` (`username`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
2. 新闻主表(news)
sql复制CREATE TABLE `news` (
`news_id` INT NOT NULL AUTO_INCREMENT,
`title` VARCHAR(100) NOT NULL,
`content` LONGTEXT NOT NULL,
`cover_img` VARCHAR(255) DEFAULT NULL,
`category_id` INT NOT NULL,
`author_id` INT NOT NULL,
`publish_time` DATETIME DEFAULT CURRENT_TIMESTAMP,
`view_count` INT DEFAULT 0,
`status` TINYINT DEFAULT 1 COMMENT '0-草稿 1-已发布',
PRIMARY KEY (`news_id`),
KEY `idx_category` (`category_id`),
KEY `idx_author` (`author_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 新闻分类表(categories)
sql复制CREATE TABLE `categories` (
`category_id` INT NOT NULL AUTO_INCREMENT,
`name` VARCHAR(30) NOT NULL,
`sort_order` INT DEFAULT 0,
PRIMARY KEY (`category_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;
3. 后端实现关键点
3.1 SpringBoot应用配置
建议采用多环境配置方式：
yaml复制# application-dev.yml
spring:
datasource:
url: jdbc:mysql://localhost:3306/news_db?useSSL=false&serverTimezone=Asia/Shanghai
username: root
password: 123456
driver-class-name: com.mysql.cj.jdbc.Driver
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
global-config:
db-config:
logic-delete-field: deleted # 逻辑删除字段
logic-delete-value: 1
logic-not-delete-value: 0
3.2 RESTful API设计示例
新闻相关接口设计：
| 方法 | 路径 | 描述 | 权限要求 |
|---|---|---|---|
| GET | /api/news | 分页获取新闻列表 | 无 |
| POST | /api/news | 创建新闻 | editor以上 |
| PUT | /api/news/ | 更新新闻 | editor以上 |
| GET | /api/news/ | 获取新闻详情 | 无 |
| DEL | /api/news/ | 删除新闻 | admin |
3.3 使用MyBatis-Plus实现CRUD
新闻Mapper接口示例：
java复制@Mapper
public interface NewsMapper extends BaseMapper<News> {
@Select("SELECT n.*, u.username as author_name " +
"FROM news n LEFT JOIN users u ON n.author_id = u.user_id " +
"WHERE n.category_id = #{categoryId} AND n.status = 1 " +
"ORDER BY n.publish_time DESC")
List<NewsVO> selectByCategoryWithAuthor(@Param("categoryId") Integer categoryId);
}
4. 前端实现关键点
4.1 Vue项目结构规划
推荐的项目目录结构：
code复制src/
├── api/ # 接口定义
├── assets/ # 静态资源
├── components/ # 公共组件
│ ├── NewsCard.vue # 新闻卡片组件
│ └── Pagination.vue # 分页组件
├── router/ # 路由配置
├── store/ # Vuex状态管理
├── utils/ # 工具函数
└── views/
├── Home.vue # 首页
├── News/ # 新闻相关页面
│ ├── List.vue
│ └── Detail.vue
└── Admin/ # 管理后台
4.2 新闻列表页实现
使用Vue3 Composition API示例：
vue复制<script setup>
import { ref, onMounted } from 'vue'
import { getNewsList } from '@/api/news'
import NewsCard from '@/components/NewsCard.vue'
const newsList = ref([])
const pagination = ref({
current: 1,
pageSize: 10,
total: 0
})
const fetchData = async () => {
const res = await getNewsList({
page: pagination.value.current,
size: pagination.value.pageSize
})
newsList.value = res.data.list
pagination.value.total = res.data.total
}
onMounted(fetchData)
</script>
<template>
<div class="news-container">
<NewsCard
v-for="item in newsList"
:key="item.news_id"
:title="item.title"
:cover="item.cover_img"
:author="item.author_name"
:time="item.publish_time"
/>
<Pagination
v-model:current="pagination.current"
:page-size="pagination.pageSize"
:total="pagination.total"
@change="fetchData"
/>
</div>
</template>
5. 系统部署方案
5.1 后端部署要点
- 打包SpringBoot应用：
bash复制mvn clean package -DskipTests
- 使用Docker部署（示例Dockerfile）：
dockerfile复制FROM openjdk:11-jre
COPY target/news-system-0.0.1-SNAPSHOT.jar /app.jar
EXPOSE 8080
ENTRYPOINT ["java","-jar","/app.jar"]
5.2 前端部署方案
- 生产环境构建：
bash复制npm run build
- Nginx配置示例：
nginx复制server {
listen 80;
server_name news.example.com;
location / {
root /usr/share/nginx/html;
index index.html;
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
}
}
6. 毕业设计扩展建议
-
性能优化方向：
- 引入Redis缓存热点新闻数据
- 使用Elasticsearch实现新闻全文检索
- 前端实现图片懒加载和无限滚动
-
功能扩展方向：
- 增加新闻评论功能
- 实现基于JWT的完整权限系统
- 开发新闻推荐算法
-
论文撰写要点：
- 重点对比传统JSP方案与前后端分离方案的优劣
- 详细记录技术选型的决策过程
- 包含系统性能测试数据（如JMeter压测结果）
注意事项：数据库连接池建议使用HikariCP而非DBCP，实际测试中在并发1000请求时，HikariCP的平均响应时间比DBCP低40%左右。