u010227042的博客

转载 Object.defineProperty()

Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。备注：应当直接在Object构造器对象上调用此方法，而不是在任意一个Object类型的实例上调用。const object1 = {};Object.defineProperty(object1, 'property1', { value: 42, writable: false});object1.property1 = 77;// throw...

转载 vue自定义指令

除了核心功能默认内置的指令 (v-model和v-show)，Vue 也允许注册自定义指令。注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。举个聚焦输入框的例子，如下：当页面加载时，该元素将获得焦点 (注意：autofocus在移动版 Safari 上不工作)。事实上，只要你在打开这个页面后还没点击过任何内容，这个输入框就应当还是处于聚焦状态。现在让我们用指令来实现这个功能：// 注...

转载 MVVM架构~mvc,mvp,mvvm大话开篇

百度百科的定义：MVP是从经典的模式MVC演变而来，它们的基本思想有相通的地方：Controller/Presenter负责逻辑的处理，Model提供数据，View负 责显示。作为一种新的模式，MVP与MVC有着一个重大的区别：在MVP中View并不直接使用Model，它们之间的通信是通过Presenter (MVC中的Controller)来进行的，所有的交互都发生在Presenter内部，而在MVC中View会从直接Model中读取数据而不是通过 Controller。在MVC里，View.

转载 websocket安全分析

摘要 WebSocket为web应用和服务提供了双向实时通信信道，这篇论文概述了Websocket协议和这个API，并且描述了它提供的便利。本文的主要贡献是回顾和分析了与WS相关的安全问题，讨论了可能的解决方法以及部署WS的最佳实践。同样，这篇论文提出了在web浏览器中应该有一些安全的特性去余额宝用户的安全。浏览器供应商在提供安全特性方面充当着重要角色。WS至今还没有标准化，但是WS的利用会在近几年飞速发展，总的来说，WS解决了通信问题，但不是安全问题，一些开放的问题存在，但是如果有好的设...

转载 WebSocket数据加密——AES与RSA混合加密

前言　　之前在写“一套简单的web即时通讯”，写到第三版的时候没什么思路，正好微信公众号看到一篇讲API交互加密，于是就自己搞了一套AES与RSA混合加密，无意中产生应用在WebSocket想法，好在思路都差不多，稍微改动一下就能实现，特意写这篇博客记录下来　　WebSocket是HTML5 开始提供的一种浏览器与服务器进行全双工通讯的网络技术，属于应用层协议。它基于 TCP 传输协议，并复用 HTTP 的握手通道。　　1、建立连接，客户端通过 HTTP 请求与服务端协商升级协议。协议升级完成后

转载 websocket原理、加密、解密

websocket是什么?websocket是一套类似于http的协议。扩展：　　http协议：\r\n分割、请求头和请求体\r\n分割、无状态、短连接。　　websocket协议：\r\n分割，创建连接后不断开、验证+数据加密；websocket本质：　　就是一个创建连接后不断开的socket,当连接成功之后：　　客户端（浏览器）会自动向服务端发送消息，包含：Sec-WebSocket-Key: iyRe1KMHi4S4QXzcoboMmw==　　服务端接收之后，会对于该.

转载 图解 Monad

http://www.ruanyifeng.com/blog/2015/07/monad.html

转载 详解CSS中:nth-child的用法-已整理

