parent
b2acb0e809
commit
39eeacaf78
|
@ -14,6 +14,16 @@ export function findApiList(data) {
|
|||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
//TODO 根据ID查
|
||||
export function findApiById(id) {
|
||||
return request({
|
||||
url: '/mart/connector/findApiById/' + id,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
export function addConnector(data) {
|
||||
return request({
|
||||
url: '/mart/connector/addConnector',
|
||||
|
|
|
@ -48,16 +48,16 @@
|
|||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeatherForecast()" v-if="connector.connectorName=='天气预报'">测试API</el-button>
|
||||
|
||||
|
||||
<!-- <el-button type="primary" style="float: right; padding: 10px 10px" @click="navigateToDocumentation()">接口文档</el-button>-->
|
||||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="navigateToDocumentation(connector.connectorId)">接口文档</el-button>
|
||||
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
style="float: right; padding: 10px 10px"
|
||||
@click="navigateToDocumentation(connector)"
|
||||
>
|
||||
接口文档
|
||||
</el-button>
|
||||
<!-- <el-button-->
|
||||
<!-- type="primary"-->
|
||||
<!-- style="float: right; padding: 10px 10px"-->
|
||||
<!-- @click="navigateToDocumentation(connector)"-->
|
||||
<!-- >-->
|
||||
<!-- 接口文档-->
|
||||
<!-- </el-button>-->
|
||||
|
||||
</el-card>
|
||||
</el-col>
|
||||
|
@ -391,16 +391,10 @@ export default {
|
|||
//方法集合",
|
||||
methods: {
|
||||
|
||||
navigateToDocumentation(connector) {
|
||||
navigateToDocumentation(id) {
|
||||
this.$router.push({
|
||||
path: '/port/sys',
|
||||
query: {
|
||||
name: connector.connectorName,
|
||||
picture: connector.connectorPicture,
|
||||
describe: connector.connectorDescribe,
|
||||
price: connector.connectorPrice,
|
||||
requestMethod: this.buyForm.connectorRequest
|
||||
}
|
||||
path: `/port/sys`,
|
||||
query: { id }
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
@ -19,47 +19,16 @@
|
|||
<div v-if="activeTab === 'api-docs'">
|
||||
<el-main style="padding: 20px;">
|
||||
<div class="api-docs" style="margin-top: 20px;">
|
||||
<h3>API 文档</h3>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>接口地址</span>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ apiEndpoint }}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>返回格式</span>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ responseFormat }}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>请求方式</span>
|
||||
<p>接口地址: {{apiEndpoint}}</p>
|
||||
<p>请求方式: {{connectorRequest}}</p>
|
||||
<p>请求示例: {{apiEndpoint}}?=你申请的KEY&{{apiKey}}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ requestMethod }}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>请求示例</span>
|
||||
</div>
|
||||
<div>
|
||||
<pre>{{ requestExample }}</pre>
|
||||
</div>
|
||||
</el-card>
|
||||
<el-card>
|
||||
<div slot="header" class="clearfix">
|
||||
<span>简介</span>
|
||||
</div>
|
||||
<div>
|
||||
<p>{{ apiDescription }}</p>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</el-main>
|
||||
</div>
|
||||
|
@ -76,26 +45,56 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { findApiById } from "@/api/port/port";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
activeTab: 'api-docs' ,
|
||||
name: this.$route.query.name || '',
|
||||
describe: this.$route.query.describe || '',
|
||||
price: this.$route.query.price || '',
|
||||
picture: this.$route.query.picture || '',
|
||||
apiEndpoint: this.$route.query.apiEndpoint || 'N/A',
|
||||
responseFormat: this.$route.query.responseFormat || 'N/A',
|
||||
requestMethod: this.$route.query.requestMethod || 'N/A',
|
||||
requestExample: this.$route.query.requestExample || 'N/A',
|
||||
apiDescription: this.$route.query.apiDescription || 'N/A'
|
||||
activeTab: 'api-docs',
|
||||
name: '',
|
||||
describe: '',
|
||||
price: '',
|
||||
picture: '',
|
||||
apiKey:'N/A',
|
||||
apiEndpoint: 'N/A',
|
||||
connectorRequest: 'N/A',
|
||||
responseFormat: 'N/A',
|
||||
requestMethod: 'N/A',
|
||||
requestExample: 'N/A',
|
||||
apiDescription: 'N/A'
|
||||
};
|
||||
},
|
||||
methods:{
|
||||
handleTabClick(tab){
|
||||
methods: {
|
||||
handleTabClick(tab) {
|
||||
this.activeTab = tab.name;
|
||||
},
|
||||
async loadData(id) {
|
||||
try {
|
||||
const response = await findApiById(id);
|
||||
const data = response.data;
|
||||
this.name = data.connectorName;
|
||||
this.describe = data.connectorDescribe;
|
||||
this.price = data.connectorPrice;
|
||||
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;
|
||||
} catch (error) {
|
||||
console.error("Failed to fetch API data:", error);
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
const id = this.$route.query.id;
|
||||
if (id) {
|
||||
this.loadData(id);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
Loading…
Reference in New Issue