# front-end-web

**Repository Path**: lxc0116/front-end-web

## Basic Information

- **Project Name**: front-end-web
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-05
- **Last Updated**: 2025-07-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 加密管理平台前端系统

基于 Vue 3 + Element Plus 构建的现代化前端管理系统。

## 项目特性

- 🚀 Vue 3 + Composition API
- 🎨 Element Plus UI 组件库
- 🔐 JWT 身份认证
- 📱 响应式设计，支持移动端
- 🎯 TypeScript 支持（可选）
- 📦 Webpack 构建优化
- 🔄 Vuex 状态管理
- 🛣️ Vue Router 路由管理

## 快速开始

### 1. 安装依赖

```bash
# 使用 npm
npm install

# 或使用 yarn
yarn install

# 或使用 pnpm（推荐）
pnpm install
```

### 2. 启动开发服务器

```bash
# 启动开发服务器
npm run serve

# 或
yarn serve

# 或
pnpm serve
```

### 3. 构建生产版本

```bash
# 构建生产版本
npm run build

# 或
yarn build
```

## 项目结构

```
src/
├── api/                 # API 接口
│   └── auth.js         # 认证相关接口
├── layout/             # 布局组件
│   ├── components/     # 布局子组件
│   └── index.vue       # 主布局
├── router/             # 路由配置
│   └── index.js        # 路由定义
├── store/              # Vuex 状态管理
│   ├── modules/        # 模块化状态
│   └── index.js        # 主store
├── styles/             # 全局样式
│   ├── index.scss      # 主样式文件
│   ├── variables.scss  # SCSS 变量
│   └── mixin.scss      # SCSS 混入
├── utils/              # 工具函数
│   ├── auth.js         # 认证工具
│   ├── request.js      # HTTP 请求封装
│   └── validate.js     # 验证工具
├── views/              # 页面组件
│   ├── Login.vue       # 登录页
│   └── Dashboard.vue   # 仪表盘
├── App.vue             # 根组件
└── main.js             # 入口文件
```

## 功能模块

### 🔐 认证系统
- 用户登录/登出
- JWT Token 管理
- 路由守卫
- 权限控制

### 📊 仪表盘
- 数据统计展示
- 图表可视化
- 快速操作入口
- 最近活动记录

### 👥 用户管理
- 用户列表
- 用户增删改查
- 角色权限分配

### 🔒 文件加密
- 文件上传加密
- 加密文件管理
- 解密下载

### 🛡️ 安全防护
- SQL 注入防护
- XSS 攻击防护
- 系统日志记录

## 开发指南

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0 或 yarn >= 1.22.0

### 开发规范

1. **代码风格**：使用 ESLint + Prettier
2. **组件命名**：使用 PascalCase
3. **文件命名**：使用 kebab-case
4. **提交规范**：使用 Conventional Commits

### API 配置

在 `vue.config.js` 中配置代理：

```javascript
devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:8888', // 后端服务地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}
```

### 默认账号

开发环境默认账号：
- 超级管理员：`admin` / `123456`
- 管理员：`manager` / `123456`
- 普通用户：`user` / `123456`

## 部署说明

### 1. 构建项目

```bash
npm run build
```

### 2. 部署到服务器

将 `dist` 目录下的文件部署到 Web 服务器（如 Nginx、Apache）。

### 3. Nginx 配置示例

```nginx
server {
    listen 80;
    server_name your-domain.com;
    root /path/to/dist;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    location /api {
        proxy_pass http://backend-server:8888;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}
```

## 故障排除

### 常见问题

1. **依赖安装失败**
   ```bash
   # 清除缓存后重新安装
   npm cache clean --force
   rm -rf node_modules package-lock.json
   npm install
   ```

2. **端口被占用**
   ```bash
   # 修改端口
   npm run serve -- --port 8081
   ```

3. **代理配置无效**
   - 检查后端服务是否启动
   - 确认代理地址配置正确

## 技术支持

如有问题，请查看：
1. [Vue 3 官方文档](https://vuejs.org/)
2. [Element Plus 文档](https://element-plus.org/)
3. [Vue Router 文档](https://router.vuejs.org/)
4. [Vuex 文档](https://vuex.vuejs.org/)

## 许可证

MIT License