# news

**Repository Path**: man--bobobo/news

## Basic Information

- **Project Name**: news
- **Description**: vibe coding。
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2026-03-11
- **Last Updated**: 2026-03-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# NewsHub - 新闻管理系统

一个基于 **Vue 3 + Spring Boot** 构建的现代化新闻管理系统，适合作为全栈开发教学项目。

## 项目概述

本项目是一个完整的新闻管理系统，包含用户管理、分类管理、新闻管理、评论管理、喜欢功能和操作日志等核心功能。采用前后端分离架构，前端使用 Vue 3 + Vite，后端使用 Spring Boot + MyBatis-Plus。

### 技术栈

| 层级 | 技术 | 版本 |
|------|------|------|
| 前端运行环境 | Node.js | v18.16.0 |
| 前端框架 | Vue 3 | ^3.4.0 |
| 构建工具 | Vite | ^5.0.0 |
| 路由管理 | Vue Router | ^4.2.0 |
| HTTP 客户端 | Axios | ^1.6.0 |
| 图标库 | Iconify | ^5.0.0 |
| 富文本编辑器 | WangEditor | ^5.1.23 |
| JDK | Java | 17 |
| 项目构建 | Maven | 3.9.12 |
| 后端框架 | Spring Boot | 3.1.5 |
| ORM 框架 | MyBatis-Plus | 3.5.5 |
| 数据库 | MySQL | 8.0.45 |

## 项目结构

```
news/
├── backend/                                          # 后端项目
│   ├── src/
│   │   ├── main/
│   │   │   ├── java/com/news/
│   │   │   │   ├── annotation/                       # 自定义注解
│   │   │   │   │   └── OperationLogAnnotation.java   # 操作日志注解
│   │   │   │   ├── aspect/                           # AOP切面
│   │   │   │   │   └── OperationLogAspect.java       # 日志切面
│   │   │   │   ├── common/                           # 通用类
│   │   │   │   │   ├── PageResult.java               # 分页结果封装
│   │   │   │   │   └── ResponseResult.java           # 统一响应封装
│   │   │   │   ├── config/                           # 配置类
│   │   │   │   │   ├── WebConfig.java                # 跨域配置
│   │   │   │   │   └── MyBatisPlusConfig.java        # MyBatis-Plus配置
│   │   │   │   ├── controller/                       # 控制器层
│   │   │   │   ├── entity/                           # 实体类
│   │   │   │   ├── mapper/                           # 数据访问层
│   │   │   │   └── service/                          # 业务逻辑层
│   │   │   │       └── impl/                         # 业务实现类
│   │   │   └── resources/
│   │   │       ├── application.yml                   # 应用配置
│   │   │       └── db/migration/                     # 数据库迁移脚本
│   │   └── test/                                     # 测试代码
│   └── pom.xml                                       # Maven 配置
│
├── frontend/                                         # 前端项目
│   ├── src/
│   │   ├── api/                                      # API 接口
│   │   │   ├── user.js                               # 用户接口
│   │   │   ├── news.js                               # 新闻接口
│   │   │   ├── newsLike.js                           # 喜欢接口
│   │   │   ├── newsView.js                           # 阅读记录接口
│   │   │   ├── category.js                           # 分类接口
│   │   │   ├── comment.js                            # 评论接口
│   │   │   └── operationLog.js                       # 日志接口
│   │   ├── components/                               # 组件
│   │   │   ├── admin/                                # 后台管理组件
│   │   │   │   ├── Profile.vue                       # 个人信息
│   │   │   │   ├── MyNews.vue                        # 我的新闻
│   │   │   │   ├── MyComments.vue                    # 我的评论
│   │   │   │   ├── MyLikes.vue                       # 我的喜欢
│   │   │   │   ├── UserManagement.vue                # 用户管理
│   │   │   │   ├── CategoryManagement.vue            # 分类管理
│   │   │   │   ├── NewsManagement.vue                # 新闻管理
│   │   │   │   ├── CommentManagement.vue             # 评论管理
│   │   │   │   └── OperationLogManagement.vue        # 操作日志管理
│   │   │   └── common/                               # 公共组件
│   │   │       ├── Pagination.vue                    # 分页组件
│   │   │       ├── RichTextEditor.vue                # 富文本编辑器
│   │   │       └── ThemeToggle.vue                   # 主题切换
│   │   ├── router/                                   # 路由配置
│   │   ├── store/                                    # 状态管理
│   │   ├── styles/                                   # 样式文件
│   │   └── views/                                    # 页面视图
│   ├── index.html
│   ├── package.json
│   └── vite.config.js
│
└── docs/                                             # 项目文档
    ├── 0.AI辅助开发指南.md
    ├── 0.vibe coding指南.md
    ├── 1.需求分析.md
    ├── 2.数据库设计.md
    ├── 3.接口文档.md
    ├── 4.init_database_final.sql
    ├── 5.测试计划.md
    ├── 6.测试用例.md
    ├── 7.测试报告.md
    └── 8.mock_data.sql
```

