nodejs構(gòu)建本地web測(cè)試服務(wù)器 如何解決訪(fǎng)問(wèn)靜態(tài)資源問(wèn)題
直接打開(kāi)html文件,是以file:///方式打開(kāi)的,這種方式很多時(shí)候會(huì)遇到跨域的問(wèn)題,因此我們一般會(huì)搭建一個(gè)簡(jiǎn)易的本地服務(wù)器,來(lái)運(yùn)行測(cè)試頁(yè)面。
一、構(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)資源訪(fǎng)問(wèn)目錄
app.use(express.static(require('path').join(__dirname, 'public')));
// app.use(express.static(require('path').join(__dirname, 'views'))); 如果有文件夾存放資源,出現(xiàn)報(bào)錯(cuò)的話(huà),那就多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)行的話(huà)只要執(zhí)行:node server.js 就可以了
然后在瀏覽器輸入http://127.0.0.1:1336/ 來(lái)訪(fǎng)問(wèn)項(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)行的話(huà)只要執(zhí)行:node server2.js 就可以了,
然后在瀏覽器輸入http://127.0.0.1:1337/ 來(lái)訪(fǎng)問(wèn)項(xiàng)目文件夾內(nèi)的文件了。(如果是index.html文件可以省略不寫(xiě),默認(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)行的話(huà)只要執(zhí)行:node server3.js 就可以了,
然后在瀏覽器輸入http://127.0.0.1:1338/ 來(lái)訪(fǎng)問(wèn)項(xiàng)目文件夾內(nèi)的文件了。
注:總的文件目錄如下:

源碼下載地址:https://github.com/arvin0/nodejs-example/tree/master/web-static-test-server
二、解決訪(fǎng)問(wèn)靜態(tài)資源
主要使用兩個(gè)模塊
1.通用的 serve-static 模塊
詳細(xì)文檔:https://github.com/expressjs/serve-static
2.express專(zhuān)屬的 app.use(express.static(require('path').join(__dirname, 'public'))); 方法
詳細(xì)文檔:http://expressjs.com/en/4x/api.html ,然后ctrl+F搜索 express.static ,就能找到對(duì)應(yīng)的說(shuō)明了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- nodejs express配置自簽名https服務(wù)器的方法
- 深入理解nodejs搭建靜態(tài)服務(wù)器(實(shí)現(xiàn)命令行)
- 用Nodejs搭建服務(wù)器訪(fǎng)問(wèn)html、css、JS等靜態(tài)資源文件
- 在windows上用nodejs搭建靜態(tài)文件服務(wù)器的簡(jiǎn)單方法
- Nodejs實(shí)現(xiàn)的一個(gè)靜態(tài)服務(wù)器實(shí)例
- 使用nodejs、Python寫(xiě)的一個(gè)簡(jiǎn)易HTTP靜態(tài)文件服務(wù)器
- nodejs發(fā)布靜態(tài)https服務(wù)器的方法
相關(guān)文章
使用Typescript和ES模塊發(fā)布Node模塊的方法
這篇文章主要介紹了使用Typescript和ES模塊發(fā)布Node模塊的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Node.js fs模塊(文件模塊)創(chuàng)建、刪除目錄(文件)讀取寫(xiě)入文件流的方法
這篇文章主要介紹了Node.js fs模塊(文件模塊)創(chuàng)建、刪除目錄(文件)讀取寫(xiě)入文件流的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
使用Koa實(shí)現(xiàn)一個(gè)獲取視頻播放地址的接口
在本節(jié)課中,我們將學(xué)習(xí)如何使用 Koa 實(shí)現(xiàn)一個(gè)獲取視頻播放地址的接口,我們將創(chuàng)建一個(gè)控制器,通過(guò)視頻 ID 獲取播放地址,并設(shè)置相應(yīng)的路由,最后,我們將使用 Postman 進(jìn)行測(cè)試,感興趣的朋友可以參考下2024-05-05
用Node.JS打造一個(gè)惡劣天氣實(shí)時(shí)預(yù)警系統(tǒng)
本文將從實(shí)戰(zhàn)的角度出發(fā),利用NodeJS以及聚合數(shù)據(jù)的第三方免費(fèi)接口打造一個(gè)完整的天氣實(shí)時(shí)預(yù)警項(xiàng)目系統(tǒng),具有一定的參考價(jià)值,感興趣的可以了解一下2021-12-12
nodejs+express最簡(jiǎn)易的連接數(shù)據(jù)庫(kù)的方法
這篇文章主要介紹了nodejs+express 最簡(jiǎn)易的連接數(shù)據(jù)庫(kù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
基于Node的Axure文件在線(xiàn)預(yù)覽的實(shí)現(xiàn)代碼
這篇文章主要介紹了基于Node的Axure文件在線(xiàn)預(yù)覽的實(shí)現(xiàn)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
關(guān)于node使用multer進(jìn)行文件的上傳與下載
這篇文章主要介紹了關(guān)于node使用multer進(jìn)行文件的上傳與下載,Multer是一個(gè)Node.js中間件,用于處理表單數(shù)據(jù)中的multipart/form-data類(lèi)型,需要的朋友可以參考下2023-04-04

