文章目录
- why？
- what?
- how?
- 工具效果：
- 工具代码：
why？
在使用vue-cli进行前后端项目分离开发时，每次测试，我都需要将vue项目build成一个文件放入web项目中，因此我在开发前端时，会用静态数据来做测试。
但后台Control层的测试，在涉及到多种 request方法的使用，如Get、Post、Delete、Put
因此，以前在浏览器url栏里直接输入请求的方式来测试就不再可行
what?
我自己写的这个工具使用了 ： vue + jQuery（ajax）框架
是一个html文件
how?
工具效果：
工具代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试交互数据</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- author: gz -->
</head>
<body>
<div id="app">
<div id="input">
<strong>Ajax.URL:</strong>
<label v-text="pre_url" @click="update_pre_url()" ></label>
<input type="text" value="re" v-model="req_url" />
<button class="btn" @click="go()">Go</button>
<input type="text" v-model="req_method" class="method" />
<div class="ajust_v"></div>
<strong>参数名称用英文逗号隔开：</strong>
<input type="text" v-model="req_param_str" />
<button @click="addParam()" class="btn">+</button>
<button class="btn" @click="reset()">reset</button>
<div class="ajust_v"></div>
<div class="ajust_v" v-for="(word, key) in req_param" :key="key">
<label v-text="key + ' :'"></label>
<input type="text" v-model="req_param[key]" />
</div>
</div>
<hr />
<div id="result" v-show="resp_data.code != undefined ">
<strong v-text="'Code :' + resp_data.code"></strong>
<div class="ajust_v"></div>
<strong>message:</strong>
<div v-text="resp_data.message"></div>
<strong>data:</strong>
<table v-if="resp_data_table.length > 0" border="1" frame="none" >
<tr >
<td v-for="(word, key) in resp_data_table[0]" :key="key" v-text="key"></td>
</tr>
<tr v-for="(item, index) in resp_data_table" :key="index">
<td v-for="(word, key) in item" v-text="word"></td>
</tr>
</table>
<div v-if="resp_data_code.length > 0" v-text="resp_data_code"></div>
</div>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'hehe',
pre_url: 'localhost:8080', // url前缀
req_url: '/test',
req_param_str: '',
req_param: {},
req_method: 'post',
resp_data: {},
resp_data_table: [],
resp_data_code: ''
},
methods: {
update_pre_url(){
this.pre_url=prompt("新的url前缀：", this.pre_url)
},
/* 添加参数 */
addParam() {
if (typeof this.req_param_str == undefined || this.req_param_str == '')
return
var tmp_list = this.req_param_str.split(',')
for (var pa in tmp_list) {
Vue.set(this.req_param, tmp_list[pa], '')
}
this.req_param_str = ""
},
/* 重置参数 */
reset() {
this.req_param = {}
},
/* 发送请求 */
go() {
this.resp_data_code = ""
this.resp_data_table = []
var m_url = this.req_url
var datas = this.req_param
var method = this.req_method
var tmp_resp = ''
$.ajax({
url: m_url,
type: method,
data: datas,
async: false,
success(data) {
tmp_resp = data
}
})
this.resp_data = tmp_resp
if (typeof this.resp_data.data != undefined && typeof this.resp_data.data != '') {
if (this.resp_data.data instanceof Object) {
this.resp_data_table.push(this.resp_data.data)
} else if (this.resp_data.data instanceof Array) {
this.resp_data_table = this.resp_data.data
} else {
this.resp_data_code = this.resp_data.data
}
} else {
console.log("resp_data.data : error : " + resp_data.data)
}
}
}
})
</script>
<style>
* {
margin: 0;
padding: 0;
}
#app {
width: 500px;
margin: 0 auto;
margin-top: 20px;
padding: 10px;
border: 3px solid antiquewhite;
}
.btn {
padding: 2px 10px;
border: none;
background-color: aquamarine;
border-radius: 4px;
}
.ajust_v {
margin: 5px;
}
.method {
width: 50px;
}
td{
padding: 5px;
}
</style>
</body>
</html>
