1. 程式人生 > >nodejs 構建本地web測試服務器 以及 解決訪問靜態資源的問題!

nodejs 構建本地web測試服務器 以及 解決訪問靜態資源的問題!

目錄 pub final blank image folder nbsp 後綴 amp

直接打開html文件,是以file:///方式打開的,這種方式很多時候會遇到跨域的問題,因此我們一般會搭建一個簡易的本地服務器,來運行測試頁面。

一、構建靜態服務器

1、使用express模塊

建立個js文件,命名server,內容代碼如下:

 1 var express = require(‘express‘);
 2 var app = express();
 3 var path = require(‘path‘);
 4 
 5 //指定靜態資源訪問目錄
 6 app.use(express.static(require(‘path‘).join(__dirname, ‘public‘)));
7 // app.use(express.static(require(‘path‘).join(__dirname, ‘views‘))); 如果有文件夾存放資源,出現報錯的話,那就多use幾次就可以了 8 // 設定views變量,意為視圖存放的目錄 9 app.set(‘views‘, (__dirname + "/public")); 10 // app.set(‘views‘, __dirname); 11 // 修改模板文件的後綴名為html 12 app.set( ‘view engine‘, ‘html‘ ); 13 // 運行ejs模塊 14 app.engine( ‘.html‘, require( ‘ejs‘ ).__express );
15 16 app.get("/", function(req, res) { 17 res.render(‘index‘); 18 }); 19 20 var server = app.listen(1336, "127.0.0.1",function(){ 21 var host = server.address().address; 22 var port = server.address().port; 23 console.log("Server running at http://%s:%s", host, port) 24 });

文件結構如下:

技術分享

運行的話只要執行:node server.js

就可以了

然後在瀏覽器輸入 http://127.0.0.1:1336/ 來訪問項目文件夾內的文件了

2、使用connect模塊

建立個js文件,命名 server2 ,內容代碼如下:

 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/‘);

運行的話只要執行:node server2.js 就可以了,

然後在瀏覽器輸入 http://127.0.0.1:1337/ 來訪問項目文件夾內的文件了。(如果是index.html文件可以省略不寫,默認加載的就是這個文件);

3、使用http模塊

建立個js文件,命名 server3 ,內容代碼如下:

 1 var finalhandler = require(‘finalhandler‘)
 2 var http = require(‘http‘)
 3 var serveStatic = require(‘serve-static‘)
 4 
 5 // Serve up public/ftp folder
 6 var serve = serveStatic(‘public‘, {‘index‘: [‘index.html‘, ‘index.htm‘]})
 7 
 8 // Create server
 9 var server = http.createServer(function onRequest (req, res) {
10     serve(req, res, finalhandler(req, res))
11 })
12 
13 // Listen
14 server.listen(1338);
15 console.log(‘Server running at http://127.0.0.1:1338/‘);

運行的話只要執行:node server3.js 就可以了,

然後在瀏覽器輸入 http://127.0.0.1:1338/ 來訪問項目文件夾內的文件了。

註:總的文件目錄如下:

技術分享

源碼下載地址:https://github.com/arvin0/nodejs-example/tree/master/web-static-test-server

二、解決訪問靜態資源

主要使用兩個模塊

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 ,就能找到對應的說明了。

nodejs 構建本地web測試服務器 以及 解決訪問靜態資源的問題!