在Vue中使用Postman与json-server进行接口测试

在我们平时开发中,特别是需要与接口打交道时,无论是写接口还是用接口,拿到接口后肯定都得提前测试一下,这样的话就非常需要有一个比较给力的Http请求模拟工具,现在流行的这种工具也挺多的,像火狐浏览器插件-RESTClient,Chrome浏览器插件-Postman等等。我使用的是Postman。
JSON-Server 是一个 Node 模块,运行 Express 服务器,你可以指定一个 json 文件作为 api 的数据源。
使用postman进行接口的测试比较简单,同时还可以看某站的视频,20分钟就可以进行使用了,链接在这里:
json-server使用教程
使用json-server与postman进行接口测试

写这篇文章主要记录一下自己在项目的开发过程中遇到的问题。
我先用json-server在本地生成了一个json文件,内容如下:
在Vue中使用Postman与json-server进行接口测试_第1张图片

然后我想通过post方式向该接口发送数据:
在Vue中使用Postman与json-server进行接口测试_第2张图片
填写信息之后,将所填写的信息发送到json-server模拟的服务器端。
代码如下:

请填写以下信息

methods:{
  	addTeach(e){
  		console.log("123");
  		if(!this.tinfo.name || !this.tinfo.cnum || !this.tinfo.phone) {
  			console.log("456");
  		} else {
  			//console.log("newtinfo");
  			var newtinfo = {};
  			 newtinfo = {
  				name:this.tinfo.name,
  				cnum:this.tinfo.cnum,
  				phone:this.tinfo.phone
  			};
  			console.log(newtinfo);
  			this.$http.post('http://localhost:3000/users',newtinfo).then(
          function(response) {
            console.log(response);
            this.$router.push({path:"/",query:{alert:"添加成功"}});
          })
  		}
  		e.preventDefault();
  	}
  }

代码没有问题,不管怎么测试,都会报如下错误(500说明是服务器端出错):

TypeError: Cannot read property 'id' of undefined
    at Function.createId (D:\json-server\node_modules\json-server\lib\server\mixins.js:57:39)
    at Function.insert (D:\json-server\node_modules\lodash-id\src\index.js:47:49)
    at D:\json-server\node_modules\lodash\lodash.js:4368:28
    at arrayReduce (D:\json-server\node_modules\lodash\lodash.js:683:21)
    at baseWrapperValue (D:\json-server\node_modules\lodash\lodash.js:4367:14)
    at LodashWrapper.wrapperValue (D:\json-server\node_modules\lodash\lodash.js:9050:14)
    at create (D:\json-server\node_modules\json-server\lib\server\router\plural.js:235:48)
    at Layer.handle [as handle_request] (D:\json-server\node_modules\express\lib\router\layer.js:95:5)
    at next (D:\json-server\node_modules\express\lib\router\route.js:137:13)
    at next (D:\json-server\node_modules\express\lib\router\route.js:131:14)
POST /users 500 16.042 ms - 874

主要是这一句Cannot read property ‘id’ of undefined。网上有很多方法,但都没有解决我的问题,后来经过排查,发现在最开始新建这个json文件的时候,每条数据都有个“id”属性,但在做项目的时候,并没有把这个"id"属性添加给数据。然后我把json文件修改了一下,给每条数据都加了个"id",就不会报错了。
在Vue中使用Postman与json-server进行接口测试_第3张图片

而且在项目中,给服务器端传数据的时候,不需要自己填写这个"id"属性的值,这个id是json自动分配的。

你可能感兴趣的:(Vue)