nodejs構(gòu)建本地web測試服務(wù)器 如何解決訪問靜態(tài)資源問題
直接打開html文件,是以file:///方式打開的,這種方式很多時(shí)候會遇到跨域的問題,因此我們一般會搭建一個(gè)簡易的本地服務(wù)器,來運(yùn)行測試頁面。
一、構(gòu)建靜態(tài)服務(wù)器
1、使用express模塊
建立個(gè)js文件,命名server,內(nèi)容代碼如下:
var express = require('express'); var app = express(); var path = require('path'); //指定靜態(tài)資源訪問目錄 app.use(express.static(require('path').join(__dirname, 'public'))); // app.use(express.static(require('path').join(__dirname, 'views'))); 如果有文件夾存放資源,出現(xiàn)報(bào)錯(cuò)的話,那就多use幾次就可以了 // 設(shè)定views變量,意為視圖存放的目錄 app.set('views', (__dirname + "/public")); // app.set('views', __dirname); // 修改模板文件的后綴名為html app.set( 'view engine', 'html' ); // 運(yùn)行ejs模塊 app.engine( '.html', require( 'ejs' ).__express ); app.get("/", function(req, res) { res.render('index'); }); var server = app.listen(1336, "127.0.0.1",function(){ var host = server.address().address; var port = server.address().port; console.log("Server running at http://%s:%s", host, port) });
文件結(jié)構(gòu)如下:
運(yùn)行的話只要執(zhí)行:node server.js 就可以了
然后在瀏覽器輸入http://127.0.0.1:1336/ 來訪問項(xiàng)目文件夾內(nèi)的文件了
2、使用connect模塊
建立個(gè)js文件,命名 server2 ,內(nèi)容代碼如下:
var connect = require("connect"); var serveStatic = require("serve-static"); var app = connect(); // app.use(serveStatic("C:\\xxx\\xxx\\xxx\\項(xiàng)目文件夾")); app.use(serveStatic("public")); app.listen(1337); console.log('Server running at http://127.0.0.1:1337/');
運(yùn)行的話只要執(zhí)行:node server2.js 就可以了,
然后在瀏覽器輸入http://127.0.0.1:1337/ 來訪問項(xiàng)目文件夾內(nèi)的文件了。(如果是index.html文件可以省略不寫,默認(rèn)加載的就是這個(gè)文件);
3、使用http模塊
建立個(gè)js文件,命名 server3 ,內(nèi)容代碼如下:
var finalhandler = require('finalhandler') var http = require('http') var serveStatic = require('serve-static') // Serve up public/ftp folder var serve = serveStatic('public', {'index': ['index.html', 'index.htm']}) // Create server var server = http.createServer(function onRequest (req, res) { serve(req, res, finalhandler(req, res)) }) // Listen server.listen(1338); console.log('Server running at http://127.0.0.1:1338/');
運(yùn)行的話只要執(zhí)行:node server3.js 就可以了,
然后在瀏覽器輸入http://127.0.0.1:1338/ 來訪問項(xiàng)目文件夾內(nèi)的文件了。
注:總的文件目錄如下:
源碼下載地址:https://github.com/arvin0/nodejs-example/tree/master/web-static-test-server
二、解決訪問靜態(tài)資源
主要使用兩個(gè)模塊
1.通用的 serve-static 模塊
詳細(xì)文檔:https://github.com/expressjs/serve-static
2.express專屬的 app.use(express.static(require('path').join(__dirname, 'public'))); 方法
詳細(xì)文檔:http://expressjs.com/en/4x/api.html ,然后ctrl+F搜索 express.static ,就能找到對應(yīng)的說明了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
node+multer實(shí)現(xiàn)圖片上傳的示例代碼
這篇文章主要介紹了node+multer實(shí)現(xiàn)圖片上傳的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02垃圾回收器的相關(guān)知識點(diǎn)總結(jié)
本文是小編在網(wǎng)絡(luò)上整理的關(guān)于垃圾回收器的相關(guān)知識點(diǎn),很多語言和程序都用的到,有興趣的可以學(xué)習(xí)下。2018-05-05如何在Node.js中使用async函數(shù)的方法詳解
這篇文章主要為大家介紹了如何在Node.js中使用async函數(shù)的方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-12-12Nodejs使用exceljs實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出
在日常開發(fā)中,我們常需在后臺管理系統(tǒng)中實(shí)現(xiàn)數(shù)據(jù)的導(dǎo)入與導(dǎo)出功能,以便與?Excel?文件進(jìn)行交互,本文將使用使用exceljs實(shí)現(xiàn)excel導(dǎo)入導(dǎo)出功能,需要的可以參考下2024-03-03electron安裝報(bào)錯(cuò)終極解決辦法詳細(xì)講解
當(dāng)使用npm安裝electron時(shí),有時(shí)候會遇到各種各樣的錯(cuò)誤,如網(wǎng)絡(luò)錯(cuò)誤、權(quán)限錯(cuò)誤等等,這篇文章主要給大家介紹了關(guān)于electron安裝報(bào)錯(cuò)終極解決辦法的相關(guān)資料,需要的朋友可以參考下2024-09-09Node.js折騰記一:讀指定文件夾,輸出該文件夾的文件樹詳解
這篇文章主要介紹了Node.js讀指定文件夾輸出該文件夾文件樹,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04配置node服務(wù)器并且鏈接微信公眾號接口配置步驟詳解
這篇文章主要介紹了配置node服務(wù)器并且鏈接微信公眾號接口配置步驟詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,,需要的朋友可以參考下2019-06-06