前端常见问题

若在此当中没有获取到有用的信息，可以反馈到issues当中，作者会尽快回复

因框架使用了 vue-admin-template 模板框架进行开发

所以部分前端问题也可以参考于 Vue-Admin

官方文档 vue-element-admin

前端目录结构

main
├─api               ## 接口
├─assets            ## 静态资源
├─components        ## 组件
├─directive         ## 指令
├─icons             ## 图标
│  └─svg            ## svg图标
├─layout            ## 布局
├─router            ## 路由
├─store             ## 状态管理
├─styles            ## 样式
├─utils             ## 工具类
└─views             ## 页面

路由隐藏

理论上而言 路由隐藏起来是在router中的配置为：hidden: true 依然注册路由，在浏览器菜单当中是可以正常跳转的。

但在当前框架中，若设置了路由被隐藏，则不注册路由，所以在浏览器当中也是无法被跳转的。

代码修改位置： mapper/SysMenusMapper.xml 方法：getRoutersByRoleId 删除查询条件 visible = 1 即可修改为注册路由且输入地址后正常跳转

提示

注意修改完成之后，要删除Redis缓存，否则修改可能不生效

针对于txt文件下载为浏览器打开的解决方案

问题描述：

  1. txt文件下载为浏览器打开，部分浏览器打开时会出现乱码，乱码原因为浏览器默认以UTF-8编码打开，而txt文件编码为GBK，所以需要解决乱码问题

  2. PDF文件下载为浏览器打开

  3. 其他类型文件被浏览器识别打开的情况 解决方式：

  4. 框架整体提供的文件输出方式为 file: 协议输出，在被浏览器识别时本质上就是本机使用了浏览器打开了某一文件，若想保存到本地，使用浏览器保存文件( Ctrl + S ) 保存下载文件即可，此方式不会乱码

  5. 前端框架提供了download方式，这种方式提供在了 request.js 中的download 函数，传入参数即可保存

APP端动态菜单

APP端实现了动态菜单，但路由菜单是被page.json管理的 所以添加APP菜单时，路由信息因为：page.json当中的path对应的值，若要修改，请修改page.json当中的Path并修改菜单路由信息

APP端菜单添加

移动端动态菜单添加时，只允许一级目录，目录下菜单，菜单下按钮，不允许出现多级，否则可能会出现不可预估的错误BUG，若有对应的多级目录需求，请联系作者

移动端菜单和PC端菜单是在同一张表当中，前端当中增加的HandleMenuTree函数进行格式化对应的数据为Tree,详情可以去了解/utils/lucky.js 工具类中的 handleMenuTree 方法

移动端菜单和PC端菜单是在同一张表当中，移动端的APP菜单的根父路径ID为 -1 (parent_id = -1)

APP端角色修改

APP端角色修改时，采用了同一个角色列表，但是在不同的页面当中配置不同的角色权限 详细为： 在APP角色页面当中，列表编辑 按钮点击后，弹出来的菜单配置为移动端的菜单配置 在PC角色管理页面当中 列表编辑 按钮点击后，弹出来的菜单配置为PC端的菜单配置 因他俩是同一个角色，只是在不同的页面当中查询了不同的菜单，所以对应用户分配角色时，他也会拥有对应的PC端的角色(因为是同一个角色，若PC没有菜单权限则就没有对应的权限)

前端代码格式修复

所有的配置文件都在 .eslintrc.js 中。 本项目基本规范是依托于 vue 官方的 eslint 规则 eslint-config-vue 做了少许的修改。大家可以按照自己的需求进行定制化配置。

执行下方代码，会自动修复一些简单的代码格式

npm run lint --fix

取消ESLINT检查

如果你不想使用 ESLint 校验（不推荐取消），只要找到 vue.config.js 文件。 进行如下设置 lintOnSave: false 即可。

Icon自定义

移动端添加Icon需要将SVG代码放置到 lucky-admin-ui/src/icons/svg 位置即可使用组件 svg-icon 进行使用

最近更新：:
Contributors: DuYiFan