Iris框架入门系列2-Iris服务监听和配置

Iris服务监听

Iris 提供了丰富的服务监听方法。

  1. 普通Http方式, 按照ip:port的格式,如:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package main
import (
"github.com/kataras/iris"
"github.com/kataras/iris/context"
)
func main() {
app := iris.New()
app.Get("/", func(ctx context.Context) {
ctx.HTML("<h1>Hello World!</h1>")
})
//http://localhost:8080
app.Run(iris.Addr(":8080"))
}
  1. Socket监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package main
import (
"github.com/kataras/iris"
"github.com/kataras/iris/core/netutil"
)
func main() {
app := iris.New()
listener, err := netutil.UNIX("/tmp/server.sock", 0666)
if err != nil {
panic(err)
}
app.Run(iris.Listener(listener))
}
  1. Https监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package main
import (
"github.com/kataras/iris"
"github.com/kataras/iris/context"
)
func main() {
app := iris.New()
app.Get("/", func(ctx context.Context) {
ctx.Writef("Hello from the SECURE server")
})
// start the server (HTTPS) on port 443
app.Run(iris.TLS("127.0.0.1:443", "mycert.cert", "mykey.key"))
}

同时,还可以将http重定向到https

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
package main
import (
"net/url"
"github.com/kataras/iris"
"github.com/kataras/iris/context"
"github.com/kataras/iris/core/host"
)
func main() {
app := iris.New()
app.Get("/", func(ctx context.Context) {
ctx.Writef("Hello from the SECURE server")
})
app.Get("/mypath", func(ctx context.Context) {
ctx.Writef("Hello from the SECURE server on path /mypath")
})
//创建http服务,并将其转到https
target, _ := url.Parse("https://127.0.1:443")
go host.NewProxy("127.0.0.1:80", target).ListenAndServe()
//创建https服务
app.Run(iris.TLS("127.0.0.1:443", "mycert.cert", "mykey.key"))
}

查看全文

Iris框架入门系列1-Iris开发环境搭建

前置说明

本系列需要读者了解Go语言的基本语法,如果还没有了解,点此快速了解
本系列也不会对Go语言Web开发进行深入探讨,意在让读者了解Iris开发框架,深入的部分,未来会在其它系列中慢慢道来。
本系列重点在Iris框架上,不对Go Web框架进行比较。

Iris 介绍

Iris是使用Go语言开发的一个Web开发框架,特点有 飞快(fast)、简单(simple)、效率(efficient)、小巧(micro),笔者也是觉得该框架用起来比较顺手,虽然也存在诸多的问题,但不足以掩盖它的好用。

项目地址:https://github.com/kataras/iris

截止到本篇文章更新,当前的Iris版本为:v8.1.0,最后一条更新记录:

  • Update to 8.1.0 - a new logger implemented as a solution for #680

可以看出维护者也是比较勤奋,话不多说,进入正题。

安装Go环境

  • 安装包安装

查看全文

微信小程序长按事件触发点击事件的BUG处理

微信小程序开发说实话还是有点糟心的,经过事件冒泡的坑之后,又遇到了长按事件(longtap)必触发点击事件(tap)的BUG

如下代码

  • wxml
1
2
3
4
5
<view class="container">
<view>
<button bindtap="tap" bindlongtap="longtap">长按我</button>
</view>
</view>
  • js
1
2
3
4
5
6
7
8
9
10
Page({
data: {
},
tap: function() {
console.log('触发了 tap')
},
longtap: function () {
console.log('触发了 longtap')
}
})
  • 效果

longtap触发tap演示

解决方法

Google后确定是小程序有意(B)为(U)之(G)后,看了一下网上的解决方法,基本都是通过touchstarttouchend重新判定taplongtap事件的,个人不是很喜欢。

查看全文

2017春节小结

目标

