小琳同学-CSDN博客

原创根据公司的业务需求我是这样封装组件的

前言一个项目下来发现有很多看似相似但又有区别的功能，想想如果一个一个的去写这种相似又有区别的功能，就会显的乏味枯燥，而且更关键的是这样的代码使得项目更难的去维护。如何让项目焕然一新，并且方便以后需求迭代的时候更好的维护呢？那就动手封装组件吧，让那些相似的功能需求都统一管理统一配置。需求当我拿到需求的时候，我先看了element-ui的组件是否满足我业务上的需求（ps：如果在elemnt-ui组件的基础上去做改造也是ok的），但后来我发现element-ui的表格组件无法满足我这次的业务需求，通过改.

2020-10-27 11:05:25 481 1

原创实现多个大文件拖拽上传+大文件分片上传+断点续传+文件预览

前言之前看了掘友写了一个单文件分片上传和断点续传的文章，对此充满了兴趣，因此开始自研学习。经过一段时间的学习，自己动手写了一个小demo。这篇文章将记录自己coding遇见的问题和总结自己小demo的思路。技术关键词前端：@vue/cli-service+element-ui+axios后端：node.js+koacoding思路分析拖拽上传拖拽上传是利用HTML5新特性实现拖拽上传，详细用法可阅读MDN-drag利用dragover事件（当某物被拖动的对象在另一对象容器范围内拖动时触发此事

2020-08-07 09:22:06 1495

原创开箱即用：Vue和Express搭建的一个功能完善的前后端分离项目

前言对于已有前端开发经验的朋友来说，深入学习node.js并且掌握它是一个必要的过程；对于即将毕业的软件开发学生来说，创造拥有自己的开源小产品是对大学最好的总结。那么想和大家分享一个运用Vue框架写界面+Express框架写后端接口的这样一个开箱即用的前后端分离的项目，能更好的帮助大家更好学习，并且在项目开发中使用，减轻大家的工作负担。整理已久的文档和项目，还望大家手动点赞鼓励~~博客地址为：，汇总了作者的所有博客，欢迎关注。本项目 github 地址为：一、项目结构1.1、项目运行环境nod

2020-07-26 14:42:43 3432 3

原创深入剖析：Vue核心之MVVM原理其手动实现数据双向绑定

前言当被问到Vue是如何实现数据的双向绑定，大部分人的回答是：其内部是通过Object.definedProperty()的get和set方法实现的。其核心原理是通过这个API实现，但是还是有必要理解整个过程的实现和其运行原理。什么是MVVM模式MVVM模式是Model-View-ViewModel的简写，即模型-视图-视图模型。【模型】指的是数据层。【视图】指的是视图层所看到的页面。【视图模型】MVVM模式的核心，它是连接view和model的桥梁。数据层和视图层直接是不能直接通信的，那么模型（数

2020-07-14 14:39:16 672

原创 nodejs+express框架实现登录过滤器以及用户登入状态的保存

之前用express框架搭建一个后台管理应用，主要是学习node如何编写接口。今天带大家学习node如何实现过滤器，以及用户信息状态如何存储。先来了解中间件：cookie-parser模块与express-session模块。cookie-parser模块：这个是为了方便操作客户端中的cookie值，区别于session。npm i cookie-parser --saveapp.js文件引入中间件var cookieParser = require('cookie-parser')使用中间件

2020-06-24 17:26:30 1750

原创手把手教你关于vue项目后台管理程序前端如何配置权限问题

