- 博客(281)
- 收藏
- 关注
RSS订阅
原创 vue项目部署篇 -线上部署优化
打包注意事项打包完的项目 dist文件夹如果 已经启动服务，此时不能重新打包，（因为文件 在占用），需要停止服务，再进行重新打包。vue打包上线移除 console1、babel-plugin-transform-remove-console比较流行的解决办法是使用 babel 的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插件可以在打包过程中，将...
2020-04-30 01:35:58
1882
原创 [译] socket.io官方文档·上篇
[译] socket.io官方文档·上篇全篇共 17511 字。按500字/分钟阅读，预计用时 35.0 分钟。总访问 1045 次，日访问 4 次。socket.io基于WebSocket协议封装，兼容不支持ws的浏览器采用ajax轮询，socket.io为开发者提供服务端和客户端两套库，无需了解全部ws底层原理，好入门，上手快。学会socket.io后可搭建类似QQ和微信这种即时通信工...
2020-03-19 11:20:12
238
原创 node_redis 中文文档及node_redis 注释笔记(中文版)
node_redis 中文文档及node_redis 注释笔记(中文版)https://github.com/NodeRedis/node_redisredis - a node.js redis client这是node.js的一个完整且功能丰富的Redis客户端。它支持所有的Redis命令，并专注于高性能。Install with:npminstallredisU...
2020-03-18 13:12:09
2865
原创 windows下redis的配置文件(redis.windows.conf)
#redis的配置#Redis默认不是以守护进程的方式运行，可以通过该配置项修改，使用yes启用守护进程daemonize yes#当Redis以守护进程方式运行时，Redis默认会把pid写入redis.pid文件，可以通过pidfile指定pidfile 'E:/xxx/redis/redis_pid/redis.pid'#端口port 6379#绑定主机的ip地址bind...
2020-03-15 21:01:02
1123
原创 111
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Markdown编辑器你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
2020-10-24 11:16:53
252
原创 使用 vue-i18n 切换中英文
vue-i18n 仓库地址：https://github.com/kazupon/vue-i18n兼容性：支持 Vue.js 2.x 以上版本安装方法：（此处只演示 npm）npm install vue-i18n使用方法：1、在 main.js 中引入 vue-i18n （前提是要先引入 vue）import VueI18n from 'vue-i18n'Vue.use(VueI18n)2、准备本地的翻译信息const messag...
2020-10-12 17:02:51
787
原创 用HTML5里的window.postMessage在两个网页间传递数据
估计很少人知道HTML5 APIS里有一个window.postMessage API。window.postMessage的功能是允许程序员跨域在两个窗口/frames间发送数据信息。基本上，它就像是跨域的AJAX，但不是浏览器跟服务器之间交互，而是在两个客户端之间通信。让我们来看一下window.postMessage是如何工作的。除了IE6、IE7之外的所有浏览器都支持这个功能。观看演示数据发送端首先我们要做的是创建通信发起端，也就是数据源”source”。作为发起端，我们可以open一个
2020-08-10 00:47:56
452
原创 前端播放rtmp协议的视频流文件
前端播放rtmp协议的视频流文件最近公司的项目中需要在大屏可视化的页面中的一个位置是视频监控的，需求大概是这样的： 大屏右下角布局中有六个div，每个可以实时播放监控视频 点击某个视频全屏放大， 自动播放 先用图片占个位，大概就是这样，很常见的需求，开发起来还是遇到了一些问题，这里分享一下。我们都知道H5的video标签一共支持三种格式的视频文件：Ogg, MPEG4, WebM,这三种格式对于浏览器的兼容性也不相同。但是video标签肯定是不能直...
2020-08-08 18:01:53
7429
4
原创 vue-video-player的使用总结
由于公司的项目是网上教育的，像网易云课堂那种教育网站，因而会有很多课程需要在线观看的，所以视频插件是必不可少的。由于我用vue开发项目，所以找视频插件也找和vue贴近的。最后选择了vue-video-player。这个视频插件还是挺好用的，好多事件都是可控的，挺方便的。首先 npm installvue-video-player -S;然后再main.js进行配置：然后就可以在组件中使用了。常用参数：然后就可以按需使用一些事件，由于我们项目需要播放的时候进行视频.
2020-08-08 17:02:58
2634
3
原创 前端postMessage和addEventListener踩坑
目标功能：页面一跨域open页面二，页面二通过addEventListener监听到消息后，返回确认信息。页面一通过addEventListener监听页面二发送的确认信息后，将数据包发送给页面二。页面二获取数据包后进行处理。postMessage简介（摘抄自他人博客，如涉抄袭，请联系我）：HTML5提出了一个新的用来跨域传值的方法，即postMessage。我们假设有两个网站，1.com与2.com，我在1.com的页面上通过iframe或window.open或超链接打开了一个2.com的网
2020-08-08 00:16:16
5260
原创 postMessage 两网站通信
前言: 本篇文章我将带大家一起来好好认识一下postMessage,包括它的兼容性,对应的API介绍,以及常见的几个使用场景,希望可以给有同样困惑的盆友们一点启发,给需要用这个技术的同僚们一些帮助.postMessage的定义postMessage是html5引入的API,postMessage()方法允许来自不同源的脚本采用异步方式进行有效的通信,可以实现跨文本文档,多窗口,跨域消息传递.多用于窗口间数据通信,这也使它成为跨域通信的一种有效的解决方案.postMessage的兼容性下图是.
2020-08-07 20:16:17
495
原创 JavaScript中的递归
译者按: 程序员应该知道递归，但是你真的知道是怎么回事么？原文: All About Recursion, PTC, TCO and STC in JavaScript为了保证可读性，本文采用意译而非直译。递归简介一个过程或函数在其定义或说明中有直接或间接调用自身的一种方法，它通常把一个大型复杂的问题层层转化为一个与原问题相似的规模较小的问题来求解，递归策略只需少量的程序就可描述出解题过程所需要的多次重复计算，大大地减少了程序的代码量。我们来举个例子，我们可以用4的阶乘乘以4来定义5的阶乘
2020-07-29 00:45:42
105
原创 JS异步加载的方式
方法一：Script Dom Element 1 2 3 4 5 6 7 8 (function(){ var scriptEle = document.createElement("script"); scriptEle.type = "text/javasctipt"; scriptEle.async = true; scriptEle.src =...
2020-07-26 17:07:01
194
原创 如何提升前端性能（1）——dns预解析
dns全称是：Domain Name System（域名系统），是域名和IP地址相互映射的一个分布式数据库。1 dns？域名解析是把域名指向网站空间IP，让人们通过注册的域名可以方便地访问到网站的一种服务。IP地址是网络上标识站点的数字地址，为了方便记忆，采用域名来代替IP地址标识站点地址。域名解析就是域名到IP地址的转换过程。域名的解析工作由DNS服务器完成。域名解析也叫域名指向、服务器设置、域名配置以及反向IP登记等等。说得简单点就是将好记的域名解析成IP，服务由DNS服务器完成，是把域名解
2020-07-26 15:34:42
683
原创 js 错误监听方法
错误监听过程大概分为两部分，静态资源加载错误和js文本执行错误1：静态资源加载错误的捕获方法方法一：借助于error事件，这个事件既可以静态资源加载出错，也可以监听js执行过程中的错误。具体错误的类型可以根据srcElement属性进行区分，如果监测js执行过程中的错误，注意静态资源的跨域问题。跨域解决方法：后端设置方法与跨域携带cookie方法一致，前端需要在script标签上添加crossorigin="use-credentials"window.addEventListener
2020-07-26 14:51:02
2422
原创 返回出现固定次数的数组元素 - 实战篇
function trimLenArr(arrar, retainLenArr) { /** 功能： 返回出现固定次数的数组元素 arrar 需要修剪的数组 retainLenArr 要返回指定重复数量的数组 */ let res = arrar.reduce((prev, currentValue) => { ...
2020-07-25 23:16:12
123
原创 移动端如何进行rem的适配
网上很多都说会pc网页开发，也就会了mobile网页开发。那么实际呢也是如此，但是对于新手来说却摸不着头脑无从下手，一直纠结于适配的问题，那么这里就来展示下rem适配。展示rem适配代码 //rem适配 (function () { var styleN = document.createElement("style"); var width = document.documentElement.clientWidth/16; styl.
2020-07-23 15:07:03
664
原创 移动端1px边框问题
解决方案一使用rem为单位。 使用js获取dpr值动态计算视口缩放，设置viewport content属性。 计算得到缩放比后，应该对应给html的font-size 乘 回缩放比。 边框使用px为单位，其余元素均使用rem单位，这样视口的缩放就只会影响到px单位。 一劳永逸的解决方案<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title
2020-07-23 12:37:26
162
原创 JS异步之宏队列与微队列
1. 原理图2. 说明JS 中用来存储待执行回调函数的队列包含 2 个不同特定的列队 宏列队：用来保存待执行的宏任务（回调），比如：定时器回调、DOM 事件回调、ajax 回调 微列队：用来保存待执行的微任务（回调），比如：promise的回调、MutationObserver 的回调 JS 执行时会区别这 2 个队列 JS 引擎首先必须先执行所有的初始化同步任务代码 每次准备取出第一个宏任务执行前, 都要将所有的微任务一个一个取出来执行，也就是...
2020-07-22 19:50:36
285
原创 使用chrome开发者工具中的performance面板解决性能瓶颈
前面的话 使用Chrome DevTools的performance面板可以记录和分析页面在运行时的所有活动。本文将详细介绍如何使用performance面板解决性能瓶颈准备【匿名模式】 匿名模式可以保证Chrome在一个相对干净的环境下运行。比如安装了许多chrome插件，这些插件可能会影响我们分析性能表现 使用快捷键ctrl + shift + N即可代码匿名模式下的chrome新标签页【移动设备CPU】 移动设备的CPU一般比台式机和笔记本弱很多。分析页..
2020-07-19 11:27:33
1094
原创 网站PWA升级
渐进式网络应用 ( Progressive Web Apps )，即我们所熟知的 PWA，是 Google 提出的用前沿的 Web 技术为网页提供 App 般使用体验的一系列方案。PWA 本质上是 Web App，借助一些新技术也具备了 Native App 的一些特性。本文将详细介绍针对现有网站的PWA升级效果演示【添加到桌面】【离线缓存】 由于手机录屏选择无法进行离线录制，改由模拟器模拟离线效果概述 PWA 的主要特点包括下面三点： 1、可靠 - 即...
2020-07-18 17:48:13
419
原创 Cookie的使用（js-cookie插件）
js-cookie 官方文档里面就详细的介绍了es5怎么引用，以下是ES6以上的用户一、安装npm install js-cookie --save二、引用import Cookies from 'js-cookie'三、一般使用存到Cookie去// Create a cookie, valid across the entire site:Cookies.set('name', 'value');// Create a cookie t...
2020-07-17 20:00:55
353
原创 pc网页唤起QQ、企业微信、skype、whatsApp等
<div class="test"> 企业微信： <a rel="nofollow" href="wxwork://message?uin=账号&source=100">touck me</a> </div><!-- 微信不可以： --> <div class="test"> 微信： <a rel="nofollow" href="weixin://dl/b...
2020-07-17 16:15:06
2463
2
原创 借助云开发实现小程序支付功能
必备条件1，必须注册微信支付的商户号 2，企业小程序必须通过认证 3，小程序关联微信支付商户号一，小程序关联微信商户1，登录小程序后台，点击关联更多商户号2，关联商户号需要用到appid,点击如下所示的关联更多AppID把我们小程序的appid复制下然后去授权关联我们的微信支付商户号授权完成以后，我们的小程序端会出现下面这样的，点击下确认即可。这样我们就可以成功的关联微信支付商户号了点击下上图...
2020-07-11 23:27:53
432
原创 uni-app 开发小程序的优势（实践分享）
本篇文章总结一下使用 uni-app开发小程序的优点：开发工具，uni-app 有HbuilderX开发工具，代码书写的舒适度远高于 小程序厂家 自己的开发工具。 开发工具集成了 sass / less专业级CSS扩展语言。 uni-app增加了许多实用的接口，比如 【页面通讯】相关的API，这是解决跨窗口调用传参的一把好手。 使用了 Vue.js的语法，编码比小程序原生语法要舒服的多。1.更新视图更加方便；2.可以使用Vue的计算属性；3.可以使用Vuex。以上4个优点是最明显...
2020-07-07 14:20:17
969
原创 MongoDB快速入门，掌握这些刚刚好！
虽说现在关系型数据库还是主流，但是面对某些需求的时候，需要非关系型数据库来补充它，学习一个主流的NoSQL数据库还是很有必要的。MongoDB是一个功能丰富的NoSQL数据库，本文整理了它最常用的部分形成了这篇入门教程，希望对大家有所帮助。简介MongoDB是一个基于分布式文件存储的数据库。由C++语言编写，旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系型数据库和非关系型数据库之间的产品，是非关系型数据库当中功能最丰富，最像关系型数据库的。安装以前写的.
2020-06-27 23:00:09
260
原创 React Loadable中文文档
安装：yarn add react-loadable范例： import Loadable from 'react-loadable'; import Loading from './my-loading-component'; const LoadableComponent = Loadable({ loader: () => import('./my-component'), loading: Loading, }); ...
2020-06-27 20:41:33
3877
原创 React-使用redux-immutable统一数据格式
在header的reducer.js里把header变成immutable对象之后，在组件里获取focused属性就得这样获取：focused:state.header.get('focused') state是一个js对象，state.header是一个immutable对象，所以调用focused这个属性点时候先用.再用.get（），数据获取行为是不统一的。我们需要把state也变成immutable对象而不是js对象。 state是在跟目录的总的reducer.js下创建的，我们需要
2020-06-19 18:53:13
220
原创 Immutable 之redux插件
Part01 Immutable由何而生说immutable之前，首先看下什么是mutable。js在原生创建数据类型即是mutable，可变的。const只是浅层次的防篡改，层级一深就没辙了。js在创建变量、赋值后是可变的。除了基本类型，其他的引用类型，通过变量地址来共享。改变了obj1.a的值，同时也会改变obj.a的值。其实改变的是同一个对象引用。这样共享地址来共享值的好处是节省内存，坏处是稍微不注意就会导致改A坏B的棘手问题。Deep Copy？No！一般的解法就是使用...
2020-06-17 19:49:00
204
原创 用 const 还是用 let？
ES6 里新增了两种声明变量的方式，let 和 const，加上原来的 var，一共就有三种方式来声明变量了。那到底该用哪个呢？关于“尽可能不用 var” 这一点，大家应该没有什么意见分歧（其实还是有少数人不这么想的），关于“是用 let 还是用 const”，社区里主要有两种不同的观点：1. 默认全用 let，只在符合一些写代码的人的主观判断条件的时候用 const，下面举个这样的“主观判断条件”的例子（实际代码中用到 const 的几率大概会是 0.1%）：你能 100%确定该变量永远不会在其.
2020-06-15 11:40:43
1589
原创 深度剖析：如何实现一个 Virtual DOM 算法
作者：戴嘉华转载请注明出处并保留原文链接（#13）和作者信息。目录：1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一：用JS对象模拟DOM树 4.2 步骤二：比较两棵虚拟DOM树的差异 4.3 步骤三：把差异应用到真正的DOM树上 5 结语 6 References1 前言本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法，并且尝试尽量把 Virtual DOM 的算法思路阐..
2020-06-12 17:51:51
98
原创 react中的虚拟DOM
数据驱动原理假如让我们自己实现react中数据驱动视图，我们该怎么做呢？一般人想到的做法是： state 数据 JSX模版 数据 + 模版结合，生成真实的DOM，来显示 state 发生改变 数据 + 模版结合，生成真实的DOM，替换原始的DOM 缺陷：第一次生成了一个完整的DOM片段第二次生成了一个完整的DOM片段第二次的DOM替换第一次的DOM这三步操作都非常耗性能简单的优化：我们应该只替换更新了的部分，而不应该一股脑地替换 state数据 JSX模版
2020-06-12 17:48:20
256
原创 Vue中在哪个生命周期内调用异步请求？（直观）
答：一般来说，可以在，created，mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求。Created的使用场景：如果页面首次渲染的就来自后端数据。因为，此时data已经挂载到vue实例了。在 created（如果希望首次选的数据来自于后端，就在此处发请求）（只发了异步请求，渲染是在后端响应之后才进行的）、beforeMount、mounted（在mounted中发请求会进行二次渲染） 这三个钩子函数中进行调用。因为在这三个钩子函数中，data 已经创建，可以将服务端
2020-05-25 01:11:04
3035
1
原创 git clean的用法
git cleangit clean命令用来从你的工作目录中删除所有没有tracked过的文件git clean经常和git reset --hard一起结合使用. 记住reset只影响被track过的文件, 所以需要clean来删除没有track过的文件. 结合使用这两个命令能让你的工作目录完全回到一个指定的<commit>的状态用法git clean -n是一次clean的演习, 告诉你哪些文件会被删除. 记住他不会真正的删除文件, 只是一个提醒git clean
2020-05-24 14:01:08
173
原创 vue路由传参的三种基本方式
现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中：<li v-for="article in articles"@click="getDescribe(article.id)">methods：方案一： getDescribe(id) {// 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describe/${...
2020-05-20 21:49:22
90
原创 vertical-align属性
一、为什么要写这篇文章今天看到一个问题：两个div 都设置 display：inline-block，正常显示；但是在第二个div中加一个块级元素或者内联元素，显示就变了个样，为什么？<meta charset="utf-8"/><style>div{ width: 100px; height: 100px; border:1px solid red; display: inline-block;}.align{/*
2020-05-19 00:31:53
276
原创 纯CSS制作各种图形(多图预警)
今天在国外一网站(The Shapes of CSS)看到的，看了一下 css，也不复杂，只是平时没有用心去思考~用心思考~埋头赶路~~Square(正方形)#square { width: 100px; height: 100px; background: red;}Rectangle(矩形)#rectangle { width: 200px; height: 100px; background: red;}Ci...
2020-05-19 00:11:21
511
原创 css伪元素:before和:after用法详解
css的伪元素，之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。如下图，是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查。css有一系列的伪元素，如:before，:after，:first-line，:first-letter等，本文就详述一下:before和:after元素的使
2020-05-19 00:07:18
4137
原创 前端注册登录的业务流程 - vue篇
项目中有一些路由是需要登录才可以进入的，比如首页，个人中心等等有一些路由是不需要登录就可以进入，比如登录页，注册页，忘记密码等等那如何判断路由是否需要登录呢？就要在路由JS里面做文章登录状态验证？如项目是前后端分离开发，在这介绍vue开发的移动web项目->微信朋友圈前端登录注册向后台发送请求，登录成功后台返回登录者用户信息，并携带 token值进行存储到 cookie 当中用户访问后台的 API 需要携带 token字段验证信息和后台 session进行验证判断用户是否登录？.
2020-05-12 14:32:09
1362
原创 Vue-cli 中为单独页面设置背景图片铺满全屏的方法
<template> <div id="logo"> </div></template><script> import meadiaurl from '../../api/mediaurl' export default { name: "logo"</script><style scoped> #logo{ background: url("../../a.
2020-05-10 17:30:29
2030
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人