分享我的发现、想法与心得

0%

唠叨

最近公司在开发一个社交管理后台,看一遍线框图后发现需要富文本编辑器我便找会上两年开发的vue-tinymce组件,可惜的是组件支持还是vue1,所以这个组件需要升级支持vue2。然后有朋友问我为何不用现有的?因为看一圈回来发觉比较不靠谱的啊,全部都需要赋予id值(明明可以内部处理的为何要外部传入?),实在看不下去结果还是完善自己写的这个没多少收藏的库吧:)

阅读全文 »

最近4月番剧想看的都不在b站,然而其他平台均要收费而已也不全,唯独逼着看盗版了(老实说能支持正版就支持,我可是为了看幼女战记买了1个月的优酷土豆的:))。

看盗版麻烦也多,需要翻墙又需要下载。。。为了节省这些麻烦,准备写个脚本去扒种子。

突发奇想-1:能否直接用code调用迅雷去下载bt呢?

答案是可以下载的,但是下不了bt

在网上逛了一圈能看到推荐使用thunderdl比较多,然后尝试着找到thunderdl源头(需翻墙)。

如何使用ThunderDL

使用也很简单一步到位。
下载运行文件并下载迅雷mini迅雷VIP尊享版(当然系统需要.Net Framework 4.5支持才开运行)

比如用的是迅雷mini,便使用ThunderMini下的ThunderDL.exe

使用的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 进入有ThunderDL.exe的目录

C:\Users\Yourself\ThunderMini>ThunderDL
用命令行方式启动迅雷下载。
需安装迅雷简易版1.5.3.288

THUNDERDL url [saveas] [savefolder] [comments] [refurl] [startmode] [originonly]
[originthreadcount]

url 下载文件网址
[saveas] 本地文件名
[savefolder] 本地文件路径
[comment] 自定义描述
[refurl] 参考网址
[startmode] 启动模式(默认 -1)
[origin] 仅从原资源提供网址下载(默认 0)
[originthreadcount] 原线程数(默认 -1)

按任意键退出...

看到这个没有url,博主有点儿绝望了。后续也没尝试比较种子用迅雷也下不下来…

突发奇想-2:bitcomet可能支持命令行调用

去逛了一圈的确有,马上安装bitcomet,并把他弄到系统变量上。

如何使用bitcomet

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

BitComet <TORRENT_FILE> [–output=OUTPUT] [–silent , [–paused] ] [–tray]
打开torrent
TORRENT_FILE: torrent文件的路径。
-o, –output : (可选)设置下载目录的路径。若不使用此参数,则使用默认的下载目录。
OUTPUT : 下载目录的路径(仅支持绝对路径)。
-s, –silent : (可选)安静模式启动。直接添加任务并开始下载,无需确认。
-p, –paused : (可选)直接添加任务,但不自动运行任务。 需要和-s 一起使用。
–tray :(可选) 启动BitComet时不显示主窗体,最小化到系统托盘。仅在第一个BitComet实例运行时有效。

BitComet –url=<URL> [–silent , [–paused] ] [–tray]
通过URL下载文件
–url : 通过URL下载文件。
URL : HTTP,HTTPS,FTP链接 或BC链接。
-s, –silent : (可选)安静模式启动。直接添加任务并开始下载,无需确认。
-p, –paused : (可选)直接添加任务,但不自动运行任务。 需要和-s 一起使用。
–tray : (可选) 启动BitComet时不显示主窗体,最小化到系统托盘。仅在第一个BitComet实例运行时有效。

BitComet –make <SOURCE> [–output=OUTPUT] [–silent] [–tray]
制作torrent文件
-m, –make : 制作torrent文件。
SOURCE : 用于制作torrent文件的源目录或源文件(仅支持绝对路径)。
-o, –output : (可选)设置torrent文件输出路径。若不使用此参数,生成的torrent文件默认路径为源目录或源文件的同一级目录。
OUTPUT : 生成的torrent文件的输出路径(仅支持绝对路径)。
-s, –silent : (可选)安静模式启动。直接使用默认参数制作torrent文件,无需确认。
–tray : (可选) 启动BitComet时不显示主窗体,最小化到系统托盘。仅在第一个BitComet实例运行时有效。

