andyliwr / andyliwr.github.io Goto Github PK

https://andyliwr.github.io/article/posts/the_feelling_loving.html

有个人，有一天，走路的时候撞上了一根电线杆，恨痛。以后他走路都会绕着这跟电线杆走，可能有一天他也会忘记当时有多痛，但是那根电线杆却一直都在。 以前总是努力说服自己也许你也喜欢我，但爱情终归不是一个人的感觉，也不仅仅只是你问我答。 相信我，有一天你也会遇到那个让你放下矜持，不顾一切去爱的那个人，我祈祷他也能为了你不顾一切。也许你有一天也会理解并原谅我这个笨拙的爱慕者，那个觉得你美若天仙，十项全能的人

https://andyliwr.github.io/2017/08/12/yiyuan_mncg/

前言最近两周时间基本都花在了这个项目上，虽然只是个运营活动，但是遇到的问题还是比想象的要多。数下从上上周的周六开始拿到 ui 稿，然后上周完成了页面的样式，这周主要在实现 js 的逻辑。每天都是基本 10 点走的，人很疲倦,都出现黑眼圈了，自己在同花顺都没这么加班过。这里我贴下这个活动页面的地址，参加大赛需要去指定的券商开一个户，然后参加模拟炒股，收益率为正的话就能瓜分 100 万元了，是真的可以

https://andyliwr.github.io/2017/12/05/nodejs_spider_ip/

前言在写nodejs爬虫的过程中，原网站可能会对某一时间段内集中访问该页面的ip进行封杀。那么如何动态设置每次爬取使用的ip地址以及浏览器头部信息呢？ 动态userAgent这是我收集到的常用的浏览器头部信息，每次爬取的时候从中随机选取一个，并使用superAgent设置请求头部的User-Agent字段就好了。 userAgent.js123456789101112131415161718192

https://andyliwr.github.io/pages/react/

文章加载中… React基础学习 2018/11/21学习笔记 最开始的都最艰难

https://andyliwr.github.io/2018/01/10/ps_cutterman/#comments

前言对UI稿切图可谓前端工程师的基本功了，今天来讲讲如何快速并且高效的切图。 Cutterman插件Cutterman是一款运行在photoshop中的插件，能够自动将你需要的图层进行输出， 以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，

https://andyliwr.github.io/2017/10/17/window_mongo_install/

前言wecomment连接不上mlab的免费 mongo 数据库，同样也连不上腾讯云服务器的 mongo 数据库，好气呀>_<，只能花时间在 windows 上搭建一个本地 mongo 了，下面是我的踩坑历程，希望能帮到你~ 开始 下载 mongo官方网站下载地址百度云盘 提取密码：a9ca 新建data和log文件夹在安装完成后的根目录下使用cmd执行以下命令 123456m

https://andyliwr.github.io/2017/12/05/nodejs_spider_ip/

前言在写 nodejs 爬虫的过程中，原网站可能会对某一时间段内集中访问该页面的 ip 进行封杀。那么如何动态设置每次爬取使用的 ip 地址以及浏览器头部信息呢？ 动态 userAgent这是我收集到的常用的浏览器头部信息，每次爬取的时候从中随机选取一个，并使用 superAgent 设置请求头部的 User-Agent 字段就好了。 userAgent.js1234567891011121314

https://andyliwr.github.io/2018/12/08/html5_file_api/

前言HTML5 为我们提供了一种通过 File API 规范与本地文件交互的标准方式。虽然也用过很多次了，但是一直不是很系统，今天参考别人的博客系统总结下。File API提供了多种文件访问的接口： File，独立文件，提供文件的只读信息，比如名称，文件大小，minetype以及文件的引用 FileList，文件对象的类数组序列，上传文件时选择多个文件或者拖拽上传拖拽多个文件的时候会有用到 Bl

https://andyliwr.github.io/2017/11/06/mongodb_aggregate/

前言mongo如何根据每条记录的时间分组查询数据？比如查询用户每一天上传了哪些图片，最终返回结果是时间作为key值，value值是一个多张图片的数组。简单的想的话可以先查询到用户上传的所有图片，然后前端再做数组便利，将这些图片分组。那再数据量很大的时候又该怎么处理呢？mongodb有提供一个aggregate方法，就是用来应对这种分组查询的。 数据准备假设现在有一张名叫histories的表，它的

