0%

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形式

内网穿透能干嘛:

穿透后,你的机器指定端口就直接暴露在外网上,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应用模板,在不同的设备上,tab的显示位置可能是在顶部,也可能是在底部,不统一,需要通过$ionicConfigProvider 强制指定显示位置。

修改app.js 的config方法

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

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

用flex按比例布局,以下代码为将一个box拆分成1:1:1

    <div class="box">
        <div class="sub">sub1</div>
        <div class="sub">sub2</div>
        <div class="sub">sub3</div>
    </div>


.box {
    width: 100%;
    height: 200px;
    border: 1px #ccc solid;
    /*flex布局*/
    display: -webkit-flex;
    display: flex;
    /*水平*/
    -webkit-flex-direction: row;
}
.box .sub {
    /*比例*/
    -webkit-flex: 1;
    border: #c0ff60 2px solid;
    height: 100%;
}

根据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字符串,再作相应处理。

设计效果是这样的: 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查询出的所有字段值类型都是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

为啥把它叫做程序员专用VPS呢?主要因为它的后台提供了一键安装openVpn,ShadowSocks的功能,可以帮助我们上Youtube,twitter,github之类的,当然,几乎所有的国外VPS都可以安装类似的工具,但自己折腾起来还是挺麻烦的。如果你只是用于科学上网,买个最低配,256M内存,流量500G,够用,后台一键安装shadowsocks,甚至都不用进ssh。BandwagonHost目前有5个数据中心,感觉卡了自己在后台随便换,不用开工单。256M内存年付19.99刀,合人民币130元左右,支持paypal,支付宝,信用卡支付。我现在3个同事合租,每年每人也就40多块RMB,只要不是同时上youtube之类的视频网站,网速绝对没问题。购买进官方网站

选择最便宜的10G vps1 支付完后,进KiwiVM Control Panel: vps2 最底下有个Shadowsocks Server,右侧有一健安装按钮,安装完会显示账号和密码以及端口,加密方式,过程完全不用连ssh,当然也可以用OpenVpn,但我个人更倾向于Shadowsocks,因为开了vpn,国内网站也会走vpn,速度慢,而用shadowsocks可以配置Chrome的SwitchyOmega插件,让无法直接访问的网站通过代理访问。配合一些路由器,小米,极路由等支持openwrt,PandoraBox固件,可以通过安装ChinaDNS,shadowsocks插件实现自动分流,设备只要连上这些路由器就自动翻墙。 VPS购买链接

控件效果如下图: ios-swift-tab 切换时会有动画效果。 原理,使用贝塞尔曲线做动画,参考 iOS开发:仿余额宝金额跳动效果。 代码如下:

UICTabView.swift:

import UIKit

@IBDesignable class UICTabView: UIView {

 var delegate:UICTabViewDelegate?
//标记动画结束,没结束不响应事件
var animationFinish = true
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}
override init(frame: CGRect) {
    super.init(frame: frame)
}
//tab数量
@IBInspectable var tabCount:Int = 3 {
    didSet {
        setNeedsDisplay()
        
    }
}
///字体大小
@IBInspectable var tabFontSize:CGFloat = 15 {
    didSet {
        setNeedsDisplay()
    }
}
///tab文本颜色 
@IBInspectable var textColor:UIColor = UIColor.whiteColor() {
    didSet {
        setNeedsDisplay()
    }
}
///指示条的高度
@IBInspectable var indicatorHeight:CGFloat = 10 {
    didSet {
         setNeedsDisplay()
    }
}

///选中项
@IBInspectable var selectedIndex:Int = 0 {
    didSet {
        if (selectedIndex > tabCount - 1) {
            selectedIndex = tabCount - 1
        }
        indicatorViewContainer?.selectedIndex = selectedIndex
    }
    
}
//tab上显示的文字
var tabTexts:\[String\] = \[\]

var tabWidth:CGFloat = 0
//指示器container
var indicatorViewContainer:UICTabIndicatorViewContainer!
override func drawRect(rect: CGRect) {
    for view in self.subviews {
        view.removeFromSuperview()
    }
    
    let width = self.frame.size.width
    let height = self.frame.size.height
    tabWidth = width / CGFloat(tabCount)
    
    
    for i in 0..= pointNumber) {
           indicator?.frame.origin.x = tabWidth * CGFloat(selectedIndex)
            (self.superview as! UICTabView).animationFinish = true
        }else{
            let currentPoint: NSArray = allPoints.objectAtIndex(indexCurrent) as! NSArray
            let value = currentPoint.objectAtIndex(1) as! Float
            let currentTime = currentPoint.objectAtIndex(0) as! Float
            
            ++indexCurrent
            lastTime = currentTime;
            
            
            indicator?.frame.origin.x = CGFloat(value)
            //延迟调用changeNumberBySelector方法,重新设string
            let delay = durationPerFrame * Double(NSEC\_PER\_MSEC)
            let time = dispatch\_time(DISPATCH\_TIME_NOW, Int64(delay))
            //循环调用自己
            dispatch\_after(time, dispatch\_get\_main\_queue(), {
                NSThread.detachNewThreadSelector(Selector("smoothMove"), toTarget:self, withObject: nil)
            })
            
        }
    }
    
}

}

//MARK: 委托协议
///tab切换事件
@objc protocol UICTabViewDelegate {
///tab点击
optional func tabView(tabView:UICTabView,selectedTabIndex:Int)
}

可在storyboard中设置tab数量,指示器颜色等,但tab内容需要在代码里设 ViewController中使用:

import UIKit

class HomeViewController: UIViewController,UICTabViewDelegate {

@IBOutlet weak var headerView: UIView!

@IBOutlet weak var tabView: UICTabView!

override func viewDidLoad() {
    super.viewDidLoad()

    // Do any additional setup after loading the view.
    //定义渐变的颜色,多色渐变太魔性了,我们就用两种颜色
    let topColor = UIColor(red: (206/255.0), green: (53/255.0), blue: (33/255.0), alpha: 1)
    let buttomColor = UIColor(red: (215/255.0), green: (75/255.0), blue: (58/255.0), alpha: 1)
    //将颜色和颜色的位置定义在数组内
    let gradientColors: \[CGColor\] = \[topColor.CGColor, buttomColor.CGColor\]
    let gradientLocations: \[CGFloat\] = \[0.0, 1.0\]
    setGradientBackground(self.headerView, gradientColors: gradientColors, gradientLocations: gradientLocations)
    
    tabView.delegate = self

    
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}


func tabView(tabView:UICTabView,selectedTabIndex:Int) {
    //tab切换
    PLog.d("切到\\(selectedTabIndex)")
}

override func preferredStatusBarStyle() -> UIStatusBarStyle {
    return UIStatusBarStyle.LightContent
}

/*
// MARK: - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    // Get the new view controller using segue.destinationViewController.
    // Pass the selected object to the new view controller.
}
*/

}