wennianzhu的博客

原创 hash和history路由的区别

eg：当我们把 history 项目部署到服务器中后,此时我们在浏览器输入一个网址(比如是 www.test.com ), 此时会经过 dns 解析，拿到 ip 地址后根据 ip 地址向该服务器发起请求,服务器接受到请求后,然后返回相应的结果(html,css,js)。只是当它们执行修改时，虽然改变了当前的 URL，但浏览器不会立即向后端发送请求。生产环境下，如果在当前的页面刷新一下，此时会重新发起请求，如果后端配置的 nginx 没有匹配到当前url，就会出现404的页面。

原创 闭包回顾1

在上方代码中我们定义了一个外部函数outer(),在外部函数内部返回了一个函数(内部函数),随后在外界中将外部函数赋给了func,这个func就是内部函数，然后执行func(),打印出来了相应的结果，在这里，我们使用了外部函数内定义的属性name和内部函数,所以name和内部函数不会被js回收机制所处理，但是属性age我们并没有使用，所以age被js垃圾回收机制所回收！防抖就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。节流会稀释函数的执行频率。

原创 Promise回顾

【代码】Promise回顾。

转载 Express框架复盘

① express.static快速托管静态资源的内置中间件，例如：HTML文件、图片、CSS样式等；③ express.urlencoded解析URL-encoded格式的请求体数据。② 调用express.Router()函数创建路由对象；② express.json解析JSON格式的请求体数据；④ 使用module.exports向外共享路由对象；⑤ 使用app.use()函数注册路由模块。① 创建路由模块对应的.js文件；③ 向路由对象上挂载具体的路由；② 请求的URL地址；

转载 Express入门

express与node的内置模块http相似，是专门用来创建web服务器的；express就是对http内置模块的封装；express其实就是npm上的一个第三方包，这个包提供了快速创建web服务器的便捷方法。

转载 Node.js复盘（3）

外界用require()方法导入自定义模块时，得到的就是module.exports所指向的对象。在自定义模块中，可以使用module.exports对象，将模块内的成员共享出去，供外界使用。main属性是包的入口文件，我们使用require()时，内部原理从这里引入包。使用require()方法加载其它模块时，会执行被加载模块中的代码。（2）自定义模块：用户创建的每个.js文件，都是自定义模块；（3）第三方模块：由第三方开发出来的模块，使用前需要先下载。在每个.js自定义模块中都有一个module对象。

转载 Node.js复盘（2）

（3）为服务器实例绑定request事件，使用server.on()监听客户端的请求；（2）使用http.createServer()创建web服务器实例；（4）server.listen()启动服务器。（1）导入http模块；

转载 Node.js复盘（1）

BOM和浏览器关系密切。DOM和HTML文档有关。网页是由服务器发送给客户端浏览器的，无论用什么浏览器，接收到的HTML都是一样的，所以DOM和浏览器无关，它关注的是网页本身的内容。（1）BOM（Browser Object Model）浏览器对象模型。（2）DOM（Document Object Model）文档对象模型。

转载 Vue中使用Vuex

【代码】Vue中使用Vuex。

转载 在Vue中使用Axios

axios框架全称为ajax-I/O-system；基于promise用于浏览器和node.js的http客户端；

转载 Vite基础

Vite是一种新型前端构建工具，能够显著提升前端开发体验。它主要由两部分组成：（1）一个开发服务器，它基于原生ES模块提供了丰富的内建功能，如模块热更新；（2）一套构建指令，它使用rollup打包你的代码，并且它是预配置的，可输出用于生产环境的高度优化过的静态资源。在之前，浏览器中没有模块化的设计，我们需要把所有源代码编译到一个js文件中提供给浏览器使用，所以在开发中我们运行启动命令的时候，webpack需要从入口文件去索引整个项目的文件，编译成一个或多个单独的js文件。Vite所倡导的。

原创 重看Vue文档第四天（组合式API）

组合式API如果能够将同一个逻辑关注点相关代码收集在一起会更好，而这正是组合式API使我们能够做到的；新的setup选项在组件被创建之前执行，一旦props被解析完成，它就将被作为组合式API的入口；setup的调用发生在dataproperty、computedproperty或methods被解析之前，所以它们无法在setup中被获取；在js中，Number或String等基本类型是通过值而非引用传递的；ref为我们的值创建了一个响应式引用；computed输出的是一个只读的响应式引用；

