Blog Archives

Posted:

Dec 24, 2014

Tags:

Comments:

用阿里云配置VPN

操作系统实用工具系列文章，将介绍基于Linux ubuntu的各种工具软件的配置和使用。有些工具大家早已耳熟能详，有些工具经常用到但确依然陌生。我将记录我在使用操作系统时，安装及配置工具上面的一些方法，把使用心得记录下来也便于自己的以后查找和回忆。

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/vpn-aliyun/

前言

每次配置虚拟机的网络环境，都要花不少的时间，这次在阿里云上捣鼓VPN又出了岔子，VPN映射的网段和阿里云的虚拟机内网网段重叠了，而且阿里云自动做了路由，导致VPN路由失效。

本文将总结一下阿里云配置VPN的问题，估计自己以后也会经常回来翻看的。

网络架构
遇到的问题
如何解决问题

1. 网络架构

要开发一个互联网应用，通常我们都需要购买服务器，部署自己应用然后托管到机房。对于刚起步的小公司来说，买服务器到托管到机房成本有点高，而且可能资源用不完，这时我们就有了一个更便宜的选择就是先租虚拟主机，阿里云就提供了这种服务。当然，和国外的主机服务商比阿里云还是很贵的，而且服务还有一些差距，但和国外的其他服务商比，也只能选阿里云了。

通常在阿里云租的虚拟主机，都会包括一个外网IP(121.x.x.x)和一个内网IP(10.x.x.x)，外网IP主要面向互联网的访问，内网IP可以让内网的多台计算机通过内网进行通信。

接下来，我们会对应用进行分层，有用于数据存储的服务器(大硬盘)，有用于计算的服务器(CPU密集型)，有用于用户访问服务器(IO密集型)。另外，对于私密性比较高的数据或应用，我们通常用到VPN进行加密访问，从而保证传输过程的安全。

我们一旦建立VPN连接，所有外网网络访问都将走VPN的加密通道，VPN通常只是小型私密网络，所以互联网的访问连接将会被切断。那么当互联网的访问被切掉到了，我们用Putty远程连接VPN的主机，也会访问不到了，这时就需要通过内网其他主机进行代理连接。比如，当Aliyun1打开VPN后，我们就不能直接通过Putty连接了，需要先用Putty登陆Aliyun2，再通过Aliyun2走内网登陆到Aliyun1。

对于虚拟主机来说，即使只租用一台服务器也可以实现VPN的连接。当服务器进行了VPN连接，你可以从宿主机管理控制台，对连接VPN的计算机进行操作。阿里云也提供了这个功能，可以通过网页直接登陆。

2. 遇到的问题

上面我们介绍的，都是标准的VPN访问流程。那么，我其实遇到了一个问题，就是阿里云的内网IP网段是10.x.x.x，连接VPN生成的私密网络的网段也是10.x.x.x，这时就造成了IP网段冲突。每个网卡都需要配置IP地址，网关，子网掩码，DNS服务器等，如果内网和外网的网段或IP发生冲突，而且两边的网络服务都不能进行修改，那么就直接无解了。幸运的是，只是A类的地址冲突了，而且B类,C类,D类的地址没有冲突。那么，可以通过把网断进行不同的映射，配置网关和路由。

其实，发现上面的问题，也是花了一些时间的。

我们先看阿里云主机的默认网络配置。


~ ifconfig
eth0      Link encap:Ethernet  HWaddr 00:16:3e:00:36:37
          inet addr:10.169.0.162  Bcast:10.169.7.255  Mask:255.255.248.0
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:109 errors:0 dropped:0 overruns:0 frame:0
          TX packets:43 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:9597 (9.5 KB)  TX bytes:6767 (6.7 KB)

eth1      Link encap:Ethernet  HWaddr 00:16:3e:00:3d:3b
          inet addr:121.41.77.206  Bcast:121.41.79.255  Mask:255.255.252.0
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:2294 errors:0 dropped:0 overruns:0 frame:0
          TX packets:151 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:108919 (108.9 KB)  TX bytes:12624 (12.6 KB)

lo        Link encap:Local Loopback
          inet addr:127.0.0.1  Mask:255.0.0.0
          UP LOOPBACK RUNNING  MTU:65536  Metric:1
          RX packets:0 errors:0 dropped:0 overruns:0 frame:0
          TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:0 (0.0 B)  TX bytes:0 (0.0 B)

~ cat /etc/resolv.conf
options timeout:1 attempts:1 rotate
nameserver 10.202.72.118
nameserver 10.202.72.116

~ route
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
default         121.41.79.247   0.0.0.0         UG    0      0        0 eth1
10.0.0.0        10.169.7.247    255.0.0.0       UG    0      0        0 eth0
10.169.0.0      *               255.255.248.0   U     0      0        0 eth0
100.64.0.0      10.169.7.247    255.192.0.0     UG    0      0        0 eth0
121.41.76.0     *               255.255.252.0   U     0      0        0 eth1
172.16.0.0      10.169.7.247    255.240.0.0     UG    0      0        0 eth0

安装及配置VPNC


# 安装VPNC
~ apt-get install vpnc

# 配置文件
~ vi /etc/vpnc/default.conf

IPSec gateway xxx.com
IPSec ID xxx
IPSec obfuscated secret xxxxxxxxx
Xauth username xxx
Xauth password xxxxxx

启动VPN连接。


