一、使用Node实现基本Apache的功能
在上一篇笔记中，我们提到如果打开一个文件需要进行一次url判断是繁琐的，我们希望我们的Node具有类似Apache这种web服务器的一个功能：将文件放到www这个文件夹下，我们只要输入对应的文件地址就能访问到相应文件。
之前我们是对每一个文件进行request.url判断，再处理相应的Content-Type，这样比较麻烦，现在我们对url进行统一处理即可：
要模拟www文件的功能，我们先将我们的项目放到www文件夹下：
统一处理访问www文件夹下文件的url
var http = require('http'); var fs = require('fs'); var server = http.createServer(); server.listen(8000); console.log('server running'); server.on('request',function(request,response){ var url = request.url; var rootDir = 'D:/Users/Administrator/Desktop/Node/www';//www文件夹路径 var filePath = '/index.html';//文件地址，默认打开index.html if(url !== 'http://www.likecs.com/'){ filePath = url; } //根据url打开文件 fs.readFile(rootDir+filePath,function(err,data){ if(err){ return response.end('404,Not Fond!'); } response.end(data); }); });原理是一样的，只不过进行了统一处理；浏览器其实会自动判断data的类型来处理文件，所以很多时候不用设置Content-Type。
二、案例：使用Node实现显示文件目录的效果在浏览器中输入目录地址我们可以看到这样的效果：
现在使用Node来实现这个效果，我们需要知道fs模块的一个方法：readdir()即读取目录：
var http = require('http'); var fs = require('fs'); var server = http.createServer(); server.listen(8000); console.log('server running'); server.on('request',function(request,response){ var url = request.url; var rootDir = 'D:/Users/Administrator/Desktop/Node/www';//www文件夹路径 //读取目录 fs.readdir(rootDir,function(err,data){ if(err){ return response.end('404,Not Fond!'); } console.log(data); }); });
可以发现，读取的数据data是以数组形式显示出对于路径下的文件（夹）名。
现在我们只需要将这些数据显示在页面中即可，怎么将数据变成网页效果呢，一般情况下我们可以使用模块代码来提高效率，类似这样的逻辑：
其实就是想数据填到对应的位置，而不用去关心相应的页面效果，页面效果交给模板代码来处理，我们只需要关注两件事：获取数据data；将data填入模板代码中并使用。
（这里的模板代码我们自己随便写一个好了）
效果如上，我们把框起来的部分使用我们读取的data替换掉就好了：
2.获取数据上面已经获取过，使用readdir()方法来获取：
我们发现模板代码其实就是字符串而已，我们将数据填充进去，其实就是进行简单的字符串替换工作即可：
var http = require('http'); var fs = require('fs'); var server = http.createServer(); server.listen(8000); console.log('server running'); server.on('request',function(request,response){ var url = request.url; var rootDir = 'D:/Users/Administrator/Desktop/Node/www'+url;//根据请求路径显示 //创建模板代码 var contentTemplate = ` <tr> <td><a href="#">filename</a></td> <td>1k</td> <td>2018/11/5 上午10:50:48</td> </tr> `; var content = ''; //获取数据 fs.readdir(rootDir,function(err,data){ if(err){ return response.end('404,Not Fond!'); } //将数据填充到模板代码中---字符串替换操作 data.forEach(function(value,index){ content += contentTemplate.replace('filename',value); //更新和使用模板代码 }); var templateStr = ` <h1>${rootDir}的索引</h1> <div> <a href="#"> <span>[上级目录]</span> </a> </div> <table> <thead> <tr> <th>名称</th> <th> 大小 </th> <th> 修改日期 </th> </tr> </thead> <tbody> ${content} </tbody> </table> `; response.setHeader('Content-Type','text/html;charset=utf-8'); response.end(templateStr); }); });效果如下：
