diff --git a/docs/frontend/README.md b/docs/frontend/README.md index afb6a95..273b8f5 100644 --- a/docs/frontend/README.md +++ b/docs/frontend/README.md @@ -11,10 +11,12 @@ - 集成多种canvas背景动画 - 仿极验滑动验证 +- 动态路由、动态菜单 + - 布局功能 - 异步路由组件loading骨架屏 - - 动态侧边栏(支持多级路由嵌套) - - 动态面包屑 + - 多级侧边栏 + - 面包屑 - 多页签(支持详情页缓存) - 支持移动端 - 导航栏、侧边栏可隐藏 @@ -22,10 +24,6 @@ - Excel导出,支持多级表头、合并行 -- 错误页面 - - 403 - - 404 - - 组件 - 用户导航 - 行政区划选择器,支持树形和选项卡型 @@ -35,7 +33,6 @@ - element-ui增强 - message支持分组、进度条功能 - - select重写,分别使用了popperjs的v1和v2版本 ``` ## 目录结构 @@ -45,13 +42,13 @@ ├── public # 静态资源文件夹 ├── src │ ├── api # 数据请求集合 +│ │ │── request.js # axios封装 │ ├── asset │ │ │── icon # 项目所有svg icons │ │ └── style # 样式集合 │ ├── component # 公用组件 │ ├── config │ │ │── index.js # 基础配置项 -│ │ └── request.js # axios封装 │ ├── directive # 自定义指令集合 │ ├── filter # 自定义过滤器集合 │ ├── globalMethod # 全局方法,使用this.$xx调用 @@ -59,8 +56,8 @@ │ ├── mixin # 公用混入 │ ├── plugin # 一些插件,均使用import()来动态引入 │ ├── router -│ │ │── authority # 需要鉴权的路由集合 -│ │ │── constant # 不需要鉴权的路由集合 +│ │ │── module # 前端静态路由定义 +│ │ │── define.js # 静态路由导出 │ │ │── index.js │ │ └── util.js │ ├── store # vuex配置 diff --git a/docs/frontend/global-methods/puzzle-verify.md b/docs/frontend/global-methods/puzzle-verify.md index 21df8a4..ebfaad8 100644 --- a/docs/frontend/global-methods/puzzle-verify.md +++ b/docs/frontend/global-methods/puzzle-verify.md @@ -5,7 +5,7 @@ ### 使用: ```js -this.$puzzleVerify().then(...).catch(...) +this.$verify().then(...).catch(...) ``` 返回一个 `promise`,如果验证失败会 `reject`,否则 `resolve` diff --git a/docs/frontend/new.md b/docs/frontend/new.md index 2ef5755..9928a00 100644 --- a/docs/frontend/new.md +++ b/docs/frontend/new.md @@ -2,14 +2,16 @@ 1. 把数据请求api创建出来,建议在 `@/api`下根据模块区分。 -2. 创建路由页面,建议在 `@/views` 下根据模块区分。 +2. 在 `@/views` 下创建路由页面,根据模块区分,页面务必以`Page.vue`结尾。 3. 如果页面过大过复杂,建议按功能拆分,放在当前页面的文件夹里。 -4. 独有的样式同样放在当前页面的文件夹里,能公用的提取到 `@/assets/styles` 里。 +4. 独有的样式同样放在当前页面的文件夹里,能公用的提取到 `@/asset/style` 里。 -5. 创建路由,根据是否需要鉴权,在 `@/router/authority/modules` 或 `@/router/constant/modules` 下创建,这两个文件夹下的js会被自动导出。 +5. 路由定义 + - 5.1 如果使用静态路由,在 `@/router/modules` 下创建路由文件,这个文件夹下的js会被`@/router/define.js`自动导出。 + - 5.2 如果使用动态路由,需要在数据库或`系统管理 -> 菜单管理`中添加路由信息。 6. 如果需要创建vuex模块,请在 `@/store/modules` 下创建,同样的,该文件夹下的js会被自动导出。 -7. 如果页面之间存在公共组件,建议抽取出来,根据业务耦合度拆分至 `@/components` 或 `@/bizComponents` +7. 如果页面之间存在公共组件,建议抽取出来放到 `@/component` 中 diff --git a/docs/frontend/permission.md b/docs/frontend/permission.md index 09b1f8a..eeea666 100644 --- a/docs/frontend/permission.md +++ b/docs/frontend/permission.md @@ -5,7 +5,7 @@ 鉴权方法为 `@/util/auth.js #auth`。 鉴权流程: -1. 如果用户的`admin` 字段为1,那么直接放行。 +1. 如果用户是`admin`身份,那么直接放行。 2. 如果访问的 `url` 不在总权限树内,说明该操作无需权限,放行。 diff --git a/docs/frontend/router.md b/docs/frontend/router.md index 06ef0fd..b793177 100644 --- a/docs/frontend/router.md +++ b/docs/frontend/router.md @@ -1,19 +1,74 @@ # 路由 +项目中默认使用了静态路由,要使用动态路由的话需要打开 `@/config` 中的 `useBackendRoute` 选项。 + +本项目不支持二级以上的路由,虽然路由配置可以无限级,但是实际上是二级路由的效果,因为在处理路由 +数据时会将二级以上的路由缩减为其叶子节点,也就是说如果有如下路由: +```js +const routes = [ + { + path: '/a', + component:A, + children: [ + { + path: 'b', + component:B, + children: [ + { + path: 'c', + component:C + }, + { + path: 'd', + component:D, + children: [ + { + path: 'e', + component:E, + } + ] + } + ] + } + ] + } +] +``` +缩减后是下面的形式: +```js +const routes = [ + { + path: '/a', + component: A, + children: [ + { path: 'b/c', component: C }, + { path: 'b/d/e', component: E } + ] + } +] +``` +这样做的目的是为了避免多级路由缓存失效的问题,而且大部分情况下,三级路由(或更高)可以借助动态组件 +来实现同样的效果, + ## 路由配置项 路由配置项不光参与路由的生成,也参与侧边栏的生成。 +::: warning 注意 +项目中,路由配置项中的component是字符串,比如组件路径是`@/views/test/indexPage.vue`,那么component可以是 +`test/` 或者 `test/index`,具体可以看`@/router/util.js` 中的 `generateRoutes` 方法。 +::: + ### Route.meta Attributes: | 参数 | 说明 | 类型 | 默认 | | :------------: | :--------------------------------------------------: | :--------: | :---------------------: | -| title | 路由在侧边栏、面包屑、页签、搜索结果中的显示名称 | `string` | - | +| title | 路由在侧边栏、面包屑、页签 | `string` | - | | dynamicTitle | 路由在面包屑、页签中的动态名称,参数为(to,from) | `function` | - | | hidden | 是否在侧边栏中显示 | `boolean` | - | | alwaysShow | 是否总是把只有一个子级的菜单以嵌套模式在侧边栏中展示 | `boolean` | - | | sort | 侧边栏的排序值,值越小越靠前 | `number` | 10000 | -| icon | 图标名,支持svg-icon、el-icon | `string` | - | +| icon | 图标名,的icon属性 | `string` | - | | affix | 是否在多页签中固定显示 | `boolean` | - | | noCache | true时缓存页面 | `boolean` | - | | activeMenu | 侧边栏当前激活菜单的index | `string` | - | diff --git a/docs/start.md b/docs/start.md index 82733e2..91ed9c9 100644 --- a/docs/start.md +++ b/docs/start.md @@ -16,7 +16,7 @@ cloud版请按以下步骤启动: 2. 将`/nacos-config`下的文件打包成`DEFAULT_GROUP.ZIP`,然后在nacos的web端上导入。 -3. 按一定顺序启动各个模块。`websocket`、`schedule`、`gateway` 这三个可以按任意顺序启动, - 之后启动 `web/file` 然后启动 `web/web-modules/record`,剩余的 `web-modules` 中,`web/web-modules/account` +3. 按一定顺序启动各个模块。`websocket`、`schedule` 这两个个可以按任意顺序启动,之后启动 `web/file`, + 然后启动 `web/web-modules/record`,然后启动 `gateway`,剩余的 `web-modules` 中,`web/web-modules/account` 必须要在 `web/web-modules/system` 之后启动,`web/web-modules/document` 必须要在 `web/web-modules/stock` 之后启动, 剩余的可以按任意顺序启动。