全棧 - 10 資料庫 用MAMP和WAMP搭建Web環境

張巨集倫發表於2017-03-08

這是全棧資料工程師養成攻略系列教程的第十期:10 資料庫 用MAMP和WAMP搭建Web環境。

現在人人都有自己的桌上型電腦或者筆記本,在我們的個人電腦上搭建一個Web環境,包括Web伺服器和資料庫等,對後續很多開發工作而言都是非常有用的。

Web環境

為什麼需要一個Web環境呢?在資料視覺化中很重要的一部分,便是基於Web網站進行一些動態互動視覺化,這時候便需要一個Web環境用以部署我們的網站專案。

通常來說,一個Web環境中會包含以下幾個元件:

  • Web伺服器:例如Apache和Nginx,用於接收和處理Web請求;
  • 資料庫:最常用的即關係型資料庫MySQL,用於儲存和讀取資料;
  • 後端語言:例如PHP和Python等,用於開發Web專案。

在本地搭建並啟動Web環境之後,我們便可以在瀏覽器中訪問根目錄中的網站專案。根目錄是可配置的,可以設定成個人電腦上任意目錄下的資料夾。使用後端語言開發一個Web專案,將其部署在根目錄下,就可以通過瀏覽器訪問我們的專案,進行瀏覽網頁、資料互動等操作,就如同訪問豆瓣、鏈家等網站一樣,不同的只是這些網站部署於外網可訪問的伺服器上,而我們的網站只能在本機上訪問。

當然,我們不用一個個單獨地去安裝以上提及的元件,而是像Anaconda那樣,安裝一個包含全部所需內容的套件即可,即XAMP。主要是MAMP和WAMP,分別對應Mac OS和Windows兩大常用個人電腦作業系統,根據自己的作業系統選擇相應的軟體並下載安裝即可。

MAMP有普通版和升級版兩種,前者免費而且功能足以滿足需求,WampServer下載時根據系統配置選擇64bit或32bit即可。

偏好設定

搭建環境自然會涉及到不少配置項內容,或者稱作軟體的偏好設定,這裡以MAMP為例講解需要了解的設定。執行MAMP之後,可以看到以下軟體介面,非常簡單清爽,只有三個按鈕,分別對應偏好設定開啟歡迎頁面開啟/停止服務

全棧 - 10 資料庫 用MAMP和WAMP搭建Web環境

執行MAMP軟體之後,會自動開啟Web服務,開啟成功後會在瀏覽器中彈出歡迎頁面,相當於自動點選了第三個鍵和第二個鍵。歡迎頁面如下圖所示,可以檢視PHP版本資訊,提供了使用phpMyAdmin操作MySQL資料庫的連結入口以及資料庫資訊,並給出了PHP、Python、Perl等語言連線並運算元據的樣例程式碼。其中,phpMyAdmin是一款基於PHP開發的前端資料庫圖形化管理工具。除此之外,可以發現歡迎頁面的連結是以localhost開頭的,此即本地Web服務的一個別名,和movie.douban.com類似,但別人在他們的手機或電腦上則無法通過localhost訪問你的本機Web環境。

全棧 - 10 資料庫 用MAMP和WAMP搭建Web環境

需要重點介紹地是MAMP軟體介面中的偏好設定這一按鈕,英文顯示為Preferences,點選之後可以進行以下五方面的偏好設定:開啟/停止服務選項、埠配置、PHP配置、Web伺服器配置、資料庫配置。

  • 在開啟/停止服務選項中,可以設定每次執行MAMP之後是否自動開啟相關服務,以及在退出MAMP之後是否自動關閉相關服務;
  • 在埠配置中,可以對Apache、Nginx、MySQL所使用的埠進行配置。在講解url的結構時曾簡單提到過埠的概念,在同一臺機器上,不同服務使用同一個域名,因此需要使用不同的埠以進行區分,例如Web服務、資料庫服務、ssh服務的預設埠分別是80、3306、22。MAMP的預設埠配置是Apache和Nginx為8888、MySQL為8889,使用一些不常用的埠主要是為了避免和其他服務的衝突;
  • 在PHP配置中,可以設定PHP版本為5.x或7.x,以及是否啟動快取,PHP版本主要會影響到一些相容性問題,例如phpMyAdmin的使用可能對PHP版本有一些要求;
  • 在Web伺服器配置中,可以選擇將Apache或Nginx作為所使用的Web伺服器,使用預設的Apache即可。另外還可以在這裡設定Web環境的根目錄,例如以使用者桌面為根目錄,則在瀏覽器中訪問localhost:8888即可看到桌面上的全部檔案,其中8888為Apache的埠;
  • 在資料庫配置中,可以看到當前所使用的MySQL版本號。

以上配置內容中,最為重要的是各項服務的埠配置,以及Web環境的根目錄設定。只有理解了這兩點內容,才能弄清楚應當把Web專案拷貝到哪裡,以及如何在瀏覽器中訪問到我們的專案。

Hello World

既然講到了新的東西,那麼是時候來一發Hello World了。開啟Web服務之後,在根目錄中新建一個hello.html,然後用Sublime進行編輯。html即Hyper Text Markup Language,超文字標記語言,使用html語言編寫並且以.html為字尾名的檔案,是Web網站專案中最常見的一種靜態模版檔案。在hello.html中輸入以下程式碼,然後在瀏覽器中可以通過localhost:8888/hello.html訪問到剛才所寫的檔案,並看到期待的Hello World

<html>
    <header></header>
    <body>
        <h1>Hello World</h1>
    </body>
</html>複製程式碼

當然,也可以通過直接雙擊hello.html的方式執行,同樣可以在瀏覽器中開啟並看到Hello World。但此時連結是以file開頭,說明這一操作是通過檔案系統完成的,而並非之前所用的Web環境。

PHP是一種非常簡單的後端語言,在PHP中也可以使用html語法。在根目錄中新建一個hello.php,然後用Sublime進行編輯並輸入以下程式碼,其中第一行和第四行分別是php程式碼檔案的頭和尾,第二行用echo命令列印出來一條文字,第三行使用phpinfo()函式列印出當前所用PHP版本的一些資訊,注意每行PHP程式碼需要用分號結束。編寫完畢後,在瀏覽器中即可通過localhost:8888/hello.php訪問到hello.php,並看到相應的列印內容。

<?php
    echo 'Hello World';
    phpinfo();
?>複製程式碼

以上兩個例子都說明了,當Web服務開啟之後,我們可以通過瀏覽器訪問根目錄中的內容,並讓瀏覽器載入和渲染html、php等Web專案檔案。

後續章節中,我們將結合實際專案進一步理解Web環境的作用。例如,當一個html檔案中通過AJAX請求了同級目錄中的json資料時,如果僅通過雙擊的方式執行html檔案,AJAX請求將失敗;而只有在一個Web環境中執行這一html檔案,AJAX請求才能成功,資料才能被獲取到並進一步展示。當然,如果Web專案中涉及到了資料庫的使用,Web環境則是更加必不可少的。

視訊連結:用MAMP和WAMP搭建Web環境

如果覺得文章不錯,不妨點一下左下方的喜歡~

相關文章