将js进行到底:node学习6

Posted devil

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了将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");
});

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

技术分享图片

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

以上是关于将js进行到底:node学习6的主要内容,如果未能解决你的问题,请参考以下文章

将js进行到底:node学习笔记4

将js进行到底:node学习8

将js进行到底:node学习9

将js进行到底:node学习7

将js进行到底:node学习笔记2

基操勿 6 | Node.js 的异步I/O到底有多秀?