~ vpnc
Stopped Name Service Cache Daemon: nscd.
 * Starting Name Service Cache Daemon nscd                                             [ OK ]
VPNC started in background (pid: 1543)...

查看网站连接，会多出tun0的网卡，分配的IP地址为10.1.15.228。


~ ifconfig
eth0      Link encap:Ethernet  HWaddr 00:16:3e:00:36:37
          inet addr:10.169.0.162  Bcast:10.169.7.255  Mask:255.255.248.0
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:1727 errors:0 dropped:0 overruns:0 frame:0
          TX packets:551 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:103050 (103.0 KB)  TX bytes:70120 (70.1 KB)

eth1      Link encap:Ethernet  HWaddr 00:16:3e:00:3d:3b
          inet addr:121.41.77.206  Bcast:121.41.79.255  Mask:255.255.252.0
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:128289 errors:0 dropped:0 overruns:0 frame:0
          TX packets:649 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:5435081 (5.4 MB)  TX bytes:82302 (82.3 KB)

lo        Link encap:Local Loopback
          inet addr:127.0.0.1  Mask:255.0.0.0
          UP LOOPBACK RUNNING  MTU:65536  Metric:1
          RX packets:0 errors:0 dropped:0 overruns:0 frame:0
          TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:0 (0.0 B)  TX bytes:0 (0.0 B)

tun0      Link encap:UNSPEC  HWaddr 00-00-00-00-00-00-00-00-00-00-00-00-00-00-00-00
          inet addr:10.1.15.228  P-t-P:10.1.15.228  Mask:255.255.255.255
          UP POINTOPOINT RUNNING NOARP MULTICAST  MTU:1412  Metric:1
          RX packets:40 errors:0 dropped:0 overruns:0 frame:0
          TX packets:82 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:500
          RX bytes:3328 (3.3 KB)  TX bytes:11016 (11.0 KB)

通过情况下，这样的配置已经生效了，VPN也连接正常，但VPN网络确无法访问。


~ ping testvpn
ping: unknown host testvpn

第一感觉是DNS出问题了，查看DNS还是原来的内容，没有发生变化。


~ cat /etc/resolv.conf
options timeout:1 attempts:1 rotate
nameserver 10.202.72.118
nameserver 10.202.72.116

通常VPN连接的时候，都会配置一个新的DNS，那么我们把这个DNS设置成自动更新的。


~ dpkg-reconfigure resolvconf

同时，修改tail文件，设置一个更快速的阿里云DNS服务器。


vi /etc/resolvconf/resolv.conf.d/tail

nameserver 223.5.5.5
nameserver 223.6.6.6

断开VPN再重连接VPN


~ vpnc-disconnect
Terminating vpnc daemon (pid: 1543)

~ vpnc
Stopped Name Service Cache Daemon: nscd.
 * Starting Name Service Cache Daemon nscd                                             [ OK ]
VPNC started in background (pid: 2111)...

再次查看DNS的配置，我们看到/etc/resolv.conf已经会自动更新了。


cat /etc/resolv.conf
# Dynamic resolv.conf(5) file for glibc resolver(3) generated by resolvconf(8)
#     DO NOT EDIT THIS FILE BY HAND -- YOUR CHANGES WILL BE OVERWRITTEN
nameserver 10.1.1.1
nameserver 10.1.1.2
search xxx.test.cn
nameserver 223.5.5.5
nameserver 223.6.6.6

但通过VPN网络还是无法访问。


~ ping testvpn
ping: unknown host testvpn

检查路由表


 route
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
default         *               0.0.0.0         U     0      0        0 tun0
10.0.0.0        10.169.7.247    255.0.0.0       UG    0      0        0 eth0
10.1.15.0       *               255.255.255.0   U     0      0        0 tun0
10.169.0.0      *               255.255.248.0   U     0      0        0 eth0
100.64.0.0      10.169.7.247    255.192.0.0     UG    0      0        0 eth0
121.41.76.0     *               255.255.252.0   U     0      0        0 eth1
172.16.0.0      10.169.7.247    255.240.0.0     UG    0      0        0 eth0
vpn.test.com    121.41.79.247     255.255.255.255 UGH   0      0        0 eth1

这个时候就发现了，由VPN生成的10.1.15.0被强制使用了阿里云的10.0.0.0 的路由10.169.7.247，检查网卡配置文件/etc/network/interfaces。


~  cat /etc/network/interfaces
auto lo
iface lo inet loopback

auto eth1
iface eth1 inet static
address 121.41.77.206
netmask 255.255.252.0
up route add -net 0.0.0.0 netmask 0.0.0.0 gw 121.41.79.247 dev eth1

auto eth0
iface eth0 inet static
address 10.169.0.162
netmask 255.255.248.0

up route add -net 172.16.0.0 netmask 255.240.0.0 gw 10.169.7.247 dev eth0
up route add -net 100.64.0.0 netmask 255.192.0.0 gw 10.169.7.247 dev eth0
up route add -net 10.0.0.0 netmask 255.0.0.0 gw 10.169.7.247 dev eth0

最后一行发现了问题。

up route add -net 10.0.0.0 netmask 255.0.0.0 gw 10.169.7.247 dev eth0

这个网段的10.0.0.0所有IP统一会使用10.169.7.247的网关，怪不得VPN始终不通，原来是阿里云服务器默认的配置造成的问题。

3. 如何解决问题

只要定位到了问题，解决就不难。

