分享一个利用vuex+session缓存侧边栏数据的方案

前言侧边栏导航大多数情况可能会由后端返回导航内容,第一是方便修改,第二是可以做一些菜单鉴权操作,但是这也会产生一个问题:侧边栏api请求会非常频繁如何避免这个问题,我们就需要使用缓存方案,在web中,缓存有:local,session,cookie,还有一些更复杂的就不说了,用不到。local会永久存储,这样我们刷新页面,数据以缓存优先的话,就会无法及时更新了。passcookie,spa用cookie很少了,而且他有容量限制,直接pass。那么只有session了,session会在页面关闭后自动清理,这样下次重新打开页面数据依旧可以保持最新,并且新建页面,同域名,session也是可...

0
0

关于使用this.$router对象进行跳转时产生重定向错误的解决方法

vue-router升级版本后,使用$router进行跳转时,将返回一个promise对象,这其实是好事,但是除了这个,官方对报错也做了调整。这里先看一下常见一个重定向错误:为什么产生这个错误,我在谷歌查了下,有这么一个解释:这是设计使然。为什么?阅读此评论。TL;DR:假设您在页面 A,然后单击一个按钮将您带到页面 B(有点像method: goToB() { router.push('/B'); }页面 A)。但是页面 B有一个导航守卫,将您发送到页面 C。此错误是让该goToB()功能知道路由器无法完成所需任务并且用户尚未登陆的一种方式/B。这很讨厌,但信息量很大这里最大的困惑是重...

0
0
关于使用this.$router对象进行跳转时产生重定向错误的解决方法

首发《konva添加键盘方向键移动教程+辅助线显示》

预览图前言在刻度尺和辅助线的基础上增加键盘方向键事件,方便微调,毕竟鼠标拖拽浮动太大了。[hide]教程我们的逻辑是,用户点击图形选中,然后移动,因为我的图形都支持变形操作,所以我把键盘事件的监听放在了Transformer完成后触发。stage可以监听到click事件,所以也省去给每个图形添加。import Konva from "konva/lib/Core"; import { Rect } from "konva/lib/shapes/Rect"; import { Text } from "konva/lib/shapes/Te...

0
0
首发《konva添加键盘方向键移动教程+辅助线显示》

vuex持久化插件vuex-persistedstate的模块化写法

