AngularJs表单形式发送POST请求

AngularJS 的POST请求 默认Content-Type是”application/json”,并不是表单形式的”application/x-www-form-urlencoded”提交,服务端接收到的是对象,而不是字段,当然对于RESTful接口来说,正好需要对象,SpringMVC通过@RequestBody注解就可以得到相应对象,很是方便。

如果需要使用传统方式,可以设置Content-Type

    $http.post('/login/in', $.param({username: $scope.username, password: $scope.password}),
        {headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'}})
        .then(function (response) {
            if (response.data.success) {
                console.log("登录成功");
            } else {
                console.log(response.data.msg);
            }
        });

$.param是JQuery方法,将js对象转成username=username&password=password形式

ngrok+nginx 实现内网穿透 共用80端口

内网穿透能干嘛:

穿透后,你的机器指定端口就直接暴露在外网上,3389,vnc,web服务等等任何服务都可以支持。微信开发需要回调web服务器接口,如果开发机器在内网,就无法调试。

原理

外网服务器A,内网服务器B,通过某种协议连接,将域名解析到A,A将所有用户请求数据转发到B的指定端口,B返回的数据通过A转给用户,等于在B和用户之间加了代理A

解决方案

内网穿透有现成的商业解决方案,比如说花生壳,但是免费用户只给1g每月的流量,还要花几块钱认证。
网上也有免费的ngrok服务,直接下载对方提供的客户端就可以,但免费的总是不稳定,也有一些限制,需要的同学可以自己搜。

今天我们讨论的是在自己的VPS上架设ngrok服务,访问内网的web服务,场景是这台vps上同时开了着web服务(nginx),所以不能直接将80端口作为ngrok的转发端口, ngrok配置成功后,需要在nginx上作一次转发,才能使用80端口。

机器是centos 6.7。

1、安装最新版git

当前yum安装的git是1.7.1,这个版本太老,编译ngrok时会有问题,需要下载源码编译安装。

源码:https://github.com/git/git

安装方法:

$ tar -zxf git-xxx.tar.gz
$ cd git-xxx
$ make prefix=/usr/local all
$ sudo make prefix=/usr/local install
2、安装编译依赖
yum install zlib-devel openssl-devel perl hg cpio expat-devel gettext-devel curl curl-devel perl-ExtUtils-MakeMaker hg wget gcc gcc-c++ golang
3、域名解析

ngrok的客户端在连接时可以自己指定子域名前缀,所以需要将域名泛解析到外网服务器。
假设子域名形式为 aaa.dev.pocketdigi.com,需要在DNS设置中添加 dev.pocketdigi.com A记录到外网服务器,*.dev.pocketdigi.com cname到 dev.pocketdigi.com

4、安装ngrok
git clone https://github.com/inconshreveable/ngrok.git
cd ngrok

NGROK_DOMAIN="dev.pocketdigi.com"

openssl genrsa -out base.key 2048
openssl req -new -x509 -nodes -key base.key -days 10000 -subj "/CN=$NGROK_DOMAIN" -out base.pem
openssl genrsa -out server.key 2048
openssl req -new -key server.key -subj "/CN=$NGROK_DOMAIN" -out server.csr
openssl x509 -req -in server.csr -CA base.pem -CAkey base.key -CAcreateserial -days 10000 -out server.crt

cp base.pem assets/client/tls/ngrokroot.crt

make release-server

生成的服务端在ngrok/bin/ngrokd

5、生成客户端

客户端如果跟编译的机器系统不同,编译前需要加参数,比如编译mac使用的客户端

GOOS=darwin GOARCH=amd64 make release-client

生成的客户端在ngrok/bin/darwin_amd64/ngrok

6、启动服务端

假设ngrok目录在/usr/local/ngrok

/usr/local/ngrok/bin/ngrokd -tlsKey=/usr/local/ngrok/server.key -tlsCrt=/usr/local/ngrok/server.crt -domain="dev.pocketdigi.com" -httpAddr=":8888" -httpsAddr=":444" > /home/logs/ngrok.log &

监听http 8888端口,https 444端口,所有访问到外网服务器8888和444端口的数据都会经过ngrok处理转发。
可以把上面的命令加到/etc/rc.local,实现开机自启动

#####7、启动客户端
将第5步生成的客户端下载到mac电脑上,假设放到/Users/xxx/ngrok目录下.
在该目录新建一个配置文件 ngrok.cfg,内容如下:

server_addr: "dev.pocketdigi.com:4443"
trust_host_root_certs: false

假设我们要将aaa.dev.pocketdigi.com映射到本地的8080端口,新建aaa.dev.pocketdigi.com.sh(可以放到任意位置,文件名也只能方便识别),内容如下:

#!/bin/sh
cd ~/ngrok
nohup ./ngrok -subdomain aaa -config=ngrok.cfg 8080 &

加上执行权限:

chmod +x aaa.dev.pocketdigi.com.sh

在终端中执行 aaa.dev.pocketdigi.com.sh,看到Tunel Status online时,表示连接服务器成功,一台机器可以绑多个域名,重复上面的步骤即可.

现在,启动本地的tomcat,端口8080,可以通过http://aaa.dev.pocketdigi.com:8888访问。

但带着端口号始终不方便,我们可以在运行在服务器80端口上的nginx上做个转发,将 *.dev.pocketdigi.com 转发到 *.dev.pocketdigi.com:8888

添加vhost:

server {
    listen       80;
    server_name  *.dev.pocketdigi.com;
    location / {
             proxy_pass http://$host:8888;
             proxy_redirect off;
             client_max_body_size 10m;   
             client_body_buffer_size 128k; 
             proxy_connect_timeout 90; 
             proxy_read_timeout 90;
             proxy_buffer_size 4k;       
             proxy_buffers 6 128k;        
             proxy_busy_buffers_size 256k;
             proxy_temp_file_write_size 256k; 
        }
    location ~ .*\.(gif|jpg|png|bmp|swf)$ {
                 expires 30d;
        }
    location ~ .*\.(js|css)?$ {
                expires 1d;
    }
}

在http{}里,添加DNS:

resolver      8.8.8.8;

重启nginx,现在可以用http://aaa.dev.pocketdigi.com访问本地8080端口。

所有请求都会走服务器流量,如果服务器同时开着其他服务,速度可能会受影响

Ionic:Tab保持在底部

Ionic的官方tab应用模板,在不同的设备上,tab的显示位置可能是在顶部,也可能是在底部,不统一,需要通过$ionicConfigProvider 强制指定显示位置。

修改app.js 的config方法

.config(function($stateProvider, $urlRouterProvider,$ionicConfigProvider) {
        //tab强制在底部
        $ionicConfigProvider.tabs.position('bottom');
        xxxxxxxxxx 原来的其他配置

Android开发:Parcelable和Serializable序列化的区别

Android在Intent,Bundle传递数据时,都需要对象对应的类实现Parcelable或Serializable接口,即序列化。都是序列化,这两者有什么区别呢?
Serializable是Java定义的序列化接口,底层用反射实现,使用时io开销比较大,适用于将对象存储到文件或网络传输。
而Parcelable是Android定义的接口,使用起来相对复杂些,需要写一堆的方法(同是避免了使用反射),不过,在AndroidStudio里,可以用一个叫Android Parcelable code generator的小插件快速生成代码。
Parcelable的优势在于,效率高,在内存中传输时,建议使用Parcelable。有评测显示Parcelable性能比Serializable高十倍以上。

PHP开发:REST接口 POST方法获取客户端提交的对象

根据REST规范,新增数据用POST方法。如果采用传统的application/x-www-form-urlencoded表单形式提交对象,需要将每个字段的值和value取出来,放到参数里,服务端接收到后,再还原成相应的对象作处理,这对客户端和服务端都是额外的工作。
客户端与服务端之间传输对象,最好的方式是用json或者xml,客户端跟服务端都有相应的工具序列化或反序列化对象。个人更倾向于json,代码更简洁,转换也更方便。
客户端提交请求时,设置Content-Type 为”application/json;charset=UTF-8″,告诉服务端消息主体是json,服务端判断$_SERVER[‘CONTENT_TYPE’],如果是json,则使用file_get_contents(‘php://input’)获取消息主体,取到的就是对象序列化后的json字符串,再作相应处理。

Android开发:LayerDrawable setBounds无效解决方法

设计效果是这样的:
circle
两个圆,底下是蓝色,上面的是白色,用LayerDrawable做,两个ShapeDrawable最合适不过,因为要动态改白圆的大小,所以直接写在xml里就不太合适,用Java代码写.
但是发现在白色的ShapeDrawable上setBounds没有缩进的效果,直接把下面的蓝圆盖掉了。其实这里应该用LayerDrawable的setLayerInset方法:

        OvalShape shape1 = new OvalShape();
        ShapeDrawable drawable1 = new ShapeDrawable(shape1);
        drawable1.getPaint().setColor(colorBlue);
        Drawable[] drawables = new Drawable[2];
        drawables[0] = drawable1;
        OvalShape shape2 = new OvalShape();
        ShapeDrawable drawable2 = new ShapeDrawable(shape2);
        //下面一行无效
//        drawable2.setBounds(10,10,10,10);
        drawable2.getPaint().setColor(Color.WHITE);
        drawables[1] = drawable2;
        LayerDrawable layerDrawable = new LayerDrawable(drawables);
        //需要使用setLayerInset,第一个参数是drawable索引,后面是左上右下
        layerDrawable.setLayerInset(1, 10,10,10,10);
        ViewHelper.setBackgroundForView(viewCircle,layerDrawable);

ThinkPHP 转换数据库查询出的数据到对应类型

默认情况下,Thinkphp查询出的所有字段值类型都是String,如果是开发web,当然没问题,但开发接口,就很麻烦了,总不能让客户端去转类型。
ThinkPHP的Model.class.php时,提供了_parseType方法,可以在查询完以后,做类型转换,但框架没有这么干,需要我们手工调一下。
写一个Model基类:
BaseModel.class.php,因为我用到关联查询,所以继承自RelationModel

use Think\Model;
use Think\Model\RelationModel;

class BaseModel extends RelationModel
{
    //在查询后,转换数据类型
    protected function _after_select(&$resultSet, $options)
    {
        parent::_after_select($resultSet,$options);
        foreach ($resultSet as &$result) {
            $this->_after_find($result, $options);
        }
    }
    protected function _after_find(&$result, $options)
    {
        parent::_after_find($result,$options);
        foreach ($result as $field => $value) {
            $this->_parseType($result, $field);
        }

    }
}

所有的Model类继承自BaseModel.
本来,这样已经搞定了,但发现Model.class.php的_parseType方法里有个低级bug,看图:
thinkphpbug