- 博客(49)
- 收藏
- 关注
RSS订阅原创 create-react-app工具创建react报错：throw er; // Unhandled 'error' event ^ Error: spawn cmd ENOENT
今天下午遇到一个问题，废了好大的劲才解决，所以写了这篇傻瓜式文章，希望可以帮助到大家。根据create-react-app工具创建react，前面几步一切正常，到了npm start这一步的时候，报了这样的错。搜了很多文章，都说是Path环境变量有问题，让把%SystemRoot%\system32 加入到path变量中。但是直接复制还是错的，这句话理解才可以使用。理解这句话：%S...
2019-08-14 21:05:47
3871
原创 node 邮箱方式发送验证码
想要实现发送验证码功能，要准备：nodemail模块一个有授权的发送验证码的邮箱nodemail模块：是连接js应用和邮箱的桥梁。是一个专门来发送消息的中转模块。步骤你需要做些什么来发送消息,将以下:创建一个Nodemailer运输车使用 SMTP或一些其他的传输机制设置 消息选项 （发送者 用户名、密码）交付消息对象使用 sendMail () 你以前创建的运输车的方法...
2019-08-08 21:19:43
2802
原创 理解、使用 beforeRouteEnter 前置守卫
前置守卫（路由守卫/导航守卫）：怎么理解？就像在组件前面守卫的士兵一样，满足条件才能访问组件。举个例子，比如在没登陆之前不能进入个人中心。咋实现的？请求getUser接口，获取里面的状态值status，如果是0，说明登录过了，不是0，没登陆，直接next到登录页面去。beforeRouteEnter(to,from,next){ axios.get('/api2/users...
2019-08-08 17:12:06
3441
原创 完整的前后端 实现上传头像、压缩头像
本文是我在写上传头像功能后的一个详细的总结，用作以后可以回顾，可能较为繁琐，如果明白上传只想看压缩，可直接拉到文章后半部分。文章目录上传头像上传头像准备工作上传头像上传头像路由配置上传头像接口前端修改图片名压缩头像压缩的原因压缩压缩操作的流程几个方法的说明具体代码的详细分析context.drawImage()压缩方法说明上传头像上传头像准备工作在后台/public文件夹里创建一个文件夹...
2019-08-07 21:13:40
5963
原创 解决跨域：Cors跨域与Nginx反向代理的区别
由于浏览器的同源策略（协议、域名和端口是否相同），我们经常需要对请求做跨域处理。常见的跨域方式有什么呢？通过jsonp跨域 （利用script、src标签发起get请求不会出现跨域禁止的特点实现）通过修改document.domain来跨子域window.name+iframe （借助中介属性window.name实现）HTML5中的window.postMessage （主要侧重于前...
2019-08-03 13:23:25
4222
原创 Error: Line 2: Unexpected token {
遇到了一个很……（zz）的问题，但是在网上也没搜到，所以纠结着还是写了这篇。给mongodb批量加假数据的时候，在Robo 3T里面，添加失败。其实是因为要用数组的那种括号：db.getCollection('users').save([ // 将 { 改为 [ { "date" : ISODate("2019-07-29T09:48:16.123Z"),...
2019-07-30 21:49:42
1921
原创 Proxy error: Could not proxy request /api2/users/login from localhost:8080 to localhost:3000 (ENOTFO
问题描述：因为node服务运行在localhost:3000端口，vue运行在localhost:8080端口，不同端口存在跨域问题。所以我使用了反向代理处理。在vue.config.js里：proxy:{ '/api2':{ target:'http://localhost:3000', changeOrigin:true, }}我...
2019-07-27 11:33:46
123495
25
原创 自适应布局的常用解决方案对比(媒体查询、百分比、rem和vw/vh）
如何在不同分辨率的设备上更好的实现适配？本文介绍几种自适应解决方案包括媒体查询、百分比、rem/em和vw/vh。一、pxpx不是绝对单位，而是相对单位。比如1px的文字在pc端和移动端的大小是不一样的。当通过viewport标签，<meta name="viewport" content="width=device-width">设置布局视口为理想视口时，1个css像...
2019-04-21 00:57:47
1684
原创 cookie、session的简单特点总结与具体实现
简单的特点总结：cookie ：在浏览器保存一些数据，每次请求向后台发送特点：不安全、空间小（4k）session：不是独立存在的，是基于cookie实现的，保存在服务器cookie中会有一个session的ID，服务器利用sessionid找到session文件、读取、写入特点：安全、空间无限隐患：session劫持session劫持：session_id放在cookie里面，所...
2019-03-23 23:34:03
358
原创 模块化开发 调用函数（例如ajax）not defind问题
当我们使用模块化开发时，有可能会遇到类似于这样的问题：这里的具体代码是调用ajax函数。出现这样的错误，一般是使用了不存在或者未获取的元素。但是我们在调用之前已经在主js中引入了含有ajax函数的Ajax.js：require(&quot;./Ajax.js&quot;);并且配置了文件，将Ajax.js打包进了主js。按照我以前的理解，此时就相当于C语言的分模块一样，只要在主程序里引入了其他需要的模块...
2019-02-13 22:06:26
616
原创 解决input 密码框内密码的显隐问题
引入问题：我们在很多场景下都会有输入密码的情况，输入的时候，框右端会有一个眼睛，可以选择密码是否能看见。在具体实现的过程中我发现眼睛的点击事件会和input的失去聚焦事件冲突，也就是说我们点击眼睛，切换明文的同时却失去了焦点，在正常输入下，输入框应该仍然保持聚焦状态。当时写的代码是这样的：input.onfocus = function() { if (input.value == "...
2019-01-30 22:37:58
3430
原创 webpack
为什要使用WebPack？现在的网页就像功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，我们开始使用了模块化、各种拓展语言（TypeScript）、css预处理器等。这些进步提高我们开发效率的同时，也存在着它们所编写的文件不能直接被浏览器识别的问题，这就需要我们再进行处理，这就为WebPack类的工具的出现提供了需求。什么是Webpack？We...
2019-01-23 18:20:11
312
原创 打包方案、模块化编程
首先，为什么需要打包方案呢？随着前端页面的不断发展，我们的页面承载着越来越多的样式、功能，我们开始尝试往页面里插入各种库和插件，不再局限于简单的静态页面，相应的，在网速的限制下，单位时间内网页的响应和加载速度都极其不尽如人意，js文件的压力越来越大。为了解决这些问题，打包方案应运而生了。（需要明确的是，还有一些其他的作用：代码混淆了不容易被盗用…）打包方案的发展历程。如同创建对象的工厂模式、...
2019-01-19 23:45:57
560
原创 前端和后台的关系
最近初步学习了node js，在练习了一个注册登录页面的过程中，我思考了一些问题。1.前端和后台，在一个web中分别承担了什么任务？前端包括：静态页面的呈现、js功能的实现、以及向后台发送数据（通过ajax）。后台：接收前端发送来的请求、判断是哪种请求，如果是文件请求发送文件回前端；如果是数据请求，处理数据，再返回给前台处理结果。2.当浏览器输入网址后，前端和后台分别执行了什么操作？浏览...
2018-11-28 22:23:23
8245
原创 使用vh和vw实现流体排版
前言在网页的调试中，我们新手会遇到这样的问题： ① 窗口的大小改变时，页面里元素的大小是否会随着窗口大小的改变而改变、是否会影响布局。 ② 在不同的设备上访问网页时，元素的大小是否合适、是否会影响布局。目前，我们有这样的解决方法： 对于①：通过百分比、em类来实现 对于②：媒介查询 ③今天我们介绍一种新的适配方法：流体排版，可以同时解决①和②。首先我们来明确三种方法：...
2018-09-17 22:00:05
672
原创 如何用js添加css3动画
其实很简单，我们只需要提前写好变化前的div，和变化后的div，在js中控制class类名的改变来实现动画就可以了。//html部分：.div1 { width:22px; height:22px； transition: 0.4s;}.div2 { width:200px; height:130px; transition: 0.3s;...
2018-08-14 21:43:40
15237
2
原创 事件冒泡、事件捕获、事件委托
事件处理模型–事件冒泡、捕获不论是冒泡还是捕获都是在说事件发生的顺序。事件冒泡：结构上（非视觉上）嵌套关系的元素，会存在事件冒泡的功能，即同一事件，自子元素冒泡向父元素。（子元素先执行，父元素再执行）事件捕获：结构上（非视觉上）嵌套关系的元素，会存在事件捕获的功能，即同一事件，自父元素捕获至子元素。（父元素的功能先执行，子元素再执行）IE没有捕获事件 触发顺序：先...
2018-08-10 15:24:27
317
原创 JavaScript 事件
事件如何绑定事件处理函数：1.ele.onxxx = funcyion(event){}兼容性很好，但是一个元素的同一个事件上只能绑定一个处理程序基本等于写在HTML行间上2.obj.addEventListener(type,fn,false);IE9以下不兼容，可以为一个事件绑定多个处理程序3.obj.attachEvent(‘on’+type,fn);...
2018-08-10 14:43:24
424
原创 JavaScript 脚本化css
脚本化css（脚本化是控制的意思）读写元素css属性 dom.style.prop（写入操作） 可读写行间样式，没有兼容性问题，碰到float这样的保留字属性，前面应加css eg：float –&gt; cssFloat复合属性建议拆解（比如width、height分成两个语句写），组合单词变成小驼峰式写法写入的值必须是字符串格式查询计算样式（完全是读取操作） windo...
2018-08-02 16:12:42
345
原创 JavaScript 获取窗口属性
获取窗口属性查看滚动条的滚动距离 window.pageXOffset/pageYOffset IE8及IE8以下不兼容document.body/documentElement.scrollLeft/scrollTop 兼容性比较混乱，同时取两个值相加，因为不可能存在两个同时有值封装兼容性方法，求滚动轮滚动离getScrollOffset() 为了解决兼容性的问题，我们来封...
2018-08-02 16:10:05
525
原创 JavaScript 定时器
定时器：setlnterval();setTimeout();clearlnterval();clearTimeout(); 这四个函数都是全局对象window上的方法，内部函数this指向window1.setlnterval();定时循环 每隔多长时间（千毫秒）执行一次函数 属性示例:&lt;script type="text/javascript"&gt; ...
2018-08-02 11:38:27
575
原创 DOM基本操作
DOM基本操作节点的类型：元素节点 1属性节点 2文本节点 3注释节点 8document 9DocumentFragment 11节点的四个属性： - nodeName 元素的标签名，以大小写形式表示，只读 - nodeValue Text节点或Comment(注释)节点的文本内容，可读写 - nodeType 该节点的类型，只读 - attribu...
2018-08-01 15:45:21
701
原创 JavaScript Dom选择器
Dom选择器document.getElementByld().getElementsByTagName()getElementsByName();.getElementsByClassName().querySelector//css选择器（在css中怎么选，这里就怎么选），在ie7和ie以下的版本中没有，不是实时的。.querySelectorAll()//css选择器，在i...
2018-08-01 11:23:08
362
原创 JavaScript with
with作用（两点）：改变作用域链<script type = "text/javascript"> var obj = { name : "obj" } var name = 'window'; function test(){ var name = "scope"; var age =...
2018-08-01 11:22:02
263
原创 JavaScript es5严格模式的说明
es5严格模式现在的浏览器是基于es3.0和es5.0的一些新增的方法使用的。但是，es3.0和es5.0有冲突的部分，这时要是启用es5.0严格模式，那么es3.0和es5.0产生冲突的部分就是使用es5.0的，否则使用es3.0（也是一般情况下，不启用严格模式的情况下）。今天我们探究“冲突的部分用es5.0（在严格模式下）是怎么解决的？”es5.0严格模式的启用： “use...
2018-08-01 11:20:25
353
原创 JavaScript try...catch和一些错误类型
try…catch使用的格式：try{}catch(e) {}try 在try里面的语句发生错误，不会执行错误后的try里面的代码（会在catch里面捕捉try的第一行错误语句，try后面的语句直接忽略了），但是会执行外面的代码 例子：<script type = "text/javascript"> try{console.log("a");cons...
2018-08-01 11:19:26
348
原创 JavaScript 数组去重
数组去重： 利用对象的特性：同一个属性名不可能出现两次 方法：将数组的属性值当作对象的属性名添加到对象里去 代码示例：<script type = "text/javascript"> Array.prototype.unique = function (){ var temp = {}, //用对象构成一个新数组 ...
2018-08-01 11:13:06
242
原创 JavaScript 类数组
类数组类数组的特点： 1.可以利用属性名来模拟数组的特性 2.可以动态的执行length的属性 3.如果强行让类数组调用push方法，则会根据length属性值的位置进行属性的扩充 在函数中实参列表—arguments，就是一个类数组。类数组的三个组成部分： 1.属性要为索引（数字）属性 2.必须有length属性 3.最好加上push方法 示例：var obj ...
2018-08-01 11:12:31
307
原创 JavaScript 数组（改变数组的方法）
数组定义方式(两种)：数组字面量 var arr = []; –建议这一种数组的构造函数形式 var arr = new Array();区别：var arr = [10]; //arr[0] = 1（主要），代表数组长度为1（推断）var arr = new Array(10); //给new Array(10)传参，只传一个参数，系统会认...
2018-08-01 11:11:22
6444
原创 JavaScript 克隆（根据数据类型的不同选择克隆方式）
克隆在JavaScript如何把一个对象的属性和方法完完整整的搬过来到另一个空对象身上，对于继承的使用方法不能完成上述操作，所以我们开始另一种方法—-克隆。在Javascript里，如果克隆对象是基本类型，我们直接赋值就可以了：<script type = "text/javascript"> var sStr = "abc"; var cStr ...
2018-08-01 11:04:41
510
原创 JavaScript arguments的理解、属性、及应用
arguments（类数组对象）：当我们在js中在调用一个函数的时候，我们经常会给这个函数传递一些参数，js把传入到这个函数的所有参数变成一个类数组存储在arguments里面。接下来我们具体看看例子：<script type="text/javascript">function exam() { console.log(arguments);}exam(1,...
2018-08-01 11:01:15
308
原创 JavaScript this
thisthis 本身原本很简单，总是指向类的当前实例。this的特点：在 function 内部被创建函数预编译过程中，this –&gt; window（this指向window）全局作用域里this –&gt; window指向调用时所在函数所绑定的对象谁调用这个方法，this就指向谁。obj.func(); func()里面的this指向obj)this 不能...
2018-07-31 19:43:31
310
原创 JavaScript 对象及其枚举
对象的枚举for in循环 hasOwnProperty 操作符in 操作符instanceof 操作符1.遍历整个对象属性的方法：for(var prop in obj) { //表示在obj里面，有多少个prop就循环多少圈，prop可以换名字 console.log(prop + &amp;amp;quot;&amp;amp;quot; + typeof(prop)) ;}
2018-07-28 10:42:42
1363
原创 JavaScript 继承
继承发展史1.传统形式 –>原型链 - 过多继承了没用的东西 2.借用构造函数 –>call/apply - 不能继承借用构造函数的原型，原型还是自己的 - 每次构造函数都要多走一个函数，造成运行复杂 3.共享原型 - 不能随便改动自己的原型,不能实现自己个性化的原型 示例：<script type = "text/javascript"> ...
2018-07-28 10:41:52
235
原创 JavaScript call、apply
call/apply1.功能：改变this指向 2.不同：传参列表不同call： Person(); == Person.call(); 执行起来是没有区别的。使用Person.call(替代名)，可以将原函数的所有this替换成obj传参的规则： Person.call(obj，’cheng’，300）中，第一个为替换名，从第二开始为第一个实参。使用示例：<...
2018-07-28 10:39:59
224
原创 JavaScript 原型、原型链
原型定义：原型是function对象的一个属性，它定义了构造函数制造出的对象的公共祖先。通过该构造函数产生的对象，可以继承该原型的属性和方法。原型也是对象。利用原型特点和概念，可以提取共有属性。对象如何查看原型 –&amp;gt; 隐式属性_ _ proto _ _ _ _ proto _ _是函数里面的隐式属性，就像一个指针，指向函数的原型（祖先），若果改变它，那么原型将会改变，对应的，继承...
2018-07-28 10:38:55
285
原创 JavaScript 构造函数
对象对对象的属性增删改查：增：mrDeng.wife = “xiaoliu” 直接写。.属性 = “” 删：delete mrDeng.name 就直接把名字删了 改：mrDeng.wife = “xiaoliu” ，换双引号里面的属性 查：console.lgo（mrDeng.属性）；对象的创建方法：1.var obj = { } planObject 对象字面...
2018-07-28 10:37:07
310
原创 JavaScript 预编译
预编译预编译前奏：imply global 暗示全局变量：即任何变量，如果变量未经声明就赋值，此变量就为全局变量所有。 eg：a = 123； eg：var a = b = 123；一切声明的全局变量，全是window的属性。 eg：var a = 123；===>window.a = 123；引例：<script type = "text/java...
2018-07-28 10:34:05
295
原创 JavaScript 闭包
闭包定义：当内部函数被保存在外部时，将会生成闭包。理解 : 有权访问另一个函数作用域内变量的函数都是闭包。缺点：闭包会导致原有作用域链不释放，造成内存泄漏。作用：实现公有变量 eg：函数累加器可以做到缓存 eg：eater可以实现封装，属性私有化 eg：Person（）；模块化开发，防止污染全局变量 理解过程：计数器困境设想下如果你想统计一些数值，...
2018-07-28 10:32:39
261
原创 JavaScript 函数、作用域
函数1.定义：函数声明：function theFirstName（）｛ ｝ 函数声明中的函数名遵循小峰峰：第一个单词小写，后面单词首字母大写。函数表达式： var demo = function（）｛ document.write （‘a’）； ｝2.组成形式：形参、实参形式参数 -- 实参function sum （a，b，c，d）｛if（sum...
2018-07-28 10:31:48
648
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人