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樣板

raw-image

新增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

raw-image

step7: 運行

composer artisan optimize

之後到你設定好的路由,就可以看到成果了

raw-image




avatar-img
4會員
10內容數
分享感情與生活的故事,期望我們都能在愛與被愛的路上感到幸福,並且在這個只有活一次的人生裡好好的活成自己喜歡的樣子
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
你可能也想看
Google News 追蹤
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
Simple Storage Service (S3) 是 AWS 最常應用到的服務,只要是需要將檔案上傳到雲端的狀況都可以使用S3,本篇文章將介紹如何設定與使用AWS S3。
Thumbnail
在使用laravel中的Queue job的時候 如果希望job中斷還可以重新啟動這個時候就會需要用到Supervisor了 本篇文章為您帶來如何使用Supervisor執行Laravel的queue:work的教學
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性,並輕鬆地進行結構變更
Thumbnail
待業中後,發現時間變很多就開始東看看西看看,思考著要如何更深入理解Laravel框架的運用,而在Laravel框架中哪些部分是框架替我們做了哪些處理,推薦一個影片給大家一起學習理解。
紀錄一下Laravel好用的validator。 E 本筆記參考: 1. https://stackoverflow.com/questions/31539727/laravel-password-validation-rule
Thumbnail
紀錄一下在Laravel中,如何使用try catch。
Thumbnail
假如開發了一個部落格,以下是ERD設計: 接著從程式碼來看如何join: $this->article ->join('comments', 'article.article_id', '=', 'comments.article_id') ->select('article.article_i
Thumbnail
在開發過程中,難免會需要自己寫一些common function,例如Laravel 如何寫 Log這篇提到的,write log為了能夠顯示file name跟line,可以把它封裝成一個common function,以後要改log format也只需要從這邊改...
Thumbnail
Laravel的日誌系統底層是Monolog,設定在config\logging.php裡面,預設路徑是在storage\logs\laravel.log,也可以更改成喜歡的路徑。 ...
Thumbnail
這個秋,Chill 嗨嗨!穿搭美美去賞楓,裝備款款去露營⋯⋯你的秋天怎麼過?秋日 To Do List 等你分享! 秋季全站徵文,我們準備了五個創作主題,參賽還有機會獲得「火烤兩用鍋」,一起來看看如何參加吧~
Thumbnail
11/20日NVDA即將公布最新一期的財報, 今天Sell Side的分析師, 開始調高目標價, 市場的股價也開始反應, 未來一週NVDA將重新回到美股市場的焦點, 今天我們要分析NVDA Sell Side怎麼看待這次NVDA的財報預測, 以及實際上Buy Side的倉位及操作, 從
Thumbnail
Hi 大家好,我是Ethan😊 相近大家都知道保濕是皮膚保養中最基本,也是最重要的一步。無論是在畫室裡長時間對著畫布,還是在旅途中面對各種氣候變化,保持皮膚的水分平衡對我來說至關重要。保濕化妝水不僅能迅速為皮膚補水,還能提升後續保養品的吸收效率。 曾經,我的保養程序簡單到只包括清潔和隨意上乳液
Thumbnail
Simple Storage Service (S3) 是 AWS 最常應用到的服務,只要是需要將檔案上傳到雲端的狀況都可以使用S3,本篇文章將介紹如何設定與使用AWS S3。
Thumbnail
在使用laravel中的Queue job的時候 如果希望job中斷還可以重新啟動這個時候就會需要用到Supervisor了 本篇文章為您帶來如何使用Supervisor執行Laravel的queue:work的教學
Thumbnail
有的時候,會希望在物件導向中對原生的Class新增功能的時候,大多我們都會寫一個新的class並繼承。 但是其實Laravel提供了一個不同的方式,讓我們可以在常用的Class上,直接新增想要的function,那就是macro。
Migration在 Laravel 中是一種用來管理資料庫結構變更的機制。它的主要目的是使開發者能夠在應用程序的不同環境中保持資料庫結構的一致性,並輕鬆地進行結構變更
Thumbnail
待業中後,發現時間變很多就開始東看看西看看,思考著要如何更深入理解Laravel框架的運用,而在Laravel框架中哪些部分是框架替我們做了哪些處理,推薦一個影片給大家一起學習理解。
紀錄一下Laravel好用的validator。 E 本筆記參考: 1. https://stackoverflow.com/questions/31539727/laravel-password-validation-rule
Thumbnail
紀錄一下在Laravel中,如何使用try catch。
Thumbnail
假如開發了一個部落格,以下是ERD設計: 接著從程式碼來看如何join: $this->article ->join('comments', 'article.article_id', '=', 'comments.article_id') ->select('article.article_i
Thumbnail
在開發過程中,難免會需要自己寫一些common function,例如Laravel 如何寫 Log這篇提到的,write log為了能夠顯示file name跟line,可以把它封裝成一個common function,以後要改log format也只需要從這邊改...
Thumbnail
Laravel的日誌系統底層是Monolog,設定在config\logging.php裡面,預設路徑是在storage\logs\laravel.log,也可以更改成喜歡的路徑。 ...