ruoyi–UI （若依）微服务版 vue前端版本使用及分析（2021-4-13更新）

文章目录

ruoyi-UI （若依）微服务版 vue前端版本使用及分析（2021-4-13更新）
- 1. 目录结构
- ps：他有两个permission.js文件，一个是根目录下的，一个是layout/modules/permission.js，两个不要搞混
- 接口使用方法
- 2. 重点文件夹，文件解析
- - views/login.vue
  - /store/modules/user.js（这个是用户的vuex，里面都有）
- directive/
- - directive/permission/hasPermi.js 权限判断
  - directive/permission/hasRole.js 权限判断
  - directive/permission/index.js 权限使用
- 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
- - router/index.js
- store
- - store/modules/app.js
  - store/modules/permission.js
  - store/modules/settings.js vuex大体的配置，具体在里面的storejs文件
  - store/modules/tagsView.js tag的js
  - store/modules/user.js
  - store/getters.js
  - store/index.js
- utils….工具类，还能怎么说？
- views
- /permission.js（讲login.vue的时候就说过了，就不啰嗦了）
- /settings.js（没多少东西，全局的配置）
- vue.config.js
- 如何新建页面
- 打包上线等
- - 方法一命令 npm run build:prod (使用生产模式上线)
  - ps，项目地址
  - 方法二，直接写ip，简单粗暴
引入自定义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有没有过期，有没有把本地缓存清除掉啥的