继《vue 多模块集成,每个模块为一个项目,共用依赖且独立开发,自动引入模块,导航也独立于模块,自动引入》的续章。在处理vuex持久化时,由于之前知识储备不足,没有研究出它的模块化写法。今天来完善一下。[hide]前提vuex-persistedstate不用管你的store模块是否启用了命名空间,因为他本身就是按照你vuex模块的层级配置的,也就是默认就是命名空间层级,所以:plugins: [createPersistedState({ reducer(val) { return { user: { token: val.user.token ...

0
0

vue cli4 修改静态html的 %= htmlWebpackPlugin.options.title % 默认值

在默认初始化好的vue cli项目,public目录下的index.html文件,他的title使用的是一种ejs语法:<title><%= htmlWebpackPlugin.options.title %></title>接收的是htmlWebpackPlugin对象上,options的title。一般情况,省事一点,直接把这个title给改成静态就完事了!<title>静态标题</title>但是,好像少了点什么,能不能不改动这个就能改标题呢?当然是可以的,我们需要配置下vue.config.jsvue.config.js...

0
0

webpack5 初始化《JJ》多页面的一些问题

问题多页面打包后,生成的script.php中包含了所有页面的js文件引入多页面打包后,生成的css.php中包含了所有页面的css文件引入解决方案个人判断是再new HtmlWebpackPlugin进行处理的时候出现了问题,他无法分辨被打包的页面是谁的。那么在HtmlWebpackPlugin中唯一区分的属性,就是chunks。但是在官方文档中,并没有声明他的类型。然后百度的文章,有两种:chunks:"xxxx"chunks:["xxxx","xxxx"]根据以往的经验,第一种应该是用于唯一值得情况,如果有多个则使用数组,...

0
0
webpack5 初始化《JJ》多页面的一些问题

vue cli4 全局scss变量技巧

今天啃了下官方文档,加上之前也配置到webpack的,有一些经验,我觉得官方可能有对应的方式,毕竟在webpack中我们只需要在sass-loader配置中就可以加入全局scss了,都不用安装啥插件。于是乎,果然,官方有,但是文档很蛋疼,你能看懂引入单个全局,没有多个全局的示例,索性自己写个笔记了。vue.config.jsmodule.exports = { css: { loaderOptions: { scss: { prependData: ` @import "~@/base/assets/scss/glob...

0
0

浅析Element的collapse-transition折叠动画

前言作为一个前端菜鸡,理解上可能会有诸多不对的地方,望大家指正,本篇文章也是本人这几天苦思冥想的结果,也不能保证所说全对,也算是抛砖引玉了,期待大佬们的指正。简单了解Render饿了么的折叠动画源码位于:src/transitions目录下,gayhub地址:链接由于内容不多,我直接贴出来源码:import { addClass, removeClass } from 'element-ui/src/utils/dom'; class Transition { beforeEnter(el) { addClass(el, 'collapse-transition'); ...

0
0
浅析Element的collapse-transition折叠动画

获取时间戳的几种方法

我们有两种方式获取,一种是new Date()得到时间对象,一种是Date函数对象静态方法获取。new Date()与Date的区别就是,前者是构造函数,后者是函数对象,函数对象返回的,只是我们需要的值,他不会有Date对象的内置方法(prototype),所以,它的使用更简洁明确,但是如果我们想要获取时间的年份,月份,星期几,那么new Date()才是最好的选择。new Date() 获取const date = new Date(); //没有传入参数获取当前本地时间 date.getTime(); //1626746413673 date.valueOf(); //1...

0
0

关于konva中图片Image图形的一些问题和解决方案

图形的加载在konva中,有两种方式加载图片,其原理都是需要加载图片dom,等图片完全加载完成再置入canvas中,官方的例子是这样的:var imageObj = new Image(); imageObj.onload = function() { var yoda = new Konva.Image({ x: 50, y: 50, image: imageObj, width: 106, height: 118 }); // add the shape to the layer layer.add(yoda); laye...

0
0

首发《konva添加辅助线教程》

预览图前言之前出了刻度尺的教程,刻度尺有了,但是单一的存在功能并不直观,我们还需要辅助线功能,不多说,开搞[hide]教程添加辅助线逻辑稍微辅助一些,我们需要监听拖拽事件,但是如果监听每个图形的拖拽事件,那是非常不靠谱的想法,300个图形就有300个事件监听,显然不合理,好在konva的layer对象,是可以监听到所有可拖拽对象的拖拽事件的,我们不需要给每个图形添加,只需要监听layer即可。拖拽事件:dragstart 拖拽开始事件dragmove 拖拽中dragend 拖拽结束拖拽事件,我们可以通过event对象获取到被拖拽的目标图形:this.$layer.on("d...

0
0
首发《konva添加辅助线教程》

首发《konva添加刻度尺教程》

预览图前言在使用konva库做图形拖拽的时候,你会发现konva没有提供刻度尺和辅助线的功能,导致你不知道你拖拽的实际坐标,这就很难受了,在谷歌百度查教程的时候,看见官方之前就给予过类似问题的回应。问题issues:How to add a ruler for konva官方回应(翻译):如果你需要这样的形状,就画画。作为文本 + 多行,或自定义形状(以获得更好的性能)既然搜索引擎和官方都没有类似的答案,我们就自己来。先搞定刻度尺问题。[hide]教程既然要画尺子,我们就要想怎么画,如果按照生活中的尺子,1cm一个竖线,我们1px一个竖线肯定是不行的,我的做法是,反正宽高很大,就5px一...

0
0
首发《konva添加刻度尺教程》

关于Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.的新解决方案

一般出现这个问题,肯定大部分人都是使用default-passive-events插件。但是随着项目的扩大,default-passive-events难免会和其他插件产生冲突,比如canvas库konvajs。在使用konvajs和default-passive-events后,肯定会报:拖拽时Unable to preventDefault inside passive event listener invocation.没办法,我们只能禁用default-passive-events插件我们新建一个polyfill.js文件polyfill.js/* * @Author: mul...

0
0

关于element侧边栏导航一些新想法

高亮问题由于侧边栏可能不会把所有的路由name都丢上去展示,常常是展示一个父级菜单名,子路由菜单作为页面内的导航啥的。常见的场景: 详情页为此,我们路由名与侧边栏导航菜单的name相对应的处理就不太行了。常见的做法就是在路由的meta里面添加一个activeRoute配置,里面标明需要高亮的侧边栏name那么这个activeRoute怎么配置呢?我个人觉得应该遵循父级优先的概念,如果子路由设置了,但是父级路由也设置了,那么以父级为准,也就是最上层路由为准,这样子集直接可以随便切换,不会影响侧边栏高亮,因为他有父级。那么如果没有父级,就使用自己遵循这个原则,我们对el-menu的defau...

0
0

关于微信h5支付的那些事

由于最近ios收税政策的影响,ios的h5支付已经不行了,所以,这里讲的是我对接安卓端h5支付的那些事情。[hide]当我们给后端提交一个订单请求的时候,这个请求的内容具体要看后端是怎么设置的,这个和h5支付对接没有直接关系。提交订单后,后端回返回一个用于支付的链接,这个链接对应于微信h5支付文档中这里:文档链接:微信h5支付开发文档可以看到,这个链接是一个http开头的,实际测试中,通过a元素,然后打开这个链接,是可以直接调用微信的付款的,所以,这其实就是一个普通的超链接而已。(当然,坑也在这里)在这个链接的末尾,他是有一个参数的:redirect_url这个参数用于,用户支付成功或者...

0
1
关于微信h5支付的那些事
木灵鱼儿 4 周前 CSS

scale与taranslate的倍数关系

正常情况下,如果想让左侧黄色20px的元素右侧与父元素齐平,父元素100px,我们的算法是这样://100px - 20px transform: translateX(80px);x轴移动80px即可达到效果,但是如果我们同时使用scale放大,那么80px就不对了。transform:scale(2) translateX(80px);放大两倍后,你会发现平移的距离不对了。为什么?平移的距离明明就是70px啊!不着急,我们先看看不使用translateX平移,使用margin-left移动到与父元素右侧齐平再放大是什么样的。transform: scale(2); margin-le...

0
0
scale与taranslate的倍数关系

webpack5 初始化《JJ》主题 下部

图片处理yarn add url-loader file-loader --dev很多人教程都莫名其妙,一张嘴就说推荐使用url-loader解析器,但是闭嘴不提url-loader是基于file-loader的,所以用url就必须两个都装,否则一旦你设置了url的limit限制文件大小,文件超出设置得大小后,就会报file-loader不存在的错误。webpack.config.jsmodule.exports = (env, argv) => ({ //模块-解析器loader module: { rules: [ //图片文件 { ...

9
0
木灵鱼儿 1 个月前 webpack5

webpack5 初始化《JJ》主题 上部

初始化安装yarn init yarn add webpack webpack-cli --devwebpack建议全局安装,省事yarn global add webpack webpack-cli如果不适用全局安装,直接在终端运行本项目的webpack需要使用npx命令npx webpack -v还有一个种办法就是在package.json创建快捷npm脚本,这样就不用加npx前缀了{ "scripts": { "build": "webpack" }, }使用scssyarn add style-loade...

0
0
木灵鱼儿 1 个月前 JavaScript

javascript 生成随机密码,指定位数,难度(大小写、数字、特殊字符)

原理也没啥好藏着掖着的,就是为了保证密码难度,开头的字符一定是满足安全需要的,比如要求大小写数字加特殊字符,那么开头四位就一定是:大写一位、小写一位、数字一位、特殊字符一位;然后剩下的随机。/** * @description: 随机密码 * @param {*} len 密码位数 * @param {*} mode 密码难度:hide(大小写数字特殊字符)、medium(大小写数字)、low(小写数字) * @Date: 2021-07-02 15:52:32 * @Author: mulingyuer */ export const randomPass = functi...

0
0

vue骚操作之重置data对象

简单说下使用场景,你使用一个dialog组件,弹窗时要加载数据,关闭后要清理数据,以防下次使用报错或者数据残留,如果在data中写了过多的属性,或者层级很深的引用对象啥的,为了方便还原,你可能会一个个的写。onClose() { this.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; this.xxx.xxx = xxx; }对多个值进行赋值操作。但是,这样实在是太难了,有没有一种简单的方法,就像表单重置一样。答案当然是有的:onClose() { Object.assign(this.$data, this.$...

0
0
木灵鱼儿 1 个月前 JavaScript

base64转file文件方法

使用canvas操作内容后,如果想保存图片之类的操作,就无可避免的要处理这一步,因为canvas导出的是base64格式的文件,如果你只做预览还好,存储的话,就要想办法了。我的想法是转成上传文件的那种file格式。方法如下:/** * @description: 将base64转换为文件对象 * @param {*} dataUrl base64 * @param {*} fileName 文件名 * @Date: 2021-06-30 14:33:47 * @Author: mulingyuer */ export function dataURLtoFile(dataUr...

0
0

lodash按需加载使用unionBy打包后使用报错:t is not a function 的问题解决方案

按需加载,在gzip面前根本不值一提,当然,该优化还是要优化,所以在使用了lodash-webpack-plugin插件后,在使用个别方法后就会出现问题,比如:unionBy;原因按需加载的插件,它的按需就是将你调用的方法单独提取出来,但是,如果提取的方法里面还用了其他方法,他可能无法识别,导致方法缺失,所以就会报错。报错代码<script> import _ from "lodash"; export default { methods: { test(arr){ return _.unionBy(arr, "key&...

1
0
lodash按需加载使用unionBy打包后使用报错:t is not a function 的问题解决方案
木灵鱼儿 1 个月前 nuxt

nuxt 加快编译速度

nuxt嘴上说很快,但是其实热编译是很慢的,很墨迹,和vue cli这种对比起来,差了很多,经常改动一点东西想要看效果,编译要等一段时间。今天无聊去看了下nuxt模块库,看到这么一个插件:nuxt-build-optimisations有点牛皮,使用后,热编译速度肉眼可见的提升,官方的介绍说可以提升2-5倍的速度,实际测试中,冷启动速度没太大感觉,但是热编译速度确实是很满意。特此推荐!用法yarn add nuxt-build-optimisations安装完毕去nuxt.config.js里面激活模块export default { buildModules: ['nuxt-bui...

44
0
nuxt 加快编译速度

开源主题-高仿掘金《JJ》

前言写这个主题花了一些时间,我的想法是希望有一个优秀的阅读体验,毕竟本人喜欢记笔记,分享一些平遇到的问题和解决方法。于是乎看中了掘金的样式,挺适合阅读的,加上个人审美确实不太行,就想仿一下样式。随着现在前端的发展,一些新的特性增加,如果还是保持在旧的思维上,我觉得限制了开发者的自我提升,所以,本主题采用了大量es6的js语法,css上采用scss编译,如果你有兴趣,可以一起参与开发。主题预览github地址《Typecho_Theme_JJ》

9
21
开源主题-高仿掘金《JJ》
木灵鱼儿 1 个月前 JavaScript

自己照着别人教程写的canvas操作类

预览图类源码/* * @Author: mulingyuer * @Date: 2021-06-21 11:29:12 * @LastEditTime: 2021-06-21 18:39:31 * @LastEditors: mulingyuer * @Description: canvas * @FilePath: \form-create\src\utils\canvas.js * 怎么可能会有bug!!! */ class Chart { constructor(options) { const defaultOptions = { el:...

0
0
自己照着别人教程写的canvas操作类