https://andyliwr.github.io/2018/11/27/reuse_python/

前言安装 Anaconda那么问题来了本地已经安装了python为啥还需要使用Anaconda呢？ 1）Anaconda 附带了一大批常用数据科学包，它附带了 conda、Python 和 150 多个科学包及其依赖项。因此你可以立即开始处理数据。2）管理包Anaconda 是在 conda（一个包管理器和环境管理器）上发展出来的。在数据分析中，你会用到很多第三方的包，而conda（包管理器）可

https://andyliwr.github.io/2017/12/08/vue_notice_not_save/

假设有这样一个需求，用户在一个页面内编辑文字，但是并未点击保存并且跳转到了下一个路由。比较好的做法应该是给出一个提示—“您编辑的内容还未保存，是否确认退出？”用户如果点击“确定”，那么不保存当前内容直接退出，用户如果点击“取消”，则取消本次路由跳转，继续留在原来的页面。 尝试的错误做法一开始的时候我是想着使用 vuex 结合 vue router 的 beforeEach 导航守卫来实现。代码如下

https://andyliwr.github.io/2017/12/25/travis_nodejs_publish/

持续集成：Continuous Integration，简称CI，意思是，在一个项目中，任何人对代码库的任何改动，都会触发CI服务器自动对项目进行构建，自动运行测试，甚至自动部署到测试环境。这样做的好处就是，随时发现问题，随时修复。因为修复问题的成本随着时间的推移而增长，越早发现，修复成本越低。 下面来介绍如何为GitHub上托管的开源项目用Travis CI进行持续集成： travis简介Tra

https://andyliwr.github.io/2017/12/25/travis_nodejs_publish/

持续集成：Continuous Integration，简称CI，意思是，在一个项目中，任何人对代码库的任何改动，都会触发CI服务器自动对项目进行构建，自动运行测试，甚至自动部署到测试环境。这样做的好处就是，随时发现问题，随时修复。因为修复问题的成本随着时间的推移而增长，越早发现，修复成本越低。 下面来介绍如何为GitHub上托管的开源项目用Travis CI进行持续集成： travis简介Tra

https://andyliwr.github.io/2018/10/30/brower_open_application/

前言手机浏览器打开 App 是个很常见的需求，比如在一些推广活动中将用户从 H5 页面导向到 App 里。个人觉得难点如下： 如何判断用户处在手机浏览器中当然如果页面是 H5 的推广页就不存在这个问题了，我说的放在 App 里的产品页。 如何调起 App基本都是使用 schema 协议，这个后续会讲到。 如何判断是否安装了 App这个就比较棘手了，理论上来讲 H5 是没法判断的，只能通过一些类似

https://andyliwr.github.io/2017/05/23/submit_page_flush/

我最近在做一个 Ajax 查询的功能，代码如下： 1234567<form name="keywordForm" method="post" action=""> <p id="profile_nav"> <label for="profile"> 关键字搜索： </label> <input style="width:80; h

https://andyliwr.github.io/2018/08/27/friddle_debug_https/

Https 设置Fiddler 默认只能抓取 HTTP 协议的网页，不能抓取 HTTPS 协议的网页，而我们很多时候，都需要抓 HTTPS 协议的网页，比如抓淘宝数据等。今天就讲解如何使用 Fiddler 抓取 HTTPS 协议的网页。 打开 Fiddler，点击“Tools–Fiddler Options–HTTPS”，把下方的全勾上，如下图所示： 电脑端证书操作然后，点击 Action，选择

https://andyliwr.github.io/2018/10/29/ubuntu_clean_cache/

前言今天记录下自己处理线上服务器内存不足的问题的过程。某天 xxx 跟我说线上服务器现在很卡，接口响应比较慢。我就纳闷了一个 2G 内存的服务器能支持 4000 千的访问量吗？不过还是得去看下，当我敲下free -m看到了如下信息： 如何清除火速去查了下free -m各自代表的意思，答案如下： 为了提高磁盘存取效率，Linux 做了一些精心的设计，除了对 dentry 进行缓存（用于 VFS，加

