admin_core/demo

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

快速开始：

# 1. 构建框架（在项目根目录）
cd ..
npm run build

# 2. 安装 demo 依赖
cd demo
npm install

# 3. 启动开发服务器
npm run dev

使用步骤

1. 构建框架

首先需要构建 admin-framework：

# 生产构建（压缩，无 sourcemap）
npm run build

# 开发构建（不压缩，有 sourcemap）
npm run build:dev

2. 启动示例

有以下几种方式启动示例：

方式一：使用 Live Server（推荐）

1. 安装 VS Code 的 Live Server 插件
2. 右键 index.html 或 advanced.html
3. 选择 "Open with Live Server"

方式二：使用 HTTP 服务器

# 安装 http-server
npm install -g http-server

# 在项目根目录运行
http-server

# 访问
# http://localhost:8080/demo/index.html
# http://localhost:8080/demo/advanced.html

方式三：直接打开

• 双击 HTML 文件在浏览器中打开
• 注意：某些功能可能因跨域限制无法使用

配置说明

基本配置

const config = {
  title: '系统标题',
  apiUrl: 'http://your-api.com/api/',  // API 基础地址
  uploadUrl: 'http://your-api.com/api/upload'  // 上传接口地址
}

初始化框架

framework.install(Vue, {
  config: config,           // 配置对象
  ViewUI: iview,           // iView 实例
  VueRouter: VueRouter,    // Vue Router
  Vuex: Vuex,              // Vuex
  createPersistedState: null,  // Vuex 持久化插件（可选）
  componentMap: {}         // 自定义组件映射
})

内置功能

1. 系统页面

• 登录页面: /login
• 首页: /home
• 错误页面: /401, /404, /500

2. 系统管理

• 用户管理: 系统用户的增删改查
• 角色管理: 角色权限管理
• 菜单管理: 动态菜单配置
• 日志管理: 系统操作日志

3. 高级功能

• 动态表单: 基于配置生成表单
• 动态表格: 可配置的数据表格
• 文件上传: 单文件/多文件上传
• 富文本编辑器: WangEditor
• 代码编辑器: Ace Editor

API 使用

HTTP 请求

// GET 请求
framework.http.get('/api/users').then(res => {
  console.log(res.data)
})

// POST 请求
framework.http.post('/api/users', {
  name: '张三',
  age: 25
}).then(res => {
  console.log(res.data)
})

// 在组件中使用
this.$http.get('/api/users').then(res => {
  console.log(res.data)
})

工具函数

// 使用框架提供的工具函数
const tools = framework.tools

// 日期格式化
tools.formatDate(new Date(), 'yyyy-MM-dd HH:mm:ss')

// 深拷贝
tools.deepClone(obj)

// 防抖
tools.debounce(fn, 500)

// 节流
tools.throttle(fn, 500)

UI 工具

// 使用 UI 工具
const uiTool = 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，检查路径是否正确：

<!-- 确保路径指向正确的文件 -->
<script src="../dist/admin-framework.js"></script>

3. API 地址

记得修改配置中的 API 地址为实际的后端地址：

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. 使用浏览器调试工具

   // 所有实例都挂载到 window 上，方便调试
   window.app        // Vue 实例
   window.framework  // 框架实例
   

更多信息

查看完整文档：../_doc/完整使用文档.md