首先,提交数据后,打开控制台,显示状态为200,点击数据也发送过去了,express服务怎么获取不到数据呢?
原来是axios在内部自动帮我们转换json格式数据, 也就是说,我们的 Content-Type 变成了 application/json;charset=utf-8
然后,因为我们的参数是 JSON 对象,axios 帮我们做了一个 stringify 的处理。 而axios 使用 post 发送数据时,默认是直接把 json 放到请求体中提交到后端的。
那么,这就与我们服务端要求的 ‘Content-Type’: ‘application/x-www-form-urlencoded’ 不符合。
因此要做出改变,使用qs插件来过滤下数据。
先在项目中安装qs插件,使用npm install qs --save
然后过滤传输数据,对数据里边数组也要进行JSON.stringify处理,否则后端娶不到该值。
var data=qs.stringify({
title:this.blog.title,
content:this.blog.content,
categarits:JSON.stringify(this.blog.categarits),
author:this.blog.author
});
axios.post("/api/upData",data).then(res=>console.log("数据传输成功"))
node后端处理语句,将数据传给mongdb数据库。
pp.post('/upData', function(req, res) {
console.log("数据成功提交");
User.create({
title:req.body.title,
content:req.body.content,
author:req.body.author,
categarits:req.body.categarits
},function(err,doc){
if(!err){
console.log(doc);
}else{
console.log(err);
}
});
console.log(req.body,6666666);
res.send("axios,发送数据,您好吗?")
})
重新运行npm run serve ,就能在server服务中看到提交的数据,
然后再对服务进行改进,将数据提交到数据库,就可以实现前后端联调。