我们看到由于阿里云的内网是10.x.x.x的，我们的几台服务器也分别是10.168.x.x, 10.169.x.x, 10.200.x.x, 10.251.x.x，我估计它是从10.1.x.x到10.255.x.x都配置了网络，所以直接对A类网段进行了配置。通过VPN生成的IP为10.1.15.228，从B类网段开始刚好与阿里云租的机器不重合，那么我们重新定义阿里云的网段配置就行了，对B类网段做映射。

修改文件 /etc/network/interfaces。


~ vi /etc/network/interfaces
auto lo
iface lo inet loopback

auto eth1
iface eth1 inet static
address 121.41.77.206
netmask 255.255.252.0
up route add -net 0.0.0.0 netmask 0.0.0.0 gw 121.41.79.247 dev eth1

auto eth0
iface eth0 inet static
address 10.169.0.162
netmask 255.255.248.0

up route add -net 172.16.0.0 netmask 255.240.0.0 gw 10.169.7.247 dev eth0
up route add -net 100.64.0.0 netmask 255.192.0.0 gw 10.169.7.247 dev eth0
#up route add -net 10.0.0.0 netmask 255.0.0.0 gw 10.169.7.247 dev eth0

up route add -net 10.200.0.0 netmask 255.255.0.0 gw 10.169.7.247 dev eth0
up route add -net 10.168.0.0 netmask 255.255.0.0 gw 10.169.7.247 dev eth0
up route add -net 10.169.0.0 netmask 255.255.0.0 gw 10.169.7.247 dev eth0
up route add -net 10.251.0.0 netmask 255.255.0.0 gw 10.169.7.247 dev eth0

重启网卡


~ /etc/init.d/networking restart

竟然是无效的命令，只能重启计算机了。


~ reboot

重启后，查看路由表。


~ route
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
default         121.41.79.247   0.0.0.0         UG    0      0        0 eth1
10.168.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
10.169.0.0      *               255.255.248.0   U     0      0        0 eth0
10.169.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
10.200.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
10.251.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
100.64.0.0      10.169.7.247    255.192.0.0     UG    0      0        0 eth0
121.41.76.0     *               255.255.252.0   U     0      0        0 eth1
172.16.0.0      10.169.7.247    255.240.0.0     UG    0      0        0 eth0

对B类网段的配置已经生效，已经去除了对A类10网段的配置。

连接VPN。


~ vpnc
Stopped Name Service Cache Daemon: nscd.
 * Starting Name Service Cache Daemon nscd                                             [ OK ]
VPNC started in background (pid: 1368)...

查看路由表


~ route
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
default         *               0.0.0.0         U     0      0        0 tun0
10.1.15.0       *               255.255.255.0   U     0      0        0 tun0
10.168.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
10.169.0.0      *               255.255.248.0   U     0      0        0 eth0
10.169.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
10.200.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
10.251.0.0      10.169.7.247    255.255.0.0     UG    0      0        0 eth0
100.64.0.0      10.169.7.247    255.192.0.0     UG    0      0        0 eth0
121.41.76.0     *               255.255.252.0   U     0      0        0 eth1
172.16.0.0      10.169.7.247    255.240.0.0     UG    0      0        0 eth0
vpn.test.com    121.41.79.247   255.255.255.255 UGH   0      0        0 eth1

10.1.15.0由VPN生成的IP，没有被强制路由。

连接VPN内网计算机


~ ping testvpn
PING testvpn.xxx.com.cn (10.1.1.13) 56(84) bytes of data.
64 bytes from testvpn.xxx.com.cn (10.1.1.13): icmp_seq=1 ttl=127 time=39.5 ms
64 bytes from testvpn.xxx.com.cn (10.1.1.13): icmp_seq=2 ttl=127 time=40.4 ms

终于访问正常了，这样就完成了，通过阿里云连接VPN服务的网络配置。

本文主要记录了网络调试的一系列操作，阿里云在方便易用的同时，也会有一些额外的问题，需要大家有更多的Linux使用经验，从而有能力解决各种的VM技术问题。

转载请注明出处：
http://blog.fens.me/vpn-aliyun/

打赏作者

Posted:

Aug 14, 2014

Tags:

angular angular.js angularjs route uri url

Comments:

44 Comments

AngularJS去掉的URL里的#号

AngularJS体验式编程系列文章，将介绍如何用angularjs构建一个强大的web前端系统。angularjs是由Google团队开发的一款非常优秀web前端框架。在当前如此多的web框架下，angularjs能脱颖而出，从架构设计上就高人一等，双向数据绑定，依赖注入，指令，MVC，模板。Angular.js创新地把后台技术融入前端开发，扫去jQuery一度的光芒。用angularjs就像写后台代码，更规范，更结构化，更可控。

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/angularjs-url/

前言

天天都在用AngularJS，各类文档也都看过好几遍，但总是些编程上的事找不到优雅的解决办法。今天终于把AngularJS的项目访问路径URL里的#号去掉了，这个问题不见得有多难，关键是花多长时间去理解AngularJS框架本身。

URL的#号问题
找到错误原因
静态网站的解决方案
动态网站的解决方案

1. URL的#号问题

使用AngularJS的朋友都应该了解，AngularJS框架定义了自己的前端路由控制器，通过不同URL实现单面(ng-app)对视图(ng-view)的部署刷新，并支持HTML5的历史记录功能，详细介绍可以参考文章：AngularJS路由和模板。