做后台管理程序关于安全性和权限问题是重中之重的，不同的角色对于不同的权限，不同权限对于不同的路由，同时侧边栏也是根据路由配置异步生成。一、登录用户进行登录，我们要做的就是对登入角色进行判断（根据具体的业务需要进行角色的划分）。二、权限验证当我们拿到当前用户登录的信息之后，我们需要根据信息来处理当前用户有哪一些权限（这一步是关键也是最容易死循环的操作）1、前期的准备工作我们需要编写一份映射表，关于这个项目所对应的动态路由映射表和静态路由映射表。比如：export const asyncMap=[

2020-05-13 17:11:43 1005

原创 this关键字你真的彻底搞懂了吗

前言前段时间自己忙着找工作，好久没分享记录自己的笔记了。面试过程和技术面试官交流，使得自己对js基础理解更加深刻透彻。发现每一次技术的交流都是一次学习打磨的过程，是个很赞的过程~为什么要学习this学习this可以减少多余变量的定义，并且可以通过this定义变量，那么变量的声明周期就会和该对象本身的生命周期一致。this到底是什么机制学习this的第一步是要清楚this既不指向函数自身也不指向函数的词法作用域，但是它总是指向一个对象，具体指向哪个对象要看被谁调用了。当函数被调用时，相当于活动记录

2020-08-31 07:09:55 255

原创 cookie-parser和express-session中间件使用

npm i cookie-parser --saveapp.js文件引入中间件var cookieParser = require('cookie-parser')使用中间件app.use(cookieParser('123456'));设置cookieres.cookies('key','value',option);option具体内容：domain: 域名。设置子域名（二级域名）是否可以访问cookie。例：domain:'.主域名'name=value：键值对，可以设置要保存

2020-07-23 17:59:23 497

原创 webpack项目：基于friendly-errors-webpack-plugin插件运行之自动生成各种优雅图标的插件

为什么会有run-success-icon插件之前看后端同事在运行Spring Boo项目时会自动生成一些优雅并且好玩的小图标，感觉好玩~~所以就想前端是否也能在项目运行成功之后生成如此优雅的小图案呢，于是有了run-success-icon这个插件。run-success-icon的使用配置run-success-icon插件与friend -error - webpack-plugin插件配套使用可实现当项目成功运行时，允许出现不同有趣的小图标。npm i run-success-ic

2020-07-16 22:47:34 1126

原创 node中你不知道的遍历树状结构的数据（深度先序遍历+广度先序遍历）

/*如何实现深度先序删除使用递归实现，递归考虑第一层和第二层的关系每递归一层，就会推入调用栈*///深度先序遍历let fs=require('fs');let path=require('path');// 1) 并联一起删// function preParallDeep(dir,callback){// fs.stat(dir,function(err,statObj){// if(statObj.isFile()){// fs.unlink(dir,callb

2020-07-10 13:43:46 1026

原创 react项目之手把手教你如何使用redux，react-redux，redux，redux-thunk，redux-persist,connected-react-router

之前阅读并手写了redux以及react-thunk库的核心功能，那么如何让它们在项目当中使用，这是非常重要的。今天，我们来学习如何在react项目中使用react-redux，redux，redux-thunk，redux-persist,connected-react-router。首先对上面所提到的库进行安装npm i react-redux redux redux-thunk redux-persist connected-react-router --save安装完成之后，在项目src目录

2020-06-21 21:51:11 698

原创手把手教你通过express框架搭建后台+vue框架搭建前台

最近这两天有点闲，通过自研学习了如何使用express框架搭建后台以及vue框架开发前端。express框架是用来搭建web服务，是nodejs的二次封装。vue就是前端框架。那么可以通过搭建express框架用来写接口，vue框架写页面用来调用接口，形成全栈的开发。1、搭建express过程使用 express的脚手架快速搭建：express-generator首先安装express 和express-generatornpm install -g express，npm install -g

2020-06-18 13:51:12 3194 4

原创 react-redux源码解析

react-redux是为react而生的，是为了在react项目中能够更方便的使用redux，所以有了react-redux这个库。context.js是跨级通信的对象，通过react.createContext创建import React from 'react';const ReduxContext = React.createContext(null);export default ReduxContext;Provider.js是一个组件是相当于提供商，提供redux库中store对

2020-05-31 21:46:09 386

原创 redux源码解析

redux导出一个对象，对象拥有createStore，bindActionCreators，combineReducers，applyMiddleware这几个核心的key。import createStore from './createStore.js';import bindActionCreators from './bindActionCreators.js';import combineReducers from './combineReducers.js';import applyM

2020-05-19 17:43:22 341

原创 table组件封装

<template> <div class="context"> <button @click="handler">按钮</button> <table class="table"> <thead>  <tr> <th>&l...

2020-03-14 17:12:23 380

原创实现axios的二次封装

import { baseURL} from './config.js';// import axios from 'axios';//每请求一次创建一个唯一的axiosclass AjaxFetch { constructor() { this.config = { timeout: 3000, withCredentials: true, responseTy...

2020-03-11 15:11:13 336

原创手写vuex核心功能解析源码

let Vue;// new Vuex.Store// $store.state.ageclass ModuleCollection{ // 格式化constructor(options){this.register([],options); // 注册模块将模块注册成树结构}register(path,rootModule){let module = { // 将模块格式化_...

2020-03-04 22:31:19 309

原创 Vue模仿饿了么封装侧边导航菜单

新建文件夹components，再建一个children文件夹,包含以下.vue文件children文件夹下的hl-Menu.vue，hl-Menu-item.vue，hl-subMenu.vue，reSub.vue//hl-Menu.vue<template> <ul> <slot></slot> </ul>&lt...

2020-03-03 09:06:08 826

原创《高性能JavaScript》笔记总结

这本书一共有十个章节1、加载和执行2、数据存取3、DOM编程4、算法和流程控制5、字符串和正则表达式6、快速响应用户界面7、Ajax8、编程实践9、构建并部署高性能JavaScript应用10、工具看完这本书的总结：一、加载和执行1、脚本是如何下载以及最佳位置？脚本是串行加载的，一个脚本下载完成执行完之后另外一个脚本才会再进行下载执行。有些高版本的浏览器已经支持脚本的并...

2020-02-23 16:32:18 185

原创如何使用element-ui二次封装ajax

Ajax应用最主要的特点是通过脚本操纵HTTP和Web服务器来传输数据，不会发生页面重载。可以仅向服务器发送并取回必须的数据，并在客户端通过JavaScript回应处理服务端的内容。优点：因浏览器和服务器之间交换数据减少了，回应速度更快，同时Web服务器的负荷也减小了。js封装ajax请求data参数需要和请求头Content-Type对应application/x-www-form-u...

2020-02-22 16:04:04 415

原创合并排序算法

利用递归实现合并排序算法缺点：递归算法可能会造成调用栈溢出优点：速度相对快，逻辑清晰 var arr=[1,4,2,5,8,5,6,10,9,7,3]; console.log(mergeSort(arr)) function merge(left,right){ var result=[]; while(left.length>0 && rig...

2020-02-21 21:02:36 494

转载在Vue中通过Vue.use注册全局组件的原理

首先看官方文档对Vue.use的使用说明Vue.use 会自动阻止多次注册相同插件，届时即使多次调用也只会注册一次该插件。这就十分类似于单例模式，但不是严格意义上的单例模式。单例模式强调一个类只能够实例化一个对象，类和对象的数量关系应该是1:N。但是通过单例模式创建的对象和它的类之间却是1:1的关系。这里之所以说Vue.use使用了单例模式的设计理念，是因为组件在Vue上只被允许注册一次。源...

2020-02-12 19:47:32 674

转载 Vue注册全局方法，全局组件，全局过滤器，全局自定义指令的方法

1、添加全局方法（1）使用Vue.prototype// 在main.js中写 Vue.prototype.getData = (params) => { ... }（2）使用install + Vue.prototype // 在你的全局函数文件fun.js中写 export default { install (Vue) { V...

2020-02-12 19:38:50 925

原创 js继承

//父类 function Person(name){ this.name=name; //属性 this.sum = function(){ //方法 alert (this.name) } } var person=new Person('llp'); ...

2020-02-10 20:08:20 165

原创 js懒加载和预加载的对比

什么是预加载什么是懒加载预加载：顾名思义就是提前加载，比如提前加载图片。当用户需要查看时，可直接从本地缓存中取。预加载的优点在于如果一张图片过大，那么请求加载图片一定会慢，页面会出现空白的现象，用户体验感就变差了，为了提高用户体验，先提前加载图片到本地缓存，当用户一打开页面时就会看到图片。实现方式：1、虚拟代理实现图片预加载关键在于new 一个image对象，当图片对象的onload事件...

2020-01-21 21:26:01 486

原创 vue项目tab切换echart图表切换宽度缩小和图表内容不正确解决

代码：布局：<TabButton :btnValue1="'总数'" :btnValue2="'明细'" @watchFlag="handler"></TabButton> <div class="it_content"> <div class="picture" id="work" ref="work" v-show="flag===false...

2020-01-19 14:03:07 1555

原创手动实现数组map，filter，reduce，将类数组转成数组方法

js原生提供的数组方法很多，今天来手动实现map，filter，reduce方法。// 手动实现map方法 [1,2],function(){} function map(arr,mapCallback){ if(!Array.isArray(arr) || !arr.length || typeof mapCallback!=='function'){ return [];...

2020-01-14 11:02:23 451

原创如何建设高性能网站--使用外部JavaScript和CSS、精简JavaScript。

JavaScript和CSS是应该包含在外部文件还是内联在页面中？通常使用外部文件更好。外部文件带来的收益——js和css文件有机会被浏览器缓存起来。HTML文档——至少是那些包含动态内容的HTML文档——通常不会被配置为可以进行缓存。当遇到这种情况，每次下载HTML文档都要下载内联样式和js。再者，既然浏览器缓存了js和css文件，那么就减少了HTTP请求。评估网站如何能做大最大性能，是要依...

2020-01-10 17:08:20 287

原创 js原型、原型对象、原型链、原型模式

原型模式是用于创建对象的一种模式，找到一个对象，然后通过克隆来创建一个一模一样的对象。那么，如果需要一个对象跟某个对象一模一样的对象，就可以使用原型模式来创建对象。那怎么理解原型呢？通俗的说：如果对象A是对象B克隆而来的，那么B对象就是A对象的原型。如何通过原型模式来创建对象的函数呢？代码如下：function inherit(obj){ if(obj === null) throw Ty...

2020-01-09 21:56:32 393

原创 Vue动态组件---component标签的运用

一、什么是动态组件动态组件表示组件的动态化，数据化。动态组件自身是不会被渲染的，框在组件模板里，模板本身也不会被渲染，而是模板根元素被渲染。二、运用需求**在做一个多功能，多可用，多兼容的大组件的时候，发现在这个组件内部，实现了太多的if、for逻辑，包括大量的html元素，虽说每段功能块都有批注，但是体积还是比较庞大，最近有些需求，需要将页面上的一大块筛选功能剥离开，形成单独的组件，统一数...

2020-01-08 10:31:48 1526 1

原创 js对象的深拷贝和浅拷贝

浅拷贝：只是复制指向某个对象的指针，而不复制对象本身新旧对象，它们还是共享同一内存。深拷贝：会另选创造一个一模一样的对象，新对象和原对象不共享内存，修改新对象不会改到原对象。也就是老死不相往来了。知道了深浅拷贝的含义，那就来总结如何实现深浅拷贝。let data={ name:'ddd', type:'es', impl:[ { e:1,a:2 }...

2020-01-07 15:00:48 414 2

原创如何建设高性能网站--使用内容发布网络

性能黄金时间：只有10%~20%的最终用户响应时间花在下载HTML文档上。其余的80% ~ 90%时间花在了下载页面中的所以组件的上。如果应用程序Web服务器离用户更近，则一个HTTP请求的响应时间将缩短；另一方面，如果组件web服务器离用户更近，则多个HTTP请求的响应时间将缩短。将Web服务器分散开来------内容发布网络：（CDN）是一组分布在多个不同地理位置的Web服务器，用于更加有...

2020-01-06 22:02:59 203

原创如何建设高性能网站--将样式表放在顶部、将脚本放在底部

关心性能的前端开发人员都希望页面能逐步地加载，也就是说：希望浏览器能够尽快显示内容。那么如何实现浏览器逐步的呈现内容给用户值得思考的问题。白屏一词是经常听别人吐槽网站的词，那怎么写代码会出现白屏的现象呢？将CSS放在底部会出现白屏的现象，当将CSS放在底部，那么浏览器要等将CSS先全部下载完成之后再进行呈现，这段等待的时间就出现了白屏。将样式表放在底部会导致白屏问题的情形：1、在新窗口中打...

2020-01-06 21:50:57 336

原创如何建设高性能网站--http篇/缓存组件

如果浏览器在其缓存中保留了组件的一个副本，但并不确定它是否仍然有效，就会生成一个get请求。如果确认缓存的副本是有效的，那么就会使用它，这就会得到更小的响应和更快的用户体验。那么浏览器是如何确定缓存副本的有效性来自其最后的修改时间。基于响应中的Last-Modified头，浏览器就可知道组件的最后修改时间。浏览器会使用If-Modified-Since头将最后修改的时间发送给服务器。如上的一种...

2019-12-31 10:09:09 177

原创 webpack4搭建vue项目引入element-ui库，引入样式报错问题解决。

引入：import ElementUI from “element-ui”;import “element-ui/lib/theme-chalk/index.css”;Vue.use(ElementUI);报错信息client:159 ./node_modules/element-ui/lib/theme-chalk/index.css 1:0Module parse failed: ...

2019-12-30 16:21:53 1681 1

原创如何建设高性能网站--http篇/压缩组件

http是浏览器和服务器通过Internet进行相互通信的协议，所以想改善前端的性能问题是有必要理解部分HTTP对性能的影响。HTTP是一种客户端/服务器协议，由请求和响应构成。浏览器向一个特定的URL发送HTTP请求，URL对应的宿主服务器发回HTTP响应。请求的类型有GET,POST,HEAD,PUT,DELETE,OPTIONS和TRACE。当然在我们开发过程当中，最常遇到的就是GET,P...

2019-12-29 22:23:29 235 1

原创 javaScript——组合模式

2019-12-25 17:44:18 140

原创 JavaScript——中介者模式

<script> // 未使用中介者模式=> 2 个玩家 function Player(name){ this.name=name; this.enemy=null; //敌人 } // 玩...

2019-12-25 17:38:50 131

原创 JavaScript设计模式——职责链模式

// 使多个对象都有机会处理请求,从而避免请求的发送者和接受者直接的耦合关系.将对象连成一条链,并沿着这条链传递请求,直到有个对象处理它为止. var order500=function(orderType,pay,stock){ if(orderType===1 && pay===true){ console.log('500元定金，得到100优惠卷'); ...

2019-12-25 17:37:58 155

原创 javaScript设计模式——模板方法模式

var Beverage=function(param){ var boilWater=function(){ console.log('把水煮沸') }; var brew=param.brew||function(){ throw new Error('必须传递brew方法') }; var pourIncup =param.pourIncup |...

2019-12-25 17:37:14 119

空空如也

空空如也