将js进行到底：node学习6

开始真正的node web开发——express框架

为何说现在才是web开发的真正开始呢？

首先任何企业都不会用原生的http协议API去开发一个完整的网站，除非她们先开发一个框架出来，其次我们之前的所谓http，connect都只是打开了一个http服务器而已，顶多只能算个工具集（中间件），最后使用像express这样的框架使我们把精力集中到功能业务上来了！

生产力因此而得以体现！

引入express

上一章，即便我们已经可以使用connect处理用户各种请求了，但依然需要我们人为的去关注路由，文件判断，并且connect，serve-static只是起到了纯中间作用，且拼拼凑凑组合出一个看上去还不错的网站，这些并没有直接加强HTTP这个API。

可以发现我们依然在使用 require("http").createServer()" 来创建http服务

package.json

{
    "name":"test-express",
    "version":"0.0.1",
    "description":"an express example",
    "dependencies":{
        "express":"latest",
        "jade":"latest"
    }
}

npm install

Express是直接在http上加强的，封装了http API，我们不必再为http API缺少操心了

Express创建HTTP服务器

var express = require("express");
var app = express();

app.get('/',function(req,res){
    res.send("hello world");
});

app.listen(3000);

可以看到express模块暴露的express方法本身，返回一个对象，其get方法已经解决了路径处理的问题。这是一个非常简单的示例页面，已经让我感受到了他将会使得web开发变得十分简单。

Express托管静态文件

使用express框架express.static来对上一回中的serve-static托管静态文件做修改，必须说明的是：express.static 是 Express 内置的唯一一个中间件。是基于 serve-static 开发的，负责托管 Express 应用内的静态资源。（官网说明）

新建一个public目录专门存放静态文件：css，js，images等资源文件都可以

app.use(express.static('public'));

只需要一行代码，测试效果

Express视图业务分离——模板渲染引擎Jade

在刚开始开发web那会，我一直无法理解php的smarty是什么，在开发了javaee之后，慢慢熟悉了一个名词“模板引擎”，由于php本身可以内嵌html所以，很容易让初学者忽视了这个模板引擎的概念，后来，开发java之时，我们需要将前端（html）后端（java）进行分离的时候，就需要接触到模板引擎了，主要作用：

在纯html文件中输入规定格式的变量或者逻辑语言，在经过http发送给客户端浏览器前将其中的变量标记替换为对应的值，并且将逻辑语言编程，最终生成纯html文件流发送给客户端。

通俗言之：模板引擎像一个加工模具，将非纯html（带模板代码）装入，生成新的，完善的纯html代码，这样我们不需要在html中直接嵌入后端语句来动态修改页面，这实现了逻辑和视图的分离（模板引擎是动态网站的核心内容之一）

举个栗子，使用Jade模板引擎！（需要外部模块，前面package.json中已经加入了）

首先模板存放位置，新建：views目录->新建index.jade文件

前端index.jade

doctype
html
    head
        title= pageTitle
        script(type='text/javascript').
            function showCityEx(city)
            {
                return city + " & " + city;
            }  

    body
        h1 #{h1}  

        table(border=1)
            tr
                th hello
                th world,citys.count=#{cscores.length + 3}
                th count
            for city,index in citys
                tr
                    td= index
                    td welcome to #{city}(#{city.substr(0,4)})
                    td= cscores[index]
        div over!  

后端：index.js

var express = require("express");
var app = express();

var city_names = [
    'wuhan',
    'tianjin',
    'beijing',
    'shanghai'
];
var city_scores = [
    '60',
    '62',
    '80',
    '70'
];
app.use(express.static('public'));
app.set("view engine","jade");
app.set("views",__dirname+"/views");

app.get('/',function(req,res){
    res.render("index",{citys:city_names,cscores:city_scores});
});

app.listen(3000);

解释

学习express先不理会那些jade模板代码，如需了解，参考Jade官网API：http://jade-lang.com/

重心放在nodejs代码上，app.get方法并没有改变，参数URL绑定了参数回调函数。

res调用了render，是模板引擎渲染方法，表示向客户端输出一个渲染后的html

1. 配置一：使用app.set可以配置express，将view engine设置为jade
2. 配置二：将模板存放位置配置为：views目录，我们将jade文件放在里面，以后自动读取
3. render参数一：文件名，不带后缀
4. render参数二：jade模板中需要替换掉的变量
5. render还有一个参数是回调函数，处理生成的html，可以这样写：

res.render("index",function(err,html){
    //继续处理html，比如打印到控制台console.log(html);
});

模板引擎的基本使用套路无非就是：设置模板类型，设置模板目录，render出来！

Jade模板语言本身值得我们单独拿出来学习！

Express request与response

整个HTTP开发都围绕着request（用户请求）和response（响应请求）在做开发。

express为我们封装了http的req与res对象，方便开发。

记录一些常见的对象方法：

Request

如果直接打印req对象你会看到一堆乱七八糟东西，没啥意思。

打印如下这些东西研究一下：

params对象

app.get('/user/:name',function(req,res){
    console.log(req.params.name);
})

地址栏输入：http://localhost:3000/user/devil

终端显示：

query对象

app.get('/user',function(req,res){
    console.log(req.query.name);
});

地址栏输入：http://localhost:3000/user?name=devil

终端显示：同上！

Response

download()

app.get('/getimg',function(req,res){
    res.download(__dirname+"/public/images/xq.jpg");
});

用于下载文件，使用后强制用户下载该文件

json()和jsonp()

app.get('/json',function(req,res){
    res.json({name:"devil",sex:"男",body:"strong"});
});

强制将js对象转换为json数据格式发送给客户端，后者则支持jsonp，效果一样。

redirect()

app.get('/baidu',function(req,res){
    res.redirect('http://www.baidu.com');
});

重定向到其他页面

send()

app.get('/send',function(req,res){
    res.send({some:'json'});
});

send是express非常常用的方法，功能巨多，优点是可自动转化格式，输入数字发送状态码，输入字符串返回客户端字符串，输入js对象返回json对象，他能对参数数据类型做很好的判断，要优于上述json()方法。

sendFile()

app.get('/send',function(req,res){
    res.sendFile("E:\\视频\\电影\\v字仇杀队.mp4");
});

这个就有意思了，是发送文件，但并不会使得用户下载，应该是以二进制流的方式发送文件，理论上还需要浏览器支持，测试后效果：

如果是图片文件，则显示图片。