node+ajax实战案例（2）

2.静态资源渲染

2.1.创建http服务器

var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
    var url_obj = url.parse(req.url);
    if(url_obj.pathname === '/'){
        res.write('hello world');
        res.end();
    }
})
app.listen(3000)

2.2.根据请求的文件类型返回不同的文件内容

首先，我们可以先返回一个html文件，在项目目录下去新建一个template的文件夹,在template文件夹下新建index.html和login.html的文件，分别写入一些测试代码 index.html文件内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎来到首页</h1>
<a href='/login.html'>去登录</a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>欢迎来到登录页</h1>
</body>
</html>

现在我们需要根据访问的文件返回不同的内容，例如：访问http://localhost:3000/index.html 返回template下面index.html文件的内容，同理访问http://localhost:3000/login.html，就要返回template目录下login.html文件的内容，按照我们以前讲过的方法，在node后台程序中，我们可以为每个请求写一个路由，例如这样：

var http = require('http');
var url = require('url');
var fs = require('fs');
var app = http.createServer(function (req, res) {
    var url_obj = url.parse(req.url);
    if(url_obj.pathname === '/'){
        //这里返回默认的index.html文件内容
       fs.readFile('./template/index.html', 'utf-8', function (err, data) {
            if(!err){
                res.write(data, 'utf-8');
            }
            res.end();
        })
    }
    if(url_obj.pathname === '/login.html'){
        //这里返回默认的index.html文件内容
       fs.readFile(path, 'utf-8', function (err, data) {
            if(!err){
                res.write(data, 'utf-8');
            }
            res.end();
        })
    }
    //思考： 如果有100个网页怎么办呢？
})
app.listen(3000)

从上面的代码中我们可以发现，当如果随着网页增多，文件类型增多(例如：css文件、图片文件)，当请求变多而且请求的文件类型比较复杂的时候，我们每个文件名写一个if判断就显得不智能了，这个时候，我们需要让程序更加灵活，要让程序更加灵活，先要明白我们返回数据到浏览器的几个步骤：

1 服务器要解析前端发过来的请求地址

2 根据这个请求地址去确定服务器端文件的路径

3 根据文件路径去读取文件内容，返回给浏览器

在这几个步骤中，我们只需要把第2步改灵活就可以了，也就是要达到这样的要求：不管你请求的是什么地址，我都能去确定文件的路径(查找到文件)，如果找不到文件，就可以给你返回一个找不到的页面

核心点分析完成后，我们来实现这块代码

var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
    // 解析url
    var url_obj = url.parse(req.url);
    // 拼接请求中的文件地址
    var path = './template/'+url_obj.pathname
    // 读取文件内容 返回
    fs.readFile(path, 'binary', function (err, data) {
        if(!err){
        res.write(data, 'binary');
        }
        res.end();
    })
})
app.listen(3000)

代码改进后我们发现一个问题，那就是如果请求的时候不写文件类型,例如："/", "/login",这个时候就没有办法找到对应的文件了，这个时候我们就需要手动去改一些我们自己定义的请求配置，例如：访问"/"的时候，我们默认返回index.html页面

var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
    // 解析url
    var url_obj = url.parse(req.url);
    // 拼接请求中的文件地址
    var path = './template/'+url_obj.pathname

    // “／” 返回index.html页面
    if(url_obj.pathname === "/"){
        // 读取文件内容 返回
        fs.readFile('./template/index.html', 'binary', function (err, data) {
            if(!err){
            res.write(data, 'binary');
            }
            res.end();
        })
    }
    // 读取文件内容 返回
    fs.readFile(path, 'binary', function (err, data) {
        if(!err){
        res.write(data, 'binary');
        }
        res.end();
    })
})
app.listen(3000)

这个时候我们发现读取文件内容返回这段代码重复写了，于是我们就可以把它封装成函数，只需要每次调用这个函数就可以了，因此，我们的代码还可以优化

var http = require('http');
var url = require('url');
var app = http.createServer(function (req, res) {
    // 解析url
    var url_obj = url.parse(req.url);
    // 拼接请求中的文件地址
    var path = './template'+url_obj.pathname

    // “／” 返回index.html页面
    if(url_obj.pathname === "/"){
        // 读取文件内容 返回
        render("./template/index.html", res);
    }
    //请求哪个文件就返回哪个文件内容
    render(path, res)
})
app.listen(3000)


//输入文件路径，返回给前端

function render(path,res){
    fs.readFile(path, 'binary', function (err, data) {
        if(!err){
        res.write(data, "binary");
        }
        res.end();
    })
}

2.3.加载已经写好的静态模版文件

模版文件下载地址：点击下载ajax+node案例静态文件

螺钉课堂视频课程地址：http://edu.nodeing.com