烟海之蓝_个人页

前端接入pingpp、stripe支付

pingpp 支付接入 安装npm i pingpp-js -S import Pingpp from 'pingpp-js' 调取后端提供的接口，获取pingpp++支付对象 Pingpp.createPayment(data, function (result, err) { that.

vue-element 项目开发双语网站

安装npm i vue-i18n -S 建立lang.js VueI18n from 'vue-i18n' elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang elementZhLocale fro...

BFC 布局概念总结

BFC 块级格式化上下文 布局规则 内部的Box会在垂直方向，一个接一个的放置。 Box垂直距离有margin决定，属于同一个BFC的两个相邻Box的margin垂直方向上回发生重叠。 每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。

Vue SPA项目在非网站根目录的部署方法

在开发vue项目的时候，大多都是spa单页面应用，需要部署到服务器根目录；但有时候我们需要部署到其他路径，例如:/app/内怎么才能实现呢？ 1、修改配置文件 config/index.js { build: { assetsPublicPath: '/app/', } } router/index.

JS 中require和import总结

都是为了js模块化编程 遵循规范 require 是AMD规范引入方式 import 是es6的一个语法标准，需要转换成es5的语法才能兼容浏览器 调用时间 require是运行时调用，所以require理论上可以运用在代码的任何地方 import 是编译时调用，所以必须放在文件头部...

Symbol() 小记

es6中引入了新的基础数据类型：Symbol,唯一的标识。那么在es6中，数据类型就变成了：Number、String、Boolean、Null、undefined、Symbol、object7种 使用方式 // 通过Symbol()函数来创建一个Symbol实例 var s = Symbol()...

Promise总结

Promise是一种异步编程解决方案，es6中原生提供了Promise对象有三种状态：pending、resolved、rejected。状态一旦改变，就不会再变。 基本用法 var p = new Promise(function(resolve, reject){ resolve('成功') // or reject('失败') }) p.

vue视图更新原理、nextTick()原理

vue视图更新原理 追踪变化 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

js new 方法总结

new一个对象的过程 创建一个新对象 var obj = New Object() 设置新对象的__proto__指向构造函数的prototype obj.__proto__ = ClassA.prototype 改变this的指向，把this指向新创建的对象 ClassA.

js 继承

构造函数绑定 function Animal() { this.species = '动物'; } function Cat(name,color){ Animal.apply(this, arguments); this.

js变量提升总结

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。 例1 var name = 'World!'; (function () { if (typeof name === 'undefined') { var name = 'Jack'; console.

全局订阅发布模式

var Event = (function () { var clientList = {}, listen, trigger, remove listen = function (key, fn) { if (!cli...

理解闭包

闭包：能够访问另一个函数作用域的变量的函数 function outer() { var a = 2; var inner = function() { console.log(a) } return inner // inner就是一个闭包，因为它能够访问outer函数的作用域的变量 } 很多人会搞不懂匿名函数与闭包的关系，实际上，闭包是站在作用域的角度上来定义的，因为inner访问到outer作用域的变量，所以inner就是一个闭包函数。

npx 使用方法

Node自带npm模块，所以可以直接使用npx命令，如果不能用，需要手动安装npm install -g npx 调用项目安装的模块 npx 想要解决的问题，就是调用项目内部安装的模块。 npm install -D mocha 一般来说，调用 Mocha ，只能在项目脚本和 package.json 的scripts字段里面， 如果想在命令行下调用，必须像下面这样。

ES6 const 介绍

使用const语法创建变量，一旦创建成功，就不能改变它们的值，因此我们称为常量。如果你尝试改变一个const变量，则会抛出异常 const a = 2; a = 3 VM27863:1 Uncaught TypeError: Assignment to constant variable. at <anonymous>:1:3 原理：阻隔变量所对应内存地址被改变 ES6在对变量的引用进行读取时，会从该变量当前所对应的内存地址所指向内存空间中读取内容。

require.context 基本用法

`require.context`函数接受三个参数 - directory {String} -读取文件的路径 - useSubdirectories {Boolean} -是否遍历文件的子目录 - regExp {RegExp} -匹配文件的正则 ``` 语法: require.

使用vue-cropper裁剪正方形上传头像

引用方式 在组件内使用 import { VueCropper } from 'vue-cropper' components: { VueCropper, }, main.js里面使用 import VueCropper from 'vue-cropper' Vue.

vue项目开发markdown编辑器

使用mavon-editor编辑器 安装 npm install mavon-editor --save 在main.js中引入 全局引入 import mavonEditor form 'mavon-editor' import 'mavon-editor/dist/css/index.

移动端长列表滚动优化

当移动端无限加载列表的滚动的时候，如果不做处理就会出现性能问题，会出现卡顿等问题，这时候就需要去优化。 思路 可以把数据分成一屏一屏加载，初始化加载2屏数据 往下滚动监测到滚动到底部后，添加一屏数据，同时把第一屏数据移除掉，并改变滚动条的位置 往上滚动监测到滚动到顶部后，把之前移除掉的数据添加到...

Object.freeze() 方法小记

在vue中的应用：如果你有一个巨大的数组或Object，并且确信数据不会修改，可以使用 Object.freeze() 方法冻结该数据，这样vue就不会对该对象的getter和setter做转换，从而让性能得以大幅提升。

排序方法、其他常用的方法

快速排序 function fast (arr) { if (arr.length <= 1) { return arr } let left = [] let right = [] let p = arr.

移动端开发优化总结

首屏数据请求提前，避免 JavaScript 文件加载后才请求数据 为了进一步提升页面加载速度，可以考虑将页面的数据请求尽可能提前，避免在 JavaScript 加载完成后才去请求数据。通常数据请求是页面内容渲染中关键路径最长的部分，而且不能并行，所以如果能将数据请求提前，可以极大程度上缩短页面内容的渲染完成时间。

node+express 服务配置vue-router history路由模式

导语：在vue、react等单页面应用中，路由可以为history模式，就像正常多页面网页地址一样，没有#hash标志，看起来更美观。 这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

常用命令总结

linux 切换用户 sudo -i 远程登录服务器 ssh root@公网ip 然后 输入密码 查看当前路径 pwd 删除文件 rm 文件名 rm -rf 文件夹名 查看当前网络信息 ifconfig mkdir name 创建name的目录 cp file1 file2 复制一个.

vue-router根据权限动态添加相关路由

在有权限的项目里，需要根据权限动态添加路由，使用addRoutes方法 import Vue from 'vue' import Router from 'vue-router' import Store from '.

七牛云存储开发图片上传功能

1、注册登录七牛云，并实名认证，对象存储控制台，新增bucket存储空间 2、nodejs服务器安装npm install qiniu --save const common = require('.

div高度自适应宽度按比例放大

导语：我们经常会碰到这样的需求：要求div高度跟随宽度变化而变化。在手机端，一张图片作为div的背景图，图片宽高比不一致，并要求div宽高比与图片宽高比一致；怎么实现这种需求呢？ 原理 padding-top: 50%;用这个属性的百分比，padding-top的百分比是相对于父元素的宽度，比如：...

node+mongo + vue 开发管理平台部署到阿里云服务器入坑之旅

导语：使用vue+element-ui开发前端，node.js+express+mongodb开发后端，部署到阿里云服务器（镜像信息Node.js）。 1、申请阿里云服务器 可以申请一个最便宜的用来练手。

react-app-reqired 使用方法

导语：项目技术框架react+antd-mobile,先期按照官网配置antd-mobile按需加载，使用的是react-app-reqired，由于版本升级，最新版的react-app-reqired不能更细致的去自定义webpack配置。

vuex本地持久化插件 vuex-persist

在vue项目中使用vuex本地持久化能更方便我们对数据的管理，不需要写localStorage或cookie等集合方法,统一用store来管理全局数据。 直接上代码 import Vue from 'vue' import Vuex from 'vuex' import VuexPersisten...

nodejs + express + jwt token鉴权登录用例

导语 token鉴权登录的优势：无状态、可以跨域、可以防止csrf、性能好（每次请求不用去服务器查询相应的session），客户端只需要将token存入本地，每次访问服务端headers加上token即可 实现 安装jwt npm install jsonwebtoken --save 生成...

axios拦截器取消当前接口发送

取消请求发送 -//取消请求 var CancelToken = axios.CancelToken; var source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.

使用node.js搭建web服务器

webstorm激活

正则表达式应用——实例应用

事件触发器---dispatchEvent、fireEvent

策略模式设计表单校验

阿里云 oss JavaScript客户端签名文件上传 vue2.0

官方文档地址https://help.aliyun.com/document_detail/31925.html?spm=5176.doc31923.6.631.SAJk7p 官方文档内给的demo是传统的代码引入方式，用到的模块有crypto、hmac、sha1、base64、plupload。

form 表单提交数据小记

form表单传统的提交方式，会跳转页面，需要做处理才行，可以在form上配置提交方式、提交地址，可以用submit、和button提交<form id="formid" name= "myform" method = 'post' action = 'user_login_submit.

vue2.0中引入wangEditor2 步骤与坑

安装：官方给出了如下安装方式点击 https://github.com/wangfupeng1988/wangEditor/releases 下载最新版 使用git下载： git clone https://github.

网页图片加载loading效果实现

mac 配置本地apache

1、mac本身自带apache服务器，只需要修改3个文件的配置即可 2、打开finder前往文件夹 输入/etc 找到apache2文件夹下的httpd.conf 修改文件中的代码为 #AllowOverride none #Require all denied #.

display:flex; 布局

手机实现1像素边框显示

循环遍历删除数组中不符合条件的元素

跨域问题解决方案

html5样式布局技巧总结

1、 text-align-last:justify; 将一行字体两端对齐。在pc端可以正常显示，app里兼容不好 text-indent:5px; 首行缩进5排序； -moz-user-select:none;    //禁止复制文本 -webkit-user-select:none;

用rem实现响应式页面开发

rem是什么？     rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem大家一定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。

微信JSSDK录音功能开发遇到的坑

1、在进行微信网页录音功能开发的时候，微信jssdk初始化一定要把用到的方法写在isApiList中，不然调用方法起不到效果。 2、微信录音前会弹出“是否允许录音”，点击是才会执行wx.startRecord函数success回调，否则执行fail。所有，要把微信录音中的动作写在succe