对于默认的情况，是不启动HTML5模式的，URL中会包括一个#号，用来区别是AngularJS管理的路径还是WebServer管理的路径。

比如：下面的带#号的URL，是AngularJS管理的路径。

http://onbook.me/
http://onbook.me/#/
http://onbook.me/#/book
http://onbook.me/#/about

这种体验其实是不太友好的，特别是像我这种喜欢简洁设计的人，#号的出现非我自愿的，怎么看怎么难受。AngularJS框架提供了一种HTML5模式的路由，可以直接去掉#号。

通过设置$locationProvider.html5Mode(true)就行了。


book.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

   //..省略代码
    $locationProvider.html5Mode(true);
}]);

支持HTML5的路由URL。

http://onbook.me/
http://onbook.me/book
http://onbook.me/about

接下来的问题就来了，当用这种方式设置了路径以后。如果用户从首页(http://onbook.me/)开始访问，然后跳转到图书页(http://onbook.me/book)一切正常。但如果用户直接打开图书页(http://onbook.me/book) ，就会出现404错误。

就是这个问题纠结了我好长时间，让我不得不用带#号的URL。

2. 找到错误原因

那么，这个问题的原因出在哪里了呢？在路径解析上出错了。

让我从头说起，AngularJS是单页应用，一个ng-app对应一个页面，一个URL。AngularJS实现了自己的前端路由，让一个ng-app可以管理多个URL，再对应到多个ng-vew上面。当我们去访问URL(http://onbook.me/book) 的时候，怎么确定这个路径是 WebServer 后台管理的URL还是AngularJS前台管理的URL呢？

分2种情况看：

1. 用户如果是先访问首页(http://onbook.me)，然后再跳转到页面(http://onbook.me/book)，则这个跳转是由AngularJS前台管理的URL，访问是正常的。
2. 用户直接访问页面(http://onbook.me/book)时，请求是先被提交到了WebServer后台，后台路由没有对应页面(http://onbook.me/book)的路由管理，就会出现404的错误。

如果能把这层想明白，技术上就非常容易解决了。我们让WebServer把属于AngularJS管理的路由URL，都发转到ng-app就可以解决404的问题了，同时，没有#号，还支持HTML5的历史记录查询！！

实现起来分为2种解决方案：

1. 静态网站：纯前台网站(JS+HTML+CSS)，通过Nginx提供Web服务。
2. 动态网站：前台(JS + HTML + CSS) + 后台Node.js提供Web服务。

3. 静态网站的解决方案

静态网站，我们需要修改的地方包括3个文件

index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
nginx.conf : nginx的网站配置文件

编辑 index.html，增加base标签。


<html lang="zh-CN" ng-app="book">
<head>
    <base href="/">
	
// 省略代码
</head>

编辑app.js，增加 $locationProvider.html5Mode(true);


book.config(['$routeProvider', '$locationProvider', '$sceProvider', 'tplProvider', function ($routeProvider, $locationProvider, $sceProvider, tplProvider) {
    $routeProvider
        .when('/', {templateUrl: tplProvider.html('welcome'), controller: 'WelcomeCtrl'})
        .when('/book', {templateUrl: tplProvider.html('book'), controller: 'BookCtrl'})             //图书
        .when('/book-r1', {templateUrl: tplProvider.html('book-r1'), controller: 'BookR1Ctrl'})   //R的极客理想
        .when('/video', {templateUrl: tplProvider.html('video'), controller: 'VideoCtrl'})         //视频
        .when('/about', {templateUrl: tplProvider.html('about'), controller: 'AboutCtrl'})         //关于作者
        .otherwise({redirectTo: '/'});
    $locationProvider.html5Mode(true);
}]);

编辑nginx的配置文件，增加try_files配置。


server {
        set $htdocs /www/deploy/mysite/onbook;
        listen 80;
        server_name onbook.me;
        location / {
            root $htdocs;
            try_files $uri $uri/ /index.html =404;
        }
}

这样，静态网站就搞定了，没有麻烦的#号了，可以直接访问和任意页面的刷新。

4. 动态网站的解决方案

动态网站，我们同样需要修改的地方包括3个文件。

index.html : ng-app的定义文件
app.js : 对应ng-app的控制文件
server.js : Express框架的路由访问控制文件

index.html 和 app.js两个文件修改，同静态网站的解决方案。动态网站，一般不是通过Nginx直接路由，而是通过Web服务器管理路由。假设我们使用的是Node.js的Express的Web框架。

打开Express框架的路由访问控制文件server.js，增加路由配置。


app.use(function (req, res) {
    console.log(req.path);
    if(req.path.indexOf('/api')>=0){
        res.send("server text");

    }else{ //angular启动页
        res.sendfile('app/index.html');
    }
});

设置当站内路径(req.path) 不包括 /api 时，都转发到 AngularJS的ng-app(index.html)。所以，我们再直接访问地址 (http://onbook.me/book)时，/book 不包括 /api，就会被直接转发到AngularJS进行路由管理。我们就实现了路由的优化！

我已用了AngularJS有8-9个月了，主要功能都用到了，但还不见其全貌。经常会遇到各种问题，不过比起jQuery的各种无解的问题，还是值得的。优秀的框架值得我们的研究和使用，在摸索中前进！

转载请注明出处：
http://blog.fens.me/angularjs-url/

打赏作者

Posted:

Aug 30, 2013

Tags:

angular angular.js angularjs ng-view route template

Comments:

35 Comments

AngularJS路由和模板

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/angularjs-route-template/

前言

如果想开发一款类似gmail的web应用，我们怎么做呢？

以jQuery的思路，做响应式的架构设计时，我们要监听所有点击事件，通过事件函数触发我们加载数据，提交，弹框，验证等的功能；以 AngularJS的思路，做声明式的架构设计时，我们通过指令和路由先设定好，什么样的操作干什么事情，等事件发生时，程序就会知道该干什么了。

今天说一下，AngularJS是如何实现前端路由功能的！

AngularJS路由介绍
路由的代码实现
实现效果截图

1. AngularJS路由介绍

AngularJS路由功能是一个纯前端的解决方案，与我们熟悉的后台路由不太一样。后台路由，通过不同的URL会路由到不同的控制器上(controller)，再渲染(render)到页面(HTML)。AngularJS的前端路由，需求提前对指定的(ng-app)，定义路由规则(routeProvider)，然后通过不同的URL，告诉(ng-app)加载哪个页面(HTML)，再渲染到(ng-app)视图(ng-view)中。

AngularJS的前端路由，虽然URL输入不一样，页面展示不一样，其实完成的单页(ng-app)视图(ng-view)的局部刷新。这样来看，AngularJS做单页应用就有点标配的感觉了。

从这个角度想想，要实现一个gmail的应用，真的就不难了。

2. 路由的代码实现

理论不多说了，直接上代码！！还是基于我们之前用yeoman构建的项目。

业务场景：论坛功能，帖子列表页(list.html) 和帖子内容页(detail.html)。

代码文件：

1. 增加：app/demo-route.html
2. 增加：app/views/route/list.html
3. 增加：app/views/route/detail.html
4. 修改: app/scripts/app.js
5. 修改: app/scripts/controllers/main.js

1). 增加：app/demo-route.html
这个文件是主页面(ng-app)，包含视图(ng-view)

<!doctype html>
<head>
<meta charset="utf-8">
<title>route</title>
</head>
<body ng-app="routeApp">
<h1>Route Demo index</h1>

<div ng-view></div>

<script src="bower_components/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/controllers/main.js"></script>
</body>
</html>

2). 增加：app/views/route/list.html
这个页面是布局模板，是HTML的代码片段。包括了一组ID的列表，通过ID列表的链接，可以进入到ID的详细页面。


<hr/>
<h3>Route : List.html</h3>

<ul>
<li ng-repeat="id in [1, 2, 3 ]">
<a href="#/list/{{ id }}"> ID{{ id }}</a>
</li>
</ul>

3). 增加：app/views/route/detail.html
这个页面是布局模板，是HTML的代码片段。通过ID访问，包含ID号, (ID的文章内容)


<hr/>
<h3>Route <span style="color: red;">{{id}}</span>: detail.html </h3>

4). 修改: app/scripts/app.js
这个是ng-app文件的定义，我们在demo-route.html中定义了routeApp，在这里需要声明。


var routeApp = angular.module('routeApp',[]);
routeApp.config(['$routeProvider',function ($routeProvider) {
      $routeProvider
      .when('/list', {
        templateUrl: 'views/route/list.html',
        controller: 'RouteListCtl'
      })
      .when('/list/:id', {
          templateUrl: 'views/route/detail.html',
          controller: 'RouteDetailCtl'
      })
      .otherwise({
        redirectTo: '/list'
      });
}]);

在routeApp模块中，我们定义了路由和布局模板。routeApp的默认URL是/list，即http://localhost:9000/demo-route.html#/list。跳转详细页的路由是/list/:id，id为参数。

同时，/list的布局模板是views/route/list.html，属于RouteListCtl的控制器管理空间。

5). 修改: app/scripts/controllers/main.js
这个文件定义控制器controller。


