自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

开心大表哥

在前端大神的道路上越走越远

原创 vue-cli4.0+nodejs多个项目共用组件动态打包单个项目

前言: 公司经常会有一些活动,为了配合活动开发人员需要开发一些h5页面来配合活动,刚开始活动不多,所有活动页面都放在一个项目目录下,webpack共用一个固定打包入口,对路由(vue-router)和状态管理(vuex)进行模块划分,不同的活动页面通过不同的路由路径来加载。 随着活动项目增多,页面...

2019-12-21 21:28:07 749 0

原创 全栈式开发,前端工程化,以nodejs,eggjs为服务器语言,mysql为数据库,vue,vuex,wangeditor,i18n,webpack前端架构服务器端渲染ssr支持seo的博客网站

前言 下面介绍本人开发的个人博客,希望通过开源的方式一起学习和进步! 1. 背景 该项目为一个学习型的博客网站案例,毕竟每个it工程师都想有一个自己的博客嘛,适合初中级前端工程师;项目已经部署在阿里云上,已经比较完整了,本地下载代码和安装好对应的环境,运行即可以获得线上的效果。由于项目涉及到服务器...

2019-05-29 19:35:20 473 2

原创 从0到1架构webpack+vue前端项目,你自己搭建过vue开发环境吗

前言: 作为一个小白,我们经常会迷惘webpack+vue项目究竟要怎样的呢?本次的文章就是为了解答这个问题的,跟着本文的思路你可以很轻易和明白一个简单的webpack+vue项目是怎样构建和运行起来的。源码地址 成果图: 图中左边是项目效果,右边是源码。 下载源码后 1.安装必...

2018-07-07 00:06:04 1766 9

原创 react入门-由vue到react开发的历程

待续

2019-09-30 09:38:59 197 1

原创 gitlab-ci前端在阿里云实现nodejs可持续化集成部署

前言 不甘心当一个切图仔,所以什么都要学一下;可持续化集成是一个项目工程架构的问题;但在这篇文章中我将它缩小到了前端的领域内。 必要条件 一台阿里云服务器-2核4G以上(我的心好痛800大洋) 技术栈 linux操作基础 git/github/gitlab nodejs环境基础 步骤 ....

2019-07-04 15:47:07 726 1

原创 vue源码分析系列:用sourcemap调试源码

由于前几篇文章是用vue-cli直接分析的,今天我们学习直接调试vue源码。 安装vue(mac机) 1.在GitHub上克隆官方的vue-地址 2.安装依赖npm install 修改vue项目 1.在package.json script dev 增加--sourcemap指令 "d...

2019-06-12 11:49:36 3623 4

原创 vue源码分析系列四:createElement和update

createElement Vue.js 利用 createElement 方法创建 VNode,它定义在 src/core/vdom/create-elemenet.js 中: // wrapper function for providing a more flexible interface...

2019-06-10 16:18:22 455 0

原创 vue源码分析系列三:render的执行过程和Virtual DOM的产生

