搭建本地服務器方法合集


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

  1、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請求。注意,該方法僅適合靜態頁面。

  2、Tomcat服務器

  下載安裝Tomcat服務器即可。下載地址為:http://tomcat.apache.org/ 。

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

  3、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:設定的端口號/項目地址,即可訪問。

  4、Window系統自帶的IIS功能

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

  5、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地址的方法。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2021 ITdaan.com