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

文章目录

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里查看
在这里插入图片描述

登陆的时候,
在这里插入图片描述

  1. 先调用store里面的登陆方法this.$store.dispatch(“Login”,就是下面这些
    在这里插入图片描述
  2. 请求成功后调用setToken,存token,然后将结果返回给login.vue,然后登录页不是要跳转吗,所以就到了路由这块(跟main.js同级目录的permission.js文件)
    在这里插入图片描述
  3. 然后路由走完后,才会到首页啥的,刷新的时候也还是要走路由,因为要判断他token有没有过期,有没有把本地缓存清除掉啥的

会时不时更新一下,查缺补漏,请大神指教

Logo

快速构建 Web 应用程序

更多推荐