routeApp.controller('RouteListCtl',function($scope) {
});
routeApp.controller('RouteDetailCtl',function($scope, $routeParams) {
    $scope.id = $routeParams.id;
});

分别对应该路由中的两个控制器声明。

程序写好，我们打开浏览器看效果。

3. 实现效果截图

别忘了用下面命令，启动程序。

grunt server

浏览器被自动打开，默认出的是http://localhost:9000/demo-route.html#/list, “#/list”是被redirectTo转向的结果。

点击ID2的链接。

页面被刷新了，出了detil的页面。同时，我们注意观察，页面没有整个刷新，而在视图中(ng-view)做的局部刷新。因为，chrome的开发工具的监控中，只是看到detail.html被加载。

我们再浏览地址栏中，输入212

http://localhost:9000/demo-route.html#/list/212

观察chrome的开发工具的监控中，没有任何的networking操作。

在浏览地址栏中，再输入原来list的地址

http://localhost:9000/demo-route.html#/list

观察chrome的开发工具的监控，确认没有任何变化！！

从这个实验，我们看到AngularJS纯前端路由的实现思路，配合视图的局部刷新，把业务功能切片后分散到HTML的模板页面中。非常容易地实现了widget。并且，这种widget可重用性会非常高，能大大减少前端代码量。

后端组件化开发思路，流畅的嵌入前端。爽死啦！！！

转载请注明出处：
http://blog.fens.me/angularjs-route-template/

打赏作者

Posted:

Jul 3, 2013

Tags:

ppp PPTP route Ubuntu VPN

Comments:

12 Comments

Ubuntu通过PPTP协议使用VPN

