```重构接口文档组件并更新显示内容

- 调整接口文档组件的展示格式,包括接口描述、价格、请求示例以及返回示例。
-增加对接口返回格式(json)的标注,提升请求示例的清晰度。
- 移除未使用的请求方法和apiDescription数据属性。
- 优化返回示例卡片的样式,增强可读性。
- 代码沙箱id: 39eeacaf78
```
master
wxy 2024-09-06 15:54:27 +08:00
parent 57558a73f5
commit 39b2524c7c
1 changed files with 30 additions and 10 deletions

View File

@ -5,8 +5,8 @@
<div>
<el-image :src="picture" style="width: 80%; max-width: 300px; height: auto;" fit="contain"></el-image>
<h2>{{ name }}</h2>
<p><strong>描述:</strong> {{ describe }}</p>
<p><strong>价格:</strong> {{ price }}/</p>
<p>{{remark}}</p>
<p><strong></strong> {{ price }}/</p>
</div>
</el-aside>
<div>
@ -22,11 +22,18 @@
<el-card>
<div slot="header" class="clearfix">
<p>接口地址: {{apiEndpoint}}</p>
<p>返回格式: json</p>
<p>请求方式: {{connectorRequest}}</p>
<p>请求示例: {{apiEndpoint}}?=你申请的KEY&{{apiKey}}</p>
</div>
<div>
<p>{{ requestMethod }}</p>
<p>简介: {{describe}}</p>
<h2>json返回示例:</h2>
<el-card class="return-example-card">
<pre>{{ returnExample }}</pre>
</el-card>
<h2>xml返回示例:</h2>
<el-card class="return-example-card">
<pre>{{ returnXml }}</pre>
</el-card>
</div>
</el-card>
</div>
@ -56,6 +63,9 @@ export default {
describe: '',
price: '',
picture: '',
returnExample:'',
remark: '',
returnXml: '',
apiKey:'N/A',
apiEndpoint: 'N/A',
connectorRequest: 'N/A',
@ -79,11 +89,10 @@ export default {
this.picture = data.connectorPicture;
this.apiEndpoint = data.connectorApiurl;
this.apiKey = data.connectorApikey;
this.connectorRequest = data.connectorRequest
this.responseFormat = data.responseFormat;
this.requestMethod = data.requestMethod;
this.requestExample = data.requestExample;
this.apiDescription = data.apiDescription;
this.remark = data.remark
this.connectorRequest = data.connectorRequest;
this.returnExample = data.returnExample;
this.returnXml = data.returnXml;
} catch (error) {
console.error("Failed to fetch API data:", error);
}
@ -102,4 +111,15 @@ export default {
.api-docs {
margin-top: 20px;
}
.return-example-card {
margin-top: 20px;
padding: 20px;
background-color: #f9f9f9;
border: 1px solid #dcdfe6;
}
.return-example-card pre {
margin: 0;
white-space: pre-wrap;
word-wrap: break-word;
}
</style>