原创 重看Vue文档第三天（过渡&动画）

过渡&动画概述在进入/离开的过渡中，会有6个class切换：class名描述时机v-enter-from定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。v-enter-active定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。v-enter-to定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时v-ent

原创 重看Vue文档第二天（深入组件总结）

组件注册全局注册往往是不够理想的，如果你使用像webpack的构建系统，全局注册所有的组件意味着即便你已经不再使用其中一个组件了，它仍然会被包含在最终的构建结果中。Props你可以以对象形式列出prop，这些property的名称和值分别是prop各自的名称和类型；即便传入的数字、布尔值、数组、对象是静态的情况下，我们仍需要通过v-bind来告诉Vue这是一个js表达式而不是一个字符串；所有的prop都使得其父子prop之间形成了一个单向下行绑定；父级prop的更新会向下流动到子组件中，但

原创 重看Vue文档第一天（基础部分总结）

组件化应用构建几乎任意类型的应用界面都可以抽象为一个组件树；子单元通过prop接口与父单元进行了良好的解耦；每个Vue应用都是通过用createApp函数创建一个新的应用实例开始的；传递给createApp的选项用于配置根组件，当我们挂载应用时，该组件被用作渲染的起点；const RootComponent = { /*选项*/}const app = Vue.createApp(RootComponent)const vm = app.mount('#app')vm是ViewM

转载 【JavaScript replace函数】当replace函数的第二个参数为函数时

