Node.js 服务器对应的路由返回对应的 HTML 文件

上次我们实现了如何通过不同的路由返回不同的内容。只返回一些文本内容未免也太鸡肋了，想要做功能强大又好看的页面，还是要用我们的 HTML 的。今天就讲一下怎么用 node.js 实现服务器通过路由返回不同的 HTML 文件。

可以先看完前面关于 node.js 服务器的文章再接着看这篇，方便理解。

现在，开始实现我们今天要实现的功能了。

首先，肯定是先要导入我们的 http 模块。

// 加载 http 模块
var http = require("http");

然后，创建我们的 http 服务器，之前创建服务器的方法有点麻烦，需要经过下面的方法才能完全创建好一个服务器:

// 加载 http 模块
var http = require("http");

// 创建 http 服务对象
var server = http.createServer();

// 监听用户请求事件（ request 事件）
// request 对象包含了用户请求报文中的所有内容 ，通过 request 对象可以获取所有用户提交过来后的数据
// response 对象用来向用户响应一些数据，当服务器要向客户端响应数据的时候必须使用 response 对象
server.on('request', function (request, response) {
    ...
})

// 启动服务
server.listen(8080, function () {
  console.log('OK,访问：localhost:8080');
})

讲一个比较方便快捷的方法创建一个服务器：

// 加载 http 模块
var http = require("http");

// 创建服务
http.createServer(function (request, response) {
    ...
}).listen(8080, function () {
  console.log("OK,访问：localhost:8080");
});

服务器创建好了，该设置我们浏览器的路由了，直接把上次的拷贝过来就行。

// 加载 http 模块
var http = require("http");

// 创建服务器
http.createServer(function (request, response) {
  // 如果链接的路径是 / 或者 /index 时，返回的页面的 index 页面
  if (request.url === '/' || request.url === '/index') {
    ...
  }
  // 如果链接的路径是 /login 时，返回的页面的 login 页面
  else if (request.url === '/login') {
    ...
  }
  // 如果链接的路径是 /register 时，返回的页面的 register 页面
  else if (request.url === '/register') {
    ...
  }
  // 如果链接的路径都不是上面定义的路径，返回 404 没有此页面
  else {
    ...
  }
}).listen(8080, function () {
  console.log("OK,访问：localhost:8080");
});

上面一共设置了四个路由，分别是首页、登录页、注册页和 404 页面。

在项目目录下新建一个存放 HTML 页面的文件夹，在里面创建好与上面对应的页面。

项目目录：

index 页面：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Index 页面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Index 页面</h1>
</body>

</html>

login 页面：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Login 页面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Login 页面</h1>
</body>

</html>

register 页面：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Register 页面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Register 页面</h1>
</body>

</html>

404 页面：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>404 页面</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>404 页面</h1>
</body>

</html>

怎样才能通过路由返回不同的 HTML 文件，我们需要用到两个新的模块。

fs 模块：

// 加载 fs 模块
var fs = require("fs");

fs 是一个文件系统模块，可以读取电脑系统中的文件。

path 模块：

// 加载 path 模块
var path = require("path");

path 模块提供了一些工具函数，用于处理文件与目录的路径。

使用 fs 模块中的 fs.readFile 方法进行文件的读取。

fs.readFile(path[, options], callback) 有三个参数，两个个必填，一个个可选。

path：文件的路径

options：可以写编码格式，也可以写读取方式

callback：回调函数

使用 path 模块中的 path.join 方法拼接文件路径。

path.join() 可以传入多个字符串参数。每个参数相当于一层路径。

只拿用户访问 / 和 /index 路由做例子，剩余几个路由以此类推。

// 如果链接的路由是 / 或者 /index 时，返回的页面的 index 页面
if (request.url === '/' || request.url === '/index') {
  // 使用 path.join 拼接路径
  filePath = path.join(__dirname, "template", "index.html");
  // 使用 fs.readFile 读取 html 文件, callback 有两个参数，一个是 err,一个是 data
  // err：错误警告
  // data：读取到的数据
  fs.readFile(filePath, function (err, data) {
    // 如果出现错误就抛出 err，没出错就把 html 页面返回给浏览器
    if (err) {
      throw err;
    } else {
      response.end(data);
    }
  });
}

剩余的三个页面也是如此，完整代码如下：

// 加载 http 模块
var http = require("http");

// 加载 fs 模块
var fs = require("fs");

// 加载 path 模块
var path = require("path");

// 创建服务器
http.createServer(function (request, response) {
  // 如果链接的路径是 / 或者 /index 时，返回的页面的 index 页面
  if (request.url === '/' || request.url === '/index') {
    // 使用 path.join 拼接路径
    filePath = path.join(__dirname, "template", "index.html");
    // 使用 fs.readFile 读取 html 文件, callback 有两个参数，一个是 err,一个是 data
    // err：错误警告
    // data：读取到的数据
    fs.readFile(filePath, function (err, data) {
      // 如果出现错误就抛出 err，没出错就把 html 页面返回给浏览器
      if (err) {
        throw err;
      } else {
        response.end(data);
      }
    });
  }
  // 如果链接的路径是 /login 时，返回的页面的 login 页面
  else if (request.url === '/login') {
    // 使用 path.join 拼接路径
    filePath = path.join(__dirname, "template", "login.html");
    // 使用 fs.readFile 读取 html 文件, callback 有两个参数，一个是 err,一个是 data
    // err：错误警告
    // data：读取到的数据
    fs.readFile(filePath, function (err, data) {
      // 如果出现错误就抛出 err，没出错就把 html 页面返回给浏览器
      if (err) {
        throw err;
      } else {
        response.end(data);
      }
    });
  }
  // 如果链接的路径是 /register 时，返回的页面的 register 页面
  else if (request.url === '/register') {
    // 使用 path.join 拼接路径
    filePath = path.join(__dirname, "template", "register.html");
    // 使用 fs.readFile 读取 html 文件, callback 有两个参数，一个是 err,一个是 data
    // err：错误警告
    // data：读取到的数据
    fs.readFile(filePath, function (err, data) {
      // 如果出现错误就抛出 err，没出错就把 html 页面返回给浏览器
      if (err) {
        throw err;
      } else {
        response.end(data);
      }
    });
  }
  // 如果链接的路径都不是上面定义的路径，返回 404 没有此页面
  else {
    // 使用 path.join 拼接路径
    filePath = path.join(__dirname, "template", "404.html");
    // 使用 fs.readFile 读取 html 文件, callback 有两个参数，一个是 err,一个是 data
    // err：错误警告
    // data：读取到的数据
    fs.readFile(filePath, function (err, data) {
      // 如果出现错误就抛出 err，没出错就把 html 页面返回给浏览器
      if (err) {
        throw err;
      } else {
        response.end(data);
      }
    });
![4.gif](https://upload-images.jianshu.io/upload_images/10431446-c061ca086bc45017.gif?imageMogr2/auto-orient/strip)
  }
}).listen(8080, function () {
  console.log("OK,访问：localhost:8080");
});

使用 node + 文件名 启动我们的服务器，查看效果。

访问 localhost:8080/ 或者 localhost:8080/index 时：

访问 localhost:8080/login 时：

访问 localhost:8080/register 时：

访问不存在的路由时：

这样，我们的功能就实现了，可以通过不同的路由返回不同的 HTML 文件，离成功又近了一步。

有问题的可以留言，能解决的尽量帮忙解决。

明人不说暗话，可不可以点个关注

Node.js 服务器对应的路由返回对应的 HTML 文件

推荐阅读更多精彩内容