搭建本地服務器方法合集

搭建本地服務器方法合集

 

學習前端，搭建一個本地服務器用來測試代碼仍是很重要的，不只能夠避免使用Chrome瀏覽器時，出現不支持File協議的Ajax請求的大坑（Firefox是支持的），還可以用來測試移動端的狀況。下面經過搜索互聯網上的資料，總結了五個搭建本地服務器的方法。

　　一、SublimeServer

　　我平時使用的編輯器是Sublime text，而SublimeServer則是Sublime text的一款插件，安裝後運行便可使用。注意，安裝插件以前須要先安裝Package Control。Sublime text 3的Package Control的安裝方法以下：

　　點擊View->Show Console打開控制檯（快捷鍵Ctrl+`），在控制檯中複製以下代碼回車便可安裝Package Control。若不成功，自行搜索下載安裝文件手動安裝方法。參考來源：https://packagecontrol.io/installation。

 

import urllib.request,os,hashlib; h = 'df21e130d211cfc94d9b0905775a7c0f' + '1e3d39e33b79698005270310898eea76'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

 

　　安裝完畢後點擊Preferences->Package Control，在彈出來的窗口中輸入Install Package回車，再在輸入框中輸入SublimeServer搜索，回車或點擊安裝。安裝完成後，在Sublime text中打開整個文件夾，點擊Tools->SublimeServer->start SublimeServer，本地服務器開啓。在須要打開的頁面中，右鍵點擊View in SublimeServer就能夠在瀏覽器訪問到本地服務器了，使用Chrome也能夠支持本地文件的Ajax請求。注意，該方法僅適合靜態頁面。

　　二、Tomcat服務器

　　下載安裝Tomcat服務器便可。下載地址爲：http://tomcat.apache.org/ 。

　　下載安裝完成後，運行Tomcat並啓動服務器，訪問地址http://localhost:8080，若能成功顯示服務器，則表示服務器開啓成功。將項目文件放在Tomcat安裝目錄的webapps目錄下，瀏覽器中輸入http://localhost:8080/項目地址，便可訪問。將Tomcat配合eclipse使用能夠訪問動態頁面。

　　三、Node.js

　　使用Node.js搭建本地服務器須要先安裝Node.js，安裝地址爲：https://nodejs.org/en/。而且創建一個server.js文件，簡單版代碼以下：

　　代碼來源參考：http://www.jianshu.com/p/7ddcc6f4ff71。

 

var http = require('http');

var fs = require('fs');

var documentRoot = 'E:/WebServer'; //設置文件的根目錄，能夠修改成我的的自定義目錄。

var server = http.createServer(function(req,res) {

    var url = req.url;

    var file = documentRoot + url;

    console.log(url);

    fs.readFile(file,function(err,data) {

        if(err){

            res.writeHeader(404,{

                'content-type':'text/html;charset="utf-8"'

            });

            res.write('<h1>404錯誤</h1><p>你要找的頁面不存在</p>');

            res.end();

        }else{

            res.writeHeader(200,{

                'content-type':'text/html;charset=utf-8"'

            });

            res.write(data);

            res.end();

        }

    });

}).listen(8888);//設置的端口號，建議爲6000以上。

console.log('服務器開啓成功');

 

　　將項目文件和server.js文件放在設置的根目錄下，運行命令處理程序，輸入node 根目錄名\server.js，出現以下圖的「服務器開啓成功」後（若出現防火牆，選擇容許訪問），一樣在瀏覽器中輸入地址http://localhost:設定的端口號/項目地址，便可訪問。

 

 

　　四、Window系統自帶的IIS功能

　　此方法我沒有嘗試，具體實現能夠自行搜索，僅限於Window系統使用。

　　五、XAMPP軟件

　　XAMPP是集Apache+MySQL+PHP+PERL爲一體的建站集成軟件包，下載地址爲：https://www.apachefriends.org/zh_cn/index.html。本地服務器是它的其中一個功能，安裝完成後，可根據此教程創建服務器。教程爲：http://www.jianshu.com/p/27e7a9ab5976。類似的軟件還有WAMP，一樣也是一款集成軟件。

　　以上的方法除了訪問地址http://localhost:8080（或其餘端口號）/x項目地址外，將localhost：端口號改成本機的IP地址，一樣能夠訪問，使用移動設備訪問時就須要用IP地址的方法。