皇輿全覽圖：前後端架構總覽
在我們正式進入到 Web 的世界以前，有一個東西非常重要，那就是「世界觀」，你必須先大概知道這個世界到底長怎樣，有一個總體的概念的時候，之後無論做什麼都不會那麼迷惘。 原本想用線上的畫圖工具幫大家畫一張美美的圖，但後來發現好麻煩，還要去找無版權圖片然後風格又不搭，只好用我小學三年級的繪畫程度勉強畫出一張圖來。但我要先聲明，這張圖是簡化過後的版本，實際上的架構會比這個還要複雜。 這張圖分成左邊跟右邊，左邊是 client，右邊是 server。client 的部分都是你可以「完全控制」的部分，因為是存在於「你的裝置」裡面。例如說 Web 的話，你可以用 chrome dev tool 就修改一個網頁，無論是字或是圖片都可以；App 的話你也可以把它拆開，改一改之後組裝回去。但是你改了之後，別人看到的還是一樣的網頁，並不會有什麼不同。因為來源都是 server，你可以想成你電腦裡面存的只是一份複製的檔案而已，所以你改了也只有自己看得到。 client 還分成 Mobile App 跟 Web，其實差別就是運行的環境不同而已。我想強調的只是：網頁跟 App 都是必須要跟 server 溝通的，所以 server 扮演的角色十分重要。 server 的部分就是你「完全不能控制」，你甚至也不知道上面在幹嘛。因此，所有敏感的操作一定都是在 server 上面進行。例如說你今天要刪除一筆會員資料，你不會在 client 端就去連線資料庫，然後直接操作資料庫刪除資料。而是，你會先告訴 server 說：「幫我刪除某人的資料」，server 再去連線資料庫，然後幫你刪掉。中間會多了 server 這一層，所以可以做一些保護，例如說判斷你是不是有權限去刪除資料。而剛剛也講過，server 這一層是你完全看不到的，所以你也改不了。 server 跟 client 的溝通通常會透過 API，Application Programming Interface。乍聽之下十分複雜，但你只要想成是兩個人約定好的一些表達方法就好。這個其實就跟你在跟做的沒那麼好的機器人溝通一樣，你問說：「中正紀念堂在哪裡？」他會聽得懂然後回答你。但如果你問：「在哪裡，中正紀念堂」，他就會故障然後說：「很抱歉，我聽不懂你在說什麼」。所以在機器人的程式裡面有一系列它已經制定好的規則，例如說「XX...