Laravel swagger
更新於 發佈於 閱讀時間約 5 分鐘
我對於自己開發的API會習慣性寫一份swagger文件方便前端串接，但因為這些文件都是存在我個人的swagger帳號，且會受限於免費版限制，再加上剛好跟PM在討論如何維護我們的文件，於是我就開始著手將swagger自己部署到公司管理後台。
這樣做的好處：
(1)後端都可以編輯
(2)文件隸屬於公司底下且不用另外付費
(3)git版控，可以清楚知道誰動了什麼
實作
安裝
npm install swagger-ui
設定
step1: 存放yaml檔
因為這份swagger是要開放給外界看到的，所以會需要將檔案放在public資料夾，因為公司有多個產品，所以我開的路徑為：public/documents/aaa-api.yaml, public/documents/bbb-api.yaml
step2: js檔設定檔
在resource/js資料夾中新增每一份yaml檔要用的js設定：
aaa-swager.yaml
import SwaggerUI from "swagger-ui";
import "swagger-ui/dist/swagger-ui.css";
SwaggerUI({
dom_id: "#swagger-api", // 代表他會去找html中元素id是swagger-api的，然後將文件載入
url: "https://xxxxxx/documents/aaa-api.yaml", // yaml檔位置，js會去抓
});
bbb-swagger.yaml
import SwaggerUI from "swagger-ui";
import "swagger-ui/dist/swagger-ui.css";
SwaggerUI({
dom_id: "#swagger-api", // 代表他會去找html中元素id是swagger-api的，然後將文件載入
url: "https://xxxxxx/documents/bbb-api.yaml", // yaml檔位置，js會去抓
});
step3: webpack
設定
到webpack.mix.js檔，新增以下
mix.js("resources/js/aaa-swagger.js", "public/js")
.js("resources/js/bbb-swagger.js", "public/js")
運行
npm run dev將在resource/js資料夾的js打包到public/js資料夾裡，這樣我們的html檔就能載入他們，背後js會幫我們根據設定檔把畫面載入到某一個div上。
step4: 寫blade樣板
新增swagger.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>api</title>
</head>
<body>
<div id="swagger-api"></div>
<script src="{{ mix('js/' . $fileName) }}"></script>
</body>
</html>
因為每一份api文件樣式都一樣，所以我才只開一份blade，需要載入的檔案位置再透過api route傳就好。
step5: route
到web.php新增以下路由：
Route::group([
'prefix' => 'documents',
'middleware' => ['auth:sanctum'] // 登入驗證,避免api公開
], function(){
Route::get('/aaa', function () {
return view('swagger')->with('fileName', 'aaa-swagger.js');
}); Route::get('/bbb', function () {
return view('swagger')->with('fileName', 'bbb-swagger.js');
});});
step6:開cors
step7: 運行
composer artisan optimize之後到你設定好的路由，就可以看到成果了
留言0
查看全部
你可能也想看
Google News 追蹤
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
在本章節中，我們探討了 PHP 中如何引用和管理套件。學習了如何使用 Composer 來安裝第三方套件，以及如何引用自定義模組。此外，我們還介紹了如何創建和使用自定義套件，並列舉了一些在 PHP 社群中常見且廣泛使用的套件和庫。通過掌握這些知識，開發者可以更有效地管理和利用各種資源。
本章節的目的是介紹Java中的套件使用，包括如何引用第三方套件和自定義模組，如何創建和使用自定義套件，以及介紹一些常見的Java標準庫套件。這些內容將幫助讀者更好地理解和使用Java的套件系統。
※ 用 faker 套件產生假資料步驟
安裝 faker套件：快速生成假資料（人名、地名、時間）。
npm install faker@5.5.3
引入 faker 套件：
const faker = require('faker')
建立data資料夾來生成假資料。創建一個名為 gene
本文檔介紹了在Swift中使用套件的詳細方法，包括如何引用第三方套件和自定義模組，如何創建自定義套件，以及一些常見的Swift套件。這些套件可以幫助開發者快速添加功能到項目中，提高開發效率和程式碼品質。
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
本篇文章將介紹如何使用Lambda建立Pre-Sign URL 的簡單範例，讓讀者瞭解如何自行發揮。
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
Simple Storage Service (S3) 是 AWS 最常應用到的服務，只要是需要將檔案上傳到雲端的狀況都可以使用S3，本篇文章將介紹如何設定與使用AWS S3。
先前幾篇筆記介紹了網路請求，瀏覽器儲存資料的方式，那麼實務上，前端最常需要發送網路請求的時候，就是透過呼叫 API，去向後端工程師發送/請求資料，所以今天來記錄什麼是 API吧！
大家好，我是woody，是一名料理創作者，非常努力地在嘗試將複雜的料理簡單化，讓大家也可以體驗到料理的樂趣而我也非常享受料理的過程，今天想跟大家聊聊，除了料理本身，料理創作背後的成本。
哈囉～很久沒跟各位自我介紹一下了～
大家好～我是爺恩
我是一名圖文插畫家，有追蹤我一段時間的應該有發現爺恩這個品牌經營了好像.....快五年了(汗)時間過得真快！隨著時間過去，創作這件事好像變得更忙碌了，也很開心跟很多厲害的創作者以及廠商互相合作幫忙，還有最重要的是大家的支持與陪伴🥹。
嘿，大家新年快樂~ 新年大家都在做什麼呢？
跨年夜的我趕工製作某個外包設計案，在工作告一段落時趕上倒數。
然後和兩個小孩過了一個忙亂的元旦。在深夜時刻，看到朋友傳來的解籤網站，興致勃勃熬夜體驗了一下，覺得非常好玩，或許有人玩過了，但還是想寫上來分享紀錄一下~
※ 什麼是Web API
API 就是後端開出來讓前端來用的介面，讓前端與後端可以溝通。
API流程：
終端使用者用任何一種裝置進入瀏覽器。
瀏覽器透過 API 向後端發出請求，請求查詢或修改資料。
後端透過 API 收到前端的請求後，取得資料並回應給前端。
前端渲染畫面，終端使用者
在本章節中，我們探討了 PHP 中如何引用和管理套件。學習了如何使用 Composer 來安裝第三方套件，以及如何引用自定義模組。此外，我們還介紹了如何創建和使用自定義套件，並列舉了一些在 PHP 社群中常見且廣泛使用的套件和庫。通過掌握這些知識，開發者可以更有效地管理和利用各種資源。
本章節的目的是介紹Java中的套件使用，包括如何引用第三方套件和自定義模組，如何創建和使用自定義套件，以及介紹一些常見的Java標準庫套件。這些內容將幫助讀者更好地理解和使用Java的套件系統。
※ 用 faker 套件產生假資料步驟
安裝 faker套件：快速生成假資料（人名、地名、時間）。
npm install faker@5.5.3
引入 faker 套件：
const faker = require('faker')
建立data資料夾來生成假資料。創建一個名為 gene
本文檔介紹了在Swift中使用套件的詳細方法，包括如何引用第三方套件和自定義模組，如何創建自定義套件，以及一些常見的Swift套件。這些套件可以幫助開發者快速添加功能到項目中，提高開發效率和程式碼品質。
套件（Package）是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中，套件通常包含了相關的程式碼、資源文件和元數據，並提供了統一的名稱空間和版本管理。
本篇文章將介紹如何使用Lambda建立Pre-Sign URL 的簡單範例，讓讀者瞭解如何自行發揮。
Swiper.js 是一個功能齊全的輪播套件，除了輪播外，也可以客製化導航按鈕和頁碼等細項。目前支持 JS、React、Vue。但是 Swiper.js Vue 版本主要由 Composition API 風格構成，此篇文章將介紹 Options API 的撰寫方式，以及如何做樣式客製化。
Simple Storage Service (S3) 是 AWS 最常應用到的服務，只要是需要將檔案上傳到雲端的狀況都可以使用S3，本篇文章將介紹如何設定與使用AWS S3。
先前幾篇筆記介紹了網路請求，瀏覽器儲存資料的方式，那麼實務上，前端最常需要發送網路請求的時候，就是透過呼叫 API，去向後端工程師發送/請求資料，所以今天來記錄什麼是 API吧！