关于作者

张丹(Conan), 程序员Java,R,PHP,Javascript
weibo：@Conan_Z
blog: http://blog.fens.me
email: bsspirit@gmail.com

转载请注明出处：
http://blog.fens.me/vpn-pptp-client-ubuntu/

前言

GFW给大家的生活事带来了各种不便，只有靠我们自己才能改变这种不便。像facebook, twitter, youtube, google+, bitbucket, slideside…. 这些世界知名的网站，我们都没有办法直接访问，有时候你很难联想到为什么要屏蔽这些网站。特别是纯技术社区！

不过我们也有很多的技术，可以穿越这条封锁线。今天我们聊一下，ubuntu通过PPTP协议使用VPN(Virtual Private Network)，如何看到外面的世界。

关于PPTP的服务器端配置：请参考在Ubuntu上安装PPTP VPN服务文章
win7通过PPTP协议使用VPN：请参考 win7通过PPTP协议使用VPN 文章

获得VPN账号
ubuntu客户端界面配置
ubuntu命令行配置
看看外面的世界youtube

1. 获得VPN账号

当你有了基于PPTP协议的VPN账号后，怎么在ubuntu中配置！
VPN账号包括3个部分：IP，用户名，密码

比如：(只为演示说明，此账号不可用)
ip: 123.123.123.123
用户名：xx1
密码: xx2

2. ubuntu客户端界面配置

1. 点击右上角网络 –》VPN Connections –》Configure VPN
2. 新建一个VPN连接–》Add
3. 输入VPN账号：–》Advanced
Connection name: 连接号
Gateway: VPN服务器IP
Username: 用户名
Password: 密码
4. 高级选项 –》 Use Point-to-Point encryption(MPPE)
5. 选择VPN连接 –》连接成功提示。

3. ubuntu命令行配置

安装pptp客户端软件

~ sudo apt-get install pptp-linux

查看网络配置

~ ifconfig
eth0      Link encap:Ethernet  HWaddr 08:00:27:90:e8:19
          inet addr:192.168.1.200  Bcast:192.168.1.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fe90:e819/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:74 errors:0 dropped:0 overruns:0 frame:0
          TX packets:64 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:8112 (8.1 KB)  TX bytes:8542 (8.5 KB)

lo        Link encap:Local Loopback
          inet addr:127.0.0.1  Mask:255.0.0.0
          inet6 addr: ::1/128 Scope:Host
          UP LOOPBACK RUNNING  MTU:16436  Metric:1
          RX packets:0 errors:0 dropped:0 overruns:0 frame:0
          TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:0 (0.0 B)  TX bytes:0 (0.0 B)

~ route -n
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
0.0.0.0         192.168.1.1     0.0.0.0         UG    100    0        0 eth0
192.168.1.0     0.0.0.0         255.255.255.0   U     0      0        0 eth0

~ ip route 
default via 192.168.1.1 dev eth0  metric 100
192.168.1.0/24 dev eth0  proto kernel  scope link  src 192.168.1.200

初始化一个VPN的连接通道：myvpn

~ sudo pptpsetup --create myvpn --server xxx.xxx.xxx.xxx --username xx1--password xx2--encrypt --start

Using interface ppp0
Connect: ppp0  /dev/pts/1
CHAP authentication succeeded
MPPE 128-bit stateless compression enabled
local  IP address 10.10.10.3
remote IP address 10.10.10.1

成功连接到远程VPN服务器。

通过刚才的创建脚步：
在/etc/ppp/peers目录下面，会生成一个叫myvpn的文件。
在/etc/ppp目录下面，用户名和密码会写在chap-secrets文件中。


~ sudo vi /etc/ppp/peers/myvpn

# written by pptpsetup
pty "pptp xxx.xxx.xxx.xxx --nolaunchpppd"
lock
noauth
nobsdcomp
nodeflate
name conan2
remotename myvpn
ipparam myvpn
require-mppe-128

#生成用户名和密码
~ sudo vi /etc/ppp/chap-secrets
xx1 myvpn "xx2" *

通过网站路由功能，测试VPN


#安装traceroute 
~ sudo apt-get install traceroute 

~ traceroute www.163.com
traceroute to www.163.com (101.23.128.17), 30 hops max, 60 byte packets
 1  localhost (192.168.1.1)  2.222 ms  3.144 ms  3.132 ms
 2  111.192.144.1 (111.192.144.1)  80.279 ms  80.632 ms  80.624 ms
 3  61.148.185.69 (61.148.185.69)  9.026 ms  9.492 ms  9.479 ms
 4  124.65.61.157 (124.65.61.157)  9.469 ms  9.459 ms  9.447 ms
 5  202.96.12.185 (202.96.12.185)  9.829 ms  9.783 ms  9.771 ms
 6  219.158.96.110 (219.158.96.110)  17.160 ms  17.210 ms  17.158 ms
 7  61.182.176.178 (61.182.176.178)  30.222 ms  28.589 ms  28.077 ms
 8  60.5.194.58 (60.5.194.58)  29.293 ms  29.287 ms  29.276 ms
 9  60.5.197.214 (60.5.197.214)  26.617 ms  26.724 ms  26.668 ms
10  101.23.255.45 (101.23.255.45)  27.672 ms  28.147 ms  26.811 ms
11  101.23.128.17 (101.23.128.17)  25.890 ms  28.065 ms  28.420 ms

