1
This commit is contained in:
90
README.md
90
README.md
@@ -70,6 +70,19 @@ import AdminFramework from './vendor/admin-framework.js'
|
||||
| `HomePage` | `Vue` 组件 | 可选,自定义首页;默认框架内置欢迎页 |
|
||||
| `onReady` | `function` | 可选,根实例 `created` 末尾调用,`this` 为 Vue 根实例 |
|
||||
|
||||
### 3.2 `createApp` 执行流程(源码行为)
|
||||
|
||||
1. 自动补齐 `uploadUrl`(未传时按 `apiUrl` 拼接 `/upload`)。
|
||||
2. 注册 `ViewUI`、`VueRouter`、`Vuex`。
|
||||
3. 注入全局原型:`$config`、`$http`、`$tools`、`$uiTool`、`$framework`。
|
||||
4. 全局注册组件(`registerGlobalComponents`)。
|
||||
5. 建立 `componentMap`(内置系统页 + 业务传入映射)。
|
||||
6. 创建 Store 并初始化 HTTP。
|
||||
7. 创建 Router(基础路由 + 动态主路由),并挂守卫。
|
||||
8. 创建根 Vue;恢复菜单与系统标题;最后执行 `onReady`。
|
||||
|
||||
> 注意:框架实例是单例,`store/router` 初始化后会复用;通常整个应用只调用一次 `createApp`。
|
||||
|
||||
**示例:**
|
||||
|
||||
```javascript
|
||||
@@ -113,6 +126,13 @@ app.$mount('#app')
|
||||
| `storeModules` | 默认 `user`、`app` 模块描述,扩展 Store 时可参考 |
|
||||
| `createBaseRoutes` / `setupRouterGuards` / `registerComponents` | 高级自定义路由/组件时使用 |
|
||||
|
||||
### 4.4 运行时全局对象
|
||||
|
||||
浏览器环境下,框架会暴露:
|
||||
|
||||
- `window.framework`:框架单例。
|
||||
- `window.rootVue`:`createApp` 创建的根实例(便于调试)。
|
||||
|
||||
### 4.2 `addComponentMap(customMap)`
|
||||
|
||||
在运行时追加组件映射(与 `createApp` 里的 `componentMap` 语义相同)。
|
||||
@@ -151,6 +171,7 @@ AdminFramework.initHttp(
|
||||
|
||||
- 成功:后端 JSON 需 `code === 0`,否则走全局错误提示并 `reject`。
|
||||
- `401`:清空 token,并跳转登录路由(依赖 `window.framework.router`)。
|
||||
- 请求参数会做预处理:递归移除对象中值为 `''` 的键,并自动格式化 `Date`。
|
||||
|
||||
### 5.3 方法说明
|
||||
|
||||
@@ -188,6 +209,12 @@ export default {
|
||||
await this.$http.get('/xxx', { id: 1 }, { hideLoad: true })
|
||||
```
|
||||
|
||||
### 5.4 常见注意点
|
||||
|
||||
- `post(url, body, config)` 当前实现固定会显示 loading(`showLoad`),`hideLoad` 只在 `get` 内部判断。
|
||||
- `postFormData` 使用 `application/x-www-form-urlencoded`。
|
||||
- `fileExport` 返回 `blob` 响应;`is_down=false` 时可自行处理文件流。
|
||||
|
||||
---
|
||||
|
||||
## 6. uiTool 模块
|
||||
@@ -260,20 +287,47 @@ AdminFramework.createApp({
|
||||
|
||||
框架内置已注册一批系统页(如 `system/sys_menu` 等),见 `src/views/index.js` 中 `setupComponentMap`;业务模块在 `componentMap` 中追加即可。
|
||||
|
||||
### 7.1 内置映射(默认可用)
|
||||
|
||||
默认已注入以下路径(可直接在后端菜单配置里使用):
|
||||
|
||||
- `home/index`
|
||||
- `system/sys_log`
|
||||
- `system/sys_log_operate`
|
||||
- `system/sys_param_setup`
|
||||
- `system/sys_role`
|
||||
- `system/sys_user`
|
||||
- `system/sys_tenant`
|
||||
- `system/sys_control`
|
||||
- `system/sys_menu`
|
||||
- `system/sys_title`
|
||||
|
||||
---
|
||||
|
||||
## 8. 系统 API(`systemApi`)
|
||||
|
||||
`AdminFramework.systemApi` 聚合导出 `src/api/system` 下各 `*Server`,例如:
|
||||
`AdminFramework.systemApi` 聚合导出 `src/api/system/index.js` 中的服务(以下为当前版本完整导出):
|
||||
|
||||
| 导出名 | 模块文件 | 典型用途 |
|
||||
|--------|----------|----------|
|
||||
| `fileServe` | `fileServe.js` | 文件上传下载 |
|
||||
| `plaAccountServer` | `pla_account_server.js` | 平台账号管理 |
|
||||
| `rolePermissionServer` | `rolePermissionServer.js` | 角色权限 |
|
||||
| `roleServer` | `roleServer.js` | 角色管理 |
|
||||
| `sysAddressServer` | `sysAddressServer.js` | 地址字典 |
|
||||
| `sysModuleServer` | `sysModuleServer.js` | 模块管理 |
|
||||
| `sysLogServe` | `sys_log_serve.js` | 系统日志 |
|
||||
| `systemTypeServer` | `systemType_server.js` | 系统类型配置 |
|
||||
| `tableServer` | `tableServer.js` | 表结构相关 |
|
||||
| `userServer` | `userServer.js` | 登录、用户 CRUD、权限菜单 |
|
||||
| `formFieldServer` | `formFieldServer.js` | 表单字段 |
|
||||
| `formServer` | `formServer.js` | 表单模型 |
|
||||
| `menuServer` | `menuServer.js` | 菜单管理 |
|
||||
| `roleServer` / `rolePermissionServer` | 角色与权限 |
|
||||
| `paramSetupServer` | 系统参数(如站点标题、Logo) |
|
||||
| `fileServe` | 文件上传下载 |
|
||||
| `modelServer` / `tableServer` / `formServer` 等 | 低代码/表单相关 |
|
||||
| `modelFieldServer` | `modelFieldServer.js` | 数据模型字段 |
|
||||
| `modelServer` | `modelServer.js` | 数据模型 |
|
||||
| `paramSetupServer` | `paramSetupServer.js` | 系统参数(标题、Logo) |
|
||||
| `sysControlTypeServer` | `sysControlTypeServer.js` | 控件类型 |
|
||||
| `sysTenantServer` | `sysTenantServer.js` | 租户管理 |
|
||||
|
||||
**调用示例:**
|
||||
|
||||
@@ -290,19 +344,36 @@ async function login() {
|
||||
|
||||
实际请求仍走全局配置的 `http`(`apiUrl`、token 头)。
|
||||
|
||||
> 说明:`src/api/system` 中若存在未在 `index.js` 聚合导出的文件(例如实验性模块),不会出现在 `AdminFramework.systemApi`。
|
||||
|
||||
---
|
||||
|
||||
## 9. Vuex(`this.$store`)
|
||||
|
||||
默认模块:
|
||||
|
||||
### 9.0 `createStore`(扩展自定义模块)
|
||||
|
||||
框架导出 `createStore(Vuex, customModules, createPersistedState)`,可在默认 `user/app` 基础上合并业务模块:
|
||||
|
||||
```javascript
|
||||
import Vuex from 'vuex'
|
||||
// 源码工程示例:按项目结构从 store 导入 createStore
|
||||
import { createStore } from '@/store'
|
||||
import foo from './store/foo'
|
||||
|
||||
const store = createStore(Vuex, { foo }, null)
|
||||
```
|
||||
|
||||
`createPersistedState` 传入后会启用本地持久化插件(`window.localStorage`)。
|
||||
|
||||
### 9.1 `user`(`namespaced: true`)
|
||||
|
||||
| 项 | 说明 |
|
||||
|----|------|
|
||||
| `state` | `token`、`userName`、`authorityMenus`、`menuList` 等 |
|
||||
| `mutations` | `setToken`、`setUserName`、`setAuthorityMenus`、`setMenuList` |
|
||||
| `actions` | `setAuthorityMenus`:拉取或传入菜单 JSON,生成动态路由并写入 `localStorage` |
|
||||
| `state` | `token`、`userName`、`avatorImgPath`、`authorityMenus`、`menuList`、`currentTenant` |
|
||||
| `mutations` | `setToken`、`setUserName`、`setAuthorityMenus`、`setMenuList`、`setCurrentTenant` |
|
||||
| `actions` | `setAuthorityMenus`(生成动态路由)、`handleLogin`、`handleLogOut` |
|
||||
|
||||
**登录后刷新菜单示例:**
|
||||
|
||||
@@ -322,7 +393,8 @@ await this.$store.dispatch('user/setAuthorityMenus', {
|
||||
| 项 | 说明 |
|
||||
|----|------|
|
||||
| `state` | `sysFormModel`(标题、Logo)、面包屑、首页路由 |
|
||||
| `actions` | `getSysTitle`:根据参数与接口更新站点标题与 Logo |
|
||||
| `mutations` | `setBreadCrumb`、`setHomeRoute`、`setSysTitle` |
|
||||
| `actions` | `getSysTitle`:根据登录状态和参数接口更新站点标题与 Logo |
|
||||
|
||||
```javascript
|
||||
await this.$store.dispatch('app/getSysTitle', {
|
||||
|
||||
Reference in New Issue
Block a user