feat: 添加Docker部署配置和项目文档
添加前后端Dockerfile和docker-compose配置 创建部署脚本deploy.sh 完善项目文档结构包括前后端文档、API文档和部署文档 更新README提供项目概述和快速开始指南 文档包括详细的技术栈说明、功能模块介绍和部署指南 部署方案支持一键式容器化部署和宝塔面板集成
This commit is contained in:
332
docs/api.md
Normal file
332
docs/api.md
Normal file
@@ -0,0 +1,332 @@
|
||||
# API接口文档
|
||||
|
||||
## 接口概述
|
||||
|
||||
本文档定义了微信小程序前端调用的API接口，包括认证、用户、数据等相关接口。
|
||||
|
||||
## 基础信息
|
||||
|
||||
- API基础路径: `http://localhost:3000/api`
|
||||
- 响应格式: JSON
|
||||
- 认证方式: JWT
|
||||
|
||||
## 认证接口
|
||||
|
||||
### 1. 用户登录
|
||||
|
||||
**接口地址**: `/auth/login`
|
||||
**请求方式**: POST
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必选 | 描述 |
|
||||
|-------|------|------|------|
|
||||
| username | string | 是 | 用户名 |
|
||||
| password | string | 是 | 密码 |
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "登录成功",
|
||||
"data": {
|
||||
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
|
||||
"user": {
|
||||
"id": "123",
|
||||
"username": "admin",
|
||||
"nickname": "管理员"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 用户注册
|
||||
|
||||
**接口地址**: `/auth/register`
|
||||
**请求方式**: POST
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必选 | 描述 |
|
||||
|-------|------|------|------|
|
||||
| username | string | 是 | 用户名 |
|
||||
| password | string | 是 | 密码 |
|
||||
| nickname | string | 是 | 昵称 |
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "注册成功",
|
||||
"data": {
|
||||
"id": "123",
|
||||
"username": "user1",
|
||||
"nickname": "新用户"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 用户接口
|
||||
|
||||
### 1. 获取用户信息
|
||||
|
||||
**接口地址**: `/user/info`
|
||||
**请求方式**: GET
|
||||
**请求头**:
|
||||
- Authorization: Bearer {token}
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功",
|
||||
"data": {
|
||||
"id": "123",
|
||||
"username": "admin",
|
||||
"nickname": "管理员",
|
||||
"avatar": "https://example.com/avatar.jpg",
|
||||
"createdAt": "2026-03-18T00:00:00Z"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 更新用户信息
|
||||
|
||||
**接口地址**: `/user/update`
|
||||
**请求方式**: PUT
|
||||
**请求头**:
|
||||
- Authorization: Bearer {token}
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必选 | 描述 |
|
||||
|-------|------|------|------|
|
||||
| nickname | string | 否 | 昵称 |
|
||||
| avatar | string | 否 | 头像URL |
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "更新成功",
|
||||
"data": {
|
||||
"id": "123",
|
||||
"username": "admin",
|
||||
"nickname": "新昵称",
|
||||
"avatar": "https://example.com/new-avatar.jpg"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 数据接口
|
||||
|
||||
### 1. 获取数据列表
|
||||
|
||||
**接口地址**: `/data/list`
|
||||
**请求方式**: GET
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必选 | 描述 |
|
||||
|-------|------|------|------|
|
||||
| page | number | 否 | 页码，默认1 |
|
||||
| size | number | 否 | 每页条数，默认10 |
|
||||
| keyword | string | 否 | 搜索关键词 |
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功",
|
||||
"data": {
|
||||
"list": [
|
||||
{
|
||||
"id": "1",
|
||||
"title": "数据1",
|
||||
"content": "内容1",
|
||||
"createdAt": "2026-03-18T00:00:00Z"
|
||||
}
|
||||
],
|
||||
"total": 1,
|
||||
"page": 1,
|
||||
"size": 10
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 获取数据详情
|
||||
|
||||
**接口地址**: `/data/detail/{id}`
|
||||
**请求方式**: GET
|
||||
**路径参数**:
|
||||
- id: 数据ID
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功",
|
||||
"data": {
|
||||
"id": "1",
|
||||
"title": "数据1",
|
||||
"content": "内容1",
|
||||
"createdAt": "2026-03-18T00:00:00Z",
|
||||
"updatedAt": "2026-03-18T00:00:00Z"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## AI接口
|
||||
|
||||
### 1. 智能问答
|
||||
|
||||
**接口地址**: `/ai/chat`
|
||||
**请求方式**: POST
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必选 | 描述 |
|
||||
|-------|------|------|------|
|
||||
| question | string | 是 | 问题 |
|
||||
| context | string | 否 | 上下文 |
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功",
|
||||
"data": {
|
||||
"answer": "这是AI的回答",
|
||||
"thinking": "AI的思考过程",
|
||||
"tokens": 100
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 视频接口
|
||||
|
||||
### 1. 上传视频
|
||||
|
||||
**接口地址**: `/video/upload`
|
||||
**请求方式**: POST
|
||||
**请求头**:
|
||||
- Content-Type: multipart/form-data
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必选 | 描述 |
|
||||
|-------|------|------|------|
|
||||
| video | file | 是 | 视频文件 |
|
||||
| title | string | 是 | 视频标题 |
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "上传成功",
|
||||
"data": {
|
||||
"id": "1",
|
||||
"title": "视频标题",
|
||||
"url": "https://example.com/video.mp4",
|
||||
"duration": 60
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 获取视频列表
|
||||
|
||||
**接口地址**: `/video/list`
|
||||
**请求方式**: GET
|
||||
**请求参数**:
|
||||
|
||||
| 参数名 | 类型 | 必选 | 描述 |
|
||||
|-------|------|------|------|
|
||||
| page | number | 否 | 页码，默认1 |
|
||||
| size | number | 否 | 每页条数，默认10 |
|
||||
|
||||
**响应示例**:
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "获取成功",
|
||||
"data": {
|
||||
"list": [
|
||||
{
|
||||
"id": "1",
|
||||
"title": "视频1",
|
||||
"url": "https://example.com/video1.mp4",
|
||||
"duration": 60,
|
||||
"createdAt": "2026-03-18T00:00:00Z"
|
||||
}
|
||||
],
|
||||
"total": 1,
|
||||
"page": 1,
|
||||
"size": 10
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 错误码说明
|
||||
|
||||
| 错误码 | 描述 |
|
||||
|-------|------|
|
||||
| 400 | 请求参数错误 |
|
||||
| 401 | 未授权，请登录 |
|
||||
| 403 | 禁止访问 |
|
||||
| 404 | 资源不存在 |
|
||||
| 500 | 服务器内部错误 |
|
||||
|
||||
## 调用示例
|
||||
|
||||
### 使用axios调用
|
||||
|
||||
```javascript
|
||||
// 登录
|
||||
axios.post('/api/auth/login', {
|
||||
username: 'admin',
|
||||
password: '123456'
|
||||
}).then(response => {
|
||||
const token = response.data.data.token;
|
||||
// 存储token
|
||||
localStorage.setItem('token', token);
|
||||
});
|
||||
|
||||
// 带认证的请求
|
||||
axios.get('/api/user/info', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
### 使用fetch调用
|
||||
|
||||
```javascript
|
||||
// 登录
|
||||
fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: 'admin',
|
||||
password: '123456'
|
||||
})
|
||||
}).then(response => response.json())
|
||||
.then(data => {
|
||||
const token = data.data.token;
|
||||
// 存储token
|
||||
localStorage.setItem('token', token);
|
||||
});
|
||||
|
||||
// 带认证的请求
|
||||
fetch('/api/user/info', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${localStorage.getItem('token')}`
|
||||
}
|
||||
}).then(response => response.json())
|
||||
.then(data => console.log(data));
|
||||
```
|
||||
152
docs/backend.md
Normal file
152
docs/backend.md
Normal file
@@ -0,0 +1,152 @@
|
||||
# 后端功能文档
|
||||
|
||||
## 项目概述
|
||||
|
||||
后端项目是基于Node.js的API接口服务，为微信小程序前端和Web后台管理提供数据交互支持。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Node.js 22+
|
||||
- Express.js
|
||||
- Pocketbase (数据库)
|
||||
- TypeScript
|
||||
- JWT (认证)
|
||||
- dotenv (环境变量管理)
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
back-end/
|
||||
├── src/
|
||||
│ ├── controllers/ # 控制器
|
||||
│ ├── routes/ # 路由
|
||||
│ ├── services/ # 业务逻辑
|
||||
│ ├── models/ # 数据模型
|
||||
│ ├── middlewares/ # 中间件
|
||||
│ ├── utils/ # 工具函数
|
||||
│ └── index.js # 入口文件
|
||||
├── spec/ # OpenAPI规范
|
||||
├── tests/ # 测试文件
|
||||
├── scripts/ # 脚本文件
|
||||
├── .env # 环境变量
|
||||
└── package.json # 项目配置
|
||||
```
|
||||
|
||||
## 核心功能模块
|
||||
|
||||
### 1. 认证模块
|
||||
- 用户登录/注册
|
||||
- JWT token生成与验证
|
||||
- 权限控制
|
||||
|
||||
### 2. 用户管理
|
||||
- 用户信息管理
|
||||
- 密码重置
|
||||
- 用户状态管理
|
||||
|
||||
### 3. 数据管理
|
||||
- 数据CRUD操作
|
||||
- 数据验证
|
||||
- 数据统计
|
||||
|
||||
### 4. AI交互模块
|
||||
- 与AI网关的集成
|
||||
- RAG系统对接
|
||||
- 智能问答
|
||||
|
||||
### 5. 视频服务
|
||||
- 视频流处理
|
||||
- 视频存储
|
||||
- 视频转码
|
||||
|
||||
## 开发指南
|
||||
|
||||
### 环境搭建
|
||||
|
||||
1. 安装依赖
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
2. 启动开发服务器
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
3. 运行测试
|
||||
```bash
|
||||
npm run test
|
||||
```
|
||||
|
||||
### 代码规范
|
||||
|
||||
- 使用ESLint进行代码检查
|
||||
- 遵循RESTful API设计规范
|
||||
- 错误处理统一化
|
||||
- 日志记录
|
||||
|
||||
### 路由设计
|
||||
|
||||
路由配置位于 `src/routes/`，支持RESTful API设计。
|
||||
|
||||
### 数据库操作
|
||||
|
||||
使用Pocketbase作为数据库，提供轻量级的数据存储解决方案。
|
||||
|
||||
### 环境变量
|
||||
|
||||
环境变量配置位于 `.env` 文件，包括：
|
||||
- 服务器端口
|
||||
- 数据库连接信息
|
||||
- JWT密钥
|
||||
- 其他配置参数
|
||||
|
||||
## API设计规范
|
||||
|
||||
### 响应格式
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 200,
|
||||
"message": "success",
|
||||
"data": {}
|
||||
}
|
||||
```
|
||||
|
||||
### 错误处理
|
||||
|
||||
```json
|
||||
{
|
||||
"code": 400,
|
||||
"message": "错误信息",
|
||||
"data": null
|
||||
}
|
||||
```
|
||||
|
||||
### 状态码定义
|
||||
|
||||
- 200: 成功
|
||||
- 400: 请求错误
|
||||
- 401: 未授权
|
||||
- 403: 禁止访问
|
||||
- 404: 资源不存在
|
||||
- 500: 服务器内部错误
|
||||
|
||||
## 中间件
|
||||
|
||||
- 认证中间件
|
||||
- 日志中间件
|
||||
- 错误处理中间件
|
||||
- CORS中间件
|
||||
|
||||
## 安全措施
|
||||
|
||||
- JWT认证
|
||||
- 密码加密
|
||||
- 输入验证
|
||||
- 防止SQL注入
|
||||
- 防止XSS攻击
|
||||
|
||||
## 部署说明
|
||||
|
||||
详见 [部署文档](deployment.md)。
|
||||
372
docs/deployment.md
Normal file
372
docs/deployment.md
Normal file
@@ -0,0 +1,372 @@
|
||||
# 部署文档
|
||||
|
||||
## 部署环境
|
||||
|
||||
- Ubuntu 20.04 LTS+
|
||||
- 宝塔面板 7.0+
|
||||
- Docker
|
||||
- Node.js 22+
|
||||
|
||||
## 部署架构
|
||||
|
||||
```
|
||||
┌───────────────┐
|
||||
│ 宝塔面板 │
|
||||
└───────────────┘
|
||||
│
|
||||
▼
|
||||
┌───────────────────────┐
|
||||
│ Nginx (反向代理) │
|
||||
└───────────────────────┘
|
||||
│
|
||||
├───────────────┐
|
||||
▼ ▼
|
||||
┌───────────────┐ ┌───────────────┐
|
||||
│ 前端容器 │ │ 后端容器 │
|
||||
└───────────────┘ └───────────────┘
|
||||
│ │
|
||||
└───────────────┘
|
||||
│
|
||||
▼
|
||||
┌────────────────┐
|
||||
│ Pocketbase DB │
|
||||
└────────────────┘
|
||||
```
|
||||
|
||||
## 准备工作
|
||||
|
||||
### 1. 安装宝塔面板
|
||||
|
||||
```bash
|
||||
# 安装宝塔面板
|
||||
wget -O install.sh http://download.bt.cn/install/install-ubuntu_6.0.sh && sudo bash install.sh
|
||||
|
||||
# 安装完成后，根据提示访问面板地址并设置账号密码
|
||||
```
|
||||
|
||||
### 2. 安装Docker
|
||||
|
||||
在宝塔面板中：
|
||||
1. 打开「软件商店」
|
||||
2. 搜索「Docker」并安装
|
||||
3. 等待安装完成
|
||||
|
||||
### 3. 安装Node.js
|
||||
|
||||
在宝塔面板中：
|
||||
1. 打开「软件商店」
|
||||
2. 搜索「Node.js」并安装对应版本
|
||||
3. 等待安装完成
|
||||
|
||||
## 后端部署
|
||||
|
||||
### 1. 创建Dockerfile
|
||||
|
||||
在 `back-end` 目录创建 `Dockerfile` 文件：
|
||||
|
||||
```dockerfile
|
||||
FROM node:22-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm install
|
||||
|
||||
COPY . .
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
CMD ["node", "src/index.js"]
|
||||
```
|
||||
|
||||
### 2. 创建docker-compose.yml
|
||||
|
||||
在项目根目录创建 `docker-compose.yml` 文件：
|
||||
|
||||
```yaml
|
||||
version: '3.8'
|
||||
|
||||
services:
|
||||
backend:
|
||||
build:
|
||||
context: ./back-end
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "3000:3000"
|
||||
environment:
|
||||
- NODE_ENV=production
|
||||
- PORT=3000
|
||||
- DB_HOST=db
|
||||
- DB_PORT=8080
|
||||
depends_on:
|
||||
- db
|
||||
restart: always
|
||||
|
||||
frontend:
|
||||
build:
|
||||
context: ./front-end
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "80:80"
|
||||
restart: always
|
||||
|
||||
db:
|
||||
image: pocketbase/pocketbase:latest
|
||||
ports:
|
||||
- "8080:8080"
|
||||
volumes:
|
||||
- ./data:/pb_data
|
||||
restart: always
|
||||
```
|
||||
|
||||
### 3. 前端Dockerfile
|
||||
|
||||
在 `front-end` 目录创建 `Dockerfile` 文件：
|
||||
|
||||
```dockerfile
|
||||
FROM node:22-alpine as build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY package*.json ./
|
||||
RUN npm install --legacy-peer-deps
|
||||
|
||||
COPY . .
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:alpine
|
||||
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
|
||||
EXPOSE 80
|
||||
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
||||
```
|
||||
|
||||
## 一键部署脚本
|
||||
|
||||
### 1. 创建部署脚本
|
||||
|
||||
在项目根目录创建 `deploy.sh` 文件：
|
||||
|
||||
```bash
|
||||
#!/bin/bash
|
||||
|
||||
# 部署脚本
|
||||
echo "开始部署BAI管理系统..."
|
||||
|
||||
# 停止并移除旧容器
|
||||
echo "停止并移除旧容器..."
|
||||
docker-compose down
|
||||
|
||||
# 构建并启动新容器
|
||||
echo "构建并启动新容器..."
|
||||
docker-compose up -d --build
|
||||
|
||||
# 查看容器状态
|
||||
echo "查看容器状态..."
|
||||
docker ps
|
||||
|
||||
echo "部署完成！"
|
||||
echo "前端访问地址: http://$(hostname -I | awk '{print $1}')"
|
||||
echo "后端API地址: http://$(hostname -I | awk '{print $1}'):3000"
|
||||
echo "Pocketbase管理地址: http://$(hostname -I | awk '{print $1}'):8080/_/"
|
||||
```
|
||||
|
||||
### 2. 赋予脚本执行权限
|
||||
|
||||
```bash
|
||||
chmod +x deploy.sh
|
||||
```
|
||||
|
||||
### 3. 执行部署脚本
|
||||
|
||||
```bash
|
||||
./deploy.sh
|
||||
```
|
||||
|
||||
## 宝塔面板配置
|
||||
|
||||
### 1. 添加网站
|
||||
|
||||
1. 打开宝塔面板
|
||||
2. 点击「网站」→「添加站点」
|
||||
3. 填写域名信息（如果有域名）
|
||||
4. 选择「纯静态」网站类型
|
||||
5. 点击「提交」
|
||||
|
||||
### 2. 配置反向代理
|
||||
|
||||
1. 进入网站设置
|
||||
2. 点击「反向代理」→「添加反向代理」
|
||||
3. 配置前端代理：
|
||||
- 代理名称：frontend
|
||||
- 目标URL：http://localhost:80
|
||||
- 发送域名：你的域名
|
||||
4. 配置后端代理：
|
||||
- 代理名称：backend
|
||||
- 目标URL：http://localhost:3000
|
||||
- 发送域名：你的域名
|
||||
- 路径：/api
|
||||
5. 点击「保存」
|
||||
|
||||
### 3. 配置SSL证书（可选）
|
||||
|
||||
1. 进入网站设置
|
||||
2. 点击「SSL」→「Let's Encrypt」
|
||||
3. 申请并安装SSL证书
|
||||
4. 开启「强制HTTPS」
|
||||
|
||||
## 环境变量配置
|
||||
|
||||
### 后端环境变量
|
||||
|
||||
在 `back-end/.env` 文件中配置：
|
||||
|
||||
```env
|
||||
# Server Configuration
|
||||
PORT=3000
|
||||
NODE_ENV=production
|
||||
|
||||
# Database Configuration
|
||||
DB_HOST=db
|
||||
DB_PORT=8080
|
||||
DB_NAME=bai_management
|
||||
|
||||
# JWT Configuration
|
||||
JWT_SECRET=your_jwt_secret_key
|
||||
JWT_EXPIRES_IN=24h
|
||||
|
||||
# CORS Configuration
|
||||
CORS_ORIGIN=*
|
||||
```
|
||||
|
||||
### 前端环境变量
|
||||
|
||||
在 `front-end/.env.production` 文件中配置：
|
||||
|
||||
```env
|
||||
VUE_APP_API_BASE_URL=http://your-domain.com/api
|
||||
VUE_APP_TITLE=BAI管理系统
|
||||
VUE_APP_VERSION=1.0.0
|
||||
```
|
||||
|
||||
## 数据库配置
|
||||
|
||||
### Pocketbase设置
|
||||
|
||||
1. 访问 Pocketbase 管理界面：http://服务器IP:8080/_/
|
||||
2. 创建管理员账号
|
||||
3. 创建必要的集合：
|
||||
- users (用户)
|
||||
- data (数据)
|
||||
- videos (视频)
|
||||
- logs (日志)
|
||||
|
||||
## 监控与维护
|
||||
|
||||
### 查看日志
|
||||
|
||||
```bash
|
||||
# 查看后端日志
|
||||
docker logs -f backend
|
||||
|
||||
# 查看前端日志
|
||||
docker logs -f frontend
|
||||
|
||||
# 查看数据库日志
|
||||
docker logs -f db
|
||||
```
|
||||
|
||||
### 备份数据
|
||||
|
||||
```bash
|
||||
# 备份Pocketbase数据
|
||||
docker cp db:/pb_data ./backup
|
||||
|
||||
# 恢复Pocketbase数据
|
||||
docker cp ./backup db:/pb_data
|
||||
```
|
||||
|
||||
### 升级项目
|
||||
|
||||
1. 拉取最新代码
|
||||
2. 执行部署脚本：`./deploy.sh`
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 1. 容器启动失败
|
||||
|
||||
检查容器日志：
|
||||
```bash
|
||||
docker logs -f 容器名称
|
||||
```
|
||||
|
||||
### 2. 访问接口报错
|
||||
|
||||
- 检查反向代理配置
|
||||
- 检查后端服务是否正常运行
|
||||
- 检查数据库连接是否正常
|
||||
|
||||
### 3. 前端页面空白
|
||||
|
||||
- 检查前端容器是否正常运行
|
||||
- 检查Nginx配置
|
||||
- 检查API地址配置是否正确
|
||||
|
||||
### 4. 数据库连接失败
|
||||
|
||||
- 检查数据库容器是否正常运行
|
||||
- 检查数据库连接配置
|
||||
- 检查网络连接
|
||||
|
||||
## 性能优化
|
||||
|
||||
### 1. 前端优化
|
||||
|
||||
- 启用Gzip压缩
|
||||
- 静态资源缓存
|
||||
- 代码分割
|
||||
- 图片优化
|
||||
|
||||
### 2. 后端优化
|
||||
|
||||
- 使用PM2进程管理
|
||||
- 数据库索引优化
|
||||
- 缓存策略
|
||||
- 负载均衡
|
||||
|
||||
### 3. 服务器优化
|
||||
|
||||
- 调整Docker内存限制
|
||||
- 配置Nginx缓存
|
||||
- 启用HTTPS
|
||||
- 定期清理日志
|
||||
|
||||
## 安全措施
|
||||
|
||||
### 1. 服务器安全
|
||||
|
||||
- 配置防火墙
|
||||
- 禁用root登录
|
||||
- 使用SSH密钥认证
|
||||
- 定期更新系统
|
||||
|
||||
### 2. 应用安全
|
||||
|
||||
- 使用HTTPS
|
||||
- 密码加密存储
|
||||
- 输入验证
|
||||
- 防止SQL注入
|
||||
- 防止XSS攻击
|
||||
|
||||
### 3. 数据安全
|
||||
|
||||
- 定期备份数据
|
||||
- 数据加密
|
||||
- 访问控制
|
||||
- 审计日志
|
||||
|
||||
## 总结
|
||||
|
||||
本部署方案采用Docker容器化部署，实现了前后端分离的架构，支持一键部署和自动化管理。通过宝塔面板的反向代理功能，实现了域名访问和SSL证书配置，为系统提供了安全、稳定的运行环境。
|
||||
138
docs/frontend.md
Normal file
138
docs/frontend.md
Normal file
@@ -0,0 +1,138 @@
|
||||
# 前端功能文档
|
||||
|
||||
## 项目概述
|
||||
|
||||
前端项目是基于Vue 3.x的Web后台管理系统，使用Element Plus作为UI组件库，提供直观、高效的管理界面。
|
||||
|
||||
## 技术栈
|
||||
|
||||
- Vue 3.x
|
||||
- Element Plus
|
||||
- Vue Router
|
||||
- Pinia (状态管理)
|
||||
- TypeScript
|
||||
- ECharts (数据可视化)
|
||||
- WangEditor (富文本编辑器)
|
||||
|
||||
## 项目结构
|
||||
|
||||
```
|
||||
front-end/
|
||||
├── src/
|
||||
│ ├── api/ # API接口定义
|
||||
│ ├── assets/ # 静态资源
|
||||
│ ├── components/ # 通用组件
|
||||
│ ├── config/ # 配置文件
|
||||
│ ├── i18n/ # 国际化
|
||||
│ ├── plugins/ # 插件
|
||||
│ ├── router/ # 路由配置
|
||||
│ ├── store/ # 状态管理
|
||||
│ ├── utils/ # 工具函数
|
||||
│ ├── views/ # 页面组件
|
||||
│ ├── App.vue # 根组件
|
||||
│ └── main.ts # 入口文件
|
||||
├── public/ # 公共静态资源
|
||||
├── mock/ # 模拟数据
|
||||
├── library/ # 自定义库
|
||||
└── scripts/ # 脚本文件
|
||||
```
|
||||
|
||||
## 核心功能模块
|
||||
|
||||
### 1. 认证与授权
|
||||
- 登录/注册功能
|
||||
- 权限管理
|
||||
- 角色控制
|
||||
|
||||
### 2. 系统管理
|
||||
- 用户管理
|
||||
- 角色管理
|
||||
- 菜单管理
|
||||
- 部门管理
|
||||
- 字典管理
|
||||
|
||||
### 3. 数据可视化
|
||||
- 仪表盘
|
||||
- 统计报表
|
||||
- 图表展示
|
||||
|
||||
### 4. 内容管理
|
||||
- 公告管理
|
||||
- 文章管理
|
||||
- 文件管理
|
||||
|
||||
### 5. 系统设置
|
||||
- 系统配置
|
||||
- 主题设置
|
||||
- 国际化设置
|
||||
|
||||
## 开发指南
|
||||
|
||||
### 环境搭建
|
||||
|
||||
1. 安装依赖
|
||||
```bash
|
||||
npm install --legacy-peer-deps
|
||||
```
|
||||
|
||||
2. 启动开发服务器
|
||||
```bash
|
||||
npm run serve
|
||||
```
|
||||
|
||||
3. 构建生产版本
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### 代码规范
|
||||
|
||||
- 使用ESLint进行代码检查
|
||||
- 使用Prettier进行代码格式化
|
||||
- 遵循Vue 3 Composition API规范
|
||||
- 组件命名使用PascalCase
|
||||
- 函数命名使用camelCase
|
||||
|
||||
### 路由配置
|
||||
|
||||
路由配置位于 `src/router/index.ts`，支持动态路由和权限控制。
|
||||
|
||||
### 状态管理
|
||||
|
||||
使用Pinia进行状态管理，状态模块位于 `src/store/modules/`。
|
||||
|
||||
### API调用
|
||||
|
||||
API接口定义位于 `src/api/`，使用axios进行网络请求。
|
||||
|
||||
## 页面结构
|
||||
|
||||
### 布局结构
|
||||
- 顶部导航栏
|
||||
- 左侧菜单
|
||||
- 右侧内容区域
|
||||
- 底部版权信息
|
||||
|
||||
### 响应式设计
|
||||
- 支持PC端和移动端
|
||||
- 自适应布局
|
||||
|
||||
## 主题系统
|
||||
|
||||
支持多种主题切换，包括：
|
||||
- 蓝色主题
|
||||
- 绿色主题
|
||||
- 紫色主题
|
||||
- 红色主题
|
||||
|
||||
## 国际化
|
||||
|
||||
支持中英文切换，国际化文件位于 `src/i18n/`。
|
||||
|
||||
## 模拟数据
|
||||
|
||||
开发环境下使用mock数据，位于 `mock/` 目录。
|
||||
|
||||
## 部署说明
|
||||
|
||||
详见 [部署文档](deployment.md)。
|
||||
Reference in New Issue
Block a user