在学习项目构建工具时发现replace函数的第二个参数时常会为一个函数，因此想要做一下总结。首先，ECMAScript v3规定，replace()方法的参数replacement可以是函数而不是字符串；用法为replace(regexp/substr,函数)；此函数参数的个数需要根据捕获组的个数来定；content.replace(regexp/substr,function(matchStr,groups,index,sourceStr){ console.log("xxxxxxx".

转载 CSS选择器：伪类

伪类同一个标签，根据其不同的状态，展现不同的样式。有静态伪类和动态伪类之分（1）静态伪类：只能用于超链接的样式:link 超链接被点击之前:visited 超链接被访问过之后注：以上两种形式，只能用于超链接（2）动态伪类：针对所有标签都适用:hover “悬停”：鼠标放置于标签上时:active “激活”：鼠标点击标签，但不松手时:focus 获得焦点时:first-child伪类:first-child 伪类与指定的元素匹配：该元素是另一个元素的第一个子元素

转载 Vue2中Class与Style绑定

项目中遇到给v-bind:class传递一个数组，就来巩固一下Vue2中Class与Style的绑定对象语法数组语法1.对象语法可以传给v-bind:class 一个对象，以动态地切换 class：<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>data: { isActive: true, hasError: false}结果

原创 【前端 正则】

温习一下前端正则表达式的基础知识首先，正则表达式修饰符有：修饰符描述i执行对大小写不敏感的匹配g执行全局匹配m执行多行匹配其次，正则表达式模式有：表达式描述[abc]查找方括号之间的任何字符[0-9]查找任何从0至9的数字元字符描述\d查找数字\s查找空白字符\b匹配单词边界量词描述n+匹配任何包含至少一个 n 的字符串。n*匹配任何包含零个或多个

转载 moment.js 基础日期计算，加减、相隔日期

1.当前时间加一天moment().add(1,'days')2.当前时间减一天moment().subtract(1,'days')3.获取两个日期时间相隔多少天moment('2022-02-06').diff(moment('2022-01-31'), 'days')类型列表years（y）：年quarters（Q）：季度months（M）：月weeks（w）：周days（d）：日hours（h）：时minutes（m）：分seconds（s）：秒milliseco

原创 【前端路由】route和router的区别

route & router首先，route是路由信息对象，包括path、params、hash、query、fullPath、matched、name等路由信息参数，如下图所示。我在项目中这样去使用：import { onMounted } from 'vue'import { useRoute } from 'vue-router'const route = useRoute()onMounted(()=>{ if(route.query.pingId){ edit

原创 nvm踩坑记录

首先，因为做不同项目，node12和node10需要灵活切换，所以用nvm来管理node版本1.首先使用nvm1.1.7版本，安装node10.24.0时无法成功安装，尝试解决，采用将node10.24.0的安装包直接拷进nvm文件夹目录下，然后再使用nvm ls查看当前可使用node版本，就会出现移过来的10.24.0版本，直接使用nvm use 10.24.0即可解决。（但后期全局下载yarn和nrm很不顺利，下载yarn时需要手动配置环境变量才能成功，nrm到现在都还没有安装成功）2.另外，还可使

转载 设计模式-组合模式（前端）

组合模式概念1.生成树形结构，表示“整体-部分”关系2.让整体和部分都具有一致的操作方式演示1.JS经典应用中，未找到这么复杂的数据类型2.虚拟DOM中的vnode是这种形式，但数据类型简单

转载 2021-11-04

vue中的slot插槽太久没有写过博客了，今天想总结一下插槽的内容（因为在项目中有用到slot做table功能的扩展）。插槽的分类vue中的slot主要分为三种，分别是：默认插槽；具名插槽；作用域插槽；默认插槽的使用遇到父子组件传值的情况时，除了通过props和$emit之外，还可以采用slot的方式例如子组件的代码为<slot></slot>父组件中代码为<children> <p>msg</p></ch

原创 Vuex--数据共享--再理解

首先，使用Vuex的必要性如果想要在子组件中使用祖先组件中的数据，那么就必须一层一层的传递（非常麻烦）兄弟组件之间不能直接传递数据，如果兄弟组件之间想要传递数据，那么就必须借助父组件或者一个中间件（非常麻烦）其次，什么是Vuex呢Vuex是Vue配套的公共数据管理系统，我们可以将共享的数据保存到Vuex中方便整个程序中的任何组件都可以获取和修改Vuex中保存的公共数据使用Vuex的步骤导入Vuex（注意：在导入Vuex之前必须先导入Vue）创建Vuex对象const store =

原创 事件捕获/事件冒泡（望远镜第13章好好看一看）

首先，如果一个dom元素中，既有冒泡（目标元素 -> 父元素 -> body -> html -> document -> window），又有捕获，W3C规定了任何发生在W3C事件模型中的事件，首先是进入捕获阶段，直接达到目标元素，再进入冒泡阶段。回顾一下target.addEventListener(event,function,useCapture)event（必须）指定事件名（注意不要使用”on”前缀，例如使用”click”而不是使用”onclick”）func.

原创 重学数据库-----mysql

关系型数据库（mysql是关系型数据库）以行和列的形式存储数据，以便于用户理解。这一系列的行和列被称为表，一组表组成了数据库。关系：可以理解为一张二维表，每个关系都具有一个关系名，就是通常说的表名。元组：可以理解为二维表中的一行，在数据库中经常被称为记录。属性：可以理解为二维表中的一列，在数据库中经常被称为字段。域：属性的取值范围，也就是数据库中某一列的取值限制。关键字：一组可以唯一标识元组的属性。数据库中常称为主键，由一个或多个列组成。关系模式：指对关系的描述，其格式为：关系名（属性1，属

原创 javascript知识巩固------宏任务与微任务的执行顺序2.0

再来一段代码，判断执行顺序let promise = new Promise(resolve => { setTimeout(() => { console.log('setTimeout') resolve() },0) console.log('promise')}).then(value => console.log('成功'))console.log('CUBA')

原创 javascript知识巩固------宏任务和微任务的执行顺序

给一段代码 然后判断执行顺序setTimeout(() => { console.log('setTimeout');},0);new Promise(resolve => { resolve(); console.log('promise');}).then(value => console.log('成功'));console.log('CUBA');执行结果为首先是同步任务，然后微任务队列里的任务，之后才是宏任务。...

原创 web安全再总结-------XSS

原创 Vue知识巩固------v-if和v-show的作用和区别

v-if是“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。是惰性的：如果在初始渲染时条件为假，则什么也不做一直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。（相当于做了display:none）总结一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show比较好；如果在运行时条件不太可能改变，则使用v-

原创 原生JavaScript实现call、apply

手写callFunction.prototype.newCall=function(obj){ let obj=obj||window obj.fn=this let newArguments=[] for(let i=1;i<arguments.length;i++){ newArguments.push('arguments['+i+']') } let result=eval('obj.fn('+newArguments+')') delete obj.fn return

原创 VUE性能优化（害太多了 就大体总结一哈子）

编码优化：（1）不要将所有数据都放在data中（因为data中的数据都会增加getter和setter，会收集对应的watcher）；（2）SPA页面采用keep-alive缓存组件；（3）数据持久化问题（防抖，节流）；（4）v-for中key保证唯一性并且如果v-for时给每项元素绑定事件需要用事件代理。加载性能优化：（1）第三方模块按需导入；（2）图片懒加载（lazyload unload事件做预加载）；（3）滚动到可视区域动态加载（默认只渲染三屏 当前看到的 上一页 下一页 别的用空.

原创 javascript知识巩固------从输入url到渲染出页面的整个过程

加载资源的形式（1）HTML代码（2）媒体文件，如图片、视频等（3）js css加载资源的过程（1）DNS解析：域名 -> IP地址（2）浏览器根据IP地址向服务器发起http请求（3）服务器处理http请求并返回给浏览器渲染页面的过程（1）根据HTML代码生成DOM Tree（2）根据CSS代码生成CSSOM（3）将DOM Tree和CSSOM整合形成Render Tree（4）根据Render Tree渲染页面（5）遇到<script>则暂停渲染，优先加载并执

原创 内容分发网络（Content Delivery Network, CDN）小结

CDN（内容分发网络 Content Delivery Network）解决网络拥塞CDN可以认为是分布式的web缓存，减轻站点的压力。CDN的存在还可以有效预防黑客的入侵。设置多个节点服务器，分布在不同区域中，便于用户进行数据传递和访问。当某一个节点出现问题时，通过其他节点仍然可以完成数据传输工作，可以提高用户访问网站的响应速度。CDN使用单线的机房，根据用户的线路以及位置，为用户选择靠近用户的位置以及相同的运营商线路。镜像服务消除了不同运营商之间互联的瓶颈造成的影响，实现了跨运营商的网络加.

原创 Web安全小结------SQL注入

SQL注入（用户提交的数据可以被数据库解析执行）在浏览器前端页面输入类似数据库的一些语句，会影响到后端的数据库。SQL注入是一种将SQL代码添加到输入参数中，传递到服务器解析并执行的一种攻击手法。SQL注入攻击是输入参数未经过滤，然后直接拼接到SQL语句当中解析，执行达到预想之外的一种行为。SQL注入是怎么产生的？1）WEB开发人员无法保证所有的输入都已经过滤2）攻击者利用发送给SQL服务器的输入参数构造可执行的SQL代码（可加入到get请求、post请求、http头信息、cookie中）3）

原创 javascript知识巩固------之前居然没有总结过作用域和闭包，简单给两个题

函数作为返回值 function create(){ const a=100 return function(){ console.log(a) } } const fn=create() const a=200 fn()//100函数作为参数被传递 function print(fn){ const a=200 fn() } const a=100 function fn(){ console.log(a) } print(fn)//100所有的

原创 javascript知识巩固------ajax和跨域

手写XMLHttpRequest发送一个请求//GET请求function get(url,callback){ const xhr = new XMLHttpRequest(); xhr.open('GET',url,true)//true代表是异步的请求 xhr.onreadystatechange = function(){ if(xhr.readyState === 4 && xhr.status === 200 || xhr.statu

原创 javascript知识巩固------事件绑定、事件冒泡和事件代理

事件绑定 const btn=document.getElementById('btn1') btn.addEventListener('click',event => { console.log('clicked') })事件冒泡顺着DOM结构，往上一级一层一层冒泡。在当前元素中监听事件，或者在它的上一级、上上级等都能监听到该事件。由接收事件的元素开始，向上逐渐传播。比如页面结构为document->html->body->div，当点击div时，首先触发div

原创 javascript知识巩固------异步和单线程

异步和单线程js是单线程语言，只能同时做一件事儿浏览器和nodejs已支持js启动进程js和DOM渲染共用同一个线程，因为js可修改DOM结构（js执行的过程中DOM渲染必须停止，DOM渲染的过程中js执行必须停止）遇到等待（网络请求，定时任务）不能卡住需要异步（异步就是为了解决单线程等待这类问题）回调callback函数形式基于js是单线程语言，异步不会阻塞代码执行，同步会阻塞代码执行异步的应用场景网络请求，如ajax、图片加载 //ajax $.get('./data1.j