ruoyi-UI (若依) 微服务版 vue前端版本使用及分析(2021-4-13更新)
文章目录
- ruoyi-UI (若依) 微服务版 vue前端版本使用及分析(2021-4-13更新)
- 1. 目录结构
- ps:他有两个permission.js文件,一个是根目录下的,一个是layout/modules/permission.js,两个不要搞混
- 接口使用方法
- 2. 重点文件夹,文件解析
- directive/
- layout
- /layout/components/Settings/index.vue
- /layout/components/Sidebar/FixiOSBug.js(看字就知道,火狐下ios的bug
- /layout/components/Sidebar/index.vue 显示的主页面
- /layout/components/Sidebar/Item.vue 每一项的配置(不管是一级item还是多级item的整体配置)
- /layout/components/Sidebar/Link.vue 链接的配置(或者说链接的打开方式)
- /layout/components/Sidebar/Logo.vue logo的配置
- /layout/components/Sidebar/SidebarItem.vue 算是一个组件吧
- /layout/components/TagsView/index.vue 就是点了路由后,头部出现的一小块带删除的那个
- /layout/components/TagsView/ScrollPane.vue 就是tag多了后有一个鼠标滑动的功能,类似于轮播展示,鼠标滚动出现的效果(因为我看到了scroll)
- /layout/components/AppMain.vue
- /layout/components/index.js
- /layout/components/Navbar.vue
- /layout/mixin.js
- /layout/index.vue
- router
- store
- utils....工具类,还能怎么说?
- views
- /permission.js(讲login.vue的时候就说过了,就不啰嗦了)
- /settings.js(没多少东西,全局的配置)
- vue.config.js
- 如何新建页面
- 打包上线等
- 引入自定义icon
- 会时不时更新一下,查缺补漏,请大神指教
1. 目录结构
ps:他有两个permission.js文件,一个是根目录下的,一个是layout/modules/permission.js,两个不要搞混
/layout/modules/permission.js:只是对左侧导航的渲染
/permission.js:可以说是导航守卫吧,然后向后端请求路由什么的
然后重要的是vuex(也就是store文件夹下面的),贯穿了整个项目
先从main.js开始看,然后看vue.config.js,然后看store,然后顺着storg看页面,然后再看api接口(权限什么的可以稍后看,要不然你会一脸懵)
接口使用方法
1.接口定义
2.接口引用
3. 接口调用
2. 重点文件夹,文件解析
views/login.vue
decrypt()解密 /utils/jsencrypt.js
encrypt()加密 /utils/jsencrypt.js
页面加载的时候就是一个记住密码的功能,调的cookie
然后点击确定(handleLogin)的时候,调用/permission.js的beforeEach函数
然后乱七八糟走了一大堆,然后调的store/modules/user.js里面的登录什么的
/store/modules/user.js(这个是用户的vuex,里面都有)
directive/
directive/permission/hasPermi.js 权限判断
directive/permission/hasRole.js 权限判断
directive/permission/index.js 权限使用
这三个配合页面中的v-hasPermi(自定义指令)以及登录的时候system/user/getInfo 这个接口返回的permission字段,roles字段联合使用
超管的返回是 * ,也就是默认全部数据
然后其他角色返回的是这些
具体体现在
这几个按钮这里
具体逻辑就是,假设:某用户没有编辑某模块下的某个表格的数据的权限,那么后端就不会给你返回
[system:user:edit]这个东西,然后你页面不是有吗
然后当该用户重新登录的时候,就会发现这里的编辑按钮不见了
反正就是类似于我们一般写的行内的 if else判断权限,他就是把这个拿出来,做了一个全局的
layout
/layout/components/Settings/index.vue
(请自动忽略掉镇魂街漫画这几个字,thank)
对应页面的
的这里
/layout/components/Sidebar/FixiOSBug.js(看字就知道,火狐下ios的bug
/layout/components/Sidebar/index.vue 显示的主页面
/layout/components/Sidebar/Item.vue 每一项的配置(不管是一级item还是多级item的整体配置)
/layout/components/Sidebar/Link.vue 链接的配置(或者说链接的打开方式)
/layout/components/Sidebar/Logo.vue logo的配置
/layout/components/Sidebar/SidebarItem.vue 算是一个组件吧
反正就是index调的SidebarItem,然后SidebarItem又调的其他几个,反正最后显示是在index上显示的
/layout/components/TagsView/index.vue 就是点了路由后,头部出现的一小块带删除的那个
对应页面的这里
里面的代码都是和vuex有关,保存状态啊,打开,关闭什么的,在那个store的tagsView.js存着
/layout/components/TagsView/ScrollPane.vue 就是tag多了后有一个鼠标滑动的功能,类似于轮播展示,鼠标滚动出现的效果(因为我看到了scroll)
/layout/components/AppMain.vue
页面切换的展示区域(一直不知道这种展示区域叫啥)
/layout/components/index.js
这就不用说了吧,但是我死活找不到在哪调用的(求解答)
/layout/components/Navbar.vue
这一长条都是
/layout/mixin.js
手机的兼容性
/layout/index.vue
页面的大架子
router
router/index.js
注释里有使用方法
store
store/modules/app.js
使用vuex,然后具体操作左侧菜单栏的收起
store/modules/permission.js
从后端获取到路由,然后渲染数据,过滤数据,和layout配合使用
store/modules/settings.js vuex大体的配置,具体在里面的storejs文件
store/modules/tagsView.js tag的js
对应着components/TagsView/index.vue 里面的操作
store/modules/user.js
登录的,用户信息,刷新token,退出登录,前端 登出,这几个都调的api里面的接口
store/getters.js
…这就不用说了吧,下一个
store/index.js
…这就不用说了吧,下一个
utils…工具类,还能怎么说?
注意一下request.js吧
接口请求的时候触发他,响应的时候触发,然后下载东西的时候触发的方法,具体的看自己吧,没什么好的
views
所有页面的合集,在那个/permission.js的时候说过,文件名要和/permission.js后几行对应,要不然他不知道去哪找
/permission.js(讲login.vue的时候就说过了,就不啰嗦了)
路由走完了,然后把进度条关了
/settings.js(没多少东西,全局的配置)
vue.config.js
publickPath : 这个配置就是那三个.evn配置使用,
production = .env.production生效
development = .env.development生效
打包的时候记得看服务器路径
target:请求后端的接口地址
configureWebpack :就是写@的地方,就是从src下开始找
比如:@/assets/images/xx.png 相当于 …/…/src/assets/images/xx.png,意思差不多
chainWebpack,就是一些插件的引入声明什么的
如何新建页面
配合后端运行项目(一定要后端把项目跑起来,你在登陆页面看到验证码才算开始)
新建项目(这就不用我说了吧,网上一搜一大堆)
我的目录结构
新建多级目录的时候:1. 选择目录,然后路由地址选择你文件夹的名称
然后点击新增,点击菜单,路由地址填father子文件夹的名称,他默认会找index.vue的
然后这里的路由地址,就是你点了之后,他在浏览器上显示的地址 192.168.3.56:81/newpage/child
然后弄好之后就好了
打包上线等
方法一 命令 npm run build:prod (使用生产模式上线)
使用hash模式打包
后端或者运维那部分需要 Nginx反向代理
tomcat没试过,我们用的是方法二
ps,项目地址
项目上线的时候,要看清楚服务器地址
比如:上线服务器地址是 http://22.22.22.22:1024/project
那么publicPath就得写 publicPath: "/project",
上线服务器地址是 http://22.22.22.22:1024
那么publicPath就得写 publicPath: "/",
方法二,直接写ip,简单粗暴
因为Vue配置的代理仅在本地开发下有效,所以,开发的时候可以写代理什么的,但是打包的时候直接改成服务器地址
使用hash模式打包
然后request.js这么写就行
引入自定义icon
让ui把svg图给你
然后放进来
在这里加上
在这里加上(不知道有没有用,加上再说)
他这个icon用的是 svg-sprite-loader 插件,可在packge.json里查看
登陆的时候,
- 先调用store里面的登陆方法this.$store.dispatch(“Login”,就是下面这些
- 请求成功后调用setToken,存token,然后将结果返回给login.vue,然后登录页不是要跳转吗,所以就到了路由这块(跟main.js同级目录的permission.js文件)
- 然后路由走完后,才会到首页啥的,刷新的时候也还是要走路由,因为要判断他token有没有过期,有没有把本地缓存清除掉啥的