花花小兔子-CSDN博客

原创图片压缩上传【前端】

先讲大致流程监听input表单变化读取文件 -> file.size若超出大小 -> canvas图片压缩 -> 用Blob，base64转二进制对象 -> 二进制对象转文件 -> formData 上传html部分<input :id="id" class="uploadIpt" type="file" accept="image/

2018-09-14 18:33:01 278

原创 node 图片上传【服务器端】

上传服务器文件夹import multer from 'koa-multer'const storage = multer.diskStorage({ // 文件保存路径 destination: function(req, file, cb) { cb(null, path.join(__dirname, '../../static')) },...

2018-09-14 10:59:32 969

原创【vue】实现markdown

最近在做的一个团队写作项目，里面涉及到写周报的功能，在这里用markdown是最好的解决方法，采用了vue-markdown插件将文本转换为markdown格式，并使用highlight.js来实现代码高亮。vue-markdown首先安装vue-markdown npm i vue-markdown使用很简单：import VueMarkdown from 'vue-markdown' /

2018-01-02 13:34:32 6114 1

转载前端渲染

一. 浏览器构成用户界面－包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分。浏览器引擎－用来查询及操作渲染引擎的接口。渲染引擎－用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来。网络－用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作。UI

2017-12-20 15:21:58 446

原创 web 前端安全基础

一.概念解析 1. 注入攻击：当正常的数据内容被注入指令内容，在解释的过程中，如果注入的指令能够被独立执行，那么攻击就发生了。 2.SQL注入攻击：用户输入提交一段数据库查询代码，获取信息如下语句，id来自http://www.foo.com/user.php?id=1 中用户传来的id select username,email,desc from users where id

2017-12-13 10:23:11 467

原创【webpack】入门Demo

概述 Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader 的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、 AMD 模块、 ES6 模块、CSS、图片、 JSON、Coffeescript、 LESS 等。web

2017-09-12 10:50:23 1595

原创【javascript】ajax

XMLHttpRequestajax是一种无需刷新页面就可以从服务器获取数据的方法。本质是XMLHttpRequest对象，在不需要兼容IE7以下版本时，可以用以下方法进行声明 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else { xhr = new AxtiveXObject

2017-08-25 11:17:25 376

原创【javascript】cookie和session

cookiecookie的性质是绑定在特定域名下，当设定了一个cookie再向创建他的域名发送请求时都会包含这个cookie。使用key-value属性对的形式保存。特性1. 在不同域下和不同浏览器下cookie总数都是有限的IE7+ 每个域最多50个Firefox 每个域最多50个Opera 每个域最多30个Safari & Chrome 没有硬性要求超出限制后再设置域名会删除之前设置

2017-08-18 15:00:32 466

原创【javascript】数组那些事儿

关于数组的深浅拷贝问题数组浅拷贝let arrA = [1,2,3,4,5]let arrB = arrAarrB[2] = 0console.log(arrA) //[1, 2, 0, 4, 5]数组与对象本质相同，也是存放于堆内存中，当执行了arrB = arrA，实际上是复制了arrA的指针，现在arrA与arrB指向内存中的同一个数组对象数组深拷贝若数组中不存在对象的话，可用以下方式进

2017-08-10 17:25:00 495 1

原创【css3】过渡

一.过渡的触发：JavaScript或者：hover，：fouces，：active、：target、：checked伪类二.步骤：默认样式为元素初始状态，声明最终状态，默认样式中添加过渡函数和不同样式三.参数transition-property 要改变的css属性 (all 所有改变的属性都过渡)transition-duration 用多久执行完 transition-timing-

2017-08-01 16:05:00 568

原创【css3】animation

参数animation-name : 关键帧动画的名字animation-duration：播放时间(规定动画多久播放完毕)animation-timing-function：播放方式（动画的速度曲线）animation-delay：开始时间（也可理解为延迟多久开始播放）animation-iteration-count：循环次数（infinite无限循环）animation-dire

2017-08-01 16:00:26 354

原创【css3】flex

基础知识布局模式块布局/行内布局/表格布局/定位布局用法 display：flex 块级伸缩盒 inline-flex 行内伸缩盒（若为 inline-flex 的浮动或绝对行为元素，则display计算值为flex ）术语 3.1 主轴侧轴 3.2 伸缩容器里所有项目均为伸缩项目，每一部分都有各自的属性 3.

2017-07-31 19:21:25 409

原创【css3】变形

属性transform-origin : 控制元素三维空间中心点transform-style ：有两个属性值 flat 和 preserve-3d，设置为preserve-3d建立一个3D渲染环境transfrom-function： 2D translate( ) 从新定位两个扩展函数translateX（），translateY（） scale（）放大

2017-07-31 15:29:52 361

vue的生命周期我用到的vue中生命周期相关的有：created,mounted,updated,activited,destroyed。created在页面创建的时候调用，且仅执行一次。此时页面的DOM元素还未生成，若在created中执行document.getElementsByClassName(‘name’)将得不到任何数据。mounted针对页面钩子触发顺序为：created-> mo

2017-07-27 18:29:20 2845

原创使用nvm后command not found: node

我使用nvm安装过node后运行node报错，command not found: node我先将本地的node卸载了重新安装 brew uninstall node brew install node依旧有问题，又走了一遍上面的两行，报错Warning: node 8.2.1 is already installed, it's just not linked.You can use

2017-07-24 12:17:05 3491

原创【blog】vue搭建相关问题

!!vue-style-loader!css-loader?vue搭建成功，新建自己的页面，我想在页面中使用scss预处理，但是npm run dev后报错These dependencies were not found:* @/user in ./src/router/index.js* !!vue-style-loader!css-loader?{"minimize":false,"sour

2017-07-18 16:37:38 708

原创【blog】vue项目搭建

前提是你的计算机上已经安装了node.js，我要使用vue2 + koa2 + mongo 搭建一个网站，首先进行vue的项目搭建首先全局安装vue npm install –globle vue-cli使用vue创建基于webpack的项目 vue init webpack blog cd blog npm i进入blog目录安装依赖包，安装过程中可能会出现phantomj

2017-07-17 18:03:49 402

原创 node 起步

node 直接以严格模式运行calc.js node –use_strict calc.jsnode 目录寻找机制1.引用同级目录 * ./ * var greet = require(‘./hello’)2.引用上级目录 * ../ * var greet = require(‘../hello’) 3.只写文件名 var greet = require(‘hello’)

2017-07-13 17:34:45 412

原创 npm

npm设置淘宝镜像 npm install express –registry=https://registry.npm.taobao.orgnpm查看当前镜像 npm config lsnpm初始化 mkdir demo && cd demo npm init初始化会提示很多要填写的初始化信息，填写完成后生成json文件使用npm安装依赖 npm install pa

2017-07-10 11:42:10 511

原创【es6】Set 和 Map

set简介set类似于数组，但成员值都是唯一的set函数可接受数组作为参数，不会添加重复值 const items = new Set([1, 2, 3, 4, 5, 5, 5, 5, 6]); items //1,2,3,4,5,6去除数组的重复成员 […new Set(array)]Set中加入值时不会发生类型转换（5和”5”不同） Set内部判断两个值是否相等类似

2017-07-03 09:04:10 384

原创【es6】中的...

解构赋值中 let [x, y, ...z] = ['a'] //"a", undefined, []扩张运算符(…)可以将某些数据结构转化为数组 function foo() { var args = [...arguments]; console.log(args) } var a = foo('a', 'b') //["a",

2017-06-30 16:39:00 339

原创【es6】Generator

简介 function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();yield 定义Generator函数不同的内部状态惰性求值普通函数中使用报错 yield语句如果

2017-06-30 16:35:06 276

原创【es6】Iterator 和 for...of

Iterator遍历器表示集合的数据结构：数组（Array）、对象（Object）、Map、Set Iterator的作用：为各种数据接口提供统一接口、使用数据接口的成员能够按摩中次序排列、主要供for…of使用遍历过程：创建指针对象 -> 调next方法依次访问返回包含value（当前成员值）和done（遍历是否结束）两个属性的对象有些数据结构（数组、某些类数组对象、Set、M

2017-06-26 00:47:16 299

原创【es6】symbol

javascript数据类型： undefined、null、boolean、string、number、object、symbol 概述：symbol 表示独一无二的值Symbol函数前不能使用new命令，会报错。生成的Symbol是一个原始类型的值，不是对象Symbol类型定义 var s1 = Symbol(‘foo’) 如果参数是一个对象的话，会调用对象的toString方法，将其

2017-06-26 00:39:57 319

原创【es6】对象的扩展

属性的简洁表示法可以只写属性名，不写属性值，return{x, y}相当于return{x:x, y:y}属性方法简写：method(){}例子：Common.js模块输出变量module.export = {fun1, fun2, fun3} 属性的赋值取值（setter／getter）属性名表达式定义对象属性 let propKey = 'foo'; let

2017-06-20 16:12:49 365

原创【es6】函数

函数参数的默认值原指定默认值方法：y = y || ‘a’(若y真正想要赋值的结果对应布尔值为false则无法成功赋值)使用es6设置函数参数默认值 function log(x = 0){ console.log(x) } log //0 log('') //'' log(5) //5函数内部不可再使用let，const再次声明参数，参

2017-06-18 19:21:55 363

原创【es6】数组

Array.from() 将两类对象转化为数组常见类数组对象，document.querySelectorAll()返回的NodeList集合，函数内部的argument对象都可经Array.from()转化为真正的数组（部署了Iterator接口）数组对象可以使用forEach方法扩张运算符(…)也可以将某些数据结构转化为数组 function foo() { v

2017-06-18 13:28:04 481

原创【es6】数值的扩展

数值的扩展二进制 & 八进制1.二进制前缀：0b(0B) 八进制前缀：0o(0O) 2.es5严格模式不允许使用前缀0表示八进制，如：011（9） 3.二进制八进制转换为十进制使用Number Number(‘0b111’) //7Number.isFinite(), Number.isNaN()1.isFinite()检查数值是否非无穷 Number.isFinite(0

2017-06-16 16:33:02 417

原创【es6】字符串的扩展

字符串Unicode表示法1.采用\uxxxx表示字符，仅限\u0000 ~ \uFFFF 2.超过部分会理解成加法如： “\u20BB7”理解为\u20BB + 7 es6写法要求将码点放入大括号即可正确解读，如： “\u{20BB7}” “\u41” //SyntaxError: Invalid Unicode escape sequence

2017-06-13 01:00:39 509

原创【es6】解构赋值

变量的解构赋值基本用法 let [x, y, ...z] = ['a'] //"a", undefined, []等号右边如果不是数组，将会报错（不是可遍历结构）解构赋值 var, let, const命令均适用set结构也可解构赋值(具有Iterator接口，可采用数组形式结构赋值) let [x, y, z] = new Set(["a", "b", "c"])

2017-06-10 17:08:49 772

原创【es6】 let & const

let对变量的声明特性let 只在命令所在代码块有效不存在变量提升区块中存在let const 会形成封闭作用域（在定义此之前使用typeof 会抛出 //ReferenceError）相同作用域不可重复声明（函数内部不可重新声明参数）1.let 只在命令所在代码块有效 { let a = 10 } a //a is not definedfor循环计

2017-06-10 15:53:27 402

Doris_rain的博客