APP
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/
