【秒懂】用 Javascript 做 Routing——讓 Single-page webapp 不用 Hashbang (#!) 也能瀏覽

  _     _             _ ____    ____             _   _             
 | |__ | |_ _ __ ___ | | ___|  |  _ \ ___  _   _| |_(_)_ __   __ _ 
 | '_ \| __| '_ ` _ \| |___ \  | |_) / _ \| | | | __| | '_ \ / _` |
 | | | |  | | | | | |___) | |  _ < (_) |  |  | | | | (_| |
  |_|\__|_|  |_|_|____/   \_\___/ \__,_|\__|_|_| |_|\__, |
                                                             |___/

【簡介】

做 Single-page webapp 最大的問題就是不能像普通鏈接一樣：

• 要不給加上【#!】(Hashbang) (e.g.) http://www.example.com/webapp#!/login
  • 這樣的【#!】，可以透過 (e.g.) http://www.example.com/webapp/index.html 有聯繫的 javascript 分析 【#!/login】，再輸出合適的內容
  • 但看起來好不順眼，直接跟 (e.g.) http://www.example.com/webapp/login 相比，下面的順眼多了
• 要不只能傳送網址的 Root Directory (e.g.) http://www.example.com/webapp
  • 這樣就更不方便，要登入就只能再按網頁上的按鈕來登入
  • 而且，分享也更困難～

所以，現在要做的是：

1. 讓網頁的內容能透過 (e.g.) http://www.example.com/webapp/login 來分享
2. 讓【上一頁】按鈕能運作，真的返回先前的狀態

但，要注意的是：

1. 網頁一定要透過 Javascript 才能執行
   • 如果要照顧沒有 Javascript 的瀏覽器用戶，只能把整個網頁用 Server-side programme 重寫
2. 不支援HTML5 的瀏覽器，也可以瀏覽網頁，但
   • 網址還是會有 #!
   • 不能使用【上一頁】、【下一頁】的按鈕

【事前功夫】

1. 要有已經設定好的 Server：以下的教學會分別說明 Apache 跟 Nginx
2. 為了簡化內容（還有小弟的技術不足, haha），以下內容用上 Javascript Framework  (e.g.)AngularJS,EmberJS,BareboneJS
   • 在這裡，會以 AngularJS 為目標
3. 支援 html5 的瀏覽器，尤其是支援 【History.pushState】

【秒懂步驟～開始】

下面的教學，會以一下的設置做背景

• Server: Apache/ Nginx
• Website Path: /webapp/exampleApp/
• 所以內部瀏覽的網址是: 127.0.0.1/webapp/exampleApp

以下內容將會一氣呵成，需要解釋的可以再留言區問～

Nginx, Apache 設置 Laravel Routing

最近在搞一個小項目，由於小弟的 Server-side programming 的技術不高，而且要在安全性＋程式碼的可讀性（自己寫完後看不懂 lol ）上的考慮，就在網上找了一大堆 PHP Framework （原本考慮過不用 PHP的，想嘗試用年輕許多的 Node.JS，但受到之前的【Max-call-stack-size】跟【Memory Leakage】這些Bug 的心裡陰影，還是在自己的小項目做好了）。

比較過不同的 PHP Framework, 例如是Zend Framework、Cake PHP，還是要嘗試投進 Laravel Framework （回不了頭的選擇 :l）。為了更快的開始研究，就選擇了一個Starter Kit 來著手研究—— 來至 Snipe的  “snipe/laravel4-starter"。

初始的網頁界面

設定過程——如果已經有laravel Frame 可以使用，可以直接略過

設定的過程可以說是無痛的，因為網上都有很多的文章可以參考。

1. 【Git Clone】: 把 Snipe的  “snipe/laravel4-starter" Clone 到自己的開發環境，留意Server 的 Document Root 有沒有設定正確
2. 【設定 Starter-kit】: 如果你是用這個Starter-kit 才需要做這個步驟。看ReadMe 檔： https://github.com/snipe/laravel4-starter/blob/master/readme.md
3. 【修改public Folder】: 如果你不是整個Server 都是由Laravel Frame 搭建的，建議把 laravel4-starter/public 檔案夾裡的文件都移動出來。
   • 可以參考這篇教學：http://blog.tommyku.com/blog/create-simple-contact-list-application-with-laravel-and-openshift-integration-part-1?page=1 （"Relocate the public path out …" 開始閱讀）
   • 在下面的教學中，Server 的Root 是 E:\local_host_dev\www
4. 然後就到了這教學的重點—— Routing: 因為Server 的Setup 沒有預設到可以Route 的

[ERROR LOG] 經典錯誤 “php is not recognised as an internal or external command"

錯誤碼

• 系統不能辨認 >>php 這段指令
• (e.g.) 用 cmd 輸入 “php –version"，但  cmd 回應這段錯誤：

php is not recognised as an internal or external command

錯誤成因

1. 檔案不存在——那就自己下載一個吧，沒有安裝包，把下載了的壓縮檔解壓到一個地方吧
2. PATH 設定有誤——
   • 地址有誤，打開 【Control Panel\System and Security\System > Advanced System Settings > Environment Variables > System > PATH】，然後看看有沒有 php 檔案夾的地址。沒有的話自行加上吧
   • 檔案夾的名稱有複雜的子元 (e.g. php5.5.15)，把名稱改成簡單一點的吧 (e.g. php)，然後更新【PATH 變數】＋【php.ini 的 extentions 地址，因為 檔案夾 的名稱改變了】

php.ini 沒有更新，導致【Extension not found】

閱讀更多

1. 文章內容來源： http://chat.stackoverflow.com/rooms/22218/discussion-between-user1049769-and-vahid-farahmand

移除Mac 的 .DS_Store、._ 檔

前言

這教學不單對Mac 的用戶有效，只要你的電腦跟Mac 機的Dropbox 同步過，都會發現電腦里出現大量的小檔案，而且全部檔案的開首都是 “._" (dot underscore)。

雖然對系統的儲存空間影響很少，但同步的過程會因為要處理的檔案非常多而影響效能，尤其對於使用外置記憶卡的我。

據說，這些.DS_Store 檔案是記錄資料夾的文件資料的（如果打開系統資訊 ，會顯示不同類型的檔案佔用的空間），如果剷除了，"Storage" 就會就會把所有檔案顯示成 “Others" 。

事前準備

這些檔案其實是隱藏的，所以要讓系統顯示所有檔案：

1. 在Terminal 輸入：【defaults write com.apple.finder appleshowallfiles true】

這樣就會修改系統的設定，讓系統顯示全部檔案，包括被隱藏的。

制止 .DS_Store 繼續產生

1. 下載 Death_To_DS_Store (直接下載：http://www.aorensoftware.com/Downloads/Files/DeathToDSStore.zip )
2. 直接開啟解壓出來的 Death_To_DSStore.app （剔選Launch Agent來自動啟動這軟件，那麼一開機就會開始阻止 .DS_Store）

剷除所有 ._ 檔案（dot_clean()）——不能一勞永逸

這方法會剷除所有存在在儲存空間的 “._" 檔，而系統也不會重新產生這些檔案；但對於新的檔案，還是會有 ._ 檔案的。

現有的付費方案 (BlueHarvest，售價HKD108)，也只是把以下的工序自動化，并在每次寫檔案時執行一次而已。

1. 打開Terminal，輸入【dot_clean /path_to_folder/】

(e.g.) dot_clean /Users/alan/Documents

這樣系統就會自動把 ._ 的檔案信息融合到原本的檔案。如果原本的檔案消失了，都會被剷除。

建議一個星期執行一次就可以了，一次過把所有這類型的檔案鏟掉。

在Windows 上剷掉 ._ 檔

如果大家同時再Mac 跟 Windows 系統上用Dropbox 同步文件的話，相信大家都會看過，即使在Windows 上也發現這些煩人的檔案；就算沒有用 Dropbox, 用 USB Thumbdrive 把檔案傳來傳去時，Mac 系統也會“順便”把這些檔案“附送”給Windows。

要剷除的話，其實很簡單，只需要一句 CMD Command 【Run: “cmd"】

dir /S ._*

這個可以在剷除檔案前，確保沒有亂剷

del /S ._*

好了，真的要動手咯～

解釋一下

• /S: 就是 Recursive 的意思，就是徹底搜出 ._ 的檔案
• *: 是asterisk, wildcard 的意思啦～

後話

其實如果不使用【Dropbox】 和 【外置儲存裝置】的話，系統這個預設的行為是沒有影響的；但這系統的行為影響最大的是【外置儲存裝置】。

由於SSD 對我最主要的用途是快速啟動軟件，跟暫時處理檔案用的。如果用作同步，這些經常讀寫檔案的行為，還是用【外置儲存裝置】比較划算（這算不算）