https://andyliwr.github.io/2017/01/17/node_reptile_from_baidutieeba/

程序应该被用来改变生活每天都得来回坐地铁上下班，无聊的时候喜欢看些小说，还只看至尊系的。以前老用微信读书，现在读书送的书券都花完了，作为一名程序猿怎么可能去花钱买书券读书。所以我想了写个爬虫爬小说的想法。 原理图 github项目地址: networkReptile 程序依赖1234superagent --发送http请求cheerio --分析请求得到的htmlnode-schedul

https://andyliwr.github.io/article/posts/guo_qing_1.html

熬了好久，终于国庆了，这个自从工作之后的最长假期。其实去铜仁的票早就买好了，不过还是还是希望能到她，所以买了一号很晚的票。不过，她现在估计不想见到我，所以一号就一个人去西湖玩了。讲真的，人是真的多。我比较幸运，混到了一辆ofo，至少比走路要轻松不少。 在清波路下车，就开始了西湖之旅，最先映入眼睛的是一片汪洋的湖水以及远处矗立着的雷峰塔.西湖说大不大，不过确实我看到过的除洞庭湖之外的最大的湖。之前有

https://andyliwr.github.io/2018/01/09/js_knn_algorithm/

机器学习中的“hello world!”就像我们学习编程语言一样，我们的第一个尝试就是在终端命令行中输出的 “Hello World”。机器学习中的 “Hello World” 便是识别手写字数据集。想想在得到一张手写数字图片的数据之后如何分析出正确的数字？keras-js的实际demo 数据的表示和收集图片其实放大来看其实就是一个个像素点，对于黑白图像，每个像素点就只有黑白两种颜色以及黑白深度

https://andyliwr.github.io/2019/01/17/vue_cli_v3_config_setting/

前言vue 前端时间更新创建 vue 项目的命令行工具，变得比以前更加简洁了，隐藏了之间 build、config 这些目录，自定义配置都放在一个 vue.config.js 的文件中。忙里偷闲，我也来学一波，下面是我的一些笔记。 配置说明我直接把自己之前写的 vue.config.js 的文件贴出来了，大家直接看备注就行了 123456789101112131415161718192021222

https://andyliwr.github.io/2017/11/06/mongodb_aggregate/

前言mongo如何根据每条记录的时间分组查询数据？比如查询用户每一天上传了哪些图片，最终返回结果是时间作为key值，value值是一个多张图片的数组。简单的想的话可以先查询到用户上传的所有图片，然后前端再做数组便利，将这些图片分组。那再数据量很大的时候又该怎么处理呢？mongodb有提供一个aggregate方法，就是用来应对这种分组查询的。 数据准备假设现在有一张名叫histories的表，它的

https://andyliwr.github.io/article/posts/2017_summary.html#comments

前言又到了年底了，到了总结的时候。如果说2016年是我确定职业方向的一年，那么2017年应该是我静下心来专研技术的第一年。这一年发生了很多事，小七离开了我，我毕业了，我转正了，我开始学车了，我和她不再联系了，我还完了助学贷款。凡是过往皆为序章，新的2018年就要到来了~ 工作上先说说自己在工作吧，算是完完整整在同花顺待满了一年，从实习到转正，从新人到老油条，自己比以前要厉害不少了。 问财案例做的

https://andyliwr.github.io/article/posts/ru_ni_yi_ban_de_ren.html

我希望能有个如你一般的人如山间清爽的风如古城温暖的光从清晨到夜晚由山野到书房只有最后是你就好 —《从你的全世界路过》 这是我想请你看第一部电影，说实话当时这个决定真的整整想了一个周末，也许是太不希望错过你吧。不过最后被你狠心拒绝了，结果我一个人跑去影院了。我记得我们第一次看的电影—《奇异博士》，在上海大学的地大影院。记得你领着我走过的上大的路，记得那里的花展，记得和你一起逛过的杂货店，记得你送

https://andyliwr.github.io/2017/12/25/element_form_validate/

