zc/admin_core

Fork 0

Files

张成 5bea5f8c02 1

2025-10-28 14:10:05 +08:00

5.4 KiB

Raw Blame History

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：

# 在项目根目录执行
cd ..
npm run build

2. 启动示例

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

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

安装 VS Code 的 Live Server 插件
右键 index.html 或 advanced.html
选择 "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'  // 上传接口地址
}

初始化框架（新版本 - 推荐）

// 引入 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 请求

// 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)
  }
}

工具函数

// 使用框架提供的工具函数
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 工具

// 使用 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，检查路径是否正确：

<!-- 确保路径指向正确的文件 -->
<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 或使用代理。

开发建议

开发时使用 build:dev
- 生成 sourcemap，方便调试
- 代码不压缩，易读
生产时使用 build
- 代码压缩，体积小
- 无 sourcemap，安全

使用浏览器调试工具

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

5.4 KiB Raw Blame History Unescape Escape