> UI组件使用详见 [iView官网文档](https://www.iviewui.com/docs/guide/install)【务必收藏仔细阅读】 > Vue Cli 4.x以后版本的配置文件在 `vue.config.js`中,[官方中文配置文档](https://github.com/vuejs/vue-cli/tree/dev/docs/zh/config) ### 全局配置 - 全局需要经常修改的配置建议添加至`public/config.js`中,打包后仍可找到该文件修改,便于后期部署运维修改 - 使用:`config.你添加的配置名` ### 如何添加更多级菜单? - 目前暂限制添加三级菜单(包含顶部菜单),如需更多级请考虑其他方式:推荐使用`Tab`组件或`Menu`等组件,参考`系统监控-操作日志`或`XBoot业务组件`菜单页面,将每个子级页面内容封装成单独组件即可,用户使用体验更佳 ### Tag标签页面缓存说明 - 由于路由已使用`keep-alive`组件(Main.vue中),当且仅当组件name名与菜单路由中配置的路由名一致时页面缓存生效 <img src=https://ooo.0o0.ooo/2020/03/30/lcNw2DpM9Qd3kTx.png width=700 /> - 不想要缓存的页面还可以在`/src/store/modules/app.js`中的`dontCache`配置,将页面的name属性值添加配置即可 ### 请求方法 - api接口建议统一放在`src/api`文件夹下统一引用方便管理,也可全局使用封装挂载好的请求方法,如`this.getRequest()、this.postRequest()`等 - 统一请求前缀`/xboot`在`public/config.js`中修改,打包后仍可找到该文件修改 - 已封装且已全局挂载请求axios列表 | 请求名 | 请求方法 | 说明 | | --- | --- | --- | | getRequest | GET | 携带Token认证的GET请求 | | postRequest | POST | 携带Token认证的POST请求,`Content-Type`为`application/x-www-form-urlcoded` | | putRequest | PUT | 携带Token认证的PUT请求,`Content-Type`为`application/x-www-form-urlcoded` | | postBodyRequest | POST | 携带Token认证的POST请求,`Content-Type`为`application/json`,后端需使用`@RequestBody`接收对象参数 | | getNoAuthRequest | GET | 无Token认证的GET请求,避免旧Token过期导致请求失败 | | postNoAuthRequest | POST | 无Token认证的POST请求,`Content-Type`为`application/x-www-form-urlcoded` | ### 菜单页面动态添加说明 > 仅有一个一级菜单不会显示,请为该一级菜单至少添加一个子级菜单 - 系统菜单中动态添加配置,请参考已有配置。注:一级菜单组件只能填`Main`,url路径前必须加上`/`,二级菜单页面Vue组件请放置`views`目录中开发。 ![WX20190120-212902@2x.png](https://ooo.0o0.ooo/2019/01/20/5c4477b488321.png) - 添加菜单后记得在“角色管理”中,给相应用户拥有的角色分配上菜单权限(分配后菜单实时刷新显示,无需刷新页面) ![](https://img.kancloud.cn/72/a6/72a6b4cc5c349720a27bae732aea744b_3520x1396.png) - 菜单始终显示配置说明 ![WX20190704-010652@2x.png](https://ooo.0o0.ooo/2019/07/04/5d1ce0c13df8148476.png) ### 权限控制界面显示 - 权限按钮或其他内容显示控制自定义标签:`v-has`,使用示例: ``` <Button v-has="'add'">添加按钮</Button> <Button v-has="'edit'">编辑按钮</Button> <Button v-has="'delete'">删除按钮</Button> <div v-has="'view'">需要view权限的界面内容</div> ``` - js中权限判断示例 ``` if(this.$route.meta.permTypes && this.$route.meta.permTypes.includes("edit")){ return ... ... }else{ return ... ... } ``` - 注意权限标签中的`v-has`数据需与菜单中页面下配置的权限按钮类型匹配(权限按钮类型可在“数据字典”中配置) ![QQ20190223-134858@2x.png](https://ooo.0o0.ooo/2019/02/23/5c70df790a937.png) - 根据当前登录的用户拥有的角色全局控制权限显示,直接使用即可,自定义标签:`v-hasRole`,使用示例: ``` <Button v-hasRole="'ROLE_ADMIN'">添加按钮</Button> ``` - js中判断使用 ``` if(this.getStore('roles').includes("ROLE_ADMIN")){ ... ... } ``` ### 获取当前登录用户数据 - 已全局挂载 ```javascript this.getUserInfo(); ```