晓林love-优快云博客

HTTP协议本身是无状态的，所以需要一个标志来对用户身份进行验证1、cookie用户登录成功后，会在服务器存一个session，同时发送给客户端一个cookie，这个cookie里面有唯一标识该用户的sessionID数据需要客户端和服务器同时存储用户再进行请求操作时，需要带上cookie，在服务器进行验证cookie是有状态的2、token用户进行任何操作时，都需要带上一个tokentoken的存在形式有很多种，header/requestbody/url 都可以这个token只需要存在

2022-04-29 10:27:43 5893

原创 vue-router的几种模式

SPA页面需要的路由是URL改变但是不是真正的去后台请求，而是去加载替换组件，所以需要的路由形式，将组件映射到路由上动态路由：路径参数{ path: '/users/:id', component: User },相同的组件实例将被重复使用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。要对同一个组件中参数的变化做出响应的话，你可以简单地 watch $route 对象上的任意属性，在这个场景中，就是 $route.paramsb

2022-04-26 21:58:52 1148

原创 vscode配置eslint

在vscode编辑器当中使用vite框架，配置eslint：首先在vite项目中，安装eslint-plugin-vue依赖npm install --save-dev eslint eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue eslint-plugin-html prettier @babel/plugin-syntax-dynamic-import babel-eslint.eslintrc.js配置如下mod

2022-04-25 15:27:25 2528

转载服务器版的vscode——code-server

https://zhuanlan.zhihu.com/p/465819847

2022-04-08 16:02:38 395

转载 import和require区别

遵循规范–require 是 AMD规范引入方式–import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间–require是运行时调用，所以require理论上可以运用在代码的任何地方–import是编译时调用，所以必须放在文件开头本质–require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量–import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持ES

2022-03-11 17:36:18 89

原创 vue-router 3=＞4

1、new Router 变成 createRouterVue Router 不再是一个类，而是一组函数。现在你不用再写 new Router()，而是要调用 createRouter// 以前是// import Router from 'vue-router'import { createRouter } from 'vue-router'const router = createRouter({ // ...})2、新的 history 配置取代 modemode: ‘hist

2022-03-01 16:26:38 157

原创 uniapp-地图使用

h5配置 "h5" : { "sdkConfigs" : { "maps" : { "qqmap" : { "key" : "D5SBZ-HWGKR-VNIWI-WBMJI-X2PP5-RWBMU" } } } }https://lbs.qq.com/dev/console/application/mine

2022-03-01 09:35:39 859

原创前端性能优化

http缓存expries cache-control 强缓存etag last-modified 弱缓存cdn资源放在cdn上面http请求数减少雪碧图优化dom文件压缩js文件uglify css mini-opiminisizegzip文件 nginx开启懒加载按需加载路由懒加载ui组件按需加载动态组件（tab页签切换组件）图片懒加载src data-src 可视区域的src换成data-src 监听滚动条事件代理利用冒泡机制判断tar

2022-02-25 17:35:27 499

转载 vue动态组件

tab组件切换不好方式<template> <div class="hello"> <h3>使用v-if实现</h3> <ul> <li v-for="(item,index) in tabList" :key="index" style="cursor:pointer" @click="change(index)">{{item}}</li> </ul> &l

2022-02-25 16:17:02 87

转载 new做的四件事

https://blog.youkuaiyun.com/geek1231/article/details/120332364(1)创建一个新的对象(2)将构造函数的作用域赋给新的对象(因此this就指向了这个新对象) apply(3)执行构造函数中的代码(为这个新对象添加属性) proto(4)返回新对象(结合下边栗子一起看，效果更佳)function myNew(){//用new Object()的方法创建了一个obj对象var obj = new Object() //取出传入的构造函数，因为

2022-02-24 15:46:08 328

原创 vue-router路由钩子触发流程

导航被触发。在失活的组件里调用 beforeRouteLeave 守卫。调用全局的 beforeEach 守卫。在重用的组件里调用 beforeRouteUpdate 守卫(2.2+)。在路由配置里调用 beforeEnter。解析异步路由组件。在被激活的组件里调用 beforeRouteEnter。调用全局的 beforeResolve 守卫(2.5+)。导航被确认。调用全局的 afterEach 钩子。触发 DOM 更新。调用 beforeRouteEnter 守卫中传给 next

2022-02-23 14:23:23 612

原创排序-冒泡-快速-插入

冒泡function bubble(arr){for(var i=0,i<arr.length-1;i++){for(var j = 0;j<arr.length-1-i,j++){if(arr[j]>arr[j+1]){let temp = arr[j]arr[j] = arr[j+1]arr[j+1] = temp}}}return arr}快速（分治）插入

2022-02-21 16:06:41 221

转载 element的message为什么可以直接用this.$message

https://blog.youkuaiyun.com/m0_49159526/article/details/120774801https://cn.vuejs.org/v2/cookbook/adding-instance-properties.htmlvue.prototype可能会在很多组件里用到数据/实用工具，但是不想污染全局作用域。这种情况下，你可以通过在原型上定义它们使其在每个 Vue 的实例中可用。Vue.prototype.$appName = ‘My App’1.用 Vue.extend

2022-02-17 18:13:54 463