BitComet –tray
启动BitComet,但不显示主窗体,最小化到系统托盘。仅在第一个BitComet实例运行时有效。

BitComet –help
-h, –help 显示命令行使用方法。

哇,这个实在是太方便了

亲测一下,发现虽然没提示,但是bitcomet上的确添加了任务并在下载了,棒(๑•̀ㅂ•́)و✧

1
BitComet F:\download\1986-adfbs.torrent -so F:\download

thunderdl by Google Code
命令行用法

最近研究node后端相关内容,发现每次编码后都需手动重启有点不太科学,再加上看到有文章说可以使用chrome的debug工具进行调试就突然有了兴趣,今天就尝试了一番。

node-inspector

node-inspector就是可以帮助你的使用调试工具调试项目的工具,具体是使用很简单:

1
2
3
4
5
# 安装
npm i -g node-inspector

# 使用
node-debug app.js

运行后自动打开浏览器并默认访问地址http://127.0.0.1:8080/?port=5858,这是可以开始调试你的程序了

有趣的功能

虽然它并没有热更新功能,但是可把调试工具编辑的内容同步记录到文件!

还有一点,它可以只运行调试平台(即:http://127.0.0.1:8080/?port=5858),并同时调试多个项目。

具体操作如下:

1
2
3
4
5
# 运行调试台
node-inspector -p 5859

# 运行调试程序
node --debug app.js

虽然能调试了,却并不能满足文章开头的需求:热更新。

这时我发现了node-supervisor

node-supervisor

node-supervisor 是一个提供热更新的好插件,当你代码更新后会自动重启你的程序。

如何使用?

1
2
3
4
5
6
7
8
# 安装
npm install supervisor -g

# 使用
supervisor app.js

# 监控目录
supervisor -w ./src -- app.js

那怎样结合他们一起使用呢?

简单!

1
2
3
4
5
# 运行调试台
node-inspector -p 5859

# 监控目录
supervisor --debug -w ./src -- app.js

如果你需要自定义运行方式可以这样:

1
supervisor --debug -w -x babel-node -- app.js

完美!享受你调试之旅!

如题,es6 新增的fetch真的简单易用,感觉现在这一个支持完全可行。

4207516360-5840ed50d6151_articlex.png

虽然兼容性问题还是存在,但是打上polyfill后就基本解决了。

1
2
3
4
5
6
Browser Support

Chrome
Firefox
Safari 6.1+
Internet Explorer 10+

来自:github / fetch

使用

简单使用

这里说明一下,fetch必须配合promise一起使用,这会得到更佳效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# get 
fetch('/api/user/1', {method: 'GET'}).then(res => res.json).then(console.log).catch(console.error);

# console.log ######
# {id: 1, username: 'Packy', email: 'packy@uxfeel.com'}

# post
var formData = new FormData();
formData.append('username', 'cathy');
formData.append('email', 'cathy@uxfeel.com');

fetch('/api/user', {method: 'POST', body: formData}).then(res => res.json).then(console.log).catch(console.error);

# console.log ######
# {code: '0', msg: '', data:{}}

跨域

跨域问题并不难只需加上 mode:'cors' 参数,如:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# cross post
var formData = new FormData();
formData.append('username', 'cathy');
formData.append('email', 'cathy@uxfeel.com');

fetch(
'http://192.168.1.120/api/user',
{
method: 'POST',
body: formData,
// 设为跨域请求
mode:'cors'
}
).then(res => res.json).then(console.log).catch(console.error);

想详细了解,请记住CORS关键词并看这里

你可能还需要…

想使用起来更舒心,你还得引用以下这两个包解决兼容:

具体使用例子:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
# api.js

require('es6-promise').polyfill();
require('fetch');

// 此判断在某些浏览器并不能正常检查,导致URLSearchParams不可用,如果你知道具体问题联系以下博主
//if ('searchParams' in HTMLAnchorElement.prototype) {
var URLSearchParams = require('url-search-params');
//}

function handle(response){
return new Promise(function(resolve, reject){
if(response.status === 200){
resolve(response.json())
}else{
var message = defaults.serverError[response.status];
var e = new Error(message || '未知请求错误!');
e.response = response;
reject(e);
}
});
}

module.exports = {
// 登录
login: function(data){
var url = '/user/login';

var formData = new FormData();
Object.keys(data).map(function(attr){
formData.append(attr, data[attr]);
})

return fetch(url, {
method: 'POST',
body: formData,
}).then(handle).catch(handle);
},
// 发送手机验证短信
sendCode: function(data){
var url = '/user/sendCode';

var params = new URLSearchParams('');
Object.keys(data).map(function(attr){
params.append(attr, data[attr]);
})

url+='?'+params.toString();

return fetch(url, {
method: 'GET',
}).then(handle).catch(handle)
}
}

微信小程序使用起来感觉像写h5一样,对于新手估计会有比较多疑惑,如果撇去这些想法应该是很快就能上手的一套开发方案。

但是它自身的限制也比较大,如不提供window对象会导致一些功能实现起来比较麻烦。我这次开发的小程序就遇到了,虽然比较快找到解决办法(可能都是比较标准化的东西),希望之后不会有其他大坑。

需要其实比较简单,就是两页文章列表及文章详情页,刚上手却遇到下面的坑:

  • 无法利用window对象解析xml
  • 不支持HTML标签的使用
  • 怎样兼容Promise和generator异步

刚开始一脸懵逼…后来赶紧去github看看各大牛例子及一些工具就解决了。

阅读全文 »

前言

由于博主最近又闲下来了,之前觉得webpack的官方文档比较难啃一直放到现在。细心阅读多个webpack配置案例后觉得自己写个手脚架,当然这个案例是基于vue的,但是并不影响你使用其他库(jquery这些)。文章会逐步分析每个处理的用意(当然是博主自己的理解),不足之处欢迎指出沟通交流。

案例

一个通用简单的手脚架,只需修改简单配置就可使用,同时满足多页面需求。

https://github.com/lpreterite/multiple-page-vue-webpack-example

使用

1
2
3
4
5
6
7
8
# 安装依赖
$ npm i

# 运行本地服务,访问 http://localhost:6002 进行开发调试
$ npm run dev

# 构建发行版本到./dist目录
$ npm run build

目录结构

1
2
3
4
5
6
build/         #构建配置目录
src/ #源代码目录
clients/ #入口文件
imports/ #js代码目录,此为js引入的root目录
styles/ #全局样式目录
templates/ #页面模板文件(建议和入口文件名字对应)
阅读全文 »

用了差不多一年多的fis,感觉他比其他构建工具更容易上手,扩展插件也比较多。但是诟病也是有的,比如接下来要说的部署问题,虽然fis3本身也有比较好的方案解决(设置url参数),但是对于部署不是给内部同事对接而是给客户部署是遇到不少问题,今天刚好有时间把这个问题解决啦,顺便也纪录下来。

部署问题

由于fis3部署生成的文件路径是网站目录根开始的(如:/assets/img/bg.png),导致网站发布必须是目录根才能有效加载。实际情况可能使用http://www.uxfeel.com/lxyz/这样的目录下发布,怎样才能更好地发布呢?

阅读全文 »

适用于ubuntu 16.04

命令行

进程

1
2
#表示查看所有进程里CMD是java的进程信息, -aux 显示所有状态, grep 是搜索
ps -aux | grep java

解决运行shell存在\r问题,win下编辑的文档会包含\r
实际上它安装了两个工具:todos(相当于unix2dos),和fromdos(相当于dos2unix)
安装完即可,现在你已经可以进行文本格式的转换了。
1
sudo apt-get install tofrodos

安装mongo

1
2
3
4
5
sudo apt-key adv --keyserver hkp://keyserver.ubuntu.com:80 --recv EA312927
#Ubuntu 16.04
echo "deb http://repo.mongodb.org/apt/ubuntu xenial/mongodb-org/3.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-3.2.list
sudo apt-get update
sudo apt-get install -y mongodb-org

添加服务
(Ubuntu 16.04-only) Create systemd service file
Create a new file at /lib/systemd/system/mongod.service with the following contents:

1
2
3
4
5
6
7
8
9
10
11
12
[Unit]
Description=High-performance, schema-free document-oriented database
After=network.target
Documentation=https://docs.mongodb.org/manual

[Service]
User=mongodb
Group=mongodb
ExecStart=/usr/bin/mongod --quiet --config /etc/mongod.conf

[Install]
WantedBy=multi-user.target

阅读全文 »