五柳

前言对于不是从事音视频方面的同学来说，很多情况下都是通过 window.location.href 来下载文件。这种方式，一般是前后端的登录态是基于 Cookie + Session 的方式，由于浏览器默认会将本地的 cookie 塞到 HTTP 请求首部字段的 Set-Cookie 中，从而实现来带用户的 SessionId，所以，我们也就可以用 window.location.href 来打开一个链接下载文件。当然，还有一种情况，不需要登录态的校验（比较che）。众所周知，还有另一种登录态的处

引言关于 Web 安全方面的问题，我想从事 Web 前端开发的同学，或多或少都会有些了解，例如 XSS （跨站点脚本攻击）、CSRF（跨站点请求伪造）、SQL 注入、HTTP 报文劫持等等。但是，我想详细起来说，大家可能会只是说的模模糊糊的。首先，针对 Web 的攻击可以分为这两种模式：主动攻击，即攻击者通过 Web 应用直接将攻击代码传入，例如 SQL 注入、OS 命令注入被动攻击，即...

前言    学过JavaScript的一些高级应用的同学，想必不会对JavaScript中的事件节流和防抖动陌生。我想应该都能随手甩出一段JavaScript代码实现节流和防抖动。但是，在实际开发中，写原生的JavaScript代码肯定是不会适应开发需求的。接下来，我们以Vue.js中任何很方便地使用事件节流和防抖动为例，在实际开发中运用一下~事件节流(...

Hook    Hook的意义就是让函数组件也能使用state，以及进行一些state的操作State Hook    State Hook在函数组件中的具体表现形式是通过使用userState Hook    例如： import React, { useState...

前言随着Vue作者尤雨溪在今年10月份开源了Vue 3的pre-alpha版本，也过了有一段时间了。而作为一个前端小白的我，了解的比较晚。所以，今天就来大致讲一下Vue 3即将带来的重大改变。摇钱树在Vue 2x版本中，项目的打包会将一些你并不会用到的API也打包到你的项目中，这样无疑会增加项目的体积，并且，你并没有用到这个API，但是打包后是包含这个API的，很明显这不符合使用逻辑。那么为...

前言学过Vue的都知道，Vue的全局状态管理是由Vuex完成的。同样的React也有属于它的全局的状态管理，最著名的就是Flux和Redux，并且作为Flux之后出现的Redux，完美的接触了Flux的优点，并很好的弥补了Flux的不足。而Redux则由：Action、Reducer、Store组成。ActionReducerStore...

前言：对应React组件的生命周期，其实还是略带困惑…因为官网的文档竟然没有明确一个模块来讲解组件的生命周期…不过没有明确并不是代表不重要，开发中可以说非常重要！基本的生命周期函数componentWillMount、componentUnMount、componentDidMount、shouldComponentUpdate、componentWillUpdate、componentD...

近期在使用vue-cli3.0写项目，所以就来对比一下vue-cli2.0和vue-cli3.0Vue-cli 2.0全局安装 npm install -g vue-cli创建项目 vue init webpack project-name项目目录结构Vue-cli 3.0全局安装 npm install -g @vue/cli-service-glob...

前言： 不知不觉走在编程的路上已经一个年头多些，在自学的前部分时间都在看别人写的程序。最近这几个月几乎都在自己捣鼓程序…导致很少去吸收别人写的程序的优点。回到正题~最近在玩vue社区的一个很有名的框架iView，并且也在看它生态中的iView Admin模板。刚开始就掉坑了…全局前置守卫（钩子）基础语法：const router = new VueRouter({ ... })rou...

前言： 相信学过ThinkPHP5之类的后端框架的盆友，都或多或少对MVC有些了解，而Node.js虽然官网给定生成应用模板中并没有相应的Model、Controller文件目录，但是当Express结合Mongoose的时候，MVC模式无疑是开发的首选。路由首先，任何一个后端，路由都是最重要的，而Express的路由就起着连接Controller的作用。接下来我们用一个简单的后端接口来讲...

前言：本次图片上传是借助formidable库，实现图片的上传。formidable是一个能以高效流畅的方式解析上传请求的库。（formidable npm库地址）直接上代码let http = require('http'), formidable = require('formidable'), fs = require('fs');let server = http.crea...

组件更新的优化开发当中存在这样的场景比如，我已经得到的一个组件中渲染了，另一个组件渲染后，前一个组件也会随着更新，这个势必会影响性能，React提供了shouldComponentUpdate(nextProps, nextState)来解决这类问题基本语法： shouldComponentUpdate(nextProps, nextState) { return true; }...

import()对代码进行分割实现代码分割的最佳方式则是通过动态import()语法例如: import Demo from './Demo'; function DemoFather() { return ( <div> <Demo/> </div> ); }React.lazy动态引入组件Reac...

区别受控组件：需要为每一个组件动态的绑定state中的变量，并且需要为数据变化添加相应的事件处理函数。非受控组件：则不需要为组件动态地绑定state中的变量，也不需要为数据变化添加事件处理函数，通过将数据交给React组件来实现为数据变化相应的事件处理函数。非受控组件class Form extends React.Component { constructor(props...

MongoDB创建数据库 connect()例如： let mongoClient = require('mongodb').MongoClient; let url = "mongodb://localhost:27017/wjc" MongoClient.connect(url, {useNewUrlParser: true}, (err, db) => { if ...

前言同样是列表渲染，React.js个人认为略显笨拙…相比较Vue.js，可能不会太友好，但是确实ES6的语法写起来很爽…哈哈基本格式函数式列表组件（举例）写法一function list(props) { const numbers = props.numbers; var listItems = numbers.map((numer) => <li k...

Express框架设置即对环境设置的管理能力，例如在生产环境下讲express模板缓存起来，这样可以加快响应速度。例如： app.configure('production', function () { app.enable('view cache'); });express内置的一些实用设置（举例），即在app.set中定义:严格路由启用严格路由后，请求的路由最...

调用事件类似于原生的点击事件onclick=“event()”，React中通过onClick={function}的形式来实现事件处理。例如： <div onClick={this.handler}>click me</div>需要注意的是，开发中需要调用的事件处理函数，一般存在于组件中，而要调用是事件处理函数，则需要通过this.函数名来调用该函数。但是由于J...

ConnectConnect是一个基于HTTP服务器的工具集，它提供了一种新的组织代码的方式来和请求、响应对象进行交互，即中间件。(需要注意的是本文中的connect版本为1.8.7，所以仅供学习参考)中间件基本形式： var server = require('connect').createServer(); //第一个中间件 server.use(function...

前言项目描述：一个基于优鲜食物的移动端购物网站（大部分功能模块已实现，适合有一定Vue基础的人学习）技术栈：Vue CLI+Vue Router+Vuex+Less+Mint UI+axios+Swiper+Animate+Better Scroll+Mock+Vue Touch

网页的基本组成部分文档类型&amp;amp;amp;lt;!doctype html&amp;amp;amp;gt;编码格式&amp;amp;amp;lt;!--提示浏览器阅读文档的编码格式是UTF-8 --&amp;amp;amp;gt;&amp;amp;amp;lt;meta charset=&amp;amp;quot;UTF-8&amp;amp;quot;&amp;amp;amp;gt;

前言：本次总结，只是针对常用和需要记忆的对象，进行相应的概述。**变量数组arr = new Array(1, 2, 3) 或者 arr = [1, 2, 3]对象 相当于Java中的类obj = new Object();obj.name = 'wjc';obj.inputName = function(){ alert(this.name);}json对象 即{...

前言：本篇博文使用了Jquery加transform的scale属性做了一个简单实用的demo代码 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;index&lt;/title&gt; s

当div内嵌套img标签时浏览器在渲染页面的时候会给img加上4px的间距，例如img的width为40，外层div的width将是44px，解决方法：div img{ display:block; //即把img变成块标签}诸如body h1 li之类的默认自带了边距建议在写前端页面的时候先给全部的标签去掉默认的边距，解决方法：*{ margin:0px;...

前言：计算属性能实现的功能methods几乎可以实现，但是计算属性于methods的差别就在于，前者是基于绑定的变量的值，即只要该值不发生变化，计算属性的值也不会变化。基本的computed属性写法computed:{ msg2(){ return '欢迎来到这里'; }, ...

需要先对表单的select标签的size属性进行设置，以及要声明multiple属性代码：&amp;lt;!doctype html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;ti

事件轮询(是Node IO的基础核心)指Node会先注册事件，随后不停地询问内核这些事件是否已经分发。当事件分发时，对应的回调函数就会被触发，如果事件没有分发时，继续执行之后的代码，直至该事件分发时则执行相应的回调函数。例： console.log('hello') setTimeout(function () { console.log('world') }, 5000) co...

global对象在浏览器中global对象就是window对象。例如setTimeout() 就是 window.setTimeout()Node中的全局变量global: 在Node中，任何global对象上的属性都可以被全局访问到。process: 所有全局执行上下文中的内容都在process对象中。Node中只有一个process对象，例如在浏览器中窗口的名字是window.nam...

fs模块fs模块是唯一一个同时提供同步和异步API的模块。例如：同步获取当前目录的文件列表 console.log(require('fs').readdireSync(__dirname));异步获取当前目录的文件列表 function async (err, files) {console.log(files)}; requrie('fs').readdirSync('....

方法一：通过监听器监听方法event参数获取dom对象代码：&amp;lt;!doctype html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;

基本格式HTML部分&lt;transition name='name'&gt; &lt;div&gt;&lt;/div&gt;&lt;/transition&gt;样式部分Vue.js提供了6个class来实现过渡效果1.进入类v-enter 进入过渡的开始状态v-enter-active 进入...

前言：无知的我一直以为类似这些请求都可以用ajax解决…但是现在才知道ajax仅局限于同域下发送异步请求，至于什么是jsonp请求以及同源政策百度说的很清楚。页面效果:PS:界面js效果包括键盘上下、文本框聚集失焦，如有补充欢迎大家提建议。css代码：*{ font-family:微软雅黑; margin:0px; ...

全局组件创建全局组件Vue.component({'组件名'， { template:'模板id', //模板id data(){ //data必须是方法! return { //返回数据 } }, props:['变量名'], //props用于接收父组件的数据 此处也可以用对象{} 然后在里面写一些动态的验证规则 例如 type:number ...

前言如果仔细观察浏览器加载Vue-Cli项目的时候，默认情况下，只会加载app.js文件，即所有文件都是在app.js文件中，然后浏览器读取app.js进行加载，所以如果项目很大，这种加载方式显然是影响用户体验。那么这时候就要通过按需加载的方式来异步加载组件，从而达到分割代码的作用。常规的加载方式常规或者新手在Vue-Cli项目中引入组件，都是如下：import component f...

前言由于同源政策（同源，即同协议、域名、端口）的制定，浏览器限制了跨域请求的访问，而随着前端技术的不断衍变，跨域从最早的JSONP到现在的CORS（跨域资源共享）、到代理、再到WebSocket，前端要实现跨域的技术选择性变得更多，可以实现的功能也更多。JSONP讲到跨域实现方式，JSONP肯定是第一个会被提及的。JSONP是JSON with padding的简写，JSONP由两部分组...

前言SEO(Search Engine Optimization)，即搜索引擎优化。权威的解释是利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。具体到怎么实现，就是通过在网页上内嵌一些meta属性来达到更好地被搜索引擎爬取关键信息，从而提升自身的搜索排名。单页应用（Single Page Application）由Vue-Cli打包生成的网站的文件就是单页应用，它只有一个Index...

前言每每提到Redux都会想起Vuex，相比起Vuex，Redux确实抽象了一些。官方文档给的入门的DEMO中的todoList，其中很多的代码逻辑都得自己去梳理。容器组件和展示组件Redux的React绑定库是基于容器组件和展示组件相分离的开发思想。展示组件 作用：描述如何展现骨架、样式 直接使用Redux：否 数据来源：props 数据修改：从props调用回调函数 调用...

前言在看完NUXTJS官方文档后，在GitHub上找了几个项目，但是在解读项目目录解构的时候，我陷入了沉思…几乎 GitHub 上的几个比较火的 NUXTJS 的项目都会有一个 server 或 api 的文件目录，里面的代码还是用 Express 的后端接口…那么 NUXTJS 到底为什么会和 Express 一起结合使用？Express...