php – Codeigniter 安裝並使用 Composer 自動載入(autoload)完整步驟

  1. 透過 Composer 安裝 CI
  2. 自動載入自訂的 Models, Libraries, Helpers
  3. 在 Controllers 測試

透過 Composer 安裝 Codeigniter 3

如果你曾經用過 Codeigniter 與 Composer 一點經驗,這份教學能快速幫你安裝整個流程。

  • 準備在 C:\xampp\htdocs\www 建立 ci 當作專案路徑
  • PHP Version 7.0.9
  • 已安裝 Composer

改設定: application/config/config.php

移除 index.php:根目錄增加 .htaccess,並指定不用 Rewrite 的檔案或路徑名稱。儲存後瀏覽 http://localhost/ci/welcome/index 是否等於 http://localhost/ci/index.php/welcome/index。若要詳細 SEO 優化,可捲至底下參考 3。

自動載入自訂的 Models, Libraries, Helpers

修改 composer.json

  • 類別 (Class) 使用 “psr-4” 規範,後面的 libraries 製作我會使用這個規範。
  • 方法 (Function) 使用 “files”
  • classmap 指定的是一些不屬於 psr-4 規範的類別,可能是我們從 Github 下載其他人的類別

Models

增加 application/models/Tool.php,提供給 Models 使用 CI 內部資源

增加 application/models/User.php

Libraries

增加 application/libraries/Home.php

Helpers

增加 application/Helpers/Datetime.php。

Function 比較麻煩,每增加一個檔案就要添加到 composer.json => “file”

在 Controllers 測試

修改 applicatioin/controllers/Welcome.php

瀏覽後會得到

 

可以參考這些幫助你理解

  1. 將 Codeigniter 3 改用 Composer 自動讀取 Model 的方法
  2. 在 Codeigniter 操作 Composer 自動載入套件
  3. php – codeigniter 隱藏或省略 index.php
  4. Compoer – 非常簡單的使用 psr-4 來建立自動讀取類別

php – Compoer – 非常簡單的使用 psr-4 來建立自動讀取類別

使用 Composer 支援的 psr-4 規範,我們只要設定好一次 Composer 的命名空間 Namespace,當日後增加類別的時候,就能非常簡單的自動讀取。在這之前,你需要有

  • 電腦已經裝好 Composer
  • 曾經使用過 Composer init 與 Composer install 的經驗

準備好範例的目錄

  • public 演示放置公開的檔案,例如 index.php
  • src 演示未來增加的類別

初始化 Composer.json

/composer.json

根命名空間「Jsn」的路徑指向「src/Jsn」,接著執行 dump-autoload (簡寫為 dump) 讓 Composer 幫我們初次建立命名空間。

目錄架構就會變成

嘗試建立自訂類別

第一個類別:使用者喜歡的電影

因為:命名空間/過度路徑/檔案.php
所以:/src/Jsn/User/Like/Movie.php

在 /public/index.php 寫入

假設還有類別:使用者喜歡的書籍

因為:命名空間/過度路徑/檔案.php
所以:/src/Jsn/User/Like/Book.php

接著 /public/index.php 寫入

若想在其他路徑建立類別:設定

因為:命名空間/過度路徑/檔案.php
所以:/src/Jsn/Config.php

接著 /public/index.php 寫入

掌握 3 點

  1. 命名空間 + 類別名稱 = 路徑 + 檔名.php
  2. 命名空間、類別,都需要開頭大寫
  3. 下滑線不要拿來當作分類,例如:Like_Book.php、Like_Movie.php,應該改成路徑 Like/Book.php、Like/Movie.php

 

Vue – Component 組件的分離範例

HTML

  • <header> 包含使用者與購物車組件
  • <footer> 僅包含使用者組件

JS

 

Vue – 在標籤中,綁定參數 (v-bind) 與監聽事件 (v-on) 的混和用法

HTML

  • v-bind 綁定參數 “href” 為變數 url,等於下面的 app.url
  • v-on 監聽事件 “click” 為方法 show(),等於 app.show()

JS

因為 vue 特性

  • app.url 等同於 http://google.com
  • app.show() 呼叫 vue 底下 methods 的 show()

「前往指定網址」點擊後會先出現 “Hello World” 後才前往 Google 網址。有趣的是,show() 回傳的 false,並不會讓 href 前往 Google 終止行動。這跟 JavaScript on 事件是不同的,可以看「點我會被終止超行動」就會發現並不能如期地前往指定網址。

Vue – 關於 v-html 的用法解說

官方說明

HTML

  • google 因為放在 v-html 中,所以整串 div 會被替換為 HTML 字串
  • jsnwork 因為不放在 v-html 中,所以 {{jsnwork}} 被替換後會顯示 <a> 文字,而非 HTML 編碼。另外要注意,鬍子格式 (Mustache) 的變數寫法,Vue 規定是不能寫在屬性喔。

JS