nodejs構(gòu)建本地web測試服務器 如何解決訪問靜態(tài)資源問題
直接打開html文件,是以file:///方式打開的,這種方式很多時候會遇到跨域的問題,因此我們一般會搭建一個簡易的本地服務器,來運行測試頁面。
一、構(gòu)建靜態(tài)服務器
1、使用express模塊
建立個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)報錯的話,那就多use幾次就可以了 // 設(shè)定views變量,意為視圖存放的目錄 app.set('views', (__dirname + "/public")); // app.set('views', __dirname); // 修改模板文件的后綴名為html app.set( 'view engine', 'html' ); // 運行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)如下:
運行的話只要執(zhí)行:node server.js 就可以了
然后在瀏覽器輸入http://127.0.0.1:1336/ 來訪問項目文件夾內(nèi)的文件了
2、使用connect模塊
建立個js文件,命名 server2 ,內(nèi)容代碼如下:
var connect = require("connect"); var serveStatic = require("serve-static"); var app = connect(); // app.use(serveStatic("C:\\xxx\\xxx\\xxx\\項目文件夾")); app.use(serveStatic("public")); app.listen(1337); console.log('Server running at http://127.0.0.1:1337/');
運行的話只要執(zhí)行:node server2.js 就可以了,
然后在瀏覽器輸入http://127.0.0.1:1337/ 來訪問項目文件夾內(nèi)的文件了。(如果是index.html文件可以省略不寫,默認加載的就是這個文件);
3、使用http模塊
建立個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/');
運行的話只要執(zhí)行:node server3.js 就可以了,
然后在瀏覽器輸入http://127.0.0.1:1338/ 來訪問項目文件夾內(nèi)的文件了。
注:總的文件目錄如下:
源碼下載地址:https://github.com/arvin0/nodejs-example/tree/master/web-static-test-server
二、解決訪問靜態(tài)資源
主要使用兩個模塊
1.通用的 serve-static 模塊
詳細文檔:https://github.com/expressjs/serve-static
2.express專屬的 app.use(express.static(require('path').join(__dirname, 'public'))); 方法
詳細文檔:http://expressjs.com/en/4x/api.html ,然后ctrl+F搜索 express.static ,就能找到對應的說明了。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
如何在Node.js中使用async函數(shù)的方法詳解
這篇文章主要為大家介紹了如何在Node.js中使用async函數(shù)的方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12Nodejs使用exceljs實現(xiàn)excel導入導出
在日常開發(fā)中,我們常需在后臺管理系統(tǒng)中實現(xiàn)數(shù)據(jù)的導入與導出功能,以便與?Excel?文件進行交互,本文將使用使用exceljs實現(xiàn)excel導入導出功能,需要的可以參考下2024-03-03Node.js折騰記一:讀指定文件夾,輸出該文件夾的文件樹詳解
這篇文章主要介紹了Node.js讀指定文件夾輸出該文件夾文件樹,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2019-04-04