Vue.js安装教程
安装node.js(网址：https://nodejs.org/en/)。基于node.js,利用淘宝npm镜像安装相关依赖。在cmd里直接输入：npminstall-gcnpm–registry=https://registry.npm.taobao.org，回车，等待安装。安装全局vue-cli脚手架,用于帮助搭建所需的模板框架，在cmd里输入：cnpminstall-gvue-cli，回车，等待安装；输入：vue，回车，若出现vue信息说明表示成功。创建项目，在cmd里输入：vueinitwebpackvue_test(项目文件夹名)，回车，等待一小会儿，依次出现下列选项，输入后创建成功。安装依赖，在cmd里cdvue_testnpminstall测试环境是否搭建成功在cmd里输入：npmrundev在浏览里输入：localhost:8080(默认端口为8080)运行起来后的效果如下图所示：
今天用node的cheerio模块做了个某乎的爬虫
一时兴起，想做个爬虫，经过各种深思熟虑，最后选择了某乎，毕竟现在某乎的数据质量还是挺高的。说干就干打开某乎首页，随便搜索了一串关键字，相关的问题和答案就展现在眼前，我就思考怎么把这些搜索结果全部通过爬虫爬下来，方便收集（我也不知道收集来干嘛嘻嘻）。发现搜索结果每页只会显示10条数据，某乎用的是点击加载更多数据，于是打开chrome的network工具，点击加载更多的按钮，发现多了一个新的ajax请求，很明显这个请求就是用来请求后十条数据的。分析这个请求头，观察这个get请求的url最后的参数，offset=10，用脚都想的出来，这明显就是告诉后台我要的数据从哪条开始，而我要通过爬虫把后面的数据爬下来就是要在这个参数上做些手脚，我只要改一下后面的offset构造新的url，然后发送新的请求，就可以得到其他页面的数据。然而事情并没有那么简单，我们先自己手动构造一个请求url，用浏览器打开看一下，服务器返回如下图：我滴个乖乖，这是什么鬼，但是不要慌张，虽然一眼看上去很恐怖，但是仔细分析一下就知道这是用了uni
JavaScript学习笔记：视口宽高、位置与滚动高度
在很多场景下我们需要通过JavaScript来获取视口或DOM元素的大小、位置以及滚动高度。最常见的一个效果，导航吸顶的一个效果。那么今天就来学习这方面相关的知识。window和document在开始了解视口宽高、位置和滚动高度相关的知识之前，先简单的来了解window和document。在学习新的API之前，我都喜欢在调式工具中将对应的API打印出来。比如：window对象表示一个包含DOM文档的窗口，其document属性指向窗口中截入的DOM文档。window对象实现了Window接口。一些额外的全局函数、命名空间、对象、接口和构造函数与window没有典型的关联，但却是有效的，它们在JavaScript参考和DOM参考中列出。再把document打印出来：Document接口提供了一些在浏览器服务中作为页面内容入口点而加载的一些页面，也就是DOM树。DOM树包括诸如
、以及其他元素。其也为document提供了全局性的函数，例如获取页websocket（三） 进阶！netty框架实现websocket达到高并发
引言：在前面两篇文章中，我们对原生websocket进行了了解，且用demo来简单的讲解了其用法。但是在实际项目中，那样的用法是不可取的，理由是tomcat对高并发的支持不怎么好，特别是tomcat9之前，可以测试发现websocket连接达到的数量很低，且容易断开。所以有现在的第三篇，对websocket的一种进阶方法。什么是NettyNetty是业界最流行的NIO框架之一，它的健壮性、功能、性能、可定制性和可扩展性在同类框架中都是首屈一指的，它已经得到成百上千的商用项目验证，例如Hadoop的RPC框架Avro就使用了Netty作为底层通信框架，其他还有业界主流的RPC框架，也使用Netty来构建高性能的异步通信能力。通过对Netty的分析，我们将它的优点总结如下：API使用简单，开发门槛低；功能强大，预置了多种编解码功能，支持多种主流协议；定制能力强，可以通过ChannelHandler对通信框架进行灵活地扩展；性能高，通过与其他业界主流的NIO框架对比，Netty的综合性能最优；成熟、稳定，Netty修复了已经发现的所有JDKN
EntityFramework For Mysql 动态切换数据源
1.简介在工作中遇到一个问题。项目有三个数据库（三个数据库表结构一样），用户可以选择使用哪个数据库。其实就是动态切换数据库连接。2.EntityFrameworkForMysql先来简单的介绍下mysql使用EntityFramework来操作数据库。直接上代码：(1).先建个项目，安装mysql，entityframework相关包(2).建立实体和对应的数据库表(3).编写数据库连接字符串，编写context实体这样就可以来使用Entityframework来访问mysql数据了。(4).简单测试3.动态切换数据库(1).在建一个blog1数据库，表如blog数据库。(2).对context进行改造(3).改造测试4.为什么可以直接传链接字符串从DbContext构造函数的方法签名可以看出端倪。可以看出我们传数据库连接字符串名字和直接传数据库连接字符串都是可以的。EntityFramework会去做判断，如果是name，再去配置文件取数据库连接字符串和pr
fetch将返回值进行对应类型的转换
constmyInit={method:'GET',mode:'same-origin',credentials:'same-origin',cache:'default'};fetch(url,myInit).then(res=>{constcontentType=res.headers.get("Content-Type");//根据返回contentType，处理是json，还是下载文件if(contentType.toLowerCase()=="application/json;charset=utf-8"){res.json().then(data=>{alert(data.success);});}elseif(contentType.toLowerCase()=="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"){res.blob().then(blob=>{//创建一个a标签，用于下载va
Vue使用Echarts以及Echarts配置分享
一、本篇文章将给大家分享如何在vue中使用echart以及echart各项配置，这些配置都是工作中比较常见以及常用到的，所以给大家分享下，希望对大家有用。二、vue中使用echart。1、首先下载echart依赖，这里采用的npm包管理工具，在项目中运行命令：npminstallecharts--save-dev2、在main.js里引入echart：importechartsfrom'echarts';3、在vue中注册echart：Vue.prototype.$echarts=echarts;4、在vue中使用echart：
JavaScript（五）：函数（闭包，eval）
1//method1:function命令2functiontest(){3console.log('hellofunction');4}56//method2:函数表达式,赋值给变量7vartest1=function(){//这是个匿名函数8console.log('hellofunction1');9};//注意这里有分号1011//method3:Function构造函数12vartest2=newFunction(13'return"hellofunction2"'14);1516test();17test1();18console.log(test2());运行结果：第二种方法：函数表达式，如果函数不是匿名函数，而是加上相应的函数名，则只在函数内部有效。1vartest3=functionx(){2returntypeofx;//此处有效3};4console.log(test3());5console.log(x
65行写个微信红包
首发于taowen写文章登录65行写个微信红包陶文2hoursagodocstore是一种创新的文档数据库，帮助开发者更快地完成复杂的业务需求。这个例子里，我们来看这样的一个需求：发红包时设置可以抢到的人数多个人可以并发的抢，然后知道自己抢到没有，抢到了多少可以查看红包当前被抢的情况，都有谁抢到了下面我们来看如何用不到65行代码实现一个微信红包最后完成的代码：v2pro/quokka业务逻辑的定义docstore.Entity("Hongbao",`structtaken{1:i64taken_at2:i64taken_amount//unitfen}structDoc{1:i64total_count2:i64total_amount//unitfen3:i64remaining_amount//unitfen4:map
74、django之ajax补充
一、js实现的ajax1、XMLHttpRequest对象其实AJAX就是在Javascript中多添加了一个对象：XMLHttpRequest对象。所有的异步交互都是使用XMLHttpServlet对象完成的。varxmlHttp=newXMLHttpRequest()//（大多数浏览器都支持DOM2规范）兼容性解决functioncreateXMLHttpRequest(){varxmlHttp;//适用于大多数浏览器，以及IE7和IE更高版本try{xmlHttp=newXMLHttpRequest();}catch(e){//适用于IE6try{xmlHttp=newActiveXObject("Msxml2.XMLHTTP");}catch(e){//适用于IE5.5，以及IE更早版本try{xmlHttp=newActiveXObject("Microsoft.XMLHTTP");}catch(e){}}}returnxmlHttp;}2、使用流程1
SegmentFault 技术周刊 Vol.38 - 神奇的 CSS
CSS的全称是CascadingStyleSheets，即层叠样式表，是一种样式表语言，用来描述HTML或XML（包括如SVG、XHTML之类的XML分支语言）元素所呈现的样式。“层叠”即表示允许以多种方式来描述样式，一个HTML元素可以被渲染呈现出多种样式。下面就让我们来看看CSS可以有多神奇吧。CSS基础特性在开始之前，我们先来了解一下CSS的历史。CSS简史（译）html和css是那么密不可分，以至于你可能会觉得它们是一起出现的。实际上，自1989年TimBernersLie发明互联网后的多年中，这个世界上都不存在一个名为css的事物，web的原始版本根本就没有提供一种装饰网页的方法。你不知道的CSS这篇文章整理了一些实用的CSS技巧，来解决我们在实际项目开发中遇到的的问题。每个技巧将结合demo或者图示来说明。也许你此刻正在发愁的一个bug可以在这里找到答案:laughing:。css三角形绘制方法总结在做UI（页面重构）的时候，免不了和各种小图标打交道，这
javascript图片隐写术，感觉可以用它来干点有想法的事情
1、什么是图片隐写术？权威的wiki说法是“隐写术是一门关于信息隐藏的技巧与科学，所谓信息隐藏指的是不让除预期的接收者之外的任何人知晓信息的传递事件或者信息的内容。”，图片隐写术简而言之就是利用图片来隐藏某些数据，让人一眼看去以为是很普通很正常的图片，但其实里面隐藏着某些“机密”数据。据传911事件里，KB份子就是通过黄色图片来传递信息而躲过了FBI的监控。还有大众点评也是通过图片隐写术来保护自身合法权益。所以图片隐写术是一个双刃剑，就看你用它做什么了。比如下面这张图片：看起来是一张很漂亮的风景照片，但其实它里面却藏着一张美女图（注：美女图片来源于淘宝某店），如下：是不是很惊艳？看得你热血沸腾鼻血都往外冲呢？这就是图片隐写术的历害之处，“机密”隐藏于无形之中！2、图片隐写术是怎么做到的？图片隐写有多种方式，我这里介绍的是采用图片的最低有效位（LSB）进行隐写。其原理就是图片的像素点都是由三原色（RGB）构成（如下图），由这三原色可以组成各种颜色，如CSS里的颜色定义#FFFFFF，即是三原色的16进制值写法，每个颜色
基于信封套打以及批量打印的实现过程
基于信封套打以及批量打印的实现过程最近需要向客户发送一些宣传资料，Excel列表里面有一两百个记录，本来想手写就算了，估摸着也花不了多少时间，不过写完一个信封我就后悔了，整天敲着键盘，书写的字太难看了，而且感觉手还是有点累。才第一个啊，想着后面还有那么多，感觉整个人头都大了，只好放弃，太没技术含量了。然后寻找有无一些套打的的软件，不过找来找去还是没有满意的，还是自己写一个套打的软件好了，这个小小的还是有点技术含量，呵呵。本篇随笔基于这个困惑，整理了一个信封套打以及批量打印的实现过程，软件可以实现自动批量的信封套打，一两百个的信封地址，也是一阵子的功夫就打印完成了，感觉小有成就，而且以后就基于这个模式来批量打印信封，方便了很多。1、信封套打的实现思路基于套打的处理，我在几年前的随笔都有一些随笔介绍，如《Web打印的解决方案之证件套打》、《基于MVC4+EasyUI的Web开发框架经验总结（16）--使用云打印控件C-Lodop打印页面或套打报关运单信息》这两篇随笔基本思路还是采用打印控件C-Lodop（http://www.lodop.net/
Hammerspoon part 2: launcher and switcher / 启动器
这是Hammerspoon的第二部分，主要讲使用Hammerspoon做一个程序启动器和切换器。之前有用Manico这款优秀的软件，当然还有其它类似的，包括之前使用的Slate也有部分这样的功能。但使用Hammerspoon之后发现了Manico这种程序启动器的不足，主要是fork进程不能比较好的分清。有少见的奇怪情况，比如打不开已经关闭的程序。这两个问题大部分启动器都不能特别好的实现，直到使用了hammerspoon，可以完美的实现相关的功能。基本启动器接着Hammerspoonpart1的init.lua文件后面写：hs.hotkey.bind({'alt'},'1',function()hs.application.launchOrFocus("GoogleChrome")end)hs.hotkey.bind({'alt'},'2',function()hs.application.launchOrFocus("Terminal")end)hs.hotkey.
webpack实践——webpack-bundle-analyzer 的使用
先看webpack-bundle-analyzer的效果图（官方效果图）：通过使用webpack-bundle-analyzer可以看到项目各模块的大小，可以按需优化1、先安装npminstall--save-devwebpack-bundle-analyzer2、在webpack.config.js中配置：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;plugins:[newBundleAnalyzerPlugin({analyzerMode:'server',analyzerHost:'127.0.0.1',analyzerPort:8889,reportFilename:'report.html',defaultS
简单的例子实现vue插件
一直都觉得vue的插件生涩难懂，但是又很好奇，在看了几篇文章，试着写了写之后觉得也没那么难，这篇文就是总结一下这个过程，加深记忆，也可以帮助后来的人。why在学习之前，先问问自己，为什么要编写vue的插件。在一个项目中，尤其是大型项目，有很多部分需要复用，比如加载的loading动画，弹出框。如果一个一个的引用也稍显麻烦，而且在一个vue文件中引用的组件多了，会显得代码臃肿，所以才有了封装vue插件的需求。说完需求，就来看看具体实现。目前我尝试了两种不一样的插件编写的方法，逐个介绍。这是我的项目目录，大致的结构解释这样，尽量简单，容易理解。一个是loading插件，一个是toast插件，不同的地方在于：loading插件是作为组件引入使用，而toast插件是直接添加在挂载点里，通过方法改变状态调用的。目前使用起来是酱紫的：toast插件toast文件下有两个文件，后缀为vue的文件就是这个插件的骨架，js文件一个是将这个骨架放入Vue全局中，并写明操作逻辑。可以看一下toast.vue的内容：<template&g
组件（1）
组件定义组件组件通信插槽slot实现分发内容高级组价组件定义全局注册组件Vue.compoment('组件名称',{组件内容，最外层只能被一个元素包围；template：组件模板，内容为组件文档内容});Vue.component('my-com',{template:`<div><h3>全局组件</h3><div><p>内容1</p><p>内容2</p></div></div>`});局部组件跟全局组件定义一样，局部组件就是把全局组件内部的{}抽离开来，然后赋值给一个变量，再将赋值后的变量注册到newvue中的components下，这样定义的组件就是一个简单的局部组件了。varchild_com={template:
VUE使用element-ui的upload组件自定义文件列表
emmm我又来了๑乛◡乛๑饿了么上传组件的文件列表filelist有个删除功能，我看源代码它是直接删除，并不会提示。issue上也有不少开发者提过这个问题，开发组还是建议自己写（想偷懒都不行……）除了复写文件列表外，还加了一个上传状态的显示。先上效果图：悬浮时的效果：上传时的效果：以下测试在vue(v2.5)+vue-router(v3.0)+element-ui(v2.0)环境下进行，一些细节（如icon）会与上述图片不相符。所以每个步骤都加个图片=。=步骤一：卡片化其实就是重写样式，写个类似el-card组件的样式<template><divclass="img-list"><divclass="img-content"v-for="(item,key)inimagelist":key="key"><img:src="item.url"><divclass="name"&