又是一年春节假期,而这个春节我制定了几个目标:

  • 完成100公里的跑步计划
  • 完成一个基于微信的活动平台
  • 完成WorkStation一期计划的80%

春节中的事情还是比较琐碎的,过节的常规事情,时不时还要处理下公司服务器的报警问题等。所以能完成以上几个事情是极好的。

总结

很快,假期到了尾声,也是对照目标做总结的时候了。

  • 目标一:「完成100公里的跑步计划」

这是我优先级最高的目标,长期的坐着不运动让人非常不舒服,长时间下来代码都不能愉快的写了。之前都是断断续续的跑着,最高纪录,也就是连续7天10公里,这次也算是个小挑战。锻炼这种东西,不能三天打渔两天晒网,否则根本没用。身体为先,我做到了每天坚持跑,即便是在只有1℃刮着4级风的日子。

2017后面的日子,就是要尽量做到一周至少五次,没理由不坚持!

查看全文

使用PHP-Imagick快速实现漂亮的复古效果

先来看下效果图

复古效果展示

要实现以上效果,我们先用Photoshop用以下步骤实现。

  • 打开原图
  • 新建图层,使用颜色#C0FFFF填充后,不透明度设为44%,图层混合模式为柔光
  • 新建图层,使用颜色#000699填充后,不透明设置为48%,图层混合模式为排除
  • 合并图层

用PHP代码,也就只需要按照以上步骤实现即可,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//打开图片
$im = new Imagick('./hebe.jpg');
//新建图层,使用颜色`#C0FFFF`填充后,不透明度设为`44%`
$layer = new Imagick();
$layer->newImage($im->getImageWidth(), $im->getImageHeight(), '#C0FFFF');
$layer->setImageOpacity (0.44);
//叠加到原图上,图层混合模式为`柔光`
$im->compositeImage($layer, Imagick::COMPOSITE_SOFTLIGHT, 0, 0);
//新建图层,使用颜色`#000699`填充后,不透明设置为`48%`
$layer = new Imagick();
$layer->newImage($im->getImageWidth(), $im->getImageHeight(), '#000699');
$layer->setImageOpacity (0.48);
//叠加到原图上,图层混合模式为`排除`
$im->compositeImage($layer, Imagick::COMPOSITE_EXCLUSION, 0, 0);
//完成!
$im->writeImage('./vintage.jpg');

查看全文

ES2015入门系列11-模块 Modules

看一下官方介绍:

Language-level support for modules for component definition.

JS在ES2015开始原生支持模块化开发,我们之前也曾借助于诸如:

  • AMD
  • CommonJS

等的模块加载器进行过模块化开发,我想说的是那些都没有今天要讲的简单好用。

⚠️ 警告,正式版中的ES2015中没有模块加载器,所以我们依然需要之前的模块加载器帮助我们。

先来介绍下语法(官方示例代码):

1
2
3
4
5
6
7
8
9
10
//lib/math.js
export function sum(x, y) {
return x + y;
}
export var pi = 3.141593;
//app.js
import * as math from 'lib/math';
import {sum, pi} from 'lib/math';
console.log("2π = " + math.sum(math.pi, math.pi));
  • 模块中对象暴露

只需要 export xx 即可,可以是任何类型的对象。

查看全文

ES2015入门系列10-类 classes

OK, 我们继续,这次来聊聊类。

内有 Jon Snow大战异鬼, 😄

熟悉后端的朋友们对类肯定都不陌生,如下面一段PHP的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Human
{
protected $name;
public function __construct($name)
{
$this->name = $name;
}
public function introduce()
{
echo '你好,我叫 ' . $this->name . PHP_EOL;
}
}
$jack = new Human('Jack');
$jack->introduce();

上面的代码,我们创建了一个叫Human的类,初始化的时候传入名字,还有一个自我介绍的方法。

同样的功能到了JS的世界呢? 且看下面的代码(ES5):

