NodeJS的中文文档:http://nodejs.cn/api/
fs模块
fs模块最重要的一个功能就是异步读取文件(readFile),第一个参数文件,第二个参数是回调函数
我们看下面的一个案例
var http = require("http"); var fs = require("fs"); // 创建服务器 var server = http.createServer(function(req,res){ fs.readFile("./1.html",function(err,data) { res.end(data) }) }) // 监听 server.listen(3000,function(){ console.log("监听3000端口") })
此时浏览器看到界面
其中,data为文件的内容
路由
上面的案例,我无论输入什么URL都会显示这个页面
此时我们就可以利用这个特性完成一个路由设计
我们可以通过req.url得到用户输入的URL的地址
var http = require("http"); var fs = require("fs"); // 创建服务器 var server = http.createServer(function(req,res){ res.setHeader("Content-type","text/html;charset=utf8"); if(req.url==="/1.html"){ fs.readFile("./1.html",function(err,data){ res.end(data) }) }else if(req.url==="/2.html"){ fs.readFile("./2.html",function(err,data){ res.end(data) }) }else{ res.end("无页面") } }) // 监听 server.listen(3000,function(){ console.log("监听3000端口") })
比如此时我们访问1.html文件
访问2.html文件
通过路由进行页面的读取,这个就是顶层路由设计
顶层路由设计:
- 物理文件层次和URL是没有任何关系的
- NodeJS是可以做顶层路由设计的!一个页面URL是可以自定义的
- 用户的输入的URL是可以映射任何HTML页面的
顶层路由设计会遇到的问题
此时我们在1.html文件中添加一个图片
现页面中只有文字的展示,没有图片的展示,但是HTML结构中是有img标签的,那么为什么没有加载出来,是因为该图片的url路径是没有物理文件夹的
我们可以发现现在这张图片的真是物理地址是http://127.0.0.1:3000/1.png,但是图片物理存放地址是在F: ode/1.png,所以一定不能按需加载
解决办法就是对每一张图片进行请求
var http = require("http"); var fs = require("fs"); // 创建服务器 var server = http.createServer(function(req,res){ // 设置字符集 res.setHeader("Content-Type","text/html;charset=UTF8"); //对页面的内容进行请求 if(req.url === "/1.html") { fs.readFile("./1.html",function(err,data) { res.end(data) }) //对页面的图片地址进行请求 } else if(req.url=="/1.png"){ res.setHeader("Content-Type","image/jpg"); // 读取图片 fs.readFile("./1.png",function(err,data){ res.end(data) }) }else{ res.end("无页面显示") } }) // 监听 server.listen(3000,function(){ console.log("监听3000端口") })
此时就可以看到图片正常加载
需要注意的是使用NodeJS进行请求文件的时候需要设置对应的ContentType,就是文件的请求类型
常见的请求类型
text/html:HTML格式
text/css:CSS格式
text/plain:纯文本格式
text/xml:XML格式
image/gif:gif图片格式
image/jpeg:jpg图片格式
image/png:png图片格式
res.setHeader("Content-Type","text/html;charset=UTF8") //HTML res.setHeader("Content-Type"," text/css ") //CSS res.setHeader("Content-Type"," image/png ") //png格式的图片
本文摘自 :https://www.cnblogs.com/