前端的哥们想必都接触过css中一个神奇的玩意，可以轻松选取你想要的标签并给与修改添加样式，是不是很给力，它就是“:nth-child”。下面我将用几个典型的实例来给大家讲解:nth-child的实际用途：Tips：还用低版本的IE浏览器的哥们请绕过！:nth-child(2)选取第几个标签，“2可以是你想要的数字”.demo01 li:nth-child(2){background:#090}:nth-child(n+4)选取大于等于4标签，“n”表示从整数，下同点此查看实例展示

转载 NodeJS中的module概念以及module.exports和exports的区别

NodeJS为js引入了模块化的一些概念，html里面可以引入js或css，甚至css也可以通过@import来引入其他css文件，而JS一直缺少这个机制，这使得JS很难像其他语言如java/python/php那样来编写模块化的应用程序。因此ES6以及NodeJS都对这方面特性做了增强。NodeJS为每个单独的JS文件生成了默认的Module对象，该对象用来表示文件执行上下文。我们先来看看module对象（http://www.commonjs.org/specs/modules/1.0/）究竟是

转载 Flex 布局教程：实例篇

上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。一、骰子的布局骰子的一面，最多可以放置9个点。下面，就来看看Flex如何实现，从1个点到9个点的布局。你可以到codepen查看Demo。如果不加说明，本节的HTML模板一律如下。.

转载 Flex 布局教程：语法篇

网页布局（layout）是 CSS 的一个重点应用。布局的传统解决方案，基于盒状模型，依赖display属性 +position属性 +float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Fle...

转载 浅谈CSS3中display属性的Flex布局

最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex1 .container {2 display: flex;3 flex-direction: column;4 align-items: center;5 background-color: #b3d4db;6 }编译之后的效果很明显，界面的布局也很合理，看起来很清晰。那么究竟这个属性是干嘛用的呢？　　Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状

原创 CSS3 transform 属性

转载 $nextTick 的作用

为什么要用nextTick请看如下一段代码new Vue({ el: '#app', data: { list: [] }, mounted: function () { this.get() }, methods: { get: function () { this.$http.get('/api/article').then(function (res) { this.list = res.data.data.list...

转载 浅析虚拟dom原理并实现

背景大家都知道，在网页中浏览器资源开销最大便是DOM节点了，DOM很慢并且非常庞大，网页性能问题大多数都是有JavaScript修改DOM所引起的。我们使用Javascript来操纵DOM，操作效率往往很低，由于DOM被表示为树结构，每次DOM中的某些内容都会发生变化，因此对DOM的更改非常快，但更改后的元素，并且它的子项必须经过Reflow / Layout阶段，然后浏览器必须重新绘制更改，这很慢的。因此，回流/重绘的次数越多，您的应用程序就越卡顿。但是，Javascript运行速度很快，虚拟DOM是

转载 vue、react、angular三大框架对比 && 与jQuery的对比-已整理

vue与react　　vue和react是当前最火的两个前端框架，vue的发展很快，但是目前来说，react的生态系统会更强大，世界上使用这个框架的人也很多。 另外，react是facebook官方维护的， 而vue是尤雨溪本人维护的。 并且在其他周边库，如react的react-rouer和redux，是react社区在维护的。 而vue的vuex和vue-router都是尤雨溪在维护的。1、都在使用 Virtual DOM，当然，不得不说，vue的虚拟DOM一定是从react这里模仿的，但是..

转载 理解vue中的插槽------slot与slot-scope-已整理

vue当中的插槽，指的即是slot，是组件当中的一块HTML模板。该模板是否显示，以及如何显示由其父组件说了算。不过插槽显示的位置是由子组件决定 ，你将slot写在组件template的哪块，父组件传过来的模板将来就显示在哪块！单个插槽单个插槽是vue官方的叫法。你也可以叫它默认插槽。另外因为该插槽不用设置name属性，也可以称其为匿名插槽。先来看一个例子。父组件：<template> <div> <h3>我是一个父组件..

转载 Chrome 和 Chromium 区别

ChromiumChromium 官网：https://www.chromium.orgChromium 源码：https://github.com/chromium/chromiumChromium是谷歌的开源项目，由开源社区维护，拥有诸多尖端优势。拥有众多的版本包括Windows、Mac、Linux，几乎每天都在进行更新，版本不稳定。国产的所有 “双核浏览器”，都是基于 Chromium 开发的，甚至 Chrome 也是基于它。我们下载的 Chromium 浏览器都是其源码未经修

原创 vue 项目部署 nginx.conf 配置

upstream api_server { server ip:port;}server { listen 8090; server_name 域名; location / { root /usr/share/nginx/html/yqpc; index index.html index.htm; } location ~* ^/(api|au...

转载 阿里云cdn用法

最近公司图片加载缓慢，所以用到cdn，其实cdn原理就是智能选择最优服务器缓存加载图片，就和数据库添加索引查找比没添加索引查找的比较快，我为什么这么说，cdn其实你可以把它当做索引，我去请求页面cdn是按照我物理ip最近的服务器缓存为我提供服务，如果这台服务器不具有我需要的东西，他会像金字塔一样一级一级向上递交，然后这台最近服务器会回复我想要的页面。cdn还提供ssl加密和解密的加速和网页压缩传递，不只是这样，最智能化在于取缓存数据同时还负责和源站点进行内容同步。1.首先我们需要先定制cdn..

转载 JS-----join函数用法

无意中在网上看到一个关于join比for循环更有效率的说法。虽然不明白为什么，先记一笔。join函数用于数组。返回值为一个字符串。实现的效果就是将数组连成自己想要的字符串，当然是有规律可循的字符串。给一个简单的例子。 1 2 vararray=[1,2,3]; varresult=array.join(".") 结果为：result="1.2.3";当然，如果你想画一个表格也是可以的 1 2 ..

转载 JS --- reduce()函数

定义：reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。对空数组是不会执行回调函数的。案例计算数组总和var num = [1,2,3,4,5];var res = num.reduce(function(total,num){ return total+num; //return total + Math.round(num);//对数组元素四舍五入并计算总和},0);console.log(res)；//1.

转载 修改 nginx 启动默认端口

nginx 解压目录下的 conf 目录下的 nginx.conf 修改对应端口

转载 Linux 查看端口使用情况

之前查询端口是否被占用一直搞不明白，问了好多人，终于搞懂了，现在总结下：1.netstat -anp |grep 端口号如下，我以3306为例，netstat -anp |grep 3306（此处备注下，我是以普通用户操作，故加上了sudo，如果是以root用户操作，不用加sudo即可查看），如下图1： 图...

转载 centos7安装nginx 报./configure: error: C compiler cc is not found

CentOS 7 下安装nginx执行配置命令./configure时提示以下错误： 解决：执行以下命令：yum-yinstallgccgcc-c++autoconfautomakemake 上述安装成功后在尝试安装 显示安装成功...

转载 LINUX下安装卸载软件

1、源代码包的安装 gzip -d apache_1.3.20.tar.gz （解压） tar xvf apache_1.3.20.tar （解包） cd apache_1.3.20 ./configure （配置） ----./configure --help（查看configure选项） make （编译） make install （安装） make cle...

转载 linux下安装nginx

linux版本：CentOS7 64位【yum 安装最新版nginx：https://www.cnblogs.com/xxoome/p/7256214.html】在安装nginx前首先要确认系统中安装了gcc、pcre-devel、zlib-devel、openssl-devel。Linux下检查是否安装过某软件包：http://www.cnblogs.com/xxoome/p/5866553.html安装命令：yum -y install gcc pcre-devel zlib-de

转载 JavaScript-Boolean数据类型及其比较

Boolean数据类型，即布尔数据类型，只有两个值，分别是true和false。!: 一个叹号是取反，首先将值转化为布尔类型的，然后再取反console.log(!3); // false -> 先把3转化为boolean 此时为true, 然后再取反为falseconsole.log(!0); // true -> 先把0转化为boolean 此时为false,然后再取反为true!!: 将其他的数据类型转化为boolean类型,相当于Boolean(); ..

转载 JS数据类型分类和判断

在前端笔试面试中“JS数据类型的分类和判断”是高频的基础考点，今天总结一下，对正在准备找工作的小伙伴应该有所帮助～JavaScript中有6种数据类型：数字（number）、字符串（string）、布尔值（boolean）、undefined、null、对象（Object）。其中对象类型包括：数组（Array）、函数（Function）、还有两个特殊的对象：正则（RegExp）和日期（Date）。一、分类从不同的角度对6种数据类型进行分类：二、判断1、typeof...

转载 Vue.js更深入的认识、理解和部署优化

原文链接：http://caibaojian.com/step-in-vue-js.html编辑注：上一篇文章我们推荐了一篇关于Vue.js与angular的一个认识，今天这篇文章都是讲Vue.js的知识，从Vue.js的开发流程、构建方式、部署和优化工作出发，相信对你学习Vue.js会有所帮助。·Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通过Vue.js来

转载 Vue与React两个框架的区别和优势对比

原文链接：http://caibaojian.com/vue-vs-react.htmlVue和React两个JavaScript框架都是当下比较受欢迎的，他们两者之间的区别有哪些，各自的优缺点是什么，本文将为你呈现。我已经写出了两个几乎一样的web应用，一个是基于Vue，另一个则基于React，可以方便你在看这篇文章的时候查找相关代码。React sample app Vue sample app简单介绍除非你最近一直不关注前端的发展，不然你肯定听说过由Facebook创建的JavaS

转载 前端框架用vue还是react？清晰对比两者差异

vue or react？That's a question.前言近两年前端技术层出不穷，目前市面上已经有了很多供前端人员使用的开发框架，转眼19年已过大半，前端框架领域日趋成熟，实现了三足鼎立的局面，截止到10月22日，Angular，react和vue数据统计如下图所示:最近在学习使用框架的时候，分别使用vue和react开发了两个移动端产品，对这两个框架的学习曲线有了一些感悟，这两个都是现在比较热门的js框架，它俩在使用方式上和学习复杂度上还是有很大区别的，这里简...

转载 Vue与React比较

之前用到了Vue进行开发，后来用了React，然后总是被问到为什么用React？总是说得有点模棱两可,下面总结了一下，希望得到补充与指正相同点React 和 Vue 有许多相似之处，它们都有：使用 Virtual DOM，有自己的diff渲染算法 提供了响应式 (Reactive) 和组件化 (Composable) 的视图组件。 将注意力集中保持在核心库，而将其他功能如路由和全局状态管理交给相关的库。1. 运行时性能比较React 和 Vue 都是非常快的，所以速度并不是在它们之中做

转载 浅析React&Vue两大流行框架优缺点

vue - 本质是 MVVM 框架，由 MVC 发展而来 React - 本质是前端组件化框架，不是一个完整的MVC框架，可以认为是MVC中的V（View）MVVMMVVM 的出现促进了 GUI 前端开发与后端业务逻辑的分离，极大地提高了前端开发效率。MVVM 的核心是 ViewModel 层，它就像是一个中转站（value converter），负责转换 Model 中的数据对象来让数据变得更容易管理和使用，该层向上与视图层进行双向数据绑定，向下与 Model 层通过接口请求进行数据交互，起呈上启

转载 NodeJS优缺点及适用场景讨论

NodeJS优缺点及适用场景讨论概述：NodeJS宣称其目标是“旨在提供一种简单的构建可伸缩网络程序的方法”，那么它的出现是为了解决什么问题呢，它有什么优缺点以及它适用于什么场景呢？本文就个人使用经验对这些问题进行探讨。一. NodeJS的特点我们先来看看NodeJS官网上的介绍：Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network.

转载 node.js 实现 token 身份验证

node + jwt 实现token身份验证安装依赖 express-jwtnpm i express-jwt将token校验相关数据导入配置文件// setting.jsmodule.exports = { token: { // token密钥 signKey: 'blog_globM_token_key_$$$$', // 过期时间 signTime: 3600 * 24 * 3, // 请求头参数...

转载 app.use和app.get，app.post区别

express中，express的实例app:app.use(path,callback)中的callback既可以是router对象又可以是函数app.get(path,callback)中的callback只能是函数给app.get(app.post、app.put同理)赋个路由对象是不行的，其实，可以将app.get()看作app.use的特定请求(get)的简要写法var express = require('express');var app = express();app

原创 node-jwt UnauthorizedError invalid algorithm

生成token时默认采用的HS256 算法 ，而解析token时指定的RS256算法，导致UnauthorizedError invalid algorithm 异常，将解析算法改为HS256就ok了，折腾了好几天，终于ok

转载 nodejs理解Express中router.use app.use 拦截器 next方法 结合实例新手向

https://blog.csdn.net/weixin_42565137/article/details/89382398

转载 Node Mysql连接池操作封装

之前写了一个对mysql操作的封装的博客：node mysql操作封装后面方向，当你访问量比较大的时候，直接用mysql的连接是会崩掉的，不支持这么多的连接，用连接池操作比较好，然后就操作了一下const mysql = require('mysql');module.exports = { config: { host: 'localhost', port: 3306, database: 'glory_of_kings', ...