1
2
3
4
5
6
7
8
9
10
var Human = function(name) {
this.name = name;
};
Human.prototype.introduce = function() {
console.log('你好,我叫 ' + this.name);
};
var jack = new Human('Jack');
jack.introduce();

对了,你没有看错,在JS的世界中,我们就是这么来实现类的开发的, 总感觉哪里不舒服对吧?

到了ES2015(ES6), 事情就变得美好了,一起来看看下面的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Human {
constructor(name) {
this.name = name;
}
introduce() {
console.log(`你好,我是 ${this.name}`);
}
}
let jack = new Human('Jack');
jack.introduce();

查看全文

Hexo插件之自动摘要生成器(hexo-excerpt)

Hexo 默认没有对列表页面进行摘要处理,即列表页面会把整个文章内容抛出,很吓人对不对?

除非手动在内容中增加:

1
<!-- more -->

本插件通过注册generator对所有文章在生成的时候进行处理,如果文章内容含有10个一级html标签,那么取这10个做为列表页面摘要,否则全部显示。

更新 v1.1.0

  • 支持传统的分割模式

用到了htmlparser2模块。

核心代码:

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
let nodes = [];
let parser = new htmlparser.Parser(new htmlparser.DomHandler((err, dom) => {
if (!err) {
nodes = dom;
}
}), {
decodeEntities: false
});
parser.write(post.content);
parser.done();
if (nodes.length > 10) {
let stopIndex = 0;
for (let i = 0; i < nodes.length; i++) {
if (nodes[i].type === 'tag') {
if (++stopIndex > 9) {
break;
}
}
}
nodes = nodes.slice(0, stopIndex);
post.excerpt = (nodes.map(node => domutils.getOuterHTML(node))).join('');
}

Github仓库:

查看全文

ES2015入门系列9-Babel和Rollup

通过前面章节的讲解,大家对ES2015的一些新语法有了初步的理解,之前我们的测试代码都可以直接放入 Chrome Console 中直接运行,为了更好的学习后面的面向对象和模块开发,我先用一章介绍一下 Babel 和 Rollup。

ES2015虽然够好用,奈何没有浏览器对其可以完全支持,本文书写时间,Chrome开发版号称已经支持99%的ES2015特性。

所以,我们需要借助一个可以帮助我们将ES6代码翻译为浏览器都100%支持的ES5代码的工具,这就是本文的主角之一:Babel

打开Babel官网, 可以看到大大的介绍:

Babel is a JavaScript complier. Use next generation JavaScript today.

Babel是Javascript编译器,可以让我们现在就可以使用新的语法写JavaScript,而不用担心浏览器兼容的问题。

开始安装:

本系列假定读者都有NodeJS使用经验,如果还没有,赶紧去这里了解并安装吧。

我们可以使用

1
npm install --global babel-cli

查看全文

ES2015入门系列8-新对象特性

继续以代码进行展开, 在ES5中,如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function makeDuckToy() {
var name = '鸭子';
var color = '黄色';
return {
name: name,
color: color,
quacks: function() {
console.log('嘎嘎嘎~~~');
}
}
}
var duck = makeDuckToy();
console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~

ES2015为对象带来的新特性:

  • 属性简写

如果属性名称和变量名称一致,那么可以直接用省略变量名,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function makeDuckToy() {
let name = '鸭子';
let color = '黄色';
return {
name,
color,
quacks: function() {
console.log('嘎嘎嘎~~~');
}
}
}
let duck = makeDuckToy();
console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~
  • 方法简写

方法可以省略冒号以及function关键字, 如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function makeDuckToy() {
let name = '鸭子';
let color = '黄色';
return {
name,
color,
quacks() {
console.log('嘎嘎嘎~~~');
}
}
}
let duck = makeDuckToy();
console.log(duck.name); // 鸭子
console.log(duck.color); // 黄色
duck.quacks(); //嘎嘎嘎~~~
  • 解构赋值

查看全文