soul

96 posts published

Windows 迁移至Mac Book 小记

Windows 迁移至Mac Book 小记

前言 时隔了三年...最终还是换上了mac book,可能是这代mac真的很香。。 16年开始购入第一台macbook air 那个时候就开始体验macos的生态、交互等等,哪怕是最低配的(macbook air 13.3 i5 256G)当时也玩的很开心,甚至当时还用这货跟朋友打了几把L4D2,到了17年10月的时候, 想打打使命召唤系列,于是DIY了一台台式机,爽是挺爽的 就是放在家里平时都没怎么玩..感觉有点浪费吃灰,于是在18年3月份的时候购入了一台XPS 15,从此开始了笔记本折腾之路。 用过的笔记本和电子产品也不算很多,但是每一个产品都有过折腾。 16年 -> 17年 macbook air 13.3 17年10月 -> 18年3月 AMD R5 1400, GTX 1060,8G,1T机械 18年3月 -&

WSL2配置公网链接与固定别名

前言 今天为了测试html,用了nodejs的http-server命令,当然有了WSL那肯定是在WSL2中启动http-server,启动后问题就来了,8080端口是无法在局域网里访问的,但是windows宿主机是可以通过127.0.0.1:8080来访问到 WSL2相关 WSL2用的是hyper-v 相当于一个虚拟机,但是在网络那块就有点奇怪了,wsl2与windows中会有一个专有的ip。 举例 WSL2专用ip为:172.31.58.132,windows的公网ip为:192.168.167.82。 那么问题来了 我wsl2启动了一个http服务 端口为8080,如何在局域网中访问它? 一开始想的办法是让wsl2直接在局域网获取一个新的ip 比如192.168.167.83,试着给wsl2用了固定ip后也是不行的,连wsl2本身的网络都断开了,看了一下wsl2官方的issue发现官方目前是不支持wsl2直接获取ip的,v2ex上有老哥试着用网桥来解决这个问题,但是看最后的评论结果还是没有成功,于是目前的办法就比较hack了,局域网机器访问windows宿主机,windows宿主机转发端口至wsl2,虽然流程很简单,网络上也有老哥给出了解决方案,比较常见的指令就是 netsh interface portproxy

简单记一次nodebb+solr+redis迁移

前言 后空再完善,本篇文章算是一个存档,之前用的国外服务器,国内访问突然变慢,于是打算迁移到阿里云的香港服务器,那么迁移的时候就会遇到一堆的问题- -虽然已经准备填坑了,但是一来一回的操作发现竟然花了两个多小时。 原服务器数据&备份 nodebb用的是redis,先备份redis数据,不过因为不记得redis数据库存放路径了,于是 结合这篇文章redis切换数据存放的文件目录得出redis的存放路径,直接停止redis服务127.0.0.1:6379> SHUTDOWN 打包NodeBB所有文件 zip -r x.zip ./备份为x.zip 备份solr目录所有文件 zip -r solr.zip ./备份为solr.zip 备份nginx的conf文件 至此,原服务器的数据算是备份完毕了,不过这里在download备份文件的时候遇到了一个很大的问题,因为国外的网络下载是在太慢了,一开始打算数据->dropbox->本地,不过因为dropbox需要注册账号balabal之类的也比较麻烦,于是想了一下打算用阿里云的oss来做中间下载点

TS学习笔记

TS入门学习资料 本文大量使用了TS入门学习资料的范例并且加以理解,但是也有省略很多的关键点,如需完整学习请移植上方链接 什么是 TypeScript&为什么选择TS 包容 不会与js冲突,基本上直接引入js即可 类型定义系统 完善js的弱类型,并且因为有类型定于 各大IDE也会有对应的提示 拥抱ES6&最新的草案规划 TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。 巴拉巴拉什么社区完善啊 等等这些可以去看学习文档 这里不单独列出 劣势 学习曲线高 虽然很强大,但是整个市场来说 对团队要求高导致ts目前阶段相比js还不算大范围的流行 编译 需要额外编译,虽然写起来很爽,但是编译火葬场,如果开发团队全部用any类型的 等于没有用ts 源码定义 如果前端团队中有人不了解ts 那么阅读源码就是一个学习成本的事情了 复杂&构建流程 react和AJ可能是对TS支持最好的两个框架了,VUE&NODE.JS这两块还是有待完善 安装 npm install

