功能开发：添加API测试按钮和相关对话框

在系统接口页面添加了六个API测试按钮，对应不同的接口测试功能。每个按钮触发相应的测试函数，弹出相关对话框，展示请求结果。实现了手机号码、IP地址、天气预报等信息的查询功能。

- 新增了IP查询归属地、天气预报、新闻头条、气象预警、生辰助手、邮编查询的API测试按钮和对话框。
- 对话框中包含输入字段和请求结果展示区域，用户可以输入参数并发起请求。
- 实现了API测试功能，便于用户在页面上直接测试各个接口的响应数据。

src/views/port/sys/index.vue

@@ -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="testIP()" v-if="this.name=='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="testNews()" v-if="this.name=='新闻头条'">测试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="testWeather()" v-if="this.name=='气象预警'">测试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="testBirthdate()" v-if="this.name=='生辰助手'">测试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="testMailbox()" v-if="this.name=='邮编查询'">测试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="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;
     },