201 lines
3.8 KiB
Markdown
201 lines
3.8 KiB
Markdown
# 校园新闻管理系统
|
||
|
||
这是一个基于 Vue 3 + TypeScript + Vite 构建的现代化校园新闻管理系统前端项目。该系统提供了新闻管理、用户中心、AI 对话、学习计划等功能模块。
|
||
|
||
## 技术栈
|
||
|
||
- **框架**: Vue 3.5.22
|
||
- **构建工具**: Vite 5.0.0
|
||
- **语言**: TypeScript 4.5.5
|
||
- **UI 组件库**: Element Plus 2.11.4
|
||
- **状态管理**: Vuex 4.1.0
|
||
- **路由管理**: Vue Router 4.5.1
|
||
- **HTTP 客户端**: Axios 1.7.9
|
||
- **PWA 支持**: vite-plugin-pwa
|
||
|
||
## 功能模块
|
||
|
||
### 首页模块
|
||
- 横幅管理
|
||
- 菜单导航
|
||
- 新闻展示
|
||
- 推荐内容
|
||
- 搜索功能
|
||
- 统计数据
|
||
|
||
### 系统管理模块
|
||
- 用户管理
|
||
- 角色管理
|
||
- 权限管理
|
||
- 部门管理
|
||
- 菜单管理
|
||
- 文件管理
|
||
|
||
### 学习模块
|
||
- 课程管理
|
||
- 学习计划
|
||
- 学习任务
|
||
- 学习记录
|
||
|
||
### 用户中心模块
|
||
- 个人资料
|
||
- 浏览记录
|
||
- 收藏管理
|
||
- 成就系统
|
||
- 积分系统
|
||
|
||
### AI 助手模块
|
||
- 智能对话
|
||
- 知识库管理
|
||
- 消息管理
|
||
- 文件上传
|
||
- Agent 配置
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
schoolNewsWeb/
|
||
├── src/
|
||
│ ├── apis/ # API 接口定义
|
||
│ │ ├── ai/ # AI 相关接口
|
||
│ │ ├── homepage/ # 首页相关接口
|
||
│ │ ├── study/ # 学习模块接口
|
||
│ │ ├── system/ # 系统管理接口
|
||
│ │ └── usercenter/ # 用户中心接口
|
||
│ ├── components/ # 公共组件
|
||
│ ├── directives/ # 自定义指令
|
||
│ ├── layouts/ # 布局组件
|
||
│ ├── router/ # 路由配置
|
||
│ ├── store/ # 状态管理
|
||
│ ├── types/ # TypeScript 类型定义
|
||
│ ├── utils/ # 工具函数
|
||
│ └── views/ # 页面组件
|
||
├── public/ # 静态资源
|
||
└── dist/ # 构建输出目录
|
||
```
|
||
|
||
## 环境要求
|
||
|
||
- Node.js >= 14.0.0
|
||
- npm >= 6.0.0 或 yarn >= 1.22.0
|
||
|
||
## 如何运行
|
||
|
||
### 1. 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
或者使用 yarn：
|
||
|
||
```bash
|
||
yarn install
|
||
```
|
||
|
||
### 2. 启动开发服务器
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
或者：
|
||
|
||
```bash
|
||
npm run serve
|
||
```
|
||
|
||
开发服务器将在 `http://localhost:8080` 启动，并自动打开浏览器。
|
||
|
||
### 3. 后端API配置
|
||
|
||
项目默认将 `/api` 路径代理到 `http://127.0.0.1:8081/schoolNewsServ`。
|
||
|
||
如需修改后端地址，请编辑 `vite.config.js` 文件中的 proxy 配置：
|
||
|
||
```javascript
|
||
proxy: {
|
||
'/api': {
|
||
target: 'http://your-backend-url',
|
||
changeOrigin: true,
|
||
rewrite: (path) => path.replace(/^\/api/, '')
|
||
}
|
||
}
|
||
```
|
||
|
||
## 如何构建
|
||
|
||
### 构建生产版本
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建产物将输出到 `dist/` 目录。
|
||
|
||
### 预览构建结果
|
||
|
||
```bash
|
||
npm run preview
|
||
```
|
||
|
||
## 代码规范
|
||
|
||
### 运行代码检查
|
||
|
||
```bash
|
||
npm run lint
|
||
```
|
||
|
||
项目使用 ESLint 进行代码检查，配置了 TypeScript 和 Vue 相关的规则。
|
||
|
||
## 功能特性
|
||
|
||
### PWA 支持
|
||
项目已配置 PWA 支持，可以作为渐进式 Web 应用安装到设备上。
|
||
|
||
### 权限系统
|
||
- 基于角色的权限控制（RBAC）
|
||
- 自定义指令进行权限校验
|
||
- 动态路由生成
|
||
|
||
### 响应式设计
|
||
- 适配桌面端和移动端
|
||
- 现代化的 UI 设计
|
||
- 优秀的用户体验
|
||
|
||
## 开发说明
|
||
|
||
### 路径别名
|
||
|
||
项目配置了 `@` 作为 `src` 目录的别名，可以这样导入模块：
|
||
|
||
```typescript
|
||
import { someFunction } from '@/utils/helper'
|
||
import MyComponent from '@/components/MyComponent.vue'
|
||
```
|
||
|
||
### 环境变量
|
||
|
||
项目定义了以下环境变量：
|
||
- `process.env.BASE_URL`: `/schoolNewsWeb/`
|
||
- `process.env.VITE_API_BASE_URL`: `/api`
|
||
- `process.env.VITE_APP_TITLE`: `校园新闻管理系统`
|
||
|
||
## 浏览器支持
|
||
|
||
支持所有现代浏览器的最新两个版本：
|
||
- Chrome
|
||
- Firefox
|
||
- Safari
|
||
- Edge
|
||
|
||
## 许可证
|
||
|
||
私有项目
|
||
|
||
## 联系方式
|
||
|
||
如有问题或建议，请联系项目维护团队。
|
||
|