我们发现虽然VPN已经连接成功，但是路由没有通过VPN上网，第1跳还是localhost (192.168.1.1)

再次查看网络连接配置


~ ifconfig
eth0      Link encap:Ethernet  HWaddr 08:00:27:90:e8:19
          inet addr:192.168.1.200  Bcast:192.168.1.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fe90:e819/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:175 errors:0 dropped:0 overruns:0 frame:0
          TX packets:162 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:16817 (16.8 KB)  TX bytes:19723 (19.7 KB)

lo        Link encap:Local Loopback
          inet addr:127.0.0.1  Mask:255.0.0.0
          inet6 addr: ::1/128 Scope:Host
          UP LOOPBACK RUNNING  MTU:16436  Metric:1
          RX packets:0 errors:0 dropped:0 overruns:0 frame:0
          TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:0 (0.0 B)  TX bytes:0 (0.0 B)

ppp0      Link encap:Point-to-Point Protocol
          inet addr:10.10.10.3  P-t-P:10.10.10.1  Mask:255.255.255.255
          UP POINTOPOINT RUNNING NOARP MULTICAST  MTU:1496  Metric:1
          RX packets:7 errors:0 dropped:0 overruns:0 frame:0
          TX packets:7 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:3
          RX bytes:70 (70.0 B)  TX bytes:76 (76.0 B)

~ route -n
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
0.0.0.0         192.168.1.1     0.0.0.0         UG    100    0        0 eth0
10.10.10.1      0.0.0.0         255.255.255.255 UH    0      0        0 ppp0
50.116.27.194   192.168.1.1     255.255.255.255 UGH   0      0        0 eth0
192.168.1.0     0.0.0.0         255.255.255.0   U     0      0        0 eth0

~ ip route
default via 192.168.1.1 dev eth0  metric 100
10.10.10.1 dev ppp0  proto kernel  scope link  src 10.10.10.3
50.116.27.194 via 192.168.1.1 dev eth0  src 192.168.1.200
192.168.1.0/24 dev eth0  proto kernel  scope link  src 192.168.1.200

我们发现默认路由是指向eth0。

下面修改路由配置：

#修改路由命令
~ sudo ip route del default 
~ sudo ip route add default dev ppp0

~ route -n
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
0.0.0.0         0.0.0.0         0.0.0.0         U     0      0        0 ppp0
10.10.10.1      0.0.0.0         255.255.255.255 UH    0      0        0 ppp0
50.116.27.194   192.168.1.1     255.255.255.255 UGH   0      0        0 eth0
192.168.1.0     0.0.0.0         255.255.255.0   U     0      0        0 eth0

~ ip route
default dev ppp0  scope link
10.10.10.1 dev ppp0  proto kernel  scope link  src 10.10.10.3
50.116.27.194 via 192.168.1.1 dev eth0  src 192.168.1.200
192.168.1.0/24 dev eth0  proto kernel  scope link  src 192.168.1.200

~ traceroute www.163.com
traceroute to www.163.com (101.23.128.17), 30 hops max, 60 byte packets
 1  localhost (10.10.10.1)  281.093 ms  281.414 ms  280.941 ms
 2  router2-dal.linode.com (67.18.7.162)  281.225 ms  281.109 ms  281.841 ms
 3  xe-2-0-0.car04.dllstx2.networklayer.com (67.18.7.93)  280.882 ms  284.002 ms  283.913 ms
 4  po102.dsr01.dllstx2.networklayer.com (70.87.254.81)  284.123 ms  284.087 ms  283.979 ms
 5  po21.dsr01.dllstx3.networklayer.com (70.87.255.65)  284.000 ms  283.921 ms  283.839 ms
 6  ae16.bbr01.eq01.dal03.networklayer.com (173.192.18.224)  283.542 ms  279.296 ms  290.455 ms
 7  dls-bb1-link.telia.net (213.248.102.173)  301.426 ms  302.092 ms  302.085 ms
 8  las-bb1-link.telia.net (213.155.131.77)  327.192 ms  327.350 ms  327.344 ms
 9  chinaunicom-ic-151188-las-bb1.telia.net (213.248.94.126)  478.941 ms  479.089 ms  479.083 ms
10  219.158.30.173 (219.158.30.173)  496.679 ms  496.673 ms  496.667 ms
11  219.158.97.57 (219.158.97.57)  516.819 ms  517.035 ms  517.011 ms
12  219.158.5.129 (219.158.5.129)  491.084 ms  490.018 ms  497.472 ms
13  219.158.100.130 (219.158.100.130)  518.239 ms  518.216 ms  518.192 ms
14  61.182.176.186 (61.182.176.186)  533.695 ms  533.673 ms  533.666 ms
15  101.23.255.230 (101.23.255.230)  512.212 ms  512.500 ms  512.479 ms
16  60.5.194.74 (60.5.194.74)  519.246 ms  519.815 ms  519.791 ms
17  101.23.255.45 (101.23.255.45)  526.522 ms  526.907 ms  526.844 ms
18  101.23.128.17 (101.23.128.17)  522.068 ms  517.535 ms  517.240 ms

查看第一跳，localhost (10.10.10.1)，已经通过VPN实现路由。

停止VPN


~ sudo poff myvpn

