5 天開發介面系統技術小結

在確定了介面系統的詳細規劃和整體功能以後，花費時間更多的其實是對技術細節的打磨。本主題借鑑我開發個人網站 魚立說 的經驗，整理了在開發介面系統過程可能會遇到的各種技術要點。

本文來源：魚立說。本文連結：https://www.yulisay.com/d/cdmqv.html，支援微信瀏覽器開啟。

更多精彩文章，請移步 魚立說個人網站 翻看。歡迎欣賞，吐槽不足之處。

---

涉及到的程式碼已經整理到 https://github.com/yulis-say/web-full-stack 中的 api-skills 目錄，若覺得有用，請分享並 star 。

介面開發小結

下面對介面系統的開發技術要點依次進行概括，包括必要的說明和資源引導。

Laravel & Dingo API 使用技巧

搭建介面系統，為了省時省力，本站使用了 PHP 語言寫的 Laravel & Dingo API 框架，接下來就相關使用經驗進行了整理。

• 管理 Laravel 專案的有用命令：

  生成一個隨機字串：php artisan key:generate
  啟動一個開發伺服器，之後通過 http://localhost:8000 地址訪問：php artisan serve
  優化配置載入：php artisan config:cache
  優化路由載入：php artisan route:cache
  優化檢視載入：php artisan view:cache
  啟用維護模式：php artisan down
  禁用維護模式：php artisan up
  

• 一些有用的 Laravel 擴充套件包：

  Laravel-Debugbar：便捷檢視應用所有資訊，以方便除錯。
  Laravel-Permission：實現 RBAC 許可權管理功能。
  Laravel-activitylog：自動記錄Model的修改，記錄使用者行為擴充套件包。
  Laravel-CORS：解決前後端分離應用跨域請求利器。
  Laravel Excel：整合 Excel 表格，實現 Excel/CSV 等格式檔案的匯入匯出。
  Laravel-Pay：支付寶和微信支付 SDK。
  

• JWT（JSON Web Token）規範為基於 API 的使用者認證提供了最佳解決方案，允許我們在使用者和伺服器之間傳遞安全可靠的資訊。一個 JWT 實際上就是一個字串，它由三部分組成：頭部、載荷與簽名。

• 使用 QQ 郵箱傳送郵件，需要開放 QQ 郵箱的 SMTP 功能。在 QQ 郵箱中做開啟 POP3 和 SMTP 服務，如圖：

API 與 JavaScript 實現互動

整個網站框架的底層其實就是：前端頁面 + 後端支援。前端頁面由 HTML/JavaScript/CSS 等技術實現。後端支援由 API 實現，並與資料庫、檔案系統等實現互動。因此，API 與 JavaScript 的互動，成為將前後端銜接起來的橋樑。

• 如果通過 fetch() 請求 API 資料，我們可以對 fetch() 進行封裝，從而方便後續的呼叫操作。比如這樣進行封裝：

  function myfetch(url, options = {}) {
      !options.method ? (options.method = 'GET') : null;
  
  
  options.mode = 'cors';
  options.headers = {
    'Content-Type': 'application/x-www-form-urlencoded'
  };
  
  
  return fetch(url, options).then(response => {
    return response.json();
  });
  
  
  }
  

• 通過 HTTP 向 API 傳送需要認證通過的請求時，需要將 token 資訊包含到 URL 中，或者設定 Authorization 授權頭：

  Authorization: Bearer+空格+token
  

• JavaScript 讀取前端 Laravel 設定的 Cookie 始終為空？因為安全的原因考慮，Laravel 框架預設會對 Cookie 進行加密儲存。如果想要 Laravel 跟 JavaScript 實現 Cookie 的互動，也就是讓 JavaScript 直接讀取到明文，那麼需要做如下配置：

  將 Cookie 名新增到 App\Http\Middleware\EncryptCookies 的排除名單中：
  protected $except = [
      'cookie_name', 
  ];
  
  
  設定 Cookie 時，去除 HttpOnly 屬性：
  \Cookie::queue('cookie_name', 'test', $minutes = 360, $path = null, $domain = null,
      $secure = false, $httpOnly = false);
  

• 使用 Laravel Mix 編譯資源，對 CSS 和 JavaScript 實現 Webpack 壓縮打包。在執行 Laravel Mix 之前，需要具備 Node.js 和 NPM 執行環境。例如執行命令npm run prod，對 app.js 和 app.scss 檔案進行編譯：

  mix.js('resources/assets/js/app.js', 'public/js')
      .sass('resources/assets/sass/app.scss', 'public/css');
  

更多有用的網站

• Laravel ：優雅的 PHP Web 開發框架，具有高效、簡潔、富於表達力等優點。採用 MVC 設計，是崇尚開發效率的全棧框架。是最受關注的 PHP 框架。網址：https://laravel.com。

• Dingo API ：一個支援 Laravel 和 Lumen 框架的 RESTful API 開發包。https://github.com/dingo/api。

• Packagist ：主要的 Composer 倉庫，集合了與 Composer 一起安裝的公開 PHP 軟體包。https://packagist.org/。

參考連結

① Laravel Documentation

② Dingo API 2.0.0 中文文件

③ tymondesigns/jwt-auth Wiki

④ 使用 Fetch - Web API 介面參考 | MDN

⑤ 編譯資源（Laravel Mix） | 前端開發