Node+Express初探-2. 给网站一个首页

接上一篇文章，这次的需求是给网站一个首页。
项目结构：

--- server.js
--- views
      |--- index.html

我知道有时大家会把index放外面，但是为了说文件路径，我就把它放在views里面了。
相对于上回，多了几件事：

1. 判断请求的是不是主页的地址；
2. 收到请求后，要找到对应的文件，读出来；
3. 将读出的文件内容打上响应头，标注上状态、格式等等，发回去。

Node

先解决读取首页的问题：

// fs是node中读写文件的模块。是的，服务器中终于没有读写本地文件的限制了～
let fs = require('fs')

http.createServer(function(request, response) {
// 新增的重点代码：
//     找到并读取这个文件
  fs.readFile('views/index.html', function(err, data) {
    // 先返回文件的属性（响应头）
    response.writeHead(200, { 'Content-Type': 'text/html', 'Content-Length': data.length });
    // 返回这个文件
    response.write(data);
    // 记得结束这次响应
    response.end();
  });
// 结束
}).listen(port);

再来看路由的问题：

上面的代码现在还有一个问题：无论如何访问这个服务器，目前都只能返回这个页面。但是我只希望访问域名时才显示首页，其他地址要留出来。

1. 先看看请求的相关属性：

http.createServer(function(request, response) {
  // 有机会也可以直接把request打印出来看看，内容超级多～
  console.log(request.method)
  console.log(request.url)
})

访问一下服务器，看到控制台输出的是：

GET
/
GET
/favicon.ico

这表示服务器先接到了一个访问'/'的GET请求，又接到了一个访问'/favicon.ico'的GET请求。后面这个是默认访问的网站图标，先不管它。
在访问一个乱码地址试试：localhost:8888/hdasfiuhlksdfhl
果然控制台打出了

GET
/hdasfiuhlksdfhl

所以对路由作出限制：

...
http.createServer(function(request, response) {
 ...
// 限制请求符合这个条件：
  if (request.method === 'GET' && request.url === '/') {
    // 返回首页内容
    fs.readFile(...);
  } else {
    ...
  }
}).listen(port);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:' + port + '/');

目前为止整理过的server.js:

var http = require('http');
var fs = require('fs')
var port = process.env.PORT || 8888

http.createServer(function(request, response) {
  // console.log(request.method)
  // console.log(request.url)

  if (request.method === 'GET' && request.url === '/') {
    indexHandler(request, response)
  } else {
    normalHandler(request, response)
  }

}).listen(port);

// 终端打印如下信息
console.log('Server running at http://127.0.0.1:' + port + '/');


// --------------------- LIB --------------------- //
// 输出首页
function indexHandler(request, response) {
  fs.readFile('views/index.html', function(err, data) {
    response.writeHead(200, { 'Content-Type': 'text/html', 'Content-Length': data.length });
    response.write(data);
    response.end();
  });
}
// 默认情况
function normalHandler(request, response) {
  // 发送 HTTP 头部 
  // HTTP 状态值: 200 : OK
  // 内容类型: text/plain
  response.writeHead(200, { 'Content-Type': 'text/plain' });

  // 发送响应数据 "Hello World"
  response.end('Hello World\n');
}

Express

在Express这边，代码比较简单，路由问题也很简单，但是文件路径问题会比较复杂。先来一个想当然的栗子：

// 这是一个错误的例子：
app.get('/', function(req, res) {
  res.status(200).type('html')
     .sendFile('views/index.html')
});

• app.get()是限制只有在get请求时才返回这个页面。不想限制可以使用app.all()

这个例子会报错：

TypeError: path must be absolute or specify root to res.sendFile

翻译：路径必须是绝对的或是相对于res.sendFile的。
原因我暂时解释不了……

来看解决方法：

1. 告知框架，这是一个绝对路径：
   真可惜，直接写/views/index.html会告诉你找不到这个文件，原因依然解释不了。所以只能用一个参数来指定：

   res.status(200).type('html')
      .sendFile('views/index.html', { root: '.' })
   

2. 推荐！node中又一个path模块，专门用来解决路径问题。它的功能很强大，不但能自动合成绝对路径，也能兼容windows和linux不同的文件系统。推荐使用path模块，未来这个服务器的功能会越来越强，一个成熟的路径模块可以帮你跳过不少奇怪的问题。
   上代码：

   let path = require('path')
   ...
   res.status(200).type('html')
      .sendFile(path.join(__dirname, './views', 'index.html'))
   

   path模块的文档地址：http://nodejs.cn/api/path.html

相对于res.sendFile的思路太麻烦，不考虑了。

这会儿你的简单网页已经可以正常显示了！前提是，网页上没有引用本服务器的静态资源，比如图片、css什么的，因为其他路径还没有处理呢。