- 博客(116)
- 资源 (3)
- 收藏
- 关注
RSS订阅
原创 这次彻彻底底弄清vue的双向绑定和链路追踪
前言：从vue问世到现在，所有的vue开发者应该对vue的底层原理都模模糊糊的有一些了解，Object.defineProperty getter/setter,发布订阅之类的概念都能说出一二来，可问题是大部分的coder就真的只是模模糊糊的了解一二，练习vue两年半，到头来还是只能说出个双向绑定来。众所周知vue是一个非常好用的mvvm框架，我们所关注的双向绑定发生在view和viewMo...
2019-09-20 10:11:24
1039
原创 梳理所有前端异步解决方案
众所周知js是单线程，从头跑到尾然后不停的事件循环，但是浏览器是多线程的，所有前端所有的异步可以归纳为，js的事件循环在根据标准不停的前后执行不同异步线程的回调其实现在js对于异步的所有解决方案不管是async 还是 promise 还是监听什么的归根结底都是回调触发，而我们至今为异步所作的所有努力不过是让异步回调写的更加像同步一些目前前端对异步的处理大致经过这三个阶段1 纵向无限回调，比如...
2019-05-27 19:06:03
261
原创 sequlize 关联类型 hasMany 删除destroy不生效原因
sequlize 主表子表关联只删除了主表数据未删除子表数据我看stackoverflow 上好多是说加上{ onDelete: 'cascade', hooks:true }其实别人是叫你在migration上加也就是数据库上加外键关联，如果傻傻定义在model上面是不生效的没有用migration的可以像我这样直接数据库上加上外键关联即可...
2021-12-09 20:00:26
577
原创 webpack 编写插件兼容不同的webpack版本
webpack 版本虽然更新到了5+，但官网很多内容都是滞后的比如插件编写，官网推荐的还是webpack3的写法 compiler.plugin('done', function() { console.log('Hello World!'); });但到webpack5基本是这样的 compiler.hooks.done.tap("xxxName:" ,()=>{ console.log('Hello World!'); });所以需要我们在编写webpack插件
2021-11-08 14:12:41
343
原创 chrome可输入div contenteditable 回车自动生成div替换为＜br/＞
在chrome黏贴进富文本的内容会自动生成span包裹，如图监听回车事情并重置浏览器行为 dom.addEventListener('keypress', (e) => { if (e.code === 'Enter') { document.execCommand('insertHTML', false, '<br/>‌'); e.preventDefault() } })注意：为了保.
2021-10-14 22:08:07
2074
原创 chrome可输入div contenteditable 黏贴自动生成span解决
在chrome黏贴进富文本的内容会自动生成span包裹，如图如果想直接生成文本节点可以在节点上监听paste事情并重置浏览器行为 dom.addEventListener('paste', function (event) { const text = event.clipboardData.getData('Text'); document.execCommand("insertText", false, text); event.preventDef.
2021-10-14 21:55:32
645
原创 手把手教你怎样在vue3中使用redux
前言现在的web应用基本上都走上了数据驱动的道路，而数据状态的管理则理所当然成为了项目开发的核心，所以理论上只要统一状态层，view渲染可以随意更换框架和模式。而我们在做项目的时候大部分都是vue用vuex。react用redux。以至于很多同学都以为所有的状态管理容器是和页面渲染框架一一绑定的，所以突然想实验一下用edux做状态管理，而页面渲染交给vue是什么效果。思路我们知道redux的state 只是一个普通的js对象，是无法感知视图的。redux的整套流程和vue的渲染驱动机制其实是相互独
2021-08-26 15:36:05
1262
原创 node+multiparty接受formdata上传文件保存在硬盘
前言 之前想起一个专门接受文件保存到本地的node服务，查遍了全网大部分都是浅尝辄止，点到为止。胡乱贴两段代码完事。经过一段时间的摸索写了一个完整可用的服务，希望能为有相关需要的开发提供一点思路。效果我们前端传输文件一般采用formdata的格式，所以服务端的核心在于怎样去解析formdata格式的数据，目前比较流行的解析插件主要有multiparty与 busboy ，但我看了下大部分的资料都是围绕multiparty的，所以我这边也是采用multiparty进行数据解析。multipart
2021-07-20 16:22:49
915
1
原创 eggjs实现图片上传显示
效果参考框架内置了 Multipart 插件，用于解析formData数据egg文件上传服务端const fs = require('fs');const path = require('path');const sendToWormhole = require('stream-wormhole');... async uploadImg() { // const form = new multiparty.Form(); const { ctx } = this;
2021-07-14 16:34:49
574
原创 最全前端设置跨域方法
首先想实现跨域先弄懂什么是跨域所谓的跨域是建立在浏览器同源策越下对异源资源进行请求的行为同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。目前抛开只能跨域get请求的jsonp之外流行的两种跨域方式分别是1 corsCORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 Java
2021-07-14 14:33:24
1688
原创 webpack-dev-middleware单页面路由问题
我们使用webpack配置的开发服务器其实本质是对express的封装，而单页面应用一般只有开始的时候请求页面资源之后路由的变化并不需要再向服务器请求页面资源只需要客户端内部匹配即可，那么所有的单页面服务器都需要在页面进行附带路由请求的时候进行拦截处理。webpack-dev-server由于已经完成了封装 所以只需要进行配置即可 devServer: { ... historyApiFallback: true , ... },webpack-dev-m
2021-06-30 17:06:34
257
原创 从0开始搭建一个简单的webpack react项目
1 初始化一个空项目npm init -y2 install webpacknpm install --save-dev webpack3 新建webpack配置文件在根目录下新建build文件夹，分别新建webpack.common.js 通用配置webpack.dev.js 开发配置webpack.prod.js 线上配置4 html模板npm install --save-dev html-webpack-plugin在根目录下新建index.html作为插件html-w
2021-06-28 17:31:50
150
原创 js 回文链表
方法1 翻转后半部分再依次比较var isPalindrome = function(head) { let fast = head, slow = head, reverse = function(node){ let pre = null while(node){ let temp = node.next node.next = pre
2021-06-18 14:59:22
160
原创 206. 反转链表
方法1 栈先入后出 入栈保存 出栈重构链表var reverseList = function(head) { let stark = [] while(head){ stark.push(head) head = head.next } if(!stark.length)return null let temp = stark.pop() let pre = new ListNode(null,temp) whi
2021-06-17 17:30:46
66
原创 删除链表的倒数第N个节点
方法1 遍历长度1 先单独遍历一遍链表获取长度2 算出从头开始第几个节点需要删除3 删除节点var removeNthFromEnd = function(head, n) { let len = 0 // pre始终保持着对head的引用 let pre = new ListNode(null,head) // cur用来改变链表顺序达到删除的目的 let cur = pre // 遍历长度，过后head指向null，已经不能再用了 whil
2021-06-17 13:53:45
61
原创 计算机网络第七版笔记
第一章 概述网络：多个计算机主机连接在一起互连网：多个网络相互连接在一起互联网：使用TCP/IP协议作为协议族的特定互连网ISP：互联网服务提供商计算机端系统间通讯方式：1 c-s（客户端服务端）2 p2p（对等方式）存储转发的分组策略：动态（断续）传输宽带，对通讯线路逐段占用带宽：信号具有的频带宽度，计算机网络中代表 单位时间内某信道能通过的最高数据率吞吐量：单位时间内某信道实际数据量OSI（开放系统互联参考模型）：应用层：应用进程间的通信传输层：为两台主机之间的进程提供传输服务，
2021-06-10 09:13:18
241
3
原创 最长回文子串 js
动态规划思路: 如果字符串首尾字符相同且去除首尾的子串也为回文串 那么 该字符串必定为回文串。那么首先 所有长度为1的 单个字符都为回文。然后从长度为2开始依次遍历每个长度下的子串 ，并记录该子串是否为回文。由于长度是从短到长，也就是遍历到的字符串其去除首尾的子串必定已经得到判断。所以只需要判断该串的首尾字符是否相等以及其子串是否为回文即可判断该串是否为回文串。如果是回文串记录其长度即可代码var longestPalindrome = function (s) { if (s.le
2021-05-26 16:52:39
407
原创 react-router Cannot read property ‘location‘ of undefined
import { Route, Router } from 'react-router-dom'改为import { Route, BrowserRouter as Router } from 'react-router-dom'
2021-04-06 15:13:03
1115
原创 vue3 为什么要使用composition函数式编程
vue3除去一堆零敲碎打的优化更新之后最让我觉得眼前一亮的就是composition组合式组件以及其对应的函数式写法了。首先，我们先看下composition组件的用法。其实如果从光从写法上来看和option配置型写法区别不大只不过是换成了函数式，切需要在新的hook setup() 中注册返回一下具体写法export default { setup() { // 相当于data,需要用ref生成reactive对象，对其value值赋值触发依赖收集访问 const count
2021-03-29 16:26:43
904
1
原创 重置vuex所有state的状态
效果思路主要是在store首次生成state后深拷贝出一份备份，然后在reset方法中将各个属性还原回去，注意最重要的是不要破坏原来数据的结构 我之前还看到有人用delete，数据属性都没了肯定是会报错的步骤1准备一个深拷贝方法 // 定义一个深拷贝函数 接收目标target参数 deepClone(target) { // 定义一个变量 let result // 如果当前需要深拷贝的是一个对象的话 if (typeof target === 'object
2020-11-09 12:09:23
1895
2
原创 js vue实现6位验证码输入框效果
说明 因业务需求需要有个6框连续输入的组件，这边是直接画了6个输入框，然后通过一些事件控制输入框的输入顺序，以及一些特殊处理。效果组件源码<template> <div class="row-center captcha_input_wrapper"> <input v-for="(item,index) in captchas" :key="index" v-model="item.num" :id="'c
2020-08-11 18:39:13
2689
5
原创 Vue中使用Element 以el-menu导航菜单形式展示Tree树形结构
目的项目分为全局路由如登录页面，404页面之类的和由侧边栏menu控制跳转的子路由页面主要是业务页面。页面子页面放入views文件夹下，将自动读入注册成route，配置文件主要用于生成树形menu侧边栏。建议配合项目结构进行阅读效果更佳效果项目结构子页面配置文件将根据以下配置文件生成树形menu导航栏 export default [ { url: "/page1", meta: { title: '页面1', requiresAuth: false
2020-07-17 09:35:53
5529
原创 vue带连线的树形组件（升级版）
之前开源过一个简单的https://blog.csdn.net/weixin_39168678/article/details/102457894#comments树形连线组件当时没做业务剥离而且也不能无限展开，现在优化了一下。效果点击查询效果，以及相关配置说明图标下载地址css下载地址源码主要是递归lineItem，稍微有点基础的应该一看就明白，不明白的按照项目路径copy过去就可以用了lineItem<template> <div class="tree_item
2020-07-14 10:09:59
3637
8
原创 React中使用Ant Design 以Menu导航菜单形式展示Tree树形结构
目的项目分为全局路由如登录页面，404页面之类的和由侧边栏menu控制跳转的子路由页面主要是业务页面。页面子页面放入views文件夹下，将自动读入注册成route，配置文件主要用于生成树形menu侧边栏。建议配合项目结构进行阅读效果更佳效果项目结构子页面配置文件将根据以下配置文件生成树形menu导航栏export default [ { name: '测试页面', path: '/test', meta: { a
2020-07-14 09:29:16
2527
原创 react踩坑记录
1Multiple configuration files found. Please remove one:如果你在根目录下自己建了个babel的配置文件 .babelrc，然后又好死不死的npm run eject把配置打开package.json里面就又了babel的配置了，删掉任意一处配置即可2 react useHistory hook 返回 undefineduseHistory won’t work in the component where you have your Rou
2020-07-13 13:56:36
810
1
原创 Property or method toJSON is not defined
// var vConsole = new VConsole();
2020-06-03 18:31:16
1241
1
原创 vue指令实现上下滚动翻页
效果使用直接将这段指令声明代码拷贝到需要使用该功能的vue实例上，当然你也可以全局注册 directives: { bottomScroll: { inserted: function(el, binding) { let [clientHeight, scrollHeight] = [el.clientHeight, el.scrollHeight]; el.addEventListener("scroll", e => {
2020-06-03 18:24:09
1434
原创 LeetCode-对称二叉树js解法
方法1把其中一个子树翻转，然后对比两个子树是否相同var isSymmetric = function(root) { let invert = function(treeNode){ if(!treeNode)return null let node = treeNode.left treeNode.left = invert(treeNode.right) treeNod...
2020-04-21 16:17:51
170
原创 vue树形选择器（树形下拉框）
开局一张图，内容全靠编基础功能附加选择项前言 因为项目需要一个带二层展开的树形选择器，用elment的select和tree组件组合起来虽然可以用但是改样式和添加其他功能太过麻烦，所以就仿照element的select样式自己写了一个类似的组件，其实主要功能很简单，主要是要模拟一些element的一些细节比较费时间，但好在是足够灵活，这样就可以想怎么改样式改功能都可以直接改。使用...
2019-10-23 19:42:51
8614
4
原创 clearTimeout无效
如图所示clearTimeout接受id作为参数，所以检查一下是否传入的不是id因为默认情况下setTimeout方法是会返回id但有时候会返回一个setTimeout对象比如使用vsCode 开发的同学在使用setTimeout时会自动引入timer对象，此时setTimeout就会返回Timeout对象，此时只需要将对应的id传入即可或者直接将引用注掉...
2019-10-22 15:40:10
7296
原创 vue带连线的树形组件
前言：这是一个基础版的带连接线的树形展开组件,因为找了下无论是element 还是ant 亦或者是其他的库都没用找到类似的组件所以决定自己写一个，源码没有写注释，有基础的同学差不多就可以一目了然了，看着头疼的同学直接拷进项目用即可，我已经过了挨行解释的年纪了，因为业务只要求三层所以只写死了三层，要无限层以第二层为基础中间层扩展即可，我把源码贴出来，样式颜色图标等等直接上源码改即可效果组件...
2019-10-09 11:38:38
5336
9
原创 你不知道的javascript笔记整理+个人理解
1 js作用域：存储和访问变量的规则2 左查询：编译器寻找出现在等号左侧的变量,目的是对变量进行赋值3 右查询：所有的非左查询，目的是寻找变量的值左查询在所有作用域都无法找到该变量的情况下将在非严格模式下声明这个变量，右查询则会报refernceError4闭包：在函数的词法作用域之外对函数内部作用域的引用，当函数的作用域被当作参数传递到另一个非当前作用域并在当前词法作用域之外执时就产生了...
2019-09-03 09:33:57
183
原创 echarts+vue中国地图,点击进入省级地图
先上效果图再说思路第一步： 生成中国地图第二步： 定义点击事件根据反参生成省级地图所需要的参数第三步： 将省级地图所需要的参数传入渲染方法重新渲染最后说步骤准备 1 npm echarts 2下载各省地图json 传送门// 引用初始化所需的中国地图import echarts from "echarts";import china from 'echarts/map/j...
2019-07-25 11:44:30
10828
15
原创 webpack将文件打成压缩包
英文好的直接看文档https://www.npmjs.com/package/filemanager-webpack-plugin引包npm install filemanager-webpack-plugin --save-dev修改配置文件 ./build/webpack.dev.conf.js// 引包const FileManagerPlugin = require('file...
2019-06-19 10:43:07
1286
原创 快速上手indexedDb进行业务开发
这篇文章不是对indexedDb进行详细介绍，只是我在上手使用中发现完整介绍怎么使用indexedDB的资料实在太少，大部分就是为了混个阅读量简单介绍一下，所以整理一些我在使用过程中的经验方便大家在业务压力下快速上手传送门：https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_APIhttps://dexie.org/docs/...
2019-05-30 14:20:01
405
原创 axios使用protobuf进行通讯
https://github.com/protocolbuffers/protobufhttps://github.com/dcodeIO/protobuf.js#pbts-for-typescriptProtocol Buffers 是一种轻便高效的结构化数据存储格式，可以用于结构化数据串行化，或者说序列化。它很适合做数据存储或 RPC 数据交换格式。可用于通讯协议、数据存储等领域的语言无关...
2019-04-04 19:39:17
2156
1
原创 vue element table 表格列进行再排序
示例展示http://www.oujin.fun/webPage/dragTable/index.html#/用法https://github.com/oujin-nb/column_element_dragtable源码<template> <div> <el-table v-on="$listeners" v-bi...
2019-02-27 14:08:23
9055
bcprov-jdk14-160.jar
2018-08-31
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人