peanut/happy-life-star
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

小程序初始化

Browse Source
This commit is contained in:
huazhongmin
2026-02-27 11:32:50 +08:00
parent 93574dbb45
commit 97e1ea2706
252 changed files with 32427 additions and 12363 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/web-admin-deployment.md
-445
View File
@@ -1,445 +0,0 @@
# 管理后台部署指南
## 部署前准备
### 1. 环境要求
- Node.js 16+
- npm 或 yarn
- Nginx (生产环境)
### 2. 检查后端服务
确保后端服务已启动并可访问：
- 开发环境: http://localhost:8080
- 生产环境: 配置实际的API地址
## 开发环境部署
### Windows系统
#### 方式1: 使用启动脚本
```bash
cd web-admin
start.bat
```
#### 方式2: 手动启动
```bash
cd web-admin
npm install
npm run dev
```
### Linux/Mac系统
```bash
cd web-admin
npm install
npm run dev
```
访问: http://localhost:5174
## 生产环境部署
### 1. 构建项目
```bash
cd web-admin
npm install
npm run build
```
构建完成后，会在 `dist` 目录生成静态文件。
### 2. Nginx配置
#### 基础配置
```nginx
server {
listen 80;
server_name admin.emotion-museum.com;
root /var/www/web-admin/dist;
index index.html;
# 支持 History 路由模式
location / {
try_files $uri $uri/ /index.html;
}
# API代理
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
# 静态资源缓存
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}
# Gzip压缩
gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_types text/plain text/css text/xml text/javascript application/x-javascript application/xml+rss application/json;
}
```
#### HTTPS配置
```nginx
server {
listen 443 ssl http2;
server_name admin.emotion-museum.com;
ssl_certificate /path/to/cert.pem;
ssl_certificate_key /path/to/key.pem;
root /var/www/web-admin/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
# HTTP重定向到HTTPS
server {
listen 80;
server_name admin.emotion-museum.com;
return 301 https://$server_name$request_uri;
}
```
### 3. 部署步骤
#### 方式1: 手动部署
```bash
# 1. 构建项目
cd web-admin
npm run build
# 2. 上传dist目录到服务器
scp -r dist/* user@server:/var/www/web-admin/
# 3. 配置Nginx
sudo cp nginx.conf /etc/nginx/sites-available/admin.emotion-museum.com
sudo ln -s /etc/nginx/sites-available/admin.emotion-museum.com /etc/nginx/sites-enabled/
# 4. 测试Nginx配置
sudo nginx -t
# 5. 重启Nginx
sudo systemctl restart nginx
```
#### 方式2: 使用部署脚本
创建 `deploy.sh`:
```bash
#!/bin/bash
echo "开始部署管理后台..."
# 构建项目
echo "1. 构建项目..."
cd web-admin
npm install
npm run build
# 备份旧版本
echo "2. 备份旧版本..."
ssh user@server "cd /var/www && mv web-admin web-admin.backup.$(date +%Y%m%d%H%M%S)"
# 上传新版本
echo "3. 上传新版本..."
scp -r dist user@server:/var/www/web-admin
# 重启Nginx
echo "4. 重启Nginx..."
ssh user@server "sudo systemctl restart nginx"
echo "部署完成！"
```
### 4. 环境变量配置
生产环境需要修改 `.env.production`:
```env
VITE_APP_TITLE=情绪博物馆管理后台
VITE_APP_BASE_API=https://api.emotion-museum.com/api
```
## Docker部署
### 1. 创建Dockerfile
```dockerfile
# 构建阶段
FROM node:18-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# 生产阶段
FROM nginx:alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
```
### 2. 创建nginx.conf
```nginx
server {
listen 80;
server_name localhost;
root /usr/share/nginx/html;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
}
```
### 3. 构建和运行
```bash
# 构建镜像
docker build -t emotion-admin:latest .
# 运行容器
docker run -d -p 80:80 --name emotion-admin emotion-admin:latest
```
### 4. Docker Compose
创建 `docker-compose.yml`:
```yaml
version: '3.8'
services:
admin:
build: .
ports:
- "80:80"
depends_on:
- backend
networks:
- emotion-network
backend:
image: emotion-backend:latest
ports:
- "8080:8080"
networks:
- emotion-network
networks:
emotion-network:
driver: bridge
```
运行:
```bash
docker-compose up -d
```
## 性能优化
### 1. 代码分割
Vite自动进行代码分割，无需额外配置。
### 2. 资源压缩
生产构建时自动压缩：
```typescript
// vite.config.ts
build: {
minify: 'terser',
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true
}
}
}
```
### 3. CDN加速
将静态资源上传到CDN：
```typescript
// vite.config.ts
build: {
rollupOptions: {
output: {
manualChunks: {
'element-plus': ['element-plus'],
'vue': ['vue', 'vue-router', 'pinia']
}
}
}
}
```
## 监控和日志
### 1. Nginx访问日志
```nginx
access_log /var/log/nginx/admin.access.log;
error_log /var/log/nginx/admin.error.log;
```
### 2. 前端错误监控
可以集成Sentry等错误监控服务：
```typescript
// main.ts
import * as Sentry from "@sentry/vue"
Sentry.init({
app,
dsn: "YOUR_SENTRY_DSN",
environment: import.meta.env.MODE
})
```
## 安全建议
1. **使用HTTPS**: 生产环境必须使用HTTPS
2. **修改默认密码**: 部署后立即修改默认管理员密码
3. **限制访问**: 可以配置IP白名单
4. **定期更新**: 及时更新依赖包
5. **备份数据**: 定期备份数据库和配置文件
## 故障排查
### 1. 页面空白
- 检查Nginx配置是否正确
- 检查静态文件是否上传成功
- 查看浏览器控制台错误
### 2. API请求失败
- 检查后端服务是否启动
- 检查Nginx代理配置
- 检查跨域配置
### 3. 路由404
- 确保Nginx配置了 `try_files $uri $uri/ /index.html`
- 检查路由模式是否为history
## 回滚方案
如果部署出现问题，可以快速回滚：
```bash
# 恢复备份
ssh user@server "cd /var/www && rm -rf web-admin && mv web-admin.backup.YYYYMMDDHHMMSS web-admin"
# 重启Nginx
ssh user@server "sudo systemctl restart nginx"
```
## 持续集成/持续部署 (CI/CD)
### GitHub Actions示例
创建 `.github/workflows/deploy.yml`:
```yaml
name: Deploy Admin
on:
push:
branches: [ main ]
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Setup Node.js
uses: actions/setup-node@v2
with:
node-version: '18'
- name: Install dependencies
run: |
cd web-admin
npm install
- name: Build
run: |
cd web-admin
npm run build
- name: Deploy to server
uses: easingthemes/ssh-deploy@v2
with:
SSH_PRIVATE_KEY: ${{ secrets.SSH_PRIVATE_KEY }}
REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
REMOTE_USER: ${{ secrets.REMOTE_USER }}
SOURCE: "web-admin/dist/"
TARGET: "/var/www/web-admin/"
```
## 总结
按照以上步骤，你可以成功部署管理后台到生产环境。记得：
1. ✅ 修改默认密码
2. ✅ 配置HTTPS
3. ✅ 设置监控和日志
4. ✅ 定期备份
5. ✅ 及时更新依赖
docs/web-admin-design.md
View File
docs/web-admin-guide.md
-312
View File
@@ -1,312 +0,0 @@
# 管理后台前端开发指南
## 项目概述
情绪博物馆管理后台是一个基于 Vue 3 + TypeScript + Element Plus 的现代化管理系统，用于管理系统的管理员、用户和数据。
## 快速开始
### 1. 安装依赖
```bash
cd web-admin
npm install
```
### 2. 启动开发服务器
```bash
npm run dev
```
访问 http://localhost:5174
### 3. 登录系统
使用默认账号登录：
- 账号: admin
- 密码: admin123
## 项目结构
```
web-admin/
├── src/
│ ├── api/ # API接口定义
│ │ ├── admin.ts # 管理员API
│ │ ├── auth.ts # 认证API
│ │ └── user.ts # 用户API
│ ├── layouts/ # 布局组件
│ │ └── Layout.vue # 主布局
│ ├── router/ # 路由配置
│ │ └── index.ts # 路由定义
│ ├── stores/ # 状态管理
│ │ ├── index.ts # Pinia实例
│ │ └── admin.ts # 管理员状态
│ ├── types/ # TypeScript类型
│ │ ├── admin.ts # 管理员类型
│ │ ├── common.ts # 通用类型
│ │ ├── env.d.ts # 环境变量类型
│ │ └── user.ts # 用户类型
│ ├── utils/ # 工具函数
│ │ ├── request.ts # Axios封装
│ │ ├── storage.ts # 本地存储
│ │ └── validate.ts # 表单验证
│ ├── views/ # 页面组件
│ │ ├── admin/ # 管理员管理
│ │ │ └── AdminList.vue
│ │ ├── user/ # 用户管理
│ │ │ └── UserList.vue
│ │ ├── Dashboard.vue # 仪表盘
│ │ ├── Login.vue # 登录页
│ │ └── NotFound.vue # 404页面
│ ├── App.vue # 根组件
│ └── main.ts # 入口文件
├── .env.development # 开发环境配置
├── .env.production # 生产环境配置
├── index.html # HTML模板
├── package.json # 项目配置
├── tsconfig.json # TypeScript配置
└── vite.config.ts # Vite配置
```
## 核心功能
### 1. 登录认证
登录流程：
1. 用户输入账号密码
2. 调用登录API
3. 保存Token到localStorage
4. 保存管理员信息到Pinia
5. 跳转到仪表盘
代码示例：
```typescript
// stores/admin.ts
const login = async (loginForm: AdminLoginRequest) => {
const res = await loginApi(loginForm)
token.value = res.data.accessToken
adminInfo.value = res.data.adminInfo
localStorage.setItem('adminToken', res.data.accessToken)
router.push('/')
}
```
### 2. 路由守卫
所有路由都需要登录才能访问（除了登录页）：
```typescript
// router/index.ts
router.beforeEach((to, from, next) => {
const token = localStorage.getItem('adminToken')
if (to.path === '/login') {
if (token) {
next('/')
} else {
next()
}
} else {
if (token) {
next()
} else {
next('/login')
}
}
})
```
### 3. API请求拦截
自动添加Token到请求头：
```typescript
// utils/request.ts
service.interceptors.request.use((config) => {
const token = localStorage.getItem('adminToken')
if (token) {
config.headers.Authorization = `Bearer ${token}`
}
return config
})
```
### 4. 响应拦截
统一处理错误：
```typescript
service.interceptors.response.use(
(response) => {
const res = response.data
if (res.code !== 200) {
ElMessage.error(res.message)
if (res.code === 401) {
router.push('/login')
}
return Promise.reject(new Error(res.message))
}
return res
},
(error) => {
// 错误处理
}
)
```
## 开发规范
### 1. 命名规范
- 组件名：PascalCase (如 AdminList.vue)
- 文件名：kebab-case (如 admin-list.ts)
- 变量名：camelCase (如 adminInfo)
- 常量名：UPPER_CASE (如 API_BASE_URL)
### 2. 类型定义
所有API接口都应该有类型定义：
```typescript
// types/admin.ts
export interface Admin {
id: string
account: string
username: string
// ...
}
export interface AdminPageRequest {
current: number
size: number
// ...
}
```
### 3. API调用
使用封装的request工具：
```typescript
// api/admin.ts
export function getAdminPage(params: AdminPageRequest) {
return request<ApiResponse<PageResult<Admin>>>({
url: '/admin/page',
method: 'get',
params
})
}
```
### 4. 状态管理
使用Pinia进行状态管理：
```typescript
// stores/admin.ts
export const useAdminStore = defineStore('admin', () => {
const token = ref<string>('')
const adminInfo = ref<Admin | null>(null)
const login = async (loginForm: AdminLoginRequest) => {
// ...
}
return { token, adminInfo, login }
})
```
## 常见问题
### 1. Token过期处理
Token过期时会自动跳转到登录页，用户需要重新登录。
### 2. 跨域问题
开发环境通过Vite代理解决：
```typescript
// vite.config.ts
server: {
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true
}
}
}
```
### 3. 构建优化
生产环境构建时会自动进行代码分割和压缩：
```bash
npm run build
```
## 部署
### 1. 构建
```bash
npm run build
```
### 2. Nginx配置
```nginx
server {
listen 80;
server_name admin.emotion-museum.com;
root /var/www/web-admin/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
location /api {
proxy_pass http://localhost:8080;
}
}
```
### 3. 环境变量
生产环境需要配置正确的API地址：
```
VITE_APP_BASE_API=https://api.emotion-museum.com
```
## 扩展功能
### 添加新页面
1. 在 `views` 目录创建新组件
2. 在 `router/index.ts` 添加路由
3. 在布局组件的菜单中添加入口
### 添加新API
1. 在 `types` 目录定义类型
2. 在 `api` 目录创建API函数
3. 在组件中调用API
### 添加新状态
1. 在 `stores` 目录创建新的store
2. 在组件中使用store
## 技术支持
如有问题，请查看：
- [Vue 3 文档](https://cn.vuejs.org/)
- [Element Plus 文档](https://element-plus.org/)
- [TypeScript 文档](https://www.typescriptlang.org/)
- [Vite 文档](https://cn.vitejs.dev/)
docs/web-admin-summary.md
View File