张家训
97 lines
3.0 KiB
Markdown
97 lines
3.0 KiB
Markdown
# Freedom Web
|
||
|
||
基于 **Vue 2 + view-design（iView 4）** 的后台管理前端，配套 [freedom-admin](https://gitlab.jiaxun.site/yiciheng/freedom-admin.git) 后端服务，支持动态路由菜单与权限控制。
|
||
|
||
## 技术栈
|
||
|
||
| 分类 | 技术 |
|
||
| ---- | ---- |
|
||
| 核心框架 | Vue 2.5+ |
|
||
| UI 组件库 | view-design 4.5 |
|
||
| 路由 / 状态 | Vue Router 3、Vuex 3 |
|
||
| 构建工具 | Vue CLI 3 |
|
||
| HTTP | Axios |
|
||
| 图表 | ECharts 4 |
|
||
| 其他 | vue-particles（登录页粒子）、js-cookie、jsencrypt、xlsx 等 |
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
freedom-web
|
||
├── public/ # 打包所需静态资源
|
||
├── src/
|
||
│ ├── api/ # 接口请求层
|
||
│ │ ├── sys/ # 系统管理（用户/角色/部门/权限）
|
||
│ │ ├── basic/ # 基础配置
|
||
│ │ └── kpi/ # KPI 指标模块
|
||
│ ├── assets/ # 静态资源（图标/图片）
|
||
│ ├── components/ # 业务组件（主框架/用户信息等）
|
||
│ ├── config/ # 项目运行配置
|
||
│ ├── libs/ # 封装工具（路由处理等）
|
||
│ ├── router/ # 路由配置与守卫
|
||
│ ├── store/ # Vuex 状态管理
|
||
│ ├── view/ # 页面
|
||
│ │ ├── login/ # 登录页
|
||
│ │ ├── home/ # 首页/个人中心/消息中心
|
||
│ │ ├── sys/ # 系统管理（用户/角色/部门/权限）
|
||
│ │ └── kpi/ # KPI 指标模块
|
||
│ └── main.js # 应用入口
|
||
└── vue.config.js # 构建配置
|
||
```
|
||
|
||
## 功能特性
|
||
|
||
- **登录页**：黑色简约风格 + 白色粒子动效
|
||
- **动态路由菜单**：菜单由后端权限表驱动，登录后动态注册路由并渲染侧边栏
|
||
- **系统管理**
|
||
- 用户管理（含头像兜底：无头像时显示昵称首字）
|
||
- 角色管理
|
||
- 部门管理（树形）
|
||
- 权限管理
|
||
- **KPI 指标模块**：指标库、员工指标、模板管理、指标记录等
|
||
- **通用能力**：tag 标签导航、面包屑、全屏、锁屏、个人中心、消息中心、错误页（401/403/404/500）
|
||
|
||
## 快速开始
|
||
|
||
### 环境要求
|
||
|
||
- Node.js 8.9+（推荐 10~14）
|
||
- npm / yarn
|
||
|
||
### 安装依赖
|
||
|
||
```bash
|
||
npm install
|
||
```
|
||
|
||
### 开发运行
|
||
|
||
```bash
|
||
npm run dev
|
||
```
|
||
|
||
默认访问 `http://localhost:8080`（由 Vue CLI 自动打开）。
|
||
|
||
### 生产构建
|
||
|
||
```bash
|
||
npm run build
|
||
```
|
||
|
||
构建产物输出到 `dist/` 目录。
|
||
|
||
## 接口对接
|
||
|
||
- 请求前缀与后端地址在 `src/config` 中配置，后端服务默认运行于 `http://localhost:8800`。
|
||
- 登录后携带 JWT Token（存放于 Cookie / Header），守卫与请求拦截器统一处理。
|
||
|
||
## 默认账号
|
||
|
||
| 账号 | 密码 | 说明 |
|
||
| ---- | ---- | ---- |
|
||
| `admin` | `123456` | 超级管理员 |
|
||
|
||
## License
|
||
|
||
本项目仅用于内部学习与研究使用。
|