[英]Ember component POST to Express API gives error
When trying to do a post from a component in my ember app to my express api I am receiving 尝试从我的余烬应用程序中的组件到我的Express API进行发布时,我收到了
SyntaxError: Unexpected token V in JSON at position 0
When checking what response I'm receiving in the network inspector on chrome I see 在Chrome的网络检查器中检查收到的响应时,我看到了
ValidationError: body: Path `body` is required., title: Path `title` is required. undefined
The blogpost.title and .body both return the correct values but the blogpost gives me blogpost.title和.body都返回正确的值,但是blogpost给了我
adapterError: SyntaxError: Unexpected token V in JSON at position 0 at parse
EmberApp/App/Components/create-new-post/Component.js EmberApp /应用/组件/创建新员额/ Component.js
export default Component.extend({
blogpost: null,
router: inject('-routing'),
actions: {
save: function (blogpost) {
console.log(blogpost.title);
console.log(blogpost.title);
console.log(blogpost);
blogpost.save()
.then(
(value) => {
Ember.Logger.info(value);
this.get('router').transitionTo('index')
}
)
.catch(
(err) => {
Ember.Logger.info('failure to save');
console.log(err);
}
)
}
}
});
EmberApp/App/Components/create-new-post/template.hbs EmberApp /应用/组件/创建新员额/ template.hbs
<form {{action "save" blogpost on="submit"}}>
<p>
{{input name="title" value=blogpost.title class="form-control" placeholder="Title"}}
</p>
<p>
{{textarea name="body" value=blogpost.body class="form-control" placeholder="Body" rows="10" cols="140"}}
</p>
<p>
<button class="btn btn-primary btn-block" type="submit" value="Save">Publish</button>
</p>
</form>
EmberApp/App/routes/createpost.js EmberApp /应用/路由/ createpost.js
import Route from '@ember/routing/route';
export default Route.extend({
model() {
return this.store.createRecord('blogpost');
}
});
EmberApp/App/templates/createpost.hbs EmberApp /应用/模板/ createpost.hbs
<div class="container">
<div class="col-sm-12 pull-left">
{{create-new-post blogpost=model }}
</div>
</div>
I have confirmed that the api route for post is working with postman so I'm not sure what the issue is with ember. 我已经确认发布的api路由与邮递员一起工作,因此我不确定余烬的问题所在。
ExpressAPI router ExpressAPI路由器
router.post('/blogposts', (req, res) => {
console.log('In router');
console.log(req.body);
let newBlogPost = new BlogPostSchema(req.body);
newBlogPost.save((err, blogpost) => {
if(err){
console.log(err +" "+blogpost);
res.send(err +" "+blogpost);
}
console.log(blogpost);
res.json(blogpost);
});
});
req.body returns {} which is why it hits err req.body返回{},这就是为什么它会出错的原因
Figured out my issue. 弄清楚我的问题。 For anyone who has similar issues when trying use an express api with ember as the frontend first I realized that post requests from emberjs sends a header with "application/vnd.api+json"
content type. 对于任何有类似问题的人,首先尝试使用带有ember的express api作为前端时,我意识到emberjs的发布请求会发送内容类型为"application/vnd.api+json"
的标头。
So in my express server.js
I added app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
因此,在我的express server.js
我添加了app.use(bodyParser.json({ type: 'application/vnd.api+json' }));
which lets body parser parse and return the correct req.body. 它使主体解析器能够解析并返回正确的req.body。 I then created a new serializer ember generate serializer blogpost
for my ember app which serialized the request to the format my express api was expecting. 然后,我为我的ember应用程序创建了一个新的序列化器ember generate serializer blogpost
,该文章将请求序列化为我的express api期望的格式。
EmberApp/Serializers/blogpost.js EmberApp /串行器/ blogpost.js
import DS from 'ember-data';
export default DS.JSONAPISerializer.extend({
serialize(snapshot, options){
let json = this._super(...arguments);
let newjson = {
title: json.data.attributes.title,
body: json.data.attributes.body
};
return newjson;
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.