功能开发：添加API测试按钮和相关对话框
在系统接口页面添加了六个API测试按钮，对应不同的接口测试功能。每个按钮触发相应的测试函数，弹出相关对话框，展示请求结果。实现了手机号码、IP地址、天气预报等信息的查询功能。 - 新增了IP查询归属地、天气预报、新闻头条、气象预警、生辰助手、邮编查询的API测试按钮和对话框。 - 对话框中包含输入字段和请求结果展示区域，用户可以输入参数并发起请求。 - 实现了API测试功能，便于用户在页面上直接测试各个接口的响应数据。master
wxy
parent
6241f0f6b1
commit
79f6e44185
|
|
@ -10,12 +10,12 @@
|
|||
|
||||
|
||||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testPhone()" v-if="this.name =='手机号查询归属地'">测试API</el-button>
|
||||
<!-- <el-button type="primary" style="float: right; padding: 10px 10px" @click="testIP()" v-if="connector.connectorName=='IP查询归属地'">测试API</el-button>-->
|
||||
<!-- <el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="connector.connectorName=='新闻头条'">测试API</el-button>-->
|
||||
<!-- <el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="connector.connectorName=='气象预警'">测试API</el-button>-->
|
||||
<!-- <el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="connector.connectorName=='生辰助手'">测试API</el-button>-->
|
||||
<!-- <el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="connector.connectorName=='邮编查询'">测试API</el-button>-->
|
||||
<!-- <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="testIP()" v-if="this.name=='IP查询归属地'">测试API</el-button>
|
||||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testNews()" v-if="this.name=='新闻头条'">测试API</el-button>
|
||||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeather()" v-if="this.name=='气象预警'">测试API</el-button>
|
||||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testBirthdate()" v-if="this.name=='生辰助手'">测试API</el-button>
|
||||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testMailbox()" v-if="this.name=='邮编查询'">测试API</el-button>
|
||||
<el-button type="primary" style="float: right; padding: 10px 10px" @click="testWeatherForecast()" v-if="this.name=='天气预报'">测试API</el-button>
|
||||
|
||||
|
||||
<!-- 手机号查询归属地-->
|
||||
|
|
@ -37,6 +37,131 @@
|
|||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--IP查询归属地-->
|
||||
<el-dialog title="IP查询归属地" :visible.sync="dialogFormVisible1">
|
||||
<el-form :model="formIp">
|
||||
<el-form-item label="IP" >
|
||||
<el-input v-model="formIp.ip" autocomplete="off" placeholder="请输入ip"></el-input>
|
||||
</el-form-item>
|
||||
<span style="font-weight: bold;font-size: 20px" v-if="formIp.reason==true">
|
||||
国家：{{this.formIp.country}}<br>
|
||||
省份：{{this.formIp.province}}<br>
|
||||
城市：{{this.formIp.city}}<br>
|
||||
运营商：{{this.formIp.isp}}<br>
|
||||
</span>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="getIpPlace()">发起请求</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--天气预报-->
|
||||
<el-dialog title="天气预报" :visible.sync="dialogFormVisible6">
|
||||
<el-form :model="formWeatherForecast">
|
||||
<el-form-item label="城市名" >
|
||||
<el-input v-model="formWeatherForecast.cityName" autocomplete="off" placeholder="请输入城市名"></el-input>
|
||||
</el-form-item>
|
||||
<span style="font-weight: bold;font-size: 20px" v-if="formWeatherForecast.reason==true">
|
||||
城市：{{this.formWeatherForecast.city}}<br>
|
||||
天气：{{this.formWeatherForecast.info}}<br>
|
||||
温度：{{this.formWeatherForecast.temperature}}<br>
|
||||
湿度：{{this.formWeatherForecast.humidity}}<br>
|
||||
风向：{{this.formWeatherForecast.direct}}<br>
|
||||
风力：{{this.formWeatherForecast.power}}<br>
|
||||
空气质量：{{this.formWeatherForecast.aqi}}<br>
|
||||
</span>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="getWeatherForecast(cityName)">发起请求</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!-- 新闻头条-->
|
||||
<el-dialog title="新闻头条" :visible.sync="dialogTableVisible">
|
||||
<el-table :data="gridData">
|
||||
<el-table-column property="title" label="新闻标题" width="150"></el-table-column>
|
||||
<el-table-column property="date" label="新闻时间" width="200"></el-table-column>
|
||||
<el-table-column property="category" label="新闻分类"></el-table-column>
|
||||
<el-table-column property="authorName" label="新闻来源"></el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
|
||||
|
||||
<!-- 气象预警-->
|
||||
<el-dialog title="气象预警" :visible.sync="dialogFormVisible4">
|
||||
<el-aside width="100%">
|
||||
<el-tree :data="data" :props="defaultProps">
|
||||
<template slot-scope="{data,node}">
|
||||
<span>{{data.provinceName}}{{data.cityName}}--{{data.cityCode}}</span>
|
||||
</template>
|
||||
</el-tree>
|
||||
</el-aside>
|
||||
</el-dialog>
|
||||
|
||||
<!--生辰助手-->
|
||||
<el-dialog title="生辰助手" :visible.sync="dialogFormVisible2">
|
||||
<el-form :model="formBirthday">
|
||||
<el-form-item label="年" >
|
||||
<el-input v-model="formBirthday.year" autocomplete="off" placeholder="请输入年份"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="月" >
|
||||
<el-input v-model="formBirthday.month" autocomplete="off" placeholder="请输入月份"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="日" >
|
||||
<el-input v-model="formBirthday.day" autocomplete="off" placeholder="请输入几号"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="时" >
|
||||
<el-input v-model="formBirthday.hour" autocomplete="off" placeholder="请输入几点"></el-input>
|
||||
</el-form-item>
|
||||
<span style="font-weight: bold;font-size: 20px" v-if="formBirthday.reason==true">
|
||||
years： {{this.formBirthday.years}}<br>
|
||||
months： {{this.formBirthday.months}}<br>
|
||||
days： {{this.formBirthday.days}}<br>
|
||||
animal： {{this.formBirthday.animal}}<br>
|
||||
imonthcn： {{this.formBirthday.imonthcn}}<br>
|
||||
idaycn： {{this.formBirthday.idaycn}}<br>
|
||||
cyear： {{this.formBirthday.cyear}}<br>
|
||||
cmonth： {{this.formBirthday.cmonth}}<br>
|
||||
cday： {{this.formBirthday.cday}}<br>
|
||||
gzyear： {{this.formBirthday.gzyear}}<br>
|
||||
gzmonth： {{this.formBirthday.gzmonth}}<br>
|
||||
gzday： {{this.formBirthday.gzday}}<br>
|
||||
isleap： {{this.formBirthday.isleap}}<br>
|
||||
ncweek： {{this.formBirthday.ncweek}}<br>
|
||||
isterm： {{this.formBirthday.isterm}}<br>
|
||||
term： {{this.formBirthday.term}}<br>
|
||||
astro： {{this.formBirthday.astro}}<br>
|
||||
eightall： {{this.formBirthday.eightall}}<br>
|
||||
fiveall： {{this.formBirthday.fiveall}}
|
||||
</span>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="getBirthday()">发起请求</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<!--邮编查询-->
|
||||
<el-dialog title="邮编查询" :visible.sync="dialogFormVisible3">
|
||||
<el-form :model="formPostCode">
|
||||
<el-form-item label="邮编" >
|
||||
<el-input v-model="formPostCode.code" autocomplete="off" placeholder="请输入邮编"></el-input>
|
||||
</el-form-item>
|
||||
<el-table :data="gridData2" v-if="formPostCode.reason==true">
|
||||
<el-table-column property="postNumber" label="邮编" width="150"></el-table-column>
|
||||
<el-table-column property="province" label="省" width="200"></el-table-column>
|
||||
<el-table-column property="city" label="市"></el-table-column>
|
||||
<el-table-column property="district" label="区"></el-table-column>
|
||||
<el-table-column property="address" label="县"></el-table-column>
|
||||
</el-table>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="getPostcode()">发起请求</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</el-aside>
|
||||
<div>
|
||||
|
|
@ -84,11 +209,65 @@
|
|||
<script>
|
||||
|
||||
import { findApiById } from "@/api/port/port";
|
||||
import {phonePlace} from "@/api/port/port";
|
||||
import {phonePlace ,getIpPlace,getWeatherForecast,getHeadlines,getWeather,getBirthday,getPostcode} from "@/api/port/port";
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 邮编查询
|
||||
formPostCode:{
|
||||
code:"",
|
||||
// postNumber:"",
|
||||
// province:"",
|
||||
// city:"",
|
||||
// district:"",
|
||||
// address:"",
|
||||
reason:"",
|
||||
},
|
||||
formBirthday:{
|
||||
year:"",
|
||||
month:"",
|
||||
day:"",
|
||||
hour:"",
|
||||
years:"",
|
||||
months:"",
|
||||
days:"",
|
||||
animal:"",
|
||||
imonthcn:"",
|
||||
idaycn:"",
|
||||
cyear:"",
|
||||
cmonth:"",
|
||||
cday:"",
|
||||
gzyear:"",
|
||||
gzmonth:"",
|
||||
gzday:"",
|
||||
isleap:"",
|
||||
ncweek:"",
|
||||
isterm:"",
|
||||
term:"",
|
||||
astro:"",
|
||||
eightall:"",
|
||||
fiveall:"",
|
||||
reason:"",
|
||||
},
|
||||
data:[],
|
||||
defaultProps: {
|
||||
children:"citys",
|
||||
label:'provinceName',
|
||||
},
|
||||
gridData:[],
|
||||
gridData2:[],
|
||||
formWeatherForecast:{
|
||||
cityName:"",
|
||||
city:"",
|
||||
info:"",
|
||||
temperature:"",
|
||||
humidity:"",
|
||||
direct:"",
|
||||
power:"",
|
||||
aqi:"",
|
||||
reason:"",
|
||||
},
|
||||
// 手机号查询归属地formInline
|
||||
formInline:{
|
||||
tel:"",
|
||||
|
|
@ -99,6 +278,16 @@ export default {
|
|||
company:"",
|
||||
reason:"",
|
||||
},
|
||||
formLabelWidth: '80px',
|
||||
formIp:{
|
||||
ip:"",
|
||||
country:"",
|
||||
province:"",
|
||||
city:"",
|
||||
isp:"",
|
||||
reason:"",
|
||||
},
|
||||
|
||||
activeTab: 'api-docs',
|
||||
name: '',
|
||||
describe: '',
|
||||
|
|
@ -125,8 +314,87 @@ export default {
|
|||
};
|
||||
|
||||
|
||||
|
||||
},
|
||||
methods: {
|
||||
// 邮编查询
|
||||
getPostcode(){
|
||||
getPostcode(this.formPostCode.code).then((res)=>{
|
||||
console.log(res.data);
|
||||
this.gridData2=res.data;
|
||||
this.formPostCode.reason=true;
|
||||
})
|
||||
},
|
||||
getBirthday(){
|
||||
getBirthday(this.formBirthday).then((res)=>{
|
||||
console.log(res.data);
|
||||
this.formBirthday.reason=true;
|
||||
this.formBirthday.years=res.data.years;
|
||||
this.formBirthday.months=res.data.months;
|
||||
this.formBirthday.days=res.data.days;
|
||||
this.formBirthday.animal=res.data.animal;
|
||||
this.formBirthday.imonthcn=res.data.imonthcn;
|
||||
this.formBirthday.idaycn=res.data.idaycn;
|
||||
this.formBirthday.cyear=res.data.cyear;
|
||||
this.formBirthday.cmonth=res.data.cmonth;
|
||||
this.formBirthday.cday=res.data.cday;
|
||||
this.formBirthday.gzyear=res.data.gzyear;
|
||||
this.formBirthday.gzmonth=res.data.gzmonth;
|
||||
this.formBirthday.gzday=res.data.gzday;
|
||||
this.formBirthday.isleap=res.data.isleap;
|
||||
this.formBirthday.ncweek=res.data.ncweek;
|
||||
this.formBirthday.isterm=res.data.isterm;
|
||||
this.formBirthday.term=res.data.term;
|
||||
this.formBirthday.astro=res.data.astro;
|
||||
this.formBirthday.eightall=res.data.eightall;
|
||||
this.formBirthday.fiveall=res.data.fiveall;
|
||||
|
||||
})
|
||||
},
|
||||
// 气象预警
|
||||
testWeather(){
|
||||
|
||||
getWeather().then((res)=>{
|
||||
this.data=res.data;
|
||||
|
||||
this.dialogFormVisible4=true;
|
||||
})
|
||||
},
|
||||
|
||||
testNews(){
|
||||
getHeadlines().then((res)=>{
|
||||
this.gridData=res.data;
|
||||
this.dialogTableVisible=true;
|
||||
})
|
||||
},
|
||||
|
||||
getWeatherForecast(){
|
||||
getWeatherForecast(this.formWeatherForecast.cityName).then((res)=>{
|
||||
console.log(res.data);
|
||||
this.formWeatherForecast.city=res.data.city;
|
||||
this.formWeatherForecast.info=res.data.info;
|
||||
this.formWeatherForecast.temperature=res.data.temperature;
|
||||
this.formWeatherForecast.humidity=res.data.humidity;
|
||||
this.formWeatherForecast.direct=res.data.direct;
|
||||
this.formWeatherForecast.power=res.data.power;
|
||||
this.formWeatherForecast.aqi=res.data.aqi;
|
||||
this.formWeatherForecast.reason=true;
|
||||
})
|
||||
},
|
||||
|
||||
getIpPlace(){
|
||||
getIpPlace(this.formIp.ip).then((res)=>{
|
||||
console.log(res.data);
|
||||
if (200==res.code){
|
||||
this.formIp.country=res.data.country;
|
||||
this.formIp.province=res.data.province;
|
||||
this.formIp.city=res.data.city;
|
||||
this.formIp.isp=res.data.isp;
|
||||
this.formIp.reason=true;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
phonePlace(){
|
||||
phonePlace(this.formInline.tel).then((res)=>{
|
||||
console.log(res.data);
|
||||
|
|
@ -140,6 +408,15 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
testWeatherForecast(){
|
||||
this.dialogFormVisible6=true;
|
||||
},
|
||||
testMailbox(){
|
||||
this.dialogFormVisible3=true;
|
||||
},
|
||||
testBirthdate(){
|
||||
this.dialogFormVisible2=true;
|
||||
},
|
||||
testIP(){
|
||||
this.dialogFormVisible1=true;
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue