在上一篇中，用了http模塊和fs模塊來讓html頁面呈現(xiàn)出來，但是這樣做有缺點，比如我們來看一個例子，例如我現(xiàn)在手上有一個前端寫好了的靜態(tài)文件夾，我想吧它部署在node的靜態(tài)服務(wù)上，你將會發(fā)現(xiàn)，如果用原生node，這會是一個十分麻煩和復(fù)雜的事情。話不多說，我們先來看一個簡單的例子

看上述文件夾結(jié)構(gòu)，test文件夾下面有xixi.html和haha.html ,我現(xiàn)在想讓用戶當(dāng)輸入127.0.0.1/xixi 的時候顯示xixi.html 用戶輸入127.0.0.1：3000/haha的時候，頁面展示haha.html的內(nèi)容,這里就涉及到了路由的概念

我們在node demo文件夾下新建一個app.js文件，app.js是程序的入口文件

我們首先以file協(xié)議的方式在瀏覽器中瀏覽xixi.html 和 haha.html

?

?

?

好，我們就是要在node中也實現(xiàn)這樣的效果，讓用戶可以以http的形式來訪問這兩個頁面，話不多說，就是開干，上代碼（app.js）

var http = require('http'); var fs = require('fs');var server = http.createServer(function(req,res){res.writeHead(200,{'Content-type':'text/html;charset=utf-8'});if(req.url=='/xixi'){//用戶訪問的是xixifs.readFile('./test/xixi.html',function(err,data){if(err){//讀取失敗res.end();return;}res.end(data);})}if(req.url == '/haha'){fs.readFile('./test/haha.html',function(err,data){if(err){res.end();return;}res.end(data);})}})server.listen(3000,'127.0.0.1',function(){console.log('127.0.0.1:3000 服務(wù)已開啟'); })

　開啟node，在瀏覽器中訪問

?

　

?

訪問xixi正常，因為xixi中沒有去請求任何其他的外部文件，而訪問haha的時候頁面就一直不出來，最后圖片也不出來，查看network發(fā)現(xiàn)它請求了一個圖片文件127.0.0.0:3000/0.jpg

?

?

?請求了127.0.0.1：3000/0.jpg ?因為我們在app.js中沒寫對這個路由的處理，所以頁面就出錯了，解決辦法

var http = require('http'); var fs = require('fs');var server = http.createServer(function(req,res){console.log(req.url)if(req.url=='/xixi'){//用戶訪問的是xixifs.readFile('./test/xixi.html',function(err,data){res.writeHead(200,{'Content-type':'text/html;charset=utf-8'});if(err){//讀取失敗res.end();return;}res.end(data);})}if(req.url == '/haha'){fs.readFile('./test/haha.html',function(err,data){res.writeHead(200,{'Content-type':'text/html;charset=utf-8'});if(err){res.end();return;}res.end(data);})}if(req.url == '/0.jpg'){fs.readFile('./test/0.jpg',function(err,data){res.writeHead(200,{'Content-type':'image/jpg'});if(err){res.end();return;}res.end(data);})}})server.listen(3000,'127.0.0.1',function(){console.log('127.0.0.1:3000 服務(wù)已開啟'); })

　　

?

?這下訪問就好了，從我們這 個很小的demo中可以看到，node如果想對靜態(tài)文件進行處理，是一件很麻煩的事前，因為你要為這個寫很多路由，而且你永遠也不知道到底每個文件下面又去外鏈了多少文件，這樣寫下來，將是一個十分復(fù)雜的事前，而且你還要考慮返回文件的mime類型，還有包括緩存問題等，所以這將是一個非常頭疼的是，我自己嘗試寫過一個靜態(tài)服務(wù)的模塊，發(fā)現(xiàn)雖然可以用，但是通用性不高，而且也沒對緩存進行處理，所以node和IIS，appache不一樣，哪些老派的服務(wù)器，自帶靜態(tài)資源的解析服務(wù)，那么在node中有沒有非常nb的工具了，肯定是有的，node的社區(qū)這么活躍，有一個非常出名覺得框架 express大名鼎鼎，express和node的關(guān)系就如同jquery和原生js一樣，當(dāng)然，并不是很恰當(dāng)，可以這么理解下，關(guān)于穿件靜態(tài)服務(wù)在express中就很簡單了，只需要一個中間件，一行代碼就搞定 app.use(express.static('./test')),這樣test下面的資源就可以被訪問了，就創(chuàng)建了一個test文件夾下面的靜態(tài)服務(wù)

?

轉(zhuǎn)載于:https://www.cnblogs.com/fandaxia/p/8317223.html

總結(jié)

以上是生活随笔為你收集整理的node创建web静态服务的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。