render 手写 render 函数,仔细观察下面这段代码,试想一下这里的 createElement 参数是什么 。 new Vue({ el: '#application', render(createElement) { return c...

2019-06-06 13:50:19 182 0

原创 vue源码分析系列二:$mount()和new Watcher()的执行过程

续vue源码分析系列一:new Vue的初始化过程 在initMixin()里面调用了$mount() if (vm.$options.el) { vm.$mount(vm.$options.el);// 挂载dom元素 } $mount()方法定义 vm的原型上本身就定义了一个$mo...

2019-06-05 10:18:56 425 0

原创 vue源码分析系列一:new Vue的初始化过程

import Vue from ‘vue’(作者用的vue-cli一键生成) node环境下import Vue from 'vue'的作用是什么意思? 在 NPM 包的 dist/ 目录你将会找到很多不同的 Vue.js 构建版本。这里列出了它们之间的差别: 具体参考:官网...

2019-06-04 10:50:25 930 1

原创 详细理解重绘与回流/重排的过程

前言:重绘与回流是由于浏览器的再次渲染所引起的一个话题,所以我们需要先了解浏览器的渲染过程; 一个前端页面无非就是有hmtl、css、JavaScript组成的。 通常来说,渲染引擎会解析HTML文档来构建DOM树,与此同时,渲染引擎也会用CSS解析器解析CSS文档构建CSSOM树。接下来,DOM...

2019-05-21 10:53:59 842 0

原创 vue使用moment.js经webpack打包后超级大的原因和解决方案

Moment.js 是一个 JavaScript 日期处理类库,用于解析、检验、操作、以及显示日期,使用起来十分方便。 但是它经过webpack打包之后会变得十分的大。 我们做一下对比: 测试版本:“moment”: “^2.17.1”, 没import moment from 'mom...

2019-01-29 15:34:21 2682 3

原创 阿里云轻量应用服务器实例id找不到无法备案

阿里云轻量应用服务器实例id找不到无法备案 最近买了一个轻量应用服务器,做了一个个人网站,感觉做得不错,所以想将域名备案了,增加百度排名。 于是去备案: 结果找不到实例id。 谷歌、百度很久都找不到答案;最终只能打电话问客服了。 阿里云客服给出来的答案是我买的是香港的服务器;想要备案只能是中国大...

2019-01-06 10:33:22 3217 9

原创 linux移动文件到另一个文件夹

复制指定目录下的全部文件到另一个目录中 1.文件及目录的复制是经常要用到的。linux下进行复制的命令为cp。 假设复制源目录 为 dir1 ,目标目录为dir2。怎样才能将dir1下所有文件复制到dir2下了 如果dir2目录不存在,则可以直接使用 cp -r dir1 dir2 即可。 如果d...

2018-12-25 17:30:12 11417 2

原创 支付宝小程序跳转到h5页面web-view

支付宝小程序跳转到h5页面web-view 基础库 1.6.0 开始支持,低版本需做兼容 组件是一个可以用来承载H5网页的组件,会自动铺满整个小程序页面。 web-view 要渲染的H5网页URL。H5网页URL需要登录小程序管理后台-小程序详细-设置中,进行H5域名白名单配置 示例代码: &a...

2018-12-25 15:10:03 13316 1

原创 支付宝小程序复制到剪贴板

支付宝小程序复制到剪贴板 my.getClipboard 获取剪贴板数据。 Page({ data: { text: '3.1415926', copy: '', }, handlePaste() { my.getC...

2018-12-25 13:50:50 972 0

原创 nodejs egg多静态文件入口配置

由于egg多静态资源入口在一开始的时候是没有的,是后来增加的;但是文档写得不是太清楚所以小白不容易弄懂。 在config.default.js文件中增加这个,将项目根目录下的public、publicData这两个文件夹作为静态资源入口;运行的时候egg会将这两个文件夹的资源放到prefix: &...

2018-12-19 08:03:08 3189 2

原创 Mac上传文件到阿里云的Linux服务器,linux下载文件到Mac,unzip/zip压缩和解压文件

1.打开默认终端,左上角选择新建远程连接 2.选择安全文件传输(sftp) 2.1.点击右边服务器下的加号添加你要连接的远程服务器ip地址 2.2.添加成功后右边服务器列表会出现你新加的这个ip地址,然后选中它;点击连接。 3.首次连接一个服务器会让你确认(Are you sure you ...

2018-12-17 15:47:16 2347 2

原创 阿里云部署nodejs,公网访问不了,域名不加端口号访问

背景: 我买的阿里云服务器是香港的CentOS 7.3(便宜) 已成功安装了nodejs 操作: 1.新建项目文件example.js cd ~ touch example.js 2.编辑example.js文件 vi example.js 2.1.输入i,进入编辑模式,将下面代码(简单的no...

2018-12-17 13:44:10 1860 0

原创 nodejs连接mysql报错:Client does not support authentication protocol requested by server; consider upgrad

由于本人是前端,mysql只是偶尔做一下小项目会用到,大概一年没有用了。 今天用mac通过brew下载了一个8.0.12版本的mysql;然后用egg进行连接,egg是阿里封装的一个nodejs框架。 下载到本地的mysql;初始密码我是留空的。所以在nodejs项目中配置mysql连接数据的时候...

2018-11-28 17:45:08 2315 3

原创 vue elementUi tree 懒加载使用详情

背景: vue下使用elementUI 文档: http://element-cn.eleme.io/#/zh-CN/component/tree#tree-shu-xing-kong-jian 需求: 只保存二级节点中选中的数据;不保存一级节点选中的数据。 效果: 数据来源: 后台提供两个接口...

2018-11-21 11:17:04 15085 4

原创 MAC设置环境变量PATH和alias创建快捷键

Mac系统的环境变量,是由下面这几个个文件共同控制的,优先顺序为: /etc/profile /etc/paths ~/.bash_profile ~/.bash_login ~/.profile ~/.bashrc /etc/profile和/etc/paths是系统级别的,系统启动就会加载,后...

2018-11-20 19:12:04 750 0

原创 推荐一个十分实用的VUE瀑布流插件Masonry

Masonry是最流行的瀑布流插件之一,配置简单,功能强大,在Github上收获了1.3w+ stars。如果你想使用瀑布流提升网站体验,Masonry将是不错的选择。 啥是瀑布流: 是比较流行的一种网站页面布局,视觉表现为参差不齐的多栏布局,随着页面滚动条向下滚动,这种布局还会不断加载数据块并附...

2018-11-08 11:53:08 14135 8

原创 快应用快速开发攻略和踩坑讲解

快应用是什么: 快应用是基于手机硬件平台的新型应用形态; 标准是由主流手机厂商组成的快应用联盟联合制定; 快应用标准的诞生将在研发接口、能力接入、开发者服务等层面建设标准平台;以平台化的生态模式对个人开发者和企业开发者全品类开放。 优势: 无需安装 即点即用-流畅; 能添加到桌面; 区别于原生Ap...

2018-11-07 15:11:33 435 2

原创 js将带有日期格式的数组对象按时间降序重新排列,最后打印数组对象的日期

需求:后台将一个带有日期格式(不是时间戳)的数组对象给到前端,前端打印这个数组对象的日期时需要按时间降序排列 思路: 1.先将对象中的日期字段变成时间戳,然后通过sort()来排序,接着将对象中的时间戳变成日期; 2.先给对象增加一个字段publishTimeNew,用来保存时间戳;然后通过sor...

2018-10-30 18:01:10 7237 3

原创 js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签的正则公式

js获取富文本中的第一张图片url正则公式及去除字符串里面的html标签 后台发来一个富文本字符串里面可能包含了0、1、2、3…图片标签(img),我们的任务是获取这个字符串里面第一张图片的url,如果没有图片则放回空 var imgUrlFun = function(str){ ...

2018-10-30 13:51:25 3788 2

原创 前端算法:给定一个整数数组和一个目标值,找出数组中和为目标值的两个数、判断一个整数是否是回文数

<!-- 给定一个整数数组和一个目标值,找出数组中和为目标值的两个数。 你可以假设每个输入只对应一种答案,且同样的元素不能被重复利用。 示例: 给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[1] = 2 + 7...

2018-10-24 11:12:55 574 2

原创 解析url中的#、&、?的作用和意义

twitter改版,一个显著变化,就是URL加入了"#!"符号。比如,改版前的用户主页网址为 http://twitter.com/username 改版后,就变成了 http://twitter.com/#!/u...

2018-10-11 15:36:15 2243 0

原创 js获取url地址中的每一个参数,方便操作url的hash及正则表达式的方式获取在url上参数

js获取url地址中的每一个参数,方便操作url的hash 值得收藏 <html> <body> <script> /...

2018-10-11 15:32:26 3625 0

原创 JavaScript引擎运行原理解析

1. 什么是JavaScript解析引擎? 简单地说,JavaScript解析引擎就是能够“读懂”JavaScript代码,并准确地给出代码运行结果的一段程序。比方说,当你写了 var a = 1 + 1; 这样一段代码,JavaScript引擎做的事情就是看懂(解析)你这段代码,并且将a的值变...

2018-09-30 10:16:41 2735 0

原创 正则表达式的高阶使用技巧

零宽断言: 零宽断言是正则表达式的一种方法,用于查找在某些内容(但并不包括这些内容)之前或者之后的东西,也就是说他们像\b(匹配一个单词边界,也就是单词和空格间的位置,正则表达式的匹配有两种概念,一种是匹配字符,一种是匹配位置,这里的\b就是匹配位置,例如,“er\b”可以匹配“never”中的...

2018-09-26 15:30:15 539 0

原创 Mac设置别名alias和全局变量

设置.bash_profile 1.打开终端Terminal 2.输入命令cd ~到用户主目录 cd ~ 3.用vim编辑.bash_profile文件 vim .bash_profile 或者直接打开再编辑: open -e .bash_profile 如果没有.b...

2018-09-25 15:07:20 1993 0

原创 抓包神器charles使用与破解实战

简介: charles是一个HTTP代理服务器,HTTP监视器,反转代理服务器,当浏览器连接Charles的代理访问互联网时,Charles可以监控浏览器发送和接收的所有数据。它允许一个开发者查看所有连接互联网的HTTP通信,这些包括request, response和HTTP headers ...

2018-09-19 15:39:05 1420 2

原创 ES6中class的getter和setter在继承中踩坑

在 Class 内部可以使用get和set关键字, 对某个属性设置存值函数和取值函数, 拦截该属性的存取行为。 在 Class 内部的get、set用法,看起来比较舒服,而且可以写同名函数了。 class MyClass { constructor() {} get prop() { re...

2018-09-19 15:19:45 3183 1

原创 解读es6 class 中 constructor 方法 和 super 的作用

ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的。 类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。 //定义类 class Point { constructor(x, y) { ...

2018-09-19 15:06:34 5780 6

原创 js通过UA判断ios、android、微信、qq、qq浏览器

function isIPhone(){ //判断是否是ios var u = navigator.userAgent; var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端 return isIOS...

2018-09-19 11:15:13 2168 0

原创 多个贝塞尔曲线在同一个animate动画中的实践

贝塞尔曲线(Bézier curve): 又称贝兹曲线或贝济埃曲线,是应用于二维图形应用程序的数学曲线。一般的矢量图形软件通过它来精确画出曲线,贝兹曲线由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋,我们在绘图工具上看到的钢笔工具就是来做这种矢量曲线的。贝塞尔曲线是计算机图形学中相当重...

2018-09-19 10:59:49 815 0

原创 css3鼠标点击出现波浪动态效果案例现场

(function() { let x, y; let index = 0; let screenSizeWidth = (′body′).w...

2018-09-13 10:51:50 2420 6

原创 用benchmark测试es6的extends属性的性能

用benchmark测试es6的extends属性的性能 新建一个文件叫classExtend.js放以下代码: 'use strict'; const Benchmark = require('benchmark'); const benchmarks...

2018-08-27 22:26:43 173 1

原创 谷歌浏览器扩展程序一键解决本地开发跨域问题,让你不用乱mock数据

谷歌浏览器扩展程序一键解决本地开发跨域问题,让你不用乱mock数据 1.在谷歌浏览器中打开它的网上应用商店 (需要翻墙); 2.然后在搜索框中输入:Access-Control-Allow-Origin,在回车搜索一下,就会有图片的结果; 3.在上图第一个工具中点击添加至Chrome进行...

2018-08-27 21:56:26 400 0

提示
确定要删除当前文章?
取消 删除