前端的visionseed 腾讯优图漫游记

前言 某天某时刻从某位PLMM那里收到了一份礼物,拆开后发现是visionseed... 简单搜索了一下 发现是一个自带人脸检测/识别等一系列算法的摄像头.比较小巧 so...盒子背后还有个开发文档的二维码 visionseed官网 在开发者中心也能看到一些文档 简单看了一下后,发现...完全不懂啊 竟然是C++的..作为鄙视链最低端的前端,并且没有学过C++的渣渣来说 完全是天书啊,本打算辜负妹子的好意,准备收起设备的时候不料在gayhub上发现了新的天地 nodejs版本的sdk 竟然有位大大已经封装了一个js版的sdk,难道那句话就要应验了吗?能用js写的最终都会用js写 通信? 本着好奇的态度想看看底层如何与js通信,简单看了一下源文件发现引入了三个库 serialport: 读取串口信息 visionseed设备的baudRate为115200 google-protobuf: 端口通信机制? 这个库没太搞懂 类似于GRPC这样的? serialport正好之前玩过一点点 大致上明白是一个发送&接收的库,google-protobuf理解为对底层sdk通信的一个机制? windows下的玩法 简单了解了一下后再去看看sdk文档..嗯...很简单嘛 window下打开cam就可以看到视频了,并且也绘制了人脸识别框balabala的 ..嗯嗯嗯嗯...嗯? 调用sdk竟然是ubuntu版本的.

vue-element-admin中的多个表单共享验证rule

前因 有个业务需求为 表单中有两个字段 一个是 最小长度input输入框 一个是最大长度input输入框 因为要联动判断两个输入框的值,最小不能大于最大 最大不能小于最小,去官方翻例子发现只有一个自定义验证并且案例写的比较模糊 el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="密码" prop="pass"> <el-input type="password"

letsencrypt的ACME规范开发折腾记

前言 https是一种互联网趋势,说到https就离不开ssl证书的申请,那么国外有个组织为了解决ssl证书申请的问题开放了互联网申请api接口,而且是全免费的,这就是letsencrypt,那么有了这个api接口接下来做的就是要去看方法调用对吧。然而你找到的只能是一份超级长的规范定义,当然这份规范定义基本上大家都是太长不看的。所以基本上大家都会去找现成的库。那么实现了amce协议的库很多ACME协议客户端,各种各样的,比如最常见的Certbot,网上的教程大多也是针对Certbot的,不过有个缺点就是,如果走的是dns认证,尤其是通配符证书申请,基本上国内比如阿里云的dns还需要自己手动去设置,不过网上已经有相关的插件可以支持阿里云dns了。不过我个人并不喜欢Certbot,尤其是需要传递一堆的参数,当配置的域名一多的时候就很难管理,那么出于以上的考虑就开始写了一个符合自己业务需求的小教本 基于node-acme-client的脚本实现 node-acme-client 本来打算自己去实现一个符合acme规范的客户端,不过时间不允许,而且不太想重复造轮子,所以翻了一下nodejs的库,发现还是有一个完全实现了acme规范的。于是打算基于上述去开发。虽然说是基于轮子去造车,但是有一些概念还是需要了解的。下文会简单说一下所遇到的概念。 账户 letsencrypt是有账户概念的,而且创建账户的接口速率限制比较严格10个ip/3小时内。所以基本上建议要搞证书都用一个公用的账户,那么他的账户申请概念是什么样的呢? 本地生成私钥(pem编码)->调用创建账户接口(/acme/new-acct)->返回创建用户信息-&

记一次Blog迁移到Ghost
js

