這是一篇吐槽+記錄的博客，以此紀念即將結束的實習生活和實習過程中最重要的一個學習成果——製作網頁報表。
最近學校安排了實習，公司這邊要求做一個簡單的數據分析，說白了就是SQL語句查一查，最後再把結果給大家展示一下。
本來以爲最後的展示用Excel就完了，畢竟公司的數據不能大部分拿出來展示，只展示幾十條。誰尋思居然要求用網頁做一個報表……還需要可以用下拉菜單進行條件篩選的那種……
說實話，當年學web網頁製作的時候就頭大，理論聽上去很簡單，但做起來就不是那麼回事兒了。學完之後本以爲這輩子以後跟網頁製作沒關係了，說啥也不會去應聘那種寫網頁的工作，這下可好，一個實習就要重新學習寫網頁。寫也就算了，還要實現動態網頁？？？學的時候就沒學這裏好嘛！
爲了完成任務，一切只能從頭開始了！……
背景：電腦剛安上了MySQL數據庫，之前實習的任務已經基本完成，數據分析階段已結束。
目標：實現一個網頁報表，有下拉菜單可以選擇用戶所在地區和用戶消費行爲，然後顯示符合條件的所有用戶的消費記錄和信息。
分析：任務可以分成兩部分，一部分是網頁的頁面佈局設計，一部分是實現將數據庫的內容按條件查找後顯示在網頁的表格中。
第一部分：頁面佈局設計。
鑑於自己沒啥頁面設計經驗，也沒有太多前端代碼編寫經驗，一切從簡，美其名曰：極簡版搜索。
頁面中心偏上部位設計了兩個下拉菜單，選擇需要的條件後，數據庫的查詢結果將顯示在頁面。
第二部分：在表格中顯示數據庫查詢結果。
這更沒經驗，完完全全小白一枚。一頓百度後瞭解了大概懂了個原理。
使用Ajax和js可以實現前後端的交互，但我這裏實現的功能着實比較簡單，也不至於叫交互那麼高端。
在菜鳥教程上看了一個用PHP和Ajax實現的，鏈接：PHP - AJAX 與 MySQL。代碼和sql數據都有了，於是自己copy了一下，想試試在自己的電腦上實現這個功能，這要是實現了，那整個任務不就妥兒妥兒的了！
然而，事實證明是我想的太美~
對於我這種從來沒接觸過PHP和Ajax，也沒完整學習過前後端交互原理的人來說，這簡直是坑！（好在機智如我，最後還是憑藉着多年踩坑的經驗成功上岸~）
坑一：急功近利，想着代碼如此簡潔，雖然沒學過php這個語言，但好在有點html和其他編程基礎，毫不費力就弄懂了兩段代碼的意思，直接拖到瀏覽器中運行！好傢伙，嘛兒都沒有！
解決：想了一天沒想懂，大晚上迷迷糊糊快睡着的時候靈光一現：是不是太心急了，畢竟是個語言，是不是需要啥編譯環境我沒裝！第二天到公司一試，果然……需要裝一個php運行的集成環境。
於是我選擇了網上大部分人推薦的WampServer。安裝到也還算便捷，一直Next就OK了。誰成想又是我想的太簡單了（唉，這個世界太複雜），打開網頁，那個php文件還是運行不了。
我尋思着是不是數據庫出問題了，連接了一下，完全ok，要啥有啥。那問題出在了哪裏呢？這時候就出現了坑二。
坑二：WampServer安裝好了是需要啓動的（微笑）
解決：一開始不知道WampServer需要啓動，以爲這編譯環境裝好就再也不用擔心了。然後百度告訴我PHP運行不了是因爲沒經過服務器編譯！剛看這句話真沒弄明白這啥意思，菜鳥教程也告訴我要在自己電腦上安裝web服務器纔可以運行php，於是我就去百度各種服務器，發現了大名鼎鼎的IIS！
又去百度IIS是啥，咋啓動……亂七八糟一頓折騰，啓動了……那個html調用php文件還是沒反應……
自己又獨自琢磨了很久，想到：是不是WampServer需要啓動，不然爲啥出個圖標在桌面上？雙擊發現還真有反應！但卻是一個報錯：說有一個文件找不到，重裝沒準兒就解決了。
坑三：WampServer安裝沒那麼容易
解決：我覺得事情沒那麼簡單，於是就先去百度，網友說這個錯誤是因爲缺少VC集成環境，裝上就行了。於是找了資源下載了VC集成運行環境，這裏倒是容易得很，迅速安裝好了，重啓電腦，重啓WampServer服務，在雙擊圖標運行……哦了！
PS：這裏有一篇博文給了我不少解決問題的啓發：WAMP的安裝與配置
坑四：WampServer成功運行，但html仍然無法調用php文件
解決：其實一開始裝WampServer就是爲了解決這個問題的，但誰知道安上之後還是沒法在html裏調用php文件。百度了很多博客和問答帖，這裏我的解決過程就不詳細說了（說多了都是淚），我解決的關鍵步驟總結如下：
1、要想在html中調用php，需要修改WampServer的配置文件，具體路徑：D:\wamp64\bin\apache\apache2.4.39\conf\httpd.conf這裏的路徑要根據自己安裝wamp的路徑寫。在這個配置文件的末尾（網上說文件裏任何地方都成）加上一句話：AddType application/x-httpd-php .htm .html（PS：很重要的亞子，這是衆多網友們踩的坑，我還沒踩到這，但以防萬一還是先加上了）
2、把要調用php文件的html文件和被調用的php文件都放在wamp配置的指定文件夾裏面，我的是D:\wamp64\www
這個目標文件夾在之前httpd.conf中也有提到：
3、運行這個html的時候要記得，不能直接使用瀏覽器打開這個html文件，這樣就不會經過wamp中php服務器的處理，無法對php文件進行編譯，也就無法正常調用php文件。
要這樣：
也就是要在網址欄裏面寫上：localhost//你要調用的文件名.html
有了上面三個保障之後，再打開這個網頁……就會是這個亞子！
大功告成！
文中未提及的其他重要參考鏈接：
PHP文件，在瀏覽器中用本地路徑打開顯示源碼，用localhost打開正常運行 [問題點數：40分]
怎樣設置讓html中提交表單數據時，運行localhost下的php文件？