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

已于 2023-02-07 08:58:07 修改
阅读量1.6w 收藏 162
点赞数 38
分类专栏： 前端 javascript vue 文章标签： vue web html
于 2021-03-26 19:19:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41312395/article/details/115250966
版权
javascript 同时被 3 个专栏收录
10 篇文章 0 订阅
订阅专栏
前端
9 篇文章 5 订阅
订阅专栏
vue
9 篇文章 0 订阅
订阅专栏
本文详细介绍了若依UI微服务版的Vue前端结构，包括目录布局、关键文件解析、路由、Vuex状态管理、权限判断及接口使用方法。重点讨论了登录、权限判断、页面组件、路由守卫、Vuex模块以及打包上线流程。同时，还涉及了图标引入和自定义指令的使用。
摘要由CSDN通过智能技术生成

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有没有过期，有没有把本地缓存清除掉啥的

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

Black Knights
关注
  • 38
    点赞
  • 踩
  • 162
    收藏
    觉得还不错? 一键收藏
  • 18
    评论
专栏目录
ruoyi-ui初认识
m0_63724439的博客
05-25 374
本次主要对刚认识的前端文档产生验证码的过程和用到的文件进行的初步了解进行记录。// axios中请求配置有baseURL选项，表示请求URL公共部分。在该文件中找到以下代码块： getCode() 获得代码，继续下找。vue获取图片，请求后端；可发现该文件是一个element-ui 和vue 组成的。查找共部分：VUE_APP_BASE_API 值的来源。在网页端调用的文件以及实现，发现底层调用来自该文件。url请求前端，进行代理，映射到后端，解决跨域问题。后端生成一个表达式 1+1=2。
RuoYi-Cloud 若依微服务版启动教程（保姆级）
m0_60721514的博客
06-12 8881
RuoYi-Cloud 是一个 Java EE 企业级快速开发平台，基于经典技术组合（Spring Boot、Spring Cloud & Alibaba、Vue、Element），内置模块如：部门管理、角色用户、菜单及按钮授权、数据权限、系统参数、日志管理、代码生成等。在线定时任务配置；支持集群，支持多数据源。1、系统环境2、主框架3、持久层4、视图层后端结构 前端结构 架构图 1.电脑上JDK 、Maven、Mysql、Node、IDEA、Git这些基本的开发环境必备已经安装完成。 2.项目需要连接R
2024年最新若依RuoYI安装全教程
weixin_67892133的博客
04-05 7740
2023 2024年最新版若依RuoYI安装全教程 数据库 安装redis node.js 环境变量配置 idea或eclipse node.js 的下载 %NODE_PATH% 配置镜像站 npm run dev运行
【若依项目-RuoYi】掌握若依前端的基本流程
最新发布
qq_56966336的博客
07-31 1516
掌握若依工程前端的基本流程
ruoyi-ui总结vue知识
c__cc___的博客
12-15 989
插槽 预留一个空位 ****路由嵌套 ，通过主页面开一个窗口，显示路由对应的组件的内容展示 props:{属性}父->子组件进行通信，子组件定义好自己需要的属性，在父组件使用的地方，进行数据传递。 ...
若依Ruoyi是UI框架，还是前端框架，你能分清吗？
2401_82943878的博客
06-13 2237
若依（Ruoyi）是一款基于Spring Boot和Spring Cloud的开源快速开发平台，用于快速构建企业级后台管理系统。若依提供了许多常用的功能模块和组件，包括权限管理、代码生成、工作流、消息中心等，可以帮助开发人员快速搭建企业级应用。若依具有以下特点：1.采用现代化的微服务架构，利用Spring Boot和Spring Cloud提供的便捷开发和部署特性。2.采用模块化设计，功能模块之间解耦，易于扩展和定制。3.支持多租户管理，可以为不同的租户提供独立的数据和功能。4.
ruoyi-ui前端文件夹（目录）
Yt0601的博客
03-27 644
若依项目中 ruoyi-ui 前端文件夹目录详细意思
若依vue前端笔记
tsukuru的博客
02-12 312
无
RuoYi-Vue-fast-master_ruoyi项目_vuefast_若依前后端分离项目_
10-03
9. **UI框架**：若依项目可能使用了Element UI或其他Vue兼容的UI组件库，以快速构建美观的用户界面。 10. **持续集成/持续部署（CI/CD）**：项目可能集成了GitHub Actions、Jenkins或Travis CI等服务，实现代码自动...
ruoyi-vue-cloud微服务版本地部署
weixin_50776857的博客
08-01 630
ruoyi-vue-cloud微服务版本的本地部署
若依框架前端Vue项目分析实战
热门推荐
敲代码的小小酥的博客
04-09 2万+
说明 前面讲解了vue2的单点知识，下面用若依提供的vue项目，实战分析一下，拿到一个vue项目，如何进行分析并进行二次开发。 一、public/index.html与main.js和App.vue三者的关系 vue项目是单界面应用，所有的界面将在public下的index.html里呈现。 main.js是程序的入口，在这里，定义了vue实例对象。如下代码： new Vue({ el: '#app', router,//路由插件 store,//vuex插件,所有的组件中都可以使用store中
ruoyi_ant_design_pro:若依Vue SpringBoot版本的Ant Design Pro前端（本前端在不修改默认二进制情况下进行，完全可以直接下载前端与若依本机运行服务）
03-22
English || | || | | 蚂蚁设计专业版 适用于企业应用程序的即用型UI解决方案，作为React样板。 预览： ： 主页： ： 文档： : 变更日志： : 常见问题解答： ： 中国镜像网站： ： 4.0现在发布！ :party_popper: :party_popper: :party_popper: 翻译招聘 :loudspeaker: 我们需要您的帮助： : 特征 :light_bulb: TypeScript ：一种用于应用程序级JavaScript的语言 :scroll: 块：使用块模板构建页面 :gem_stone: 整洁的设计：遵循 :triangular_ruler: 通用模板：企业应用程序的典型模板 :rocket: 最新的开发状态：React / umi / dva / antd的最新开发堆栈 :mobile_phone: 响应式：专为可变屏幕尺寸而设计 :artist_palette: 主题：通过简单的配置即可自定义主题 :globe_with_meridians: 国际：内置的i18n
vue若依前端项目搭建
小姑仔的博客
09-20 743
然后首先把背景图片放入src/assets/images/login-background.jpg，接着在login.vue之中先写界面。最后还需要在vue.config.js之中配置默认的表头替换原则以及路径，注意这个vue.config.js在根目录下面。然后在src/utils/request.js下面定义创建service需要默认加入的url，便于前端在后台区分，由于这个方法在created调用的时候就调用了getCodeImg的请求，因此在浏览器中可以看到发送出的相应请求。
RuoYi(若依开源框架)-前后端分离版-前端流程简单分析
qq_41607217的博客
07-21 1万+
RuoYi(若依开源框架)-前后端分离版-前端项目流程简单分析 项目结构 ├── build // 构建相关 ├── bin // 执行脚本 ├── public // 公共文件 │ ├── favicon.ico // favicon图标 │ └── index.html // html模板 ├── src
若依前端框架
qq_42524319的博客
12-04 4615
若依框架前端详解
若依框架vue分离版-前端部署
ZHUSHANGLIN的博客
05-08 312
若依vue前后端分离版本，部署
若依 / ruoyi-ui：执行yarn dev 报错 esnext.set.difference.v2.js in ./src/utils/index.js
snowball的博客
07-06 1329
提供了许多现代 JavaScript 特性的垫片，这使得基于这些特性的库和框架（如 Babel、Webpack、Vue、React 等）能够更广泛地应用于各种环境，从而促进了整个 JavaScript 生态系统的发展。是一个广泛使用的 JavaScript 标准库，它包含了模块化的标准库和提案的垫片（polyfills），旨在让现代 JavaScript 代码能够运行在不支持这些特性的旧版 JavaScript 环境中。的设计是模块化的，这意味着你可以根据需要只引入你需要的部分，而不是整个库。
Vue框架--Ruoyi解析(前端)
m0_58293192的博客
12-23 1万+
Vue框架--Ruoyi(前端)
若依[RuoYi-Vue]使用（五）- 认识ruoyi前端文件
q02132的博客
05-22 3346
以“系统管理 - 部门管理”认识若依前端 index.vue认识若依前端 dept.js。
C# 截取字符串函数
10-26
C#中有多种方法可以截取字符串，其中常用的包括Substring函数、Remove函数和IndexOf函数。Substring函数可以返回从指定位置开始的指定长度的子字符串，Remove函数可以删除从指定位置开始的指定长度的子字符串，IndexOf函数可以返回指定子字符串在原字符串中第一次出现的位置。具体使用方法可以参考以下示例代码： 1. 使用Substring函数截取左边若干个字符： string str = "Hello World"; string leftStr = str.Substring(0, 5); // 返回"Hello" 2. 使用Substring函数截取右边若干个字符： string str = "Hello World"; string rightStr = str.Substring(str.Length - 5); // 返回"World" 3. 使用Remove函数删除左边若干个字符： string str = "Hello World"; string newStr = str.Remove(0, 6); // 返回"World" 4. 使用Remove函数删除右边若干个字符： string str = "Hello World"; string newStr = str.Remove(str.Length - 6); // 返回"Hello" 5. 使用IndexOf函数查找子字符串在原字符串中的位置： string str = "Hello World"; int index = str.IndexOf("World"); // 返回6
评论 18
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值