vue学习，设计一个测试前后端分离开发时的测试工具

本文链接：https://blog.youkuaiyun.com/u013969018/article/details/96102024

本文介绍了一个用于前端开发测试的工具，该工具基于Vue和jQuery（ajax），可以帮助开发者在浏览器环境中模拟不同的HTTP请求方法（如GET、POST等），并展示请求后的响应结果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

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>