## 快速开始

### 环境要求

- Node.js 18+
- JDK 17+
- MySQL 8.0+
- Maven 3.8+

### 数据库配置

1. 创建数据库：
```sql
CREATE DATABASE news_management DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
```

2. 执行初始化脚本：
```bash
mysql -u root -p news_management < docs/4.init_database_final.sql
```

3. 配置数据库连接（可选方式）：

**方式一：环境变量**（推荐）
```bash
# Windows PowerShell
$env:DB_HOST="localhost"
$env:DB_PORT="3306"
$env:DB_NAME="news_management"
$env:DB_USERNAME="root"
$env:DB_PASSWORD="your_password"

# Linux/Mac
export DB_HOST=localhost
export DB_PORT=3306
export DB_NAME=news_management
export DB_USERNAME=root
export DB_PASSWORD=your_password
```

**方式二：修改配置文件**

编辑 `backend/src/main/resources/application.yml`：
```yaml
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/news_management?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai
    username: root
    password: your_password
```

**默认配置**（开发环境）：
| 配置项 | 默认值 |
|--------|--------|
| 数据库地址 | localhost:3306 |
| 数据库名 | news_management |
| 用户名 | root |
| 密码 | a123456 |

### 后端启动

```bash
cd backend

# 启动项目
mvn spring-boot:run
```

后端服务将在 http://localhost:8080 启动。

### 前端启动

```bash
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev
```

前端服务将在 http://localhost:3000 启动。

### 默认账号

| 用户名 | 密码 | 角色 |
|--------|------|------|
| admin | 123456 | 管理员 |
| user1 | 123456 | 普通用户 |
| test | 123456 | 普通用户 |

> ⚠️ **安全提示**: 生产环境请务必修改默认密码！

## 功能模块

### 公共功能

#### 新闻浏览
- 新闻列表展示（支持分页）
- 热门头条轮播
- 按分类筛选新闻
- 新闻详情查看
- 浏览量统计

#### 新闻喜欢
- 喜欢/取消喜欢新闻
- 喜欢数量统计
- 首页卡片显示喜欢数
- 详情页显示喜欢状态

#### 阅读记录
- 记录用户阅读过的新闻
- 首页卡片显示阅读状态
- 详情页自动标记已阅读
- 批量查询阅读状态

#### 评论功能
- 发表评论
- 多级回复
- 编辑/删除自己的评论

#### 其他功能
- 深色/亮色主题切换
- 响应式设计
- 关于我们/联系方式/隐私政策页面

### 用户功能

#### 个人中心
- 查看个人信息
- 编辑个人信息
- 修改密码

#### 我的新闻
- 发布新闻（富文本编辑器）
- 管理自己的新闻
- 发布/下架新闻

#### 我的评论
- 查看自己的评论
- 编辑/删除评论

#### 我的喜欢
- 查看喜欢的新闻列表
- 取消喜欢

### 管理员功能

#### 用户管理
- 用户列表（分页）
- 添加/编辑/删除用户
- 用户角色管理
- 用户状态管理

#### 分类管理
- 分类列表（分页）
- 添加/编辑/删除分类
- 分类排序
- 批量修改

#### 新闻管理
- 新闻列表（分页）
- 添加/编辑/删除新闻
- 富文本编辑器
- 新闻发布/下架
- 浏览量/喜欢数统计

#### 评论管理
- 评论列表（分页）
- 删除评论
- 开启/关闭评论

#### 操作日志
- 日志列表（分页）
- 按操作类型筛选
- 按时间范围筛选
- 批量删除日志
- 清理历史日志

## API 接口

### 用户模块
| 方法 | 路径 | 描述 |
|------|------|------|
| POST | /api/user/login | 用户登录 |
| POST | /api/user/register | 用户注册 |
| GET | /api/user/list | 获取用户列表 |
| GET | /api/user/page | 分页获取用户 |
| POST | /api/user/add | 添加用户 |
| PUT | /api/user/update | 更新用户 |
| DELETE | /api/user/delete/{id} | 删除用户 |

### 分类模块
| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/category/list | 获取分类列表 |
| GET | /api/category/page | 分页获取分类 |
| POST | /api/category/add | 添加分类 |
| PUT | /api/category/update | 更新分类 |
| PUT | /api/category/batch-update | 批量更新分类 |
| DELETE | /api/category/delete/{id} | 删除分类 |

### 新闻模块
| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/news/list | 获取新闻列表 |
| GET | /api/news/page | 分页获取新闻 |
| GET | /api/news/get/{id} | 获取新闻详情（自动增加浏览量） |
| POST | /api/news/add | 添加新闻 |
| PUT | /api/news/update | 更新新闻 |
| DELETE | /api/news/delete/{id} | 删除新闻 |
| PUT | /api/news/publish/{id} | 发布新闻 |
| PUT | /api/news/unpublish/{id} | 下架新闻 |

