262 lines
5.4 KiB
Markdown
262 lines
5.4 KiB
Markdown
# Admin Framework Demo
|
||
|
||
本目录包含 Admin Framework 的使用示例，提供两种使用方式：
|
||
|
||
## 📁 文件说明
|
||
|
||
### 🌐 CDN 版本（快速体验）
|
||
- **index.html** - 基础示例（CDN）
|
||
- **advanced.html** - 高级示例（CDN）
|
||
|
||
适合快速体验，所有依赖从 CDN 加载，无需安装。
|
||
|
||
### 💻 本地开发版本（推荐开发使用）
|
||
- **src/** - 源代码目录
|
||
- **main.js** - 基础示例入口
|
||
- **main-advanced.js** - 高级示例入口
|
||
- **components/** - 自定义组件
|
||
- **package.json** - 依赖配置
|
||
- **webpack.config.js** - 构建配置
|
||
|
||
所有依赖本地安装，支持热更新，适合开发调试。
|
||
|
||
---
|
||
|
||
## 🚀 使用方式
|
||
|
||
### 方式一：CDN 版本（快速体验）
|
||
|
||
#### index.html - 基础示例
|
||
最简单的使用示例，展示如何：
|
||
- 引入必要的依赖
|
||
- 初始化框架
|
||
- 创建基本应用
|
||
|
||
#### advanced.html - 高级示例
|
||
完整的使用示例，展示如何：
|
||
- 添加自定义页面组件
|
||
- 注册自定义 Vuex 模块
|
||
- 添加自定义路由
|
||
- 配置路由守卫
|
||
- 配置 Axios 拦截器
|
||
- 使用组件映射
|
||
|
||
### 方式二：本地开发版本（推荐）
|
||
|
||
查看详细文档：[README-LOCAL.md](./README-LOCAL.md)
|
||
|
||
快速开始：
|
||
```bash
|
||
# 1. 构建框架（在项目根目录）
|
||
cd ..
|
||
npm run build
|
||
|
||
# 2. 安装 demo 依赖
|
||
cd demo
|
||
npm install
|
||
|
||
# 3. 启动开发服务器
|
||
npm run dev
|
||
```
|
||
|
||
## 使用步骤
|
||
|
||
### 1. 构建框架
|
||
首先需要构建 admin-framework：
|
||
|
||
```bash
|
||
# 在项目根目录执行
|
||
cd ..
|
||
npm run build
|
||
```
|
||
|
||
### 2. 启动示例
|
||
|
||
有以下几种方式启动示例：
|
||
|
||
#### 方式一：使用 Live Server（推荐）
|
||
1. 安装 VS Code 的 Live Server 插件
|
||
2. 右键 `index.html` 或 `advanced.html`
|
||
3. 选择 "Open with Live Server"
|
||
|
||
#### 方式二：使用 HTTP 服务器
|
||
```bash
|
||
# 安装 http-server
|
||
npm install -g http-server
|
||
|
||
# 在项目根目录运行
|
||
http-server
|
||
|
||
# 访问
|
||
# http://localhost:8080/demo/index.html
|
||
# http://localhost:8080/demo/advanced.html
|
||
```
|
||
|
||
#### 方式三：直接打开
|
||
- 双击 HTML 文件在浏览器中打开
|
||
- 注意：某些功能可能因跨域限制无法使用
|
||
|
||
## 配置说明
|
||
|
||
### 基本配置
|
||
```javascript
|
||
const config = {
|
||
title: '系统标题',
|
||
apiUrl: 'http://your-api.com/api/', // API 基础地址
|
||
uploadUrl: 'http://your-api.com/api/upload' // 上传接口地址
|
||
}
|
||
```
|
||
|
||
### 初始化框架（新版本 - 推荐）
|
||
```javascript
|
||
// 引入 Admin Framework
|
||
import AdminFramework from '../../dist/admin-framework.js'
|
||
|
||
// 引入组件映射表
|
||
import componentMap from './router/component-map.js'
|
||
|
||
// 创建应用
|
||
const app = AdminFramework.createApp({
|
||
title: '我的管理系统',
|
||
apiUrl: 'http://localhost:9098/admin_api/',
|
||
componentMap: componentMap,
|
||
onReady() {
|
||
console.log('应用已准备就绪!')
|
||
}
|
||
})
|
||
|
||
// 挂载应用
|
||
app.$mount('#app')
|
||
```
|
||
|
||
## 内置功能
|
||
|
||
### 1. 系统页面
|
||
- **登录页面**: `/login`
|
||
- **首页**: `/home`
|
||
- **错误页面**: `/401`, `/404`, `/500`
|
||
|
||
### 2. 系统管理
|
||
- **用户管理**: 系统用户的增删改查
|
||
- **角色管理**: 角色权限管理
|
||
- **菜单管理**: 动态菜单配置
|
||
- **日志管理**: 系统操作日志
|
||
|
||
### 3. 高级功能
|
||
- **动态表单**: 基于配置生成表单
|
||
- **动态表格**: 可配置的数据表格
|
||
- **文件上传**: 单文件/多文件上传
|
||
- **富文本编辑器**: WangEditor
|
||
- **代码编辑器**: Ace Editor
|
||
|
||
## API 使用
|
||
|
||
### HTTP 请求
|
||
```javascript
|
||
// GET 请求
|
||
window.framework.http.get('/api/users').then(res => {
|
||
console.log(res.data)
|
||
})
|
||
|
||
// POST 请求
|
||
window.framework.http.post('/api/users', {
|
||
name: '张三',
|
||
age: 25
|
||
}).then(res => {
|
||
console.log(res.data)
|
||
})
|
||
|
||
// 在 API 文件中使用
|
||
class UserServer {
|
||
async getList(params) {
|
||
return await window.framework.http.get('/api/users', params)
|
||
}
|
||
}
|
||
```
|
||
|
||
### 工具函数
|
||
```javascript
|
||
// 使用框架提供的工具函数
|
||
const tools = window.framework.tools
|
||
|
||
// 日期格式化
|
||
tools.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')
|
||
|
||
// 深拷贝
|
||
tools.deepClone(obj)
|
||
|
||
// 防抖
|
||
tools.debounce(fn, 500)
|
||
|
||
// 节流
|
||
tools.throttle(fn, 500)
|
||
```
|
||
|
||
### UI 工具
|
||
```javascript
|
||
// 使用 UI 工具
|
||
const uiTool = window.framework.uiTool
|
||
|
||
// 成功提示
|
||
window.framework.uiTool.success('操作成功')
|
||
|
||
// 错误提示
|
||
window.framework.uiTool.error('操作失败')
|
||
|
||
// 确认对话框
|
||
window.framework.uiTool.confirm('确定删除吗？').then(() => {
|
||
// 确认后的操作
|
||
})
|
||
```
|
||
|
||
## 常见问题
|
||
|
||
### 1. 依赖库版本
|
||
确保使用以下版本的依赖库：
|
||
- Vue: 2.6.x
|
||
- Vue Router: 3.x
|
||
- Vuex: 3.x
|
||
- iView (view-design): 4.x
|
||
- Axios: 0.21.x+
|
||
|
||
### 2. 路径问题
|
||
如果无法加载 admin-framework.js，检查路径是否正确：
|
||
```html
|
||
<!-- 确保路径指向正确的文件 -->
|
||
<script src="../dist/admin-framework.js"></script>
|
||
```
|
||
|
||
### 3. API 地址
|
||
记得修改配置中的 API 地址为实际的后端地址：
|
||
```javascript
|
||
const config = {
|
||
apiUrl: 'http://your-real-api.com/api/',
|
||
uploadUrl: 'http://your-real-api.com/api/upload'
|
||
}
|
||
```
|
||
|
||
### 4. 跨域问题
|
||
如果遇到跨域问题，需要配置后端 CORS 或使用代理。
|
||
|
||
## 开发建议
|
||
|
||
1. **开发时使用 build:dev**
|
||
- 生成 sourcemap，方便调试
|
||
- 代码不压缩，易读
|
||
|
||
2. **生产时使用 build**
|
||
- 代码压缩，体积小
|
||
- 无 sourcemap，安全
|
||
|
||
3. **使用浏览器调试工具**
|
||
```javascript
|
||
// 所有实例都挂载到 window 上，方便调试
|
||
window.app // Vue 实例
|
||
window.framework // 框架实例
|
||
```
|
||
|
||
## 更多信息
|
||
|
||
查看完整文档：`../_doc/完整使用文档.md`
|
||
|