开发者学堂课程【Node.js 入门与实战： HackerNews02-根据不同路由响应不同的HTML页面 】学习笔记，与课程紧密联系，让用户快速学习知识
课程地址：https://developer.aliyun.com/learning/course/588/detail/8275
HackerNews02-根据不同路由响应不同的HTML页面
内容介绍
一、根据不同路由响应不同的HTML页面
二、总结
一、根据不同路由响应不同的HTML页面
在代码中要实现依次读取对应的文件并返回，需要用到 fs 模块对文件进行读写，path 模块对路径进行拼接，所以在头部进行加载模块，如，
var fs=require(‘fs’);
var path=require(‘path’);
然后实现读取 index.html 并且返回。fs.readFile 中 path 拼接路径为 index 当前所在目录，找到 index 文件后进行函数回调，所以 if 语句如果有错误就报 err，没错误就直接响应 data，读取其他文件并返回操作也同理，如，
//读取 index.html 并且返回
fs.readFile(path. join(__dirname, 'views', ' index.html' ), function (err, data) {
if (err)
throw err;
}
res.end(data);
});
//读取 submit.html 并且返回
fs.readFile(path. join(__dirname, 'views', ' index.html' ), function (err, data) {
if (err)
throw err;
}
res.end(data);
});
//读取 details.html 并且返回
fs.readFile(path. join(__dirname, 'views', ' index.html' ), function (err, data) {
if (err)
throw err;
}
res.end(data);
});
写完后测试一下，浏览器访问 localhost:9090/index，/item详情页面，/submit 页面，如，
发现里面的样式图片都没了，这是因为在操作请求 index 时，要随着请求news.css，y18.gif，s.gif，点开 news.css 可以看到请求路径为/resources/css/news.css，
y18.gif 请求的是/resources/image/y18.gif，s.gif 请求的路径是/resources/image/s.gif，这些请求的都是静态资源，而服务端没有这些静态资源做特殊处理，所以返回的都是404，找不到页面。
目前服务端没有判断当用户请求 css 资源的时候去读取文件并返回，一种方法是加入很多if else去读取文件返回，另一种方法是判断只要用户请求路径是以resources开头的，就认为用户是要读取静态资源，只要把当前路径与请求路径拼起来就可以自动找静态资源，省去了if else 语句来一条条判断请求资源。
接下来开始解决网页中对应的图片和 CSS 显示问题。如果用户请求路径，可以通过startWith 判断路径是否是 resources 开头。打开 REPL，判断 http://localhost:909字符串是否以 http 开头，indexOf 如果返回值为0，则为true，或者用startWith判断字符串是否为http开头，是则返回 true，比 indexOf简便，如，
C:\Users\Humble
node
>’ http://localhost:909’,.indexOf(‘http’)==0
true
>’ http://localhost:909’,. startWith (‘http’)
true
>’ http://localhost:909’,. startWith (‘fdsafdshttp’)
flase
所以使用 startWith 判断是否以 resources 开头。
如果用户请求路径是以 resources 开头，并且 get 请求，就认为用户请求的是静态资源。既然用户请求的是 resources 开头，只要把当前05-hackemews 目录拼上/resources 的请求路径就找到资源了。
假如用户请求图片s.gif，发来的请求路径是
/resources/image/s.gif，可以直接与 hackemews 目录拼接，dirname 是当前index.js所在目录，再拼上用户请求路径 req.url 就是完整路径，function 读取文件回调函数，如果出错则 err，没错误则响应回 data。
但是还需要根据用户不同的请求响应不同的文件，需要用到 mime 模块，在REPL使用 npm install mine –save 命令进行模块安装。然后根据用户请求判断 Content-Type，req.url包含了需要请求的文件后缀。
如，
else if (req .url. startsWith( ' /resources') && req. method .===.'get'){
//如果用户请求是以/resources开头，并且是get请求，就认为用户是要请求静态资源
// /resources/ images/s.gif
fs. readFile(path. join(__ dirname, req.url),function.(err,data){
if (err){
throwerr;
}
res. setHeader( ' Content-Type '，mime. getType(req.url));
res . end(data);
});
执行一下浏览器访问localhost:9090，可以看到出现了图片样式，内容，
二、总结
根据用户请求的路径，做出不同的判断，返回不同的资源，同时注意网页中带有的一些静态图片资源都是以 resources 开头，只要是 resources 开头路径就把网站路径和请求路径拼起来去找资源，找到就返回，找不到就返回404。
index中代码块：
//当前项目(包) 的入口文件
// 1.加载http模块
var http = require( 'http');
var fs = require('fs');
var path
require( ' path');
var mime
//2.创建服务
http. createServer(function (req, res) {
//要在这里写大量的代码
//设计路由
//当用户请求/或/index时，显示新闻列表-get 请求
//当用户请求/item时，显示新闻详情- get请求
//当用户请求/submit 时，显示添加新闻页面- get 请求
//当用户请求/add 时，将用户提交的新闻保存到data.json 文件中- get请求
//当用户请求/add时，将用户提交的新闻保存到data.json 文件中- post 请求
//将用户请求的url和method 转换为小写字母
req.url = req . url. toLowerCase();
req . method = req . method . toLowerCase();
//先根据用户请求的路径(路由)，将对应的HTML页面显示出来
if (req.url === '/'|I req.url ==='/index' && req. method === 'get') {
//读取index.html 并返回
fs. readFile(path.join(__ dirname, 'views', ' index.html' )，function (err, data) {
if (err) {
throw err;
}
res. end(data) ;
});
} else if (req.url === ' /submit' && req . method ===
get') {
//读取 submit.html 并返回
fs. readFile(path. join(__ dirname, 'views', ' submit.html' ), function (err, data) {
if (err) {
throw err;
}
res . end( data);
});
} else if (req.url === ' /item' && req. method === 'get') {
//读取 details.html 并返回
fs. readFile(path. join(__ dirname, 'views', ' details.html'), function (err, data) {
if(err){
throw err;
}
res .end(data);
});
} else if (req.url === ' /add' && req . method === 'get') {
//表示 get 方法提交一条新闻
} else if (req.url === ' /add' && req . method ===‘ post' ) {
//表示 post 方法提交一条新闻
} else if (req .url. startsWith(' /resources') && req. method === ' get') {
//如果用户请求是以/resources 开头，并且是 get 请求，就认为用户是要请求静态资源
// /resources/ images/s.gif
fs . readFile(path.join(__ dirname, req.url), function (err, data) {
if (err) {
res .writeHead(404, 'Not Found' ，{'Content-Type': ' text/html ;charset=utf-8'});
res.end( '404，not found.' );
return;
}
res. setHeader( 'Content-Type', mime. getType(req.ur1));
res. end(data);
});
} else {
res .writeHead(404, ' Not Found' ，{
' Content-Type': ' text/html; charset=utf-8 '
});
res.end('404, Page Not Found.');
}
}).listen(9090， function () {
console . log( 'http://localhost:9090');
});
