用于测试前台请求接口是否正常使用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .box{width: 500px;border:1px solid #ddd;margin:20% auto;font-size:18px;padding:40px} .box .col{margin-bottom: 30px;display:flex} .box .col label{width:100px;display:inline-block;text-align-last:justify;text-align:justify;margin-right:20px} .methodspan{padding:1% 20px;text-align:center;font-size:16px;cursor:pointer} .methodspan.active{background:#00B0F0;color:#fff;} .tablex{font-size:18px;font-weight:400} .tablex th{font-size:18px;font-weight:400} .submit{margin-top:50px;width:200px;background:#00B0F0;height:40px;color:#fff;border-radius:20px;font-size:20px; text-align:center;line-height:40px;cursor: pointer;margin: 0 auto;margin-top: 80px;margin-left: 110px;} .input{border:none;border-bottom:1px solid #001E50;width:300px} .input2{border:none;border-bottom:1px solid #001E50;padding:10px 0;width:200px} </style> </head> <body> <div id ="app"> <div class="box"> <div class="col"> <label for="">域名</label> <input type="text" v-model="domain" class="input"> </div> <div class="col"> <label for="">请求地址</label> <input type="text" v-model="url" class="input"> </div> <div class="col"> <label for="">请求方式</label> <div class="method"> <span class="methodspan" :class="{active:methodD.cur==index}" v-for="(item,index) in methodD.data" @click="methodD.cur=index">{{item}}</span> </div> </div> <div class="col"> <label for="">传参字段</label> </div> <table class="tablex"> <thead> <tr> <th>字段</th> <th>参数</th> </tr> </thead> <tbody> <tr v-for="(item,index) in list" :key="index"> <td><input type="text" class="input2" v-model="item.paramsName"></td> <td><input type="text" class="input2" v-model="item.value"></td> <td v-if="index>0"><input type="button" value="删除" @click="delClick(index)"></td> <td v-if="index==0"><input type="button" value="添加" @click="addClick" ></td> </tr> </tbody> </table> <div class="submit" @click="summit">提交</div> </div> </div> </body> <script src="vue.min.js"></script> <script src="jquery.min.js"></script> <script> var app = new Vue({ el:'#app', data:{ //请求方式 methodD:{ data:['POST','GET'], cur:0, }, //请求域名 domain:'https://mall.faw-vw.com', //请求地址 url:'/Banner/Bottom/index', //传的参数数据 list:[ {paramsName:'',value:''}, ], }, methods:{ //添加参数 addClick(){ var addTr = {paramsName:'',value:''}; this.list.push(addTr); }, // 删除 delClick(index){ this.list.splice(index,1); }, // 提交 summit(){ var _this = this; var params = {} // 把传的参数整理放params中 this.list.forEach((item,index) => { paramsName = item.paramsName; params[paramsName]=item.value; }) console.table('请求方式',this.methodD.cur==0?'post':'get','params',params) // 请求ajax $.ajax({ "type":_this.methodD.cur==0?'post':'get', "url": _this.domain+_this.url, "async": true, "data": params, "success": function (res) { //返回状态处理 console.log(res); } }); } }, }) </script> </html>
本博客主要记录自己的学习点滴~,文章来源于总结,还有在工作中实际碰到的问题以记录。