~ ifconfig
eth0      Link encap:Ethernet  HWaddr 08:00:27:90:e8:19
          inet addr:192.168.1.200  Bcast:192.168.1.255  Mask:255.255.255.0
          inet6 addr: fe80::a00:27ff:fe90:e819/64 Scope:Link
          UP BROADCAST RUNNING MULTICAST  MTU:1500  Metric:1
          RX packets:2270 errors:0 dropped:0 overruns:0 frame:0
          TX packets:1991 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:1000
          RX bytes:207578 (207.5 KB)  TX bytes:184147 (184.1 KB)

lo        Link encap:Local Loopback
          inet addr:127.0.0.1  Mask:255.0.0.0
          inet6 addr: ::1/128 Scope:Host
          UP LOOPBACK RUNNING  MTU:16436  Metric:1
          RX packets:0 errors:0 dropped:0 overruns:0 frame:0
          TX packets:0 errors:0 dropped:0 overruns:0 carrier:0
          collisions:0 txqueuelen:0
          RX bytes:0 (0.0 B)  TX bytes:0 (0.0 B)

再ping网站，发现网络出现问题。Network is unreachable


~ ping www.163.com
connect: Network is unreachable

~ route -n
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
50.116.27.194   192.168.1.1     255.255.255.255 UGH   0      0        0 eth0
192.168.1.0     0.0.0.0         255.255.255.0   U     0      0        0 eth0

~ ip route
50.116.27.194 via 192.168.1.1 dev eth0  src 192.168.1.200
192.168.1.0/24 dev eth0  proto kernel  scope link  src 192.168.1.200

重置路由


~ sudo ip route add default via 192.168.1.1

~ route -n
Kernel IP routing table
Destination     Gateway         Genmask         Flags Metric Ref    Use Iface
0.0.0.0         192.168.1.1     0.0.0.0         UG    0      0        0 eth0
50.116.27.194   192.168.1.1     255.255.255.255 UGH   0      0        0 eth0
192.168.1.0     0.0.0.0         255.255.255.0   U     0      0        0 eth0

~ ip route
default via 192.168.1.1 dev eth0
50.116.27.194 via 192.168.1.1 dev eth0  src 192.168.1.200
192.168.1.0/24 dev eth0  proto kernel  scope link  src 192.168.1.200

#再次ping网站，访问成功！
~ ping www.163.com
PING 163.xdwscache.glb0.lxdns.com (101.23.128.17) 56(84) bytes of data.
64 bytes from 101.23.128.17: icmp_req=1 ttl=54 time=25.6 ms
64 bytes from 101.23.128.17: icmp_req=2 ttl=54 time=25.5 ms
64 bytes from 101.23.128.17: icmp_req=3 ttl=54 time=27.8 ms

通过ip-up, ip-down配置路由


~ sudo vi /etc/ppp/ip-up.d/route-traffic

#!/bin/bash
/sbin/ip route add 50.116.27.194 via 192.168.1.1
/sbin/ip route del default
/sbin/ip route add default dev ppp0

~ sudo vi /etc/ppp/ip-down.d/disableroute

#!/bin/bash
/sbin/ip route add default via 192.168.1.1

重启VPN连接


~ sudo pon myvpn
#路由跟踪正确
~ traceroute www.163.com
traceroute to www.163.com (123.125.34.30), 30 hops max, 60 byte packets
 1  localhost (10.10.10.1)  293.397 ms  293.782 ms  293.668 ms
 2  router2-dal.linode.com (67.18.7.162)  293.530 ms  293.721 ms  294.223 ms
 3  xe-2-0-0.car04.dllstx2.networklayer.com (67.18.7.93)  293.454 ms  293.358 ms  293.239 ms
 4  po102.dsr02.dllstx2.networklayer.com (70.87.254.85)  293.749 ms  293.650 ms  293.544 ms
 5  po22.dsr02.dllstx3.networklayer.com (70.87.255.69)  293.444 ms  293.339 ms  293.242 ms
 6  ae17.bbr02.eq01.dal03.networklayer.com (173.192.18.230)  293.117 ms  293.525 ms  300.406 ms
 7  dls-bb1-link.telia.net (80.239.195.177)  300.850 ms  300.667 ms  300.320 ms

#正常退出
~ sudo poff myvpn
#测试网络连接正常
~ ping www.163.com
PING 163.xdwscache.glb0.lxdns.com (101.23.128.17) 56(84) bytes of data.
64 bytes from 101.23.128.17: icmp_req=1 ttl=54 time=28.2 ms
64 bytes from 101.23.128.17: icmp_req=2 ttl=54 time=28.1 ms

4. 看看外面的世界youtube

技术性文章，帮助大家更好的了解互联网。

转载请注明出处：
http://blog.fens.me/vpn-pptp-client-ubuntu/

打赏作者

排行榜

Blog Archives

Posted:

Tags:

Comments:

用阿里云配置VPN

1. 网络架构

2. 遇到的问题

3. 如何解决问题

Posted:

Tags:

Comments:

AngularJS去掉的URL里的#号

1. URL的#号问题

2. 找到错误原因

3. 静态网站的解决方案

4. 动态网站的解决方案

Posted:

Tags:

Comments:

AngularJS路由和模板

1. AngularJS路由介绍

2. 路由的代码实现

3. 实现效果截图

Posted:

Tags:

Comments:

Ubuntu通过PPTP协议使用VPN

1. 获得VPN账号

2. ubuntu客户端界面配置

3. ubuntu命令行配置

4. 看看外面的世界youtube

站内导航

最新文章

最新评论

最热文章