w3c網(wǎng)站代碼標(biāo)準(zhǔn)規(guī)范,湖北省建設(shè)主管網(wǎng)站,視覺(jué)設(shè)計(jì)公司排名,網(wǎng)站切圖是什么意思令#基礎(chǔ)用法npx swagger-typescript-api generate -p http://localhost:5000/swagger/v1/swagger.json -o src/api -n index.ts如果是用 bun#xff0c;則把 npx 替換為 bunx我測(cè)試之后發(fā)現(xiàn)使用最基礎(chǔ)的這個(gè)命令#xff0c;把全部接口都放在一個(gè)文件反而最好#xff0c;其他…令#基礎(chǔ)用法npx swagger-typescript-api generate -p http://localhost:5000/swagger/v1/swagger.json -o src/api -n index.ts如果是用 bun則把 npx 替換為 bunx我測(cè)試之后發(fā)現(xiàn)使用最基礎(chǔ)的這個(gè)命令把全部接口都放在一個(gè)文件反而最好其他的比如 --modular 模塊化參數(shù)經(jīng)常會(huì)導(dǎo)致生成的代碼報(bào)錯(cuò)。可用命令行參數(shù)一覽#整理自官方文檔和 Fig.io-v, --version輸出當(dāng)前工具版本-p, --path 路徑或 URL指定 Swagger/OpenAPI 文檔的位置本地路徑或網(wǎng)絡(luò) URL-o, --output 目錄路徑輸出生成文件的目錄默認(rèn) ./-n, --name 文件名指定輸出 TypeScript API 文件名默認(rèn) Api.ts-t, --templates 模板路徑使用自定義 EJS 模板渲染生成邏輯-d, --default-as-success將 default 響應(yīng)狀態(tài)碼也視為成功響應(yīng)一些 Swagger 用 default默認(rèn) false-r, --responses生成額外的請(qǐng)求響應(yīng)信息包括出錯(cuò)類(lèi)型的 typings--union-enums將所有枚舉生成成 TypeScript 聯(lián)合類(lèi)型T1 | T2 | TN--add-readonly為生成的屬性添加 readonly 修飾--route-types生成 API 路由相關(guān)的類(lèi)型定義如參數(shù)類(lèi)型等--client / --no-client是否生成 API 調(diào)用類(lèi)默認(rèn) --client執(zhí)行 --no-client 則只生成類(lèi)型/數(shù)據(jù)層--enum-names-as-values使用 x-enumNames 的值作為 enum 值而不僅是 key默認(rèn) false--extract-request-params / --extract-request-body / --extract-response-body / --extract-response-error將請(qǐng)求參數(shù)、請(qǐng)求體、響應(yīng)體或錯(cuò)誤響應(yīng)提取成獨(dú)立的數(shù)據(jù)契約類(lèi)型--modular將 http client、數(shù)據(jù)契約、路由等代碼拆分成多個(gè)文件模塊化--js生成 JavaScript 模塊和對(duì)應(yīng)的 .d.ts 聲明文件--module-name-index 索引在模塊化生成時(shí)決定從路徑的哪個(gè)部分做索引分組--module-name-first-tag根據(jù) API 的第一個(gè) Tag 劃分模塊網(wǎng)絡(luò)設(shè)置--disableStrictSSL禁用嚴(yán)格 SSL 驗(yàn)證--disableProxy禁用代理HTTP 客戶(hù)端選擇--axios生成以 axios 為底層客戶(hù)端的請(qǐng)求代碼其他默認(rèn)使用 fetch 或抽象--unwrap-response-data自動(dòng)拆解響應(yīng)中的 data 字段直接返回內(nèi)部數(shù)據(jù)--disable-throw-on-error遇到 response.ok ! trueHTTP 錯(cuò)誤時(shí)不拋異常默認(rèn) false--single-http-client生成 API 類(lèi)時(shí)支持傳入單一的 HTTP client 實(shí)例默認(rèn) false輸出控制--silent只輸出錯(cuò)誤信息其它靜默類(lèi)型生成配置--default-response Type響應(yīng) schema 為空時(shí)的默認(rèn)類(lèi)型--type-prefix 前綴 / --type-suffix 后綴自定義數(shù)據(jù)模型名稱(chēng)前后綴其他選項(xiàng)--clean-output清理輸出目錄注意會(huì)刪除舊文件--api-class-name 類(lèi)名指定生成的 API 類(lèi)名稱(chēng)--patch修正 Swagger 源定義中的一些小錯(cuò)誤--debug輸出額外調(diào)試信息--another-array-type生成 ArrayType 形式數(shù)組而非 Type[]默認(rèn) false--sort-types對(duì)字段和類(lèi)型排序默認(rèn) false--extract-enums將所有枚舉從 inline interface 中提取為獨(dú)立的 TS enum幫助命令--help, -h列出所有命令幫助信息在 Next.js 里使用例子#以生成 StarBlog 的 API 接口為例在 Next.js 項(xiàng)目中的目錄結(jié)構(gòu)是這樣的其中 photo.ts 和 blog.ts 是生成的lib├─ api│ └─ starblog│ ├─ photo.ts│ ├─ client.ts│ └─ blog.ts└─ source.ts這里需要?jiǎng)?chuàng)建一個(gè) client.ts 方便使用代碼import { Api as BlogApi } from ./blog;import { Api as PhotoApi } from ./photo;// 直接導(dǎo)出類(lèi)型export type { Post, Photo, FeaturedPost, PostListApiResponse, PostApiResponsePaged } from ./blog;export type { PhotoApiResponsePaged } from ./photo;/*** 獲取API基礎(chǔ)URL* param baseUrl 可選的基礎(chǔ)URL* returns 最終的API基礎(chǔ)URL*/function getApiBaseUrl(baseUrl?: string): string {// 在服務(wù)端環(huán)境中優(yōu)先使用服務(wù)端API URLreturn typeof window undefined? (process.env.API_BASE_URL || baseUrl || process.env.NEXT_PUBLIC_API_BASE_URL || http://localhost:5000): (baseUrl || process.env.NEXT_PUBLIC_API_BASE_URL || http://localhost:5000);}/*** 創(chuàng)建博客API客戶(hù)端* param baseUrl 可選的基礎(chǔ)URL* returns 博客API實(shí)例*/export function createBlogApi(baseUrl?: string): BlogApiunknown {return new BlogApi({baseUrl: getApiBaseUrl(baseUrl),customFetch: fetch,});}/*** 創(chuàng)建照片API客戶(hù)端* param baseUrl 可選的基礎(chǔ)URL* returns 照片API實(shí)例*/export function createPhotoApi(baseUrl?: string): PhotoApiunknown {return new PhotoApi({baseUrl: getApiBaseUrl(baseUrl),customFetch: fetch,});}// 為了向后兼容保留原有的函數(shù)名export const createStarBlogApiClient createBlogApi;在頁(yè)面里請(qǐng)求import {createBlogApi, createPhotoApi, Post, Photo} from /lib/api/starblog/client;/*** 獲取推薦博客文章*/async function getFeaturedPosts(): PromisePost[] {try {const blogApi createBlogApi();const response await blogApi.api.blogFeaturedList();if (response.data?.successful response.data?.data) {return response.data.data;}return [];} catch (error) {console.error(獲取推薦文章失敗:, error);return [];}}/*** 獲取攝影作品*/async function getPhotos(): PromisePhoto[] {try {const photoApi createPhotoApi();console.log(正在獲取攝影作品API基礎(chǔ)URL:, process.env.NEXT_PUBLIC_API_BASE_URL);const response await photoApi.api.photoList({page: 1, pageSize: 8});console.log(攝影作品API響應(yīng):, response.data);if (response.data?.successful response.data?.data) {console.log(獲取到的攝影作品數(shù)量:, response.data.data.length);response.data.data.forEach((photo, index) {console.log(攝影作品 ${index 1}:, {id: photo.id,title: photo.title,filePath: photo.filePath,fullUrl: ${process.env.NEXT_PUBLIC_API_BASE_URL}/media/photography/${photo.filePath}});});return response.data.data;}console.warn(攝影作品API響應(yīng)不成功或無(wú)數(shù)據(jù));return [];} catch (error) {console.error(獲取攝影作品失敗:, error);return [];}}export default async function HomePage() {// 在服務(wù)端并行獲取數(shù)據(jù)const [posts, photos] await Promise.all([getPosts(),getPhotos()]);return (divBlogPostsposts{posts}baseUrl{process.env.NEXT_PUBLIC_API_BASE_URL || }/PhotoGalleryphotos{photos}baseUrl{process.env.NEXT_PUBLIC_API_BASE_URL || }//div)