### 喜欢模块
| 方法 | 路径 | 描述 |
|------|------|------|
| POST | /api/like/news/{newsId} | 喜欢新闻 |
| DELETE | /api/like/news/{newsId} | 取消喜欢 |
| GET | /api/like/news/{newsId}/status | 获取喜欢状态 |
| GET | /api/like/my-likes | 获取我喜欢的新闻 |

### 阅读记录模块
| 方法 | 路径 | 描述 |
|------|------|------|
| POST | /api/view/news/{newsId} | 标记新闻为已阅读 |
| GET | /api/view/news/{newsId}/status | 获取阅读状态 |
| POST | /api/view/batch-status | 批量获取阅读状态 |

### 评论模块
| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/comment/listByNews/{newsId} | 获取新闻评论 |
| GET | /api/comment/page | 分页获取评论 |
| POST | /api/comment/add | 添加评论 |
| PUT | /api/comment/update | 更新评论 |
| DELETE | /api/comment/delete/{id} | 删除评论 |
| PUT | /api/comment/close/{id} | 关闭评论 |
| PUT | /api/comment/open/{id} | 开启评论 |

### 操作日志模块
| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/operation-log/page | 分页获取日志 |
| GET | /api/operation-log/list | 获取日志列表 |
| GET | /api/operation-log/operation-types | 获取操作类型列表 |
| DELETE | /api/operation-log/delete/{id} | 删除日志 |
| DELETE | /api/operation-log/batch-delete | 批量删除日志 |
| DELETE | /api/operation-log/clear | 清理历史日志 |

## 数据库设计

### 核心表

| 表名 | 说明 |
|------|------|
| user | 用户表 |
| category | 分类表 |
| news | 新闻表（含浏览量、喜欢数、封面图片） |
| comment | 评论表（支持多级回复） |
| news_like | 新闻喜欢表 |
| news_view | 新闻阅读记录表 |
| operation_log | 操作日志表 |

### 数据库迁移

项目提供数据库迁移脚本：

- `docs/4.init_database_final.sql` - 完整初始化脚本
- `docs/8.mock_data.sql` - 模拟测试数据
- `backend/src/main/resources/db/migration/` - 数据库版本迁移脚本
  - `V1.1__add_category_sort_order.sql` - 分类排序字段迁移
  - `V1.2__add_news_like_table.sql` - 新闻喜欢功能迁移
  - `V1.3__add_news_view_table.sql` - 新闻阅读记录迁移

## 开发规范

### 代码规范

#### Java 代码规范
- 遵循阿里巴巴 Java 开发手册
- 类名使用大驼峰命名（PascalCase）
- 方法名、变量名使用小驼峰命名（camelCase）
- 常量使用全大写下划线分隔（UPPER_SNAKE_CASE）
- 所有类必须添加类注释和方法注释

#### Vue 代码规范
- 组件名使用大驼峰命名（PascalCase）
- props 定义尽量详细，包含类型、默认值、验证
- 使用 Composition API
- CSS 使用 Scoped 避免样式污染


## 测试

### 前端测试

前端使用 Vitest 进行单元测试：

```bash
cd frontend

# 运行测试
npm run test

# 运行测试（单次执行）
npm run test:run

# 运行测试并生成覆盖率报告
npm run test:coverage
```

测试文件位于 `frontend/src/components/**/__tests__/` 目录下。

### 后端测试

后端使用 Spring Boot Test 进行单元测试：

```bash
cd backend

# 运行所有测试
mvn test

# 跳过测试打包
mvn package -DskipTests
```

测试文件位于 `backend/src/test/java/` 目录下，测试报告位于 `backend/target/surefire-reports/`。

## 学习要点

### 前端学习要点
1. **Vue 3 Composition API** - 响应式数据、生命周期、组合式函数
2. **Vue Router** - 路由配置、导航守卫、动态路由
3. **Axios** - HTTP 请求封装、拦截器、错误处理
4. **CSS 变量** - 主题切换、响应式设计
5. **组件设计** - 公共组件抽取、组件通信
6. **富文本编辑器** - WangEditor 集成

### 后端学习要点
1. **Spring Boot** - 自动配置、依赖注入、RESTful API
2. **MyBatis-Plus** - ORM 映射、条件构造器、分页插件
3. **AOP 切面编程** - 操作日志自动记录
4. **自定义注解** - @OperationLogAnnotation
5. **分层架构** - Controller/Service/Mapper 三层架构
6. **统一响应** - ResponseResult 封装
7. **跨域处理** - CORS 配置

## 项目特色

- ✅ 前后端分离架构
- ✅ 响应式设计，适配多端
- ✅ 深色/亮色主题切换
- ✅ 富文本编辑器
- ✅ 多级评论回复
- ✅ 新闻喜欢功能
- ✅ 新闻阅读记录
- ✅ 新闻封面图片
- ✅ AOP 操作日志记录
- ✅ 分页查询优化
- ✅ 完善的权限控制
- ✅ 前后端单元测试覆盖

## 许可证

MIT License