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

0%

发表于 更新于 分类于 Valine： 0

在2017年1月番《小林家的龙女仆》里的康娜真的萌得不行，特别是她那小圆脸小圆腿搭配着哥特萝莉绝对领域套装让萝莉控口水直流啊(¯﹃¯)，好想有个这样的女儿啊(๑•̀ㅂ•́)و✧。

カンナちゃん~ o(≧ω≦)o

by はるか 2017-01-21 03:48:10 on pixiv


正常视觉≡ω≡

カンナ

by Aile/エル@FANBOX 2017-03-04 00:00:01 on pixiv


(ﾟДﾟ≡ﾟДﾟ)
阅读全文 »

发表于 更新于 分类于 Valine：

最近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
命令行用法

发表于 更新于 分类于 Valine：

最近研究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

完美！享受你调试之旅！

发表于 更新于 分类于 Valine：

如题，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)
    }
}

发表于 更新于 分类于 Valine：

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

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

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

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

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

阅读全文 »

发表于 更新于 分类于 Valine：

前言

由于博主最近又闲下来了，之前觉得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/ #页面模板文件（建议和入口文件名字对应）
阅读全文 »

发表于 更新于 分类于 Valine：

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

部署问题

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

阅读全文 »

发表于 更新于 分类于 Valine：

适用于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

阅读全文 »

发表于 更新于 分类于 Valine：

前一段时间忙完公司的项目开始闲下来，打算自己写个todolist什么的小应用，然后就跑去调研了一下nodejs环境下有那些比较好的框架写后端服务，本打算用express+sequelize写restful风格API的，可惜没找到更方便的工具快速制作，然后就遇到meteor。

##meteor

meteor比起express还是使用restful规范的服务端来得更先进，用起来更舒服。
简单使用，只需要在服务端定义发布数据，在客户订阅的数据并能获得，当然这是归功于基于DDP协议的socket服务。

总结一下特点：

  1. 服务端与客户端编码风格一致（全TM是javascript）
  2. 极具实时性（数据基于websocket，模板可以动态加载）
  3. 集成了开源工具和框架（webpack、vue随意使用）

##快速上手教程

教程坚持使用vue和webpack，所以这里有个问题，怎么才能跟meteor很好地结合一起呢？

答案：使用在meteor安装webpack支持！尤大的证言

先学基础，不喜欢的跳过也可以。
meteor基础教程传送门

###快速开始
请git clone以下

https://github.com/lpreterite/meteor-vue-webpack-example

运行只需

1
2
$ npm i
$ meteor

下文要讲的是，那些东西事必须的，比如在package.json这段：

1
2
3
4
# 设置的客户端与服务端入口文件

"main": "src/server.js",
"browser": "src/client.js",

webpack.config.js需要指定root和热更新设置devServer

1
2
3
4
5
6
"root": "./src",
"devServer":{
  "host": "localhost",
  "hot": true,
  "inline": true,
},

定义你的数据对象

1
2
3
4
# collections.js

export const Tasks = new Mongo.Collection('tasks')
export const Tags = new Mongo.Collection('tags')

发布

1
2
3
4
5
6
7
8
# publications.js

import {Meteor} from 'meteor/meteor';
import {Tasks} from './collections';

Meteor.publish('tasks', function() {
    return Tasks.find();
});

阅读全文 »