這是全棧數(shù)據(jù)工程師養(yǎng)成攻略系列教程的第十期：10 數(shù)據(jù)庫 用MAMP和WAMP搭建Web環(huán)境。
現(xiàn)在人人都有自己的臺式機或者筆記本，在我們的個人電腦上搭建一個Web環(huán)境，包括Web服務器和數(shù)據(jù)庫等，對后續(xù)很多開發(fā)工作而言都是非常有用的。
Web環(huán)境
為什么需要一個Web環(huán)境呢？在數(shù)據(jù)可視化中很重要的一部分，便是基于Web網(wǎng)站進行一些動態(tài)交互可視化，這時候便需要一個Web環(huán)境用以部署我們的網(wǎng)站項目。
通常來說，一個Web環(huán)境中會包含以下幾個組件：
- Web服務器：例如Apache和Nginx，用于接收和處理Web請求；
- 數(shù)據(jù)庫：最常用的即關系型數(shù)據(jù)庫MySQL，用于存儲和讀取數(shù)據(jù)；
- 后端語言：例如PHP和Python等，用于開發(fā)Web項目。
在本地搭建并啟動Web環(huán)境之后，我們便可以在瀏覽器中訪問根目錄中的網(wǎng)站項目。根目錄是可配置的，可以設置成個人電腦上任意目錄下的文件夾。使用后端語言開發(fā)一個Web項目，將其部署在根目錄下，就可以通過瀏覽器訪問我們的項目，進行瀏覽網(wǎng)頁、數(shù)據(jù)交互等操作，就如同訪問豆瓣、鏈家等網(wǎng)站一樣，不同的只是這些網(wǎng)站部署于外網(wǎng)可訪問的服務器上，而我們的網(wǎng)站只能在本機上訪問。
當然，我們不用一個個單獨地去安裝以上提及的組件，而是像Anaconda那樣，安裝一個包含全部所需內容的套件即可，即XAMP。主要是MAMP和WAMP，分別對應Mac OS和Windows兩大常用個人電腦操作系統(tǒng)，根據(jù)自己的操作系統(tǒng)選擇相應的軟件并下載安裝即可。
- MAMP：Mac OS上的Apache、MySQL和PHP，https://www.mamp.info/en/；
- WAMP：Windows上的Apache、MySQL和PHP，http://www.wampserver.com/en/。
MAMP有普通版和升級版兩種，前者免費而且功能足以滿足需求，WampServer下載時根據(jù)系統(tǒng)配置選擇64bit或32bit即可。
偏好設置
搭建環(huán)境自然會涉及到不少配置項內容，或者稱作軟件的偏好設置，這里以MAMP為例講解需要了解的設置。運行MAMP之后，可以看到以下軟件界面，非常簡單清爽，只有三個按鈕，分別對應偏好設置、打開歡迎頁面、開啟/停止服務。
運行MAMP軟件之后，會自動開啟Web服務，開啟成功后會在瀏覽器中彈出歡迎頁面，相當于自動點擊了第三個鍵和第二個鍵。歡迎頁面如下圖所示，可以查看PHP版本信息，提供了使用phpMyAdmin操作MySQL數(shù)據(jù)庫的鏈接入口以及數(shù)據(jù)庫信息，并給出了PHP、Python、Perl等語言連接并操作數(shù)據(jù)的樣例代碼。其中，phpMyAdmin是一款基于PHP開發(fā)的前端數(shù)據(jù)庫圖形化管理工具。除此之外，可以發(fā)現(xiàn)歡迎頁面的鏈接是以localhost開頭的，此即本地Web服務的一個別名，和movie.douban.com類似，但別人在他們的手機或電腦上則無法通過localhost訪問你的本機Web環(huán)境。
需要重點介紹地是MAMP軟件界面中的偏好設置這一按鈕，英文顯示為Preferences，點擊之后可以進行以下五方面的偏好設置：開啟/停止服務選項、端口配置、PHP配置、Web服務器配置、數(shù)據(jù)庫配置。
- 在開啟/停止服務選項中，可以設置每次運行MAMP之后是否自動開啟相關服務，以及在退出MAMP之后是否自動關閉相關服務；
- 在端口配置中，可以對Apache、Nginx、MySQL所使用的端口進行配置。在講解url的結構時曾簡單提到過端口的概念，在同一臺機器上，不同服務使用同一個域名，因此需要使用不同的端口以進行區(qū)分，例如Web服務、數(shù)據(jù)庫服務、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環(huán)境的根目錄，例如以用戶桌面為根目錄，則在瀏覽器中訪問
localhost:8888即可看到桌面上的全部文件，其中8888為Apache的端口； - 在數(shù)據(jù)庫配置中，可以看到當前所使用的MySQL版本號。
以上配置內容中，最為重要的是各項服務的端口配置，以及Web環(huán)境的根目錄設置。只有理解了這兩點內容，才能弄清楚應當把Web項目拷貝到哪里，以及如何在瀏覽器中訪問到我們的項目。
Hello World
既然講到了新的東西，那么是時候來一發(fā)Hello World了。開啟Web服務之后，在根目錄中新建一個hello.html，然后用Sublime進行編輯。html即Hyper Text Markup Language，超文本標記語言，使用html語言編寫并且以.html為后綴名的文件，是Web網(wǎng)站項目中最常見的一種靜態(tài)模版文件。在hello.html中輸入以下代碼，然后在瀏覽器中可以通過localhost:8888/hello.html訪問到剛才所寫的文件，并看到期待的Hello World。
<html>
<header></header>
<body>
<h1>Hello World</h1>
</body>
</html>
當然，也可以通過直接雙擊hello.html的方式運行，同樣可以在瀏覽器中打開并看到Hello World。但此時鏈接是以file開頭，說明這一操作是通過文件系統(tǒng)完成的，而并非之前所用的Web環(huán)境。
PHP是一種非常簡單的后端語言，在PHP中也可以使用html語法。在根目錄中新建一個hello.php，然后用Sublime進行編輯并輸入以下代碼，其中第一行和第四行分別是php代碼文件的頭和尾，第二行用echo命令打印出來一條文本，第三行使用phpinfo()函數(shù)打印出當前所用PHP版本的一些信息，注意每行PHP代碼需要用分號結束。編寫完畢后，在瀏覽器中即可通過localhost:8888/hello.php訪問到hello.php，并看到相應的打印內容。
<?php
echo 'Hello World';
phpinfo();
?>
以上兩個例子都說明了，當Web服務開啟之后，我們可以通過瀏覽器訪問根目錄中的內容，并讓瀏覽器加載和渲染html、php等Web項目文件。
后續(xù)章節(jié)中，我們將結合實際項目進一步理解Web環(huán)境的作用。例如，當一個html文件中通過AJAX請求了同級目錄中的json數(shù)據(jù)時，如果僅通過雙擊的方式運行html文件，AJAX請求將失敗；而只有在一個Web環(huán)境中運行這一html文件，AJAX請求才能成功，數(shù)據(jù)才能被獲取到并進一步展示。當然，如果Web項目中涉及到了數(shù)據(jù)庫的使用，Web環(huán)境則是更加必不可少的。
