```重构接口文档组件并更新显示内容
- 调整接口文档组件的展示格式,包括接口描述、价格、请求示例以及返回示例。
-增加对接口返回格式(json)的标注,提升请求示例的清晰度。
- 移除未使用的请求方法和apiDescription数据属性。
- 优化返回示例卡片的样式,增强可读性。
- 代码沙箱id: 39eeacaf78
```
master
parent
57558a73f5
commit
39b2524c7c
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue