nodejs構(gòu)建本地web測試服務(wù)器 如何解決訪問靜態(tài)資源問題
直接打開html文件,是以file:///方式打開的,這種方式很多時候會遇到跨域的問題,因此我們一般會搭建一個簡易的本地服務(wù)器,來運(yùn)行測試頁面。
一、構(gòu)建靜態(tài)服務(wù)器
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' );
// 運(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模塊
建立個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)加載的就是這個文件);
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/');
運(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)資源
主要使用兩個模塊
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)文章
使用Typescript和ES模塊發(fā)布Node模塊的方法
這篇文章主要介紹了使用Typescript和ES模塊發(fā)布Node模塊的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Node.js fs模塊(文件模塊)創(chuàng)建、刪除目錄(文件)讀取寫入文件流的方法
這篇文章主要介紹了Node.js fs模塊(文件模塊)創(chuàng)建、刪除目錄(文件)讀取寫入文件流的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09
使用Koa實(shí)現(xiàn)一個獲取視頻播放地址的接口
在本節(jié)課中,我們將學(xué)習(xí)如何使用 Koa 實(shí)現(xiàn)一個獲取視頻播放地址的接口,我們將創(chuàng)建一個控制器,通過視頻 ID 獲取播放地址,并設(shè)置相應(yīng)的路由,最后,我們將使用 Postman 進(jìn)行測試,感興趣的朋友可以參考下2024-05-05
用Node.JS打造一個惡劣天氣實(shí)時預(yù)警系統(tǒng)
本文將從實(shí)戰(zhàn)的角度出發(fā),利用NodeJS以及聚合數(shù)據(jù)的第三方免費(fèi)接口打造一個完整的天氣實(shí)時預(yù)警項(xiàng)目系統(tǒng),具有一定的參考價值,感興趣的可以了解一下2021-12-12
nodejs+express最簡易的連接數(shù)據(jù)庫的方法
這篇文章主要介紹了nodejs+express 最簡易的連接數(shù)據(jù)庫,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于Node的Axure文件在線預(yù)覽的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Node的Axure文件在線預(yù)覽的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
關(guān)于node使用multer進(jìn)行文件的上傳與下載
這篇文章主要介紹了關(guān)于node使用multer進(jìn)行文件的上傳與下載,Multer是一個Node.js中間件,用于處理表單數(shù)據(jù)中的multipart/form-data類型,需要的朋友可以參考下2023-04-04