在我司已经经历了好几个后台项目了，登录页面一直有个小问题，如果登录出错了并且第一次提示了错误，然后再点击同一个按钮，错误提示就消失，而不是重复显示同一个错误。 后来去翻了下element的源码，发现el-form-item的error属性监听的是watch方法，也就是两次重复的错误操作，提示的错误信息一致，就不会触发watch方法。而我的逻辑是这样的，每次点击登录或者发送验证码，都会去重新验证表单

https://andyliwr.github.io/2018/01/09/js_knn_algorithm/

机器学习中的“hello world!”就像我们学习编程语言一样，我们的第一个尝试就是在终端命令行中输出的 “Hello World”。机器学习中的 “Hello World” 便是识别手写字数据集。想想在得到一张手写数字图片的数据之后如何分析出正确的数字？keras-js的实际demo 数据的表示和收集图片其实放大来看其实就是一个个像素点，对于黑白图像，每个像素点就只有黑白两种颜色以及黑白深度

https://andyliwr.github.io/2017/12/25/elememt_el_menu_bug/

前言今天测试报告了广告竞价后台的一个bug:大致原因是这样：先看下element对于导航的每一项的点击的处理方式。123456789101112131415handleItemClick(item) { let { index, indexPath } = item; if (!this.router) { this.activeIndex = i

https://andyliwr.github.io/2017/12/25/elememt_el_menu_bug/

前言今天测试报告了广告竞价后台的一个bug:大致原因是这样：先看下element对于导航的每一项的点击的处理方式。 123456789101112131415handleItemClick(item) { let { index, indexPath } = item; if (!this.router) { this.activeIndex =

https://andyliwr.github.io/article/posts/xi_da_li_bie.html

北冥有鱼，其名为鲲，鲲之大，一锅炖不下；化身为鸟，其名为鹏。鹏之大，需要两个烧烤架，一个清蒸，一个微辣，来瓶雪花，让我们勇闯天涯。寝室好久没这么好运了，小吃街吃饭连中三瓶雪花啤酒。别了，西大，也许以后都不会回来了。再见，老师和同学们，有缘我们江湖再见。我不会忘记自己曾是西南大学的学子。后会有期，323的室友们，感谢你们四年的陪伴，我的杨、章鱼潇、黄典、康爷还有炮波。

https://andyliwr.github.io/2018/06/11/mongo_auto_backup/

前言我欠博客一个解释，为啥这么久都不更新 😂，好吧，人变懒了…讲下最近我服务器出现的一个事吧，某日我为了方便查看数据，在腾讯云服务器上把 27017 端口给开放了，然后过了两天，需求方和我说小程序出了问题。我一查就发现数据库里的数据都被人删除光了 😭，而我正好又没做好备份，然后花了很长时间去重建数据。 这件事反应了两个问题，第一：如果数据库允许远程访问一定要做好用户权限的设置，不能让人随意修改

https://andyliwr.github.io/2018/01/12/js_call_apply/

前言今天在逛segmentfault的时候，看到人家源码里面各种使用call, apply。都搞得我看不懂了，于是下定决心搞懂它们的用法。 为什么要使用call和apply观摩大神解释， 知乎文章:在javascript面向对象编程中中，我们经常会这样定义:12345678910function cat(){}cat.prototype={ food:"fish",

https://andyliwr.github.io/pages/react/posts/20181121.html

知识点 React组件构造函数super有啥用super 这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。 1) super 作为函数调用时，代表父类的构造函数。 ES6 要求，子类的构造函数必须执行一次 super 函数。子类必须在 constructor 方法中调用 super 方法，否则新建实例时会报错。这是因为子类没有自己的 this 对象，而是继

https://andyliwr.github.io/2018/11/13/css_generate_bookmark/#comments

前言之前讲过使用过CSS 实现箭头，今天来讲使用 CSS 实现两种常用的书签，记录下实现过程。 书签 1先贴下效果图： 实现原理和之前实现箭头一样，都是使用的 border 来做出尖角，只不过这次某个边框不是整个不见了，而只是凹陷了一点点。 Html 1<div class="rule"><div>规则</div></div> Css 1234567

https://andyliwr.github.io/article/posts/go_to_shanghai2.html

本来是做的火车，结果去错车站了，应该是菜园坝而我去的北站，我是不是傻？去地铁站找了半天菜园坝愣是没找着，我放弃了。然后碰到一个貌似骗子的叔叔，他说这个点去菜园坝来不及了，而且我做的车得要30多个小时才能到上海，还是做汽车吧！然后我又萌逼了，最后就退了火车票卖了汽车票，我算了下，这中间的损失有150。 呼啦啦，司机开着车把我送到了汽车在的高速公路，我就做上了汽车，不管怎样，安全到达上海就行，钱亏了可

https://andyliwr.github.io/2017/03/30/cmd_command/

最近做毕设的时候发现每次都需要输入命令启动mongo和redis，还有一些爬虫和后台接口。感觉很麻烦，为什么不用windows上类似shell的bat语法写一个部署工具呢？ 截图 注：图中所用软件为丑陋cmd的替换品 cmder 不多多说了，直接上代码吧，bat语法大家可以自己搜索下。 主进程 start.bat12345678910111213141516171819202122232425

https://andyliwr.github.io/2018/01/09/array_unknow_function/#%E5%85%A5%E5%8F%82

reduce我也是第一次听说数组还有一个reduce方法，要不是看别人的代码用到了这个，估计自己还不不会去查这样一个方法。reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。最常见的代码：123var total = [0, 1, 2, 3].reduce(function(sum, value) { return sum + value;&#1

https://andyliwr.github.io/2018/01/09/array_unknow_function/

reduce我也是第一次听说数组还有一个reduce方法，要不是看别人的代码用到了这个，估计自己还不不会去查这样一个方法。reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。最常见的代码：123var total = [0, 1, 2, 3].reduce(function(sum, value) { return sum + value;&#1

https://andyliwr.github.io/article/posts/close_hua_bie.html

前言今天，工资到账之后将花呗和网商贷的钱全部还了，并把它们都关闭了。从2016年的5月到2018年的1月，我也算走出了这个借贷的深渊。回想起来太恐怖了，花钱的时候很爽，还钱的时候很痛苦。以后我尽量珍惜自己赚来的钱，毕竟未来还有很多事等着我去做。 趣店借款记录 2015-11-16 300元 2015-11-22 500元 2015-11-29 200元 2015-12-01 100元 2015-

https://andyliwr.github.io/2018/01/09/js_knn_algorithm/

机器学习中的“hello world!”就像我们学习编程语言一样，我们的第一个尝试就是在终端命令行中输出的 “Hello World”。机器学习中的 “Hello World” 便是识别手写字数据集。想想在得到一张手写数字图片的数据之后如何分析出正确的数字？keras-js的实际demo 数据的表示和收集图片其实放大来看其实就是一个个像素点，对于黑白图像，每个像素点就只有黑白两种颜色以及黑白深度

https://andyliwr.github.io/ai/posts/logistic.html

logistic 回归将会用到的符号讲解logistic 回归是一个用于二分分类的算法，输入一个 x，输出的值 y 是 0 或者 1 举个简单的例子，现在有一张图片，算法需要判断图片中是否出现了猫，如果出现了记结果为 1，否则结果为 0计算机表示图片的方式是将每个像素点描述成一个 RGB 的三元组，这样一张 64x64 像素的图片就需要 3 个 64*64 的矩阵来表示，矩阵中的每一项都代表着当前

https://andyliwr.github.io/2018/12/08/sortable_js/

前言拖拽排序是一个很常用的功能，今天就介绍前端和后端分别如何实现。 前端如何实现拖拽排序这里直接使用第三方库—sortable.js，关于它的用法大家可以去参考官方文档 首先我们创建一个表格，这里因为是读取的数据，所以我们使用 JavaScript 动态创建。 index.html123456789<script type="text/javascript" src="//unpkg.com

https://andyliwr.github.io/2019/03/12/js_extends_principle/

理解原型对象、构造函数、实例之间的关系1234567891011121314151617function Person () { // some codes}Person.prototype.name = 'lidikang'Person.prototype.age = '24'Person.prototype.job = 'FrontEnd Developer'Person

https://andyliwr.github.io/2019/03/21/react_drag_scrollbar/

前言工作中有个项目需要使用react实现一个可拖拽改变大小的试图，这里记录下如何实现的 实现代码12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808

https://andyliwr.github.io/2018/01/12/linux_ssh_proxy/

前言我最近将公司电脑系统换成deepin了，感觉体验不错。 没了windows之后如何登录腾讯云呢？以前还有个xshell或者mobaXterm可以设置代理，现在要通过命令行登录了。 网上用ssh隧道来翻墙的教程比较多，通过代理连接ssh的文章相对较少，这种方法适用于网络中防火墙屏蔽了ssh协议，或者其它原因无法通过ssh直连服务器的情况。配置好后ssh流量会通过指定的代理中转，从而突破防火墙的限

https://andyliwr.github.io/article/posts/kemuer.html

今天从富阳回来之后就一直不是很开心，后来还专门跑去河边钓了会鱼，最后就变成了发呆时光，看着水面，一动不动。人生最无奈的时候就是这样吧，看自己不爽，又拿自己没办法。 说实话真恨自己，放松一点会死啊？脑袋记点事会死啊？紧张个屁呀？本来很简单的事情，你又要比别人多去一趟。就问问自己什么时候专心致志，尽心尽力做好过一件事？但凡好好努力了，最后都不会这样。 高中的时候那么紧，还每周末跑去网吧打cf，大学参加

https://andyliwr.github.io/2018/11/06/zepto_slideup_slidedown/

前言JQuery 内置一系列效果函数，可以让使用者在不必写 css 动画的情况下实现一些简单的动画，然而 zepto 并没有继承这些效果函数，比如 slideUp 和 slideDown 让 Zepto 支持 slideUp 和 slideDown直接上代码了>^< 12345678910111213141516171819202122232425262728293031323334(

https://andyliwr.github.io/article/posts/2017_summary.html

前言又到了年底了，到了总结的时候。如果说2016年是我确定职业方向的一年，那么2017年应该是我静下心来专研技术的第一年。这一年发生了很多事，小七离开了我，我毕业了，我转正了，我开始学车了，我和她不再联系了，我还完了助学贷款。凡是过往皆为序章，新的2018年就要到来了~ 工作上先说说自己在工作吧，算是完完整整在同花顺待满了一年，从实习到转正，从新人到老油条，自己比以前要厉害不少了。 问财案例做的

https://andyliwr.github.io/2018/01/09/js_knn_algorithm/#comments

机器学习中的“hello world!”就像我们学习编程语言一样，我们的第一个尝试就是在终端命令行中输出的 “Hello World”。机器学习中的 “Hello World” 便是识别手写字数据集。想想在得到一张手写数字图片的数据之后如何分析出正确的数字？keras-js的实际demo 数据的表示和收集图片其实放大来看其实就是一个个像素点，对于黑白图像，每个像素点就只有黑白两种颜色以及黑白深度

https://andyliwr.github.io/2018/08/03/koa_upload_file/

前言产品提了个需求希望能有个页面能将 word 文档一次性转换成可访问的线上地址，瞬间感觉压力山大，那就先从上传文件开始吧~其实靠上传我都实现过好多次了，但是过了不久又会忘记，然后又得各种百度去找答案，这里强制自己记录下。 新建 koa2 项目使用koa-generator可以通过命令行的方式初始化一个koa2项目 123npm install -g koa-generatorkoa2 xxxcd

https://andyliwr.github.io/2018/04/23/node_canvas_usage/

前言毕设的小程序要实现分享功能，我将分享功能按照不同的页面分成了三块。分享的内容都是动态定义的，而且因为微信只支持图片分享的模式，所以这里只能使用后端将分享的内容动态写进图片里，最后上传到七牛云，返回一个图片地址 阅读器页面分享就是在阅读章节的时候选择分享，分享出去的图片应当展示的信息包括：书籍封面、书籍名称、章节名称、以及部分章节内容 书籍详情页分享分享出去的图片应当展示的信息包括：书籍封面、书