上次我们实现了如何通过不同的路由返回不同的内容。只返回一些文本内容未免也太鸡肋了，想要做功能强大又好看的页面，还是要用我们的 HTML 的。今天就讲一下怎么用 node.js 实现服务器通过路由返回不同的 HTML 文件。
这是上次内容的链接：Node.js 服务器根据不同的请求做出不同的响应
可以先看完前面关于 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);
}
});
}
}).listen(8080, function () {
console.log("OK,访问：localhost:8080");
});
使用 node + 文件名 启动我们的服务器，查看效果。
访问 localhost:8080/ 或者 localhost:8080/index 时：
访问 localhost:8080/login 时：
访问 localhost:8080/register 时：
访问不存在的路由时：
这样，我们的功能就实现了，可以通过不同的路由返回不同的 HTML 文件，离成功又近了一步。
有问题的可以留言，能解决的尽量帮忙解决。
明人不说暗话，可不可以点个关注