转载数组方法map()、filter()、some()、every()、 forEach()

map(callback)返回一个新的数组。为每个元素执行callback方法let arr = [1,2,3,4];let newArr = arr.map((item,index)=>{return item*2}); //callback要有returnconsole.log(newArr); // [2,4,6,8]filter(callback)返回符合callback函数的元素数组let arr = [1,2,3,4];let newArr = arr.filter((it

2022-02-16 10:36:15 139

原创 promise

promise简介promise是异步编程的一种解决方案，promise是一个对象，是通过监听状态去调用回调方法的一种方式promise有三种状态，pending，fullfiled，rejected，状态一旦发生改变，就不会再变了，new一个promise实例之后，会立即执行。promise是解决异步的问题，但他本身不能说是异步的promise本身有all，resolve，reject等方法promise原型上有then，catch的方法promise的构造函数接收一个参数，函数，这个函数参数

2022-02-16 10:14:27 493

转载 webpack

webpacksass->css图片-》压缩js-》es6-》es5 降级原材料编译编译处理webpack安装局部 -D webpack webpack-cli （4x） 0配置3x配置门槛比较高不推荐全局安装 -g 会在本地固定版本手上项目比较多 webpack版本不一样2020.10.8 5x 频繁更新npm install webpack@4 webpack-cli@3npx webpack (项目中找)webpack

2022-02-11 16:28:51 177

原创 display:none-opacity:0-visiblity:hidden区别

css

2022-02-10 18:01:09 251

原创实现bind

Function.prototype._bind = function(obj){ /*首先存一个this 即以后要调用bind的func*/ var fn = this; /*拿到参数，但是第一个参数是this的指向所以需要截取*/ /*因为arguments本身不是数组不能用slice 所以用call*/ var args = Array.prototype.slice.call(arguments,1) return function(){ var params =

2022-02-10 17:56:32 414

转载 Vue中使用装饰器的方法详解

装饰器是一种与类相关的语法糖,用来包装或者修改类或者类的方法的行为,其实装饰器就是设计模式中装饰者模式的一种实现方式,下面这篇文章主要给大家介绍了关于Vue中使用装饰器的相关资料,需要的朋友可以参考下前言相信各位在开发中一定遇到过二次弹框确认相关的需求。不管你使用的是UI框架的二次弹框组件,还是自己封装的弹框组件。都避免不了在多次使用时出现大量重复代码的问题。这些代码的积累导致项目的可读性差。项目的代码质量也变得很差。那么我们如何解决二次弹框代码重复的问题呢？使用装饰器什么是装饰器？Decorato

2022-02-10 17:05:53 1309

原创 webpack构建速度优化

优化Loader配置由于Loader对文件的转换操作很耗时，所以需要让尽可能少的文件被Loader处理。可以通过 test/include/exclude 三个配置项来命中Loader要应用规则的文件。module .exports = { module : { rules : [{ //如果项目源码中只有文件，就不要写成/\jsx?$/，以提升正则表达式的性能 test: /\.js$/, //babel -loader 支持缓存转换出的结果，.

2022-02-08 10:18:04 693

原创模仿urule

https://github.com/bigbigbo/rule-editor.gitdemo<template> <div> <UniteCondition class="ftms-condition" :rootCondition="rootCondition" :variables="variables" @changeData="changeData" > </UniteCondition>

2022-01-30 11:06:20 1347 1

原创可选链操作符?.

let arr = res && res.data && res.data.list是不是非常不美观，今天介绍的新语法就是为了解决这种问题的let arr = res?.data?.list是不是很简洁了。还有，要是想设置默认值怎么办以前我们是这么写的let arr = res && res.data || []现在可以这样let arr = res?.res?.data ?? []...

2022-01-30 10:19:28 5583

原创 vue 递归组件方法属性透传

UniteCondition组件中调用自己<UniteCondition v-bind="$attrs" v-on="$listeners" v-if="item.type != 'normal'" :rootCondition="item"></UniteCondition>v-bind 绑定属性v-on 绑定方法透传到最终调用组件的地方否则只有第一次使用该组件的地方能够触发方法之后递归调用的都触发不了方法透传也可用在子组件嵌套很多层的情况下希望将

2022-01-30 09:18:17 1515

原创列设置table组件（vue3）

table<script>import { ref, toRef, watchEffect, onMounted, toRefs } from 'vue';export default({ name:"GZTable", props:{ tableData:Array, columns:Array, isSelection:Boolean, isvisible:Boolean, }, emi

2022-01-29 17:35:31 1658

原创 echarts-大数据量图表展示

问题数据从后台传到前端，前端再渲染成图表。这个流程很简单易懂。问题在于，当数据量达到一定量时（为了方便，数据量用后台传过来的json数据的实际大小表示），比如50M大小数据，以网速5M/s来算，需要10s以上（毕竟后台可能需要处理一下数据才能发过来），渲染图表的时间随着数据量的增大而加长，50M数据需要15s以上才能渲染出来。而且渲染出来后，进行图表的缩放或者其它交互仍然会有明显的卡顿。（卡顿现象是否明显、渲染时间是否缩短或延长，有很大一部分取决于电脑硬件配置不同）————————————————在v

2022-01-29 14:31:40 3647

空空如也

空空如也