vue
忙碌的菠萝
old soldiers never die, they just fade away.
展开
-
ruoyi element-ui 实现拖拉调整图片顺序
ruoyi element-ui 实现拖拉调整图片顺序。原创 2024-04-20 17:33:33 · 615 阅读 · 0 评论 -
vue 新增枚举类型栏位
ruoyi 新增枚举类型栏位原创 2022-11-30 20:03:55 · 2280 阅读 · 1 评论 -
element ui 中el-form 表单必输校验
element ui 中el-form 表单必输校验。原创 2022-11-26 14:35:48 · 1493 阅读 · 0 评论 -
element ui 中el-form 改成多列
el-form 改成多列最后效果原创 2022-11-24 21:16:53 · 3084 阅读 · 1 评论 -
element ui 中el-date-picker 默认展示当前日期
methods中添加按钮事件方法,给对应的v-model赋值。原创 2022-11-24 21:08:43 · 8521 阅读 · 0 评论 -
vue 公共通讯处封装加签/验签
概述加签验签是验证双方身份的措施,所以与具体的业务无关,故在公共处封装该功能引入签名验签方法import { signature,verify } from '@/utils/crypt/jsrsacrypt'请求拦截器在每个请求头中加入数字签名 req => { if ("" != JSON.stringify(req.data) && undefined != req.data) { console.log(req.data) //加签原创 2021-01-15 11:16:44 · 434 阅读 · 0 评论 -
jsrsasign 前端 RSA加密/解密、加签/验签 详解
RSA概述1978年出现了著名的RSA算法,它通常是先生成一对RSA密钥,其中之一是保密密钥,由用户保存;另一个为公开密钥,可对外公开,甚至可在网络服务器中注册。为提高保密强度,RSA密钥至少为500位长,一般推荐使用1024位。RSA允许你选择公钥的大小。512位的密钥被视为不安全的;768位的密钥不用担心受到除了国家安全管理(NSA)外的其他事物的危害;1024位的密钥几乎是安全的。RSA在一些主要产品内部都有嵌入,像 Windows、网景 Navigator、 Quicken和 Lotus Not原创 2020-12-03 10:14:13 · 18502 阅读 · 0 评论 -
DES Block Modes加密模式详解
DES加密模式详解互联网的软件设计一定少不了加密算法,并且大量使用的都会是对称加密,比较常见的对称加密有:DES、3DES、RC4、AES等等;加密算法都有几个共同的要点:密钥长度;(关系到密钥的强度)加密模式;(ecb、cbc等等)块加密算法里的填充方式区分;对于加密模式,很多同学还不清楚,比如DES,也会有ECB、CBC等不同的区分,它们都是标准的;Windows加密库中,默认则是CBC模式,也可以手工设置;Openssl库要更明显一点,它的函数名里面就写明了,比如:DES_ncb转载 2020-12-01 19:16:05 · 864 阅读 · 0 评论 -
crypto-js 前端DES加密/解密、生成秘钥 详解
DES概述DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准局确定为联邦资料处理标准(FIPS),并授权在非密级政府通信中使用,随后该算法在国际上广泛流传开来。需要注意的是,在某些文献中,作为算法的DES称为数据加密算法(Data Encryption Algorithm,DEA),已与作为标准的DES区分开来。DES 这种古老的算法还是作为简单的加密算法在被使用,因为它已经是可以破解的,所以对于安全性有较高要求的原创 2020-12-01 18:51:51 · 15289 阅读 · 0 评论 -
vue 数据传输加密、加签、数字信封应用
写在前面的话接上篇的加密、加签、数字信封应用的过程原理,这回是实际应用在vue与后台java的数据交互当中。必要性的问题就不过多说明了,毕竟谁也不希望自己的一些敏感信息在网上裸奔。下面就是具体的实现了实现思路及具体实现前端vue实现DES加密/解密、生成秘钥功能vue实现RSA加密/解密、加签/验签功能vue公共通讯处封装加签/验签功能vue公共通讯处封装数字信封功能后端java实现DES加密/解密、生成秘钥功能java实现RSA加密/解密、加签/验签功能java拦截器封装加签原创 2020-12-01 09:14:35 · 570 阅读 · 0 评论 -
vue axios 请求跨域
接上篇vue baseUrl多后端环境切换,换成真实的地址后发现接口总是不通,这对这个vue的配置还是理解不到位,这回做了波实验终于通透了请求封装思路1、将axios后端请求和前端请求分离开这点是用baseURL做到,前端不需要baseUrl,baseURL可以直接配置成后端的公共地址如果不用代理而直接请求的话,可以是这个样子:let host = 'localhost';let port = '8080';// 创建axios实例const service = axios.create({原创 2020-11-25 17:40:18 · 584 阅读 · 0 评论 -
vue router 动态菜单实现问题汇总
vue router 动态菜单实现问题问题一:刷新页面router丢失动态路由页面刷新时显示undefine,实际是未找到路由问题分析刷新页面会导致动态加载的router数据被清理,我们只在登录的时候加载路由是不行的,后续刷新这个路由就没有地方可以重新加载了,所以直接访问就直接undefine了。问题解决这个开始我尝试的思路也有几个:1、刷新问题,会将store中的数据刷新掉,但localstorage和sessionStorage中的数据不会刷新掉,可以将菜单放到这两个里面。这个方案也是可行原创 2020-11-24 14:25:18 · 698 阅读 · 0 评论 -
vue router 动态路由及菜单实现之二
实现思路菜单数据及路由数据都从后端获取,在分别转成router和渲染左侧菜单。三个步骤::1、将后端返回的json数据保存到store中。2、将后端返回的json数据动态添加到当前路由中。3、菜单组件获取store中的数据来渲染菜单。后端JSON保存使用mockjs,模拟直接返回json报文main.js 引入mock//mock测试引入import './mock/mock.js'配置请求返回数据Mock.mock(`${baseUrl}/getRouters`, 'get',原创 2020-11-24 08:51:46 · 1325 阅读 · 0 评论 -
vue el-menu多级菜单递归
概述在将router后台化后,菜单这块只是简单的实现了一下,由于迁入系统的东西越来越多,菜单层级也需要实现多层级,不能总是一层层的加,需要来一波递归一劳永逸。单层级菜单实现参考多层级菜单实现直接一层层的拆曾经的for循环直接一层层的拆解<el-menu class="sidebar-el-menu" default-active="" @open="handleOpen" @close="handleClose原创 2020-11-21 09:44:13 · 5960 阅读 · 0 评论 -
vue baseUrl多后端环境切换
系统运行环境环境分类一般一个项目至少有2-3个环境,最复杂的一套包括了开发环境,开发者使用,配置较低,开发自测在此环境进行。SIT测试环境,标准功能测试,联调其他系统接口,调整功能bugUAT测试环境,提供给用户测试,提升用户体验,修复细微的bug准生产环境,与生产环境基本一致,用以准备生产环境版本及回归测试生产环境,发布用户使用的环境。一般小项目也该有开发环境和测试环境两种。环境切换后端可能有多个环境以适应测试的需要,前端一般不需要太多环境,这个时候就需要来连接不同的环境的后端,直接改原创 2020-11-19 23:16:44 · 2069 阅读 · 1 评论 -
vue router 懒加载常见写法
router 懒加载当项目越来越大,router越加越多,且用户一次性不会访问那么多的router,所以需要在用户访问的时候将router加载上,这样可以很好的提升用户体验懒加载写法三种常见的写法//遍历后台传来的路由字符串,转换为组件对象export function filterAsyncRouter(asyncRouterMap) { // console.log("asyncRouterMap"+asyncRouterMap); const accessedRouters原创 2020-11-18 16:44:58 · 1461 阅读 · 0 评论 -
vue router 动态路由及菜单实现之一
之前将路由引入,按模块简单划分后,准备将路由和菜单结合起来。发现需要前端维护一遍菜单,后端也要维护一遍菜单,这就有点蛋疼。每次后端改了一点,前端也要相应的改一波配置。看了一波其他大神的,也是用两种方式实现的,但具体的细节方面很少有提到,router这种东西看不到具体的路径就会很懵逼。vue router 动态路由实现router.addRoutes要动态添加路由,主要用到的方法就是router.addRoutes但这个方法在官方api的解释:没错,就是这么简单,这个看第一眼就知道要苦了。但该用原创 2020-11-05 09:00:15 · 6809 阅读 · 0 评论 -
vue vuex整合
Vue-Vuex整合安装vuex插件依赖在vue ui中安装vuex依赖安装成功后查看package.json中存在依赖项vuex或者直接运行命令npm install vuex --save为支持低版本的浏览器,可以添加依赖polyfill新增vuex文件在src下新建store文件夹,添加index.js文件导入vue及vueximport Vue from 'vue'import Vuex from 'vuex'//模块化工程使用use对vux进行引用Vue.原创 2020-11-03 11:13:51 · 555 阅读 · 0 评论 -
element ui 组件el-scrollbar
el-scrollbar 组件当组件中内容过多时,展开后会产生滚动条影响外部整体样式,这个时候需要将滚动条放在组件内部,不让其变化影响其他组件。el-scrollbar可以实现这个功能el-scrollbar实现菜单内部滚动条<el-scrollbar style="height:100%;"> <el-menu class="sidebar-el-menu" default-active="1-4-1" @原创 2020-11-02 20:05:25 · 1322 阅读 · 2 评论 -
vue EventBus组件通讯
vue组件通讯EventBus实现在搭建架子的时候需要将头部组件Header中 按钮点击 来触发侧边栏组件Aside菜单的显示和隐藏的切换。需要将点击切换的状态值给传递到另外的组件中,而这两个组件不是父子关系。这个时候可以使用EventBus来实现组件之间的值传递。如下:1.新建bus.jsimport Vue from 'vue';// 使用 Event Busconst bus = new Vue();export default bus;2.在Header中触发方法在He原创 2020-10-30 21:00:18 · 122 阅读 · 0 评论 -
vue router 模块化开发
vue-router 模块化开发当多人共同开发或者router很大的时候,这个时候index.js文件会很长,需要将它进行拆分。拆分模块目录在router中新建modules,每个模块占其中一个js。例如:system.js 系统管理模块router中引用模块在router/index.js中添加 system模块在router对象中 采用ES6 的写法引入SYSTEM示例代码router/index.js示例代码如下import Vue from 'vue'import Vue原创 2020-10-29 20:52:26 · 704 阅读 · 1 评论 -
vue router 整合引入
Vue-router整合安装vue-router插件依赖在vue ui中选中项目安装vue-router插件安装成功后查看package.json中存在依赖项vue-router或者直接运行命令npm install vue-router新增router文件在src下新建router文件夹,添加index.js文件导入vue及vue-routerimport Vue from 'vue'import VueRouter from 'vue-router'模块化工程使用use对v原创 2020-10-29 20:36:54 · 1711 阅读 · 0 评论 -
vue cli3 创建vue项目
Vue-cli项目搭建安装nodejs参考安装配置:https://www.runoob.com/nodejs/nodejs-install-setup.html安装vue-cli参考安装配置https://cli.vuejs.org/zh/guide/installation.html启动vue ui创建项目打开vue ui管理界面C:\Users\廖尹祯>vue ui在浏览器中创建项目手动配置项目选择router,vuex,css ,linter,使用单个配置文件原创 2020-10-29 20:21:02 · 132 阅读 · 0 评论