记一次Blog迁移到Ghost

之前的用了Hexo搭建了Blog,不过由于某次的操作失误导致Hexo本地的source源文件全部丢失.留下的只有网页的Html文件,众所周知,Hexo是一个本地编译部署类型的Blog系统,个人感觉这种类型的Blog特别不稳定,如果本地出了一些问题那么线上就GG了,当然,使用git是可以管理源文件,但是源文件里又包含很多图片的情况下,download和upload一次的时间也会比较长,虽然说这几年都流行这种类型的Blog,但个人看来还是WEB比较实在。

InterceptorCompontent-组件注入概念

前言 本来想定义为拦截器概念的…后来想想好像不对..应该是注入器概念..不过组件名都写好了 就懒得改了. 写这个小功能的原因很简单 目前开发方式都是所有的js放一个文件里了,那么如果我有多个页面,每个页面执行不同的函数 实现方式是不是很简单? function indexCompontent(){ console.log('index') } if($('js-index').length>0){ indexCompontent(); } 用es6的语法写起来就更爽了,可以把每个函数拆开,但是如果我后台想传递一些参数…那是不是很蛋疼了,估计要绑定在html上 然后通过函数主动去获取.. div.js-index(data-user='{"name":"soul","uid":"2333"}') script. function indexCompontent(){ let s=

nodejs微信接入(pc扫码和mobile微信环境下)

前言 本次演示采用nodejs(>7.5)+express+request框架,需要有一定的基础.层级分为四层分别为 路由层 控制层 请求层 视图层 路由层 GET /login # login登录页 GET /login/wechat # mobile微信跳转返回页 GET /login/wechat-pc # pc跳转返回页 控制层 getLogin #对应GET /login 的控制器 wechatLogin #对应GET /login/wechat的控制器 wechatPcLogin #对应GET /login/wechat-pc的控制器 这里为getLogin的控制器,比较简单就渲染一个简单的页面 /** * 用户登录页 * @param req * @param res * @return {Promise.<void>

记一次nginx反向代理内网wordpress

记一次nginx反向代理内网wordpress 参考 nginx反向代理wordpress nginx反向代理wordpress.conf Nginx proxy_set_header 理解 说明 公网ip为 233.233.233.233代理服务器内网ip为 10.10.10.10wordpress内网服务器ip为 10.0.0.1其中nginx代理服务器可以访问内网.需要绑定的域名为abc.com,但是目前域名未备案 所以只能绑定公网ip也就是233.233.233.233 第一种解决方案 不更改wordpress的home_url和site_url 这两个url保持原来的域名不变 在nginx代理服务器那层利用sub_filter 把域名进行替换 第二种解决方案 更改wordpress的home_url和site_url为新域名.并且传递正确的Host. 这里采用的是第二种解决方案.第一种解决方案实际上可以看上述的参考 代理服务器层 conf配置 location /{ proxy_

nodejs微服务设计笔记

前言 豆瓣读书 这本书简单的介绍了如何使用nodejs来搭建微服务,一本实践与理论结合的书籍,如果对于微服务有比较深刻的了解就可以不用看这本书了,但是对于门外汉来说这本书还是有比较大的价值. seneca github 本书大半部分都围绕这个框架来写的. 这个框架就是实现微服务的一个工具罢了.框架使用了匹配模式来触发函数,从而细粒化函数,比如. seneca.add({role:"math",cmd:"sum"},function(msg,res){ var sum=msg.left+msg.right res(null,sum) }) seneca.act({role:"math",cmd:"sum",left:1,right:2},console.

js

js开发总结

基层模块需要封装一层后才对外暴露 这里有个基层的,被封装为promise的基层函数/类 # request.js function request(data){ return new Promise((resolve,reject)=>{ $.ajax({ data, success(res){ resolve(res) }, fail(res){ reject(res) } }) }) } export{ request } 同时我写了个登录函数,依赖于基层类 # login.js import {request} from "request.js" function login(user,pw){ request(user,pw) .then((res)=>{ // get user

js

常用的js(nodejs)库整理

说明 本文为整理自己的github常用star. 免得到时候找个库都不知道找哪个. 本文包含了nodejs和js.可能还含有一些其他语言的库 详情的可以参考我githubStart zdog : 前端的伪3D框架 chart.xkcd : XKCD 手绘风类型的表单 fullPage.js : 全屏单页面的框架 markdown-nice : 支持自定义样式的 Markdown 编辑器 PicGo : 一个用于快速上传图片并获取图片 URL 链接的工具 支持多种图床 Valine : 简单 轻量的评论系统 hoppscotch : api请求工具 类似于postman formily : 阿里巴巴出品的自动化生成表单框架 react系 p5.js : js的在线编辑创意库 qier-progress : 支持彩色或单色的顶部进度条 image-compress-without-backend : 浏览器端图片压缩工具 无后端 panolens.js : 基于three.js的全景查看前端框架 jexcel : js excel表格库 typical : 前端打字机特效

手把手教你如何利用nodejs+es6+co写一个爬虫

注意事项: 这里的爬虫不做太复杂的处理.. 考虑到并发问题.这里的爬虫仅仅是爬完上一个后再爬下一个. 爬完当页后再去爬取下一页,效率虽然低..但是胜在不用同一时间发请大量请求避免被ban 本文以admin5.com为案例来爬取200页的文章title和content 本文涉及到的es6语法这里只会简单的说明一下.如果看不懂…来打我啊(笑) 涉及框架 crawler co cheerio crawler:为一个封装好的nodejs爬虫库,免去你用request框架发请请求然后处理一大堆的返回代码问题.本文只把crawler当做请求工具用.内容的处理将会用cheerio框架来完成 co:能够把异步代码写成跟同步一样,号称es6的async. cheerio:nodejs版的jQuery 分析目标网站url 目标网站的url都是 http://www.admin5.com/browse/19/list_${i}.shtml ${i}<=965 那么这就好办了.生成965个链接然后每次去爬一个链接 分享目标网站DOM结构 目标网站的每篇文字的链接都在一个class为sherry_title的a标签里 <a href="

爽爆天!加速翻墙,优化shadowsocks.让你的梯子飞起来

爽爆天!加速翻墙,优化shadowsocks.让你的梯子飞起来 本文参考了如下的几个教程 在 CentOS 7 下安装配置 shadowsocks kcptunGitHub kcptun_gclient shadowsocks多用户配置 本文的服务器为centos7.0 安装shadowsocks至服务器 首先,关闭防火墙(centos 7.0) systemctl disable firewalld.service systemctl stop firewalld.service centos6.9以下的可以参考 关闭命令: service iptables stop 永久关闭防火墙:chkconfig iptables off 两个命令同时运行,运行完成后查看防火墙关闭状态 service iptables status 1. 安装python 略,一般默认都带Python,如果不带那么谷歌/

SEO

SEO实战密码-入门SEO

SEO常用指令 *通配 比如搜索某些词 李就代表通配符. 李力冰,李五冰 之类的都会出现在搜索词中 inurl inurl用来搜索url中出现的关键词. 比如我的url是 http://baidu.com?a=我是搜索词那么我搜索 inurl:我是搜索词 那么这个条目就会出现在搜索中。不过百度貌似已经不支持此搜索了 inanchor 搜索 inanchor:理财 的时候.比如s网站有个a标签,里面的文字是理财 比如 <a href='http://c.com'>理财</a> 那么这条指令就是搜索的这种.研究c页面中的外链就可以找到很多链接资源,从而分析对方做了哪些SEO优化. tips:百度不支持本条指令 intitle 搜索标题中的关键词.这条很简单就不说了,title一直是SEO很重要的因素,先会检查你title是否匹配然后才会去检查内容 intitle:xxx

个人

记一次服务器迁移记录

记一次服务器迁移记录 最近emufan.com的备案被注销了.而且部署在github上访问和收录都有点不稳定.于是想搬个服务器. 一来是备案不太方便.年初的时候在阿里云备案还不需要邮寄资料.这次还需要邮寄资料.太麻烦了.而且目前并不太在意访问速度..话说目前访问速度很慢么? 挑选服务器 一开始选择了香港的服务器.但是后来想想.香港服务器又贵.性能又不太好.带宽低.而且速度访问有时候还是挺慢的(通常都不错).结合自己的开发和需求最终选择了国外.那么问题来了.选择国外如何选择最优质的服务器?这里去网上查询了一下 发现大家都首推linode..不过不支持PayPal付款..这点就蛋疼了..后来再三挑选下终究选择了digitalocean 点我送$10 因为是点击朋友的注册.所以送了$10.再加上自己购买的是服务器,加上备份快照服务费一个月才$12.5注册后便可以开始创建服务器了 服务器性能测试 这里创建的是centos7.2. 安装好mongodb,lnmp,nvm(nodejs版本管理工具)后就可以开始服务器性能测试了.因为服务器用的是SSD固态硬盘.所以读写速度可以达到700mb/s(待长期测试).至于带宽的话 我选择的是新加坡机房.

Generator控制sprity合并

Generator控制sprity合并 gulp-sprity是一个不错的插件.但是有一点问题 1.生成sass与less的时候所有的变量都在一个less/sass里面.不太好控制和引入 解决方案问题一 一开始是打算直接用for of循环读取数组内容然后直接生成的.但是这样会带来一点问题.如果上一次的内容没有生成,立即执行下一次内容生成会导致出现1.的情况..虽然你生成了两个文件.但是两个文件都是一样的内容.. 控制异步流程 其根本问题在于异步的流程控制.那么如何控制数组中的异步流程?其实就是.你想要函数执行第一次后再去执行接下来的.那么这里就可以用Generator来控制数组是自带了Symbol.iterator 这个Symbol.iterator实际上就是一个Generator那么就可以写一个函数每次结束后再去next. 如何监听gulp.pipe结束 一开始是打算使用.on(‘end’)事件..结果毛用都没.仔细研究和翻阅文档下.发现unpipe和finish这个事件是可以监听到的.end是针对于read,finish是针对于写事件.那么这下就好办了.递归循环即可 最终代码 "use strict"; const gulp = require("gulp"); const

邮箱发送html案例

邮箱发送案例笔记 今天在做邮箱发送案例的时候发现有一些问题需要处理 这里的邮箱指的是QQ邮箱 避免使用*zoom,*display,*xxx 避免使用css样式选择器 规定宽度如650px 利用margin居中 所有样式内联 避免使用复杂样式 1.则是因为邮箱在处理的时候会把不标准的css样式给屏蔽掉.所以导致xxx 以后的样式全部无效.如果要用请把xxx放在最后进行处理 2.和4.可以先利用选择器写好然后再利用gulp脚本自动生成,这里给出一段,所需模块已经require,需要的可以直接去npm进行下载 const gulp=require("gulp"); const inlineCss=require("gulp-inline-css"); const rename=require("gulp-rename"); module.exports=function () { gulp.task("inlineCss",()=>

vue

VuexDemo学习记录

VuexDemo学习记录 Vuex官方 提供了一个很简单的demo来演示vuex的数据流,这里先对Vuex的demo进行一个简单的分析和理解 文件目录 / main.js app.vue /vuex action.js getters.js store.js components Display.vue Increment.vue vuex vuex的数据流可以用三句话解决 用户在组件中的输入操作触发 action 调用; Actions 通过分发 mutations 来修改 store 实例的状态; Store 实例的状态变化反过来又通过 getters 被组件获知。 store 首先在store.js中声明 state以及mutations其中state是用来放数据的,mutations则是用来放触发事件 当执行action的时候 action再去触发mutations action 在actions.js则只声明了一个函数,这个函数的作用仅仅是用来调用mutaions 传递对应的参数给mcations getter vue提供了getter方法,