在Linux下,要自定义Swagger UI的展示,你需要遵循以下步骤:
npm install -g swagger-ui-express
app.js
的文件,并在其中创建一个简单的Express应用。例如:const express = require('express');
const app = express();
const port = 3000;
app.use(express.static('public'));
app.listen(port, () => {
console.log(`Swagger UI is running at http://localhost:${port}`);
});
swagger.json
的文件,并添加你的API定义。这是一个简单的示例:{
"swagger": "2.0",
"info": {
"description": "My API",
"version": "1.0.0"
},
"basePath": "/",
"paths": {
"/users": {
"get": {
"summary": "List all users",
"responses": {
"200": {
"description": "An array of users"
}
}
}
}
}
}
app.js
文件中,添加以下代码来集成Swagger UI:const swaggerUi = require('swagger-ui-express');
const swaggerDocument = require('./swagger.json');
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument));
现在,你可以运行你的Express应用:
node app.js
访问http://localhost:3000/api-docs
,你应该能看到Swagger UI界面,其中包含了你的API定义。
swagger.json
文件中的定义,例如添加自定义的描述、标签、参数等。此外,你还可以通过传递一个配置对象给swaggerUi.setup()
函数来自定义Swagger UI的外观和行为。例如,要更改UI的主题,你可以这样做:const customUiConfig = {
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout",
requestInterceptor: (req) => {
return req;
},
responseInterceptor: (res) => {
return res;
},
showExtensions: true,
docExpansion: "none",
defaultModelsExpandDepth: 1,
defaultModelExpandDepth: 1,
defaultModelRendering: 'example',
displayOperationId: false,
displayRequestDuration: false,
operationsSorter: 'alpha',
tagsSorter: 'alpha',
validatorUrl: null,
customCss: `
.topbar {
background-color: #007bff;
}
`,
};
app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument, customUiConfig));
在这个例子中,我们添加了一个自定义的CSS样式来更改顶部栏的背景颜色。你可以根据需要修改customCss
属性来自定义其他样式。
更多关于Swagger UI自定义的信息,请参考官方文档:https://swagger.io/tools/swagger-ui/