我正在尝试将表单数据从响应发布到节点后端,该怎么做? 我的React代码是:
import fetch from 'isomorphic-fetch';
export function createBio (data) {
console.log(data);
return fetch('http://localhost:3001/user/create', {
method: 'POST',
mode: 'no-cors',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
}
}).then(res => {
return res;
}).catch(err => console.log(err));
}
我的NodeJs代码
router.post('/create', (req,res,) => {
var user = new User({title: req.params.title || "Untitled Note", body: req.params.body});
user.save();
});
如何检索数据
答案 0 :(得分:4)
req.param()
在请求的url路径,正文和查询字符串中(按此顺序)搜索指定的参数。如果在具有给定name
的请求中任何地方都不存在参数值,则它返回undefined
,或者返回可选的defaultValue
(如果已指定)。
URL路径参数(
req.params
)
例如路由/create/4
的请求/create/:id
具有网址路径参数req.params.id
:id此ID,您可以更改所需的任何内容,但应在参数
主体参数(
req.body
)
例如具有可解析主体(例如JSON,URL编码或XML)的请求具有等于其已解析值的主体参数
如果要获得标题,可以写req.body.title
对于您的情况,我建议您使用req.body
您的后端API
//http://localhost:3001/user/create
router.post('/create', (req,res) => {
const user = new User(
{
title: req.body.title ===null ? 'Untitled Note' : req.body.title,
text: req.body.text
});
user.save();
});
您应该确定数据包括哪些值
data = {
title: '?',
text: '?'
};
您的提取
import fetch from 'isomorphic-fetch';
export function createBio (data) {
console.log(data);
fetch('http://localhost:3001/user/create', {
method: 'POST',
mode: 'no-cors',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
}
}).then(res => {
return res;
}).catch(err => console.log(err));
}
确保您的路径正确
无论如何,我都使用'axios'来检索数据
router.post('/'),
(req, res) => {
const newPost = new Post({
eventTitle: req.body.eventTitle,
eventText: req.body.eventText
});
newPost.save().then(post => res.json(post));
});
axios
const postData = {
title: '?',
text: '?'
};
axios
.post('/api/posts', postData)
.then(res => console.log(res))
.catch(err => console.log(err));
获取参数
**!But this title should be assigned a value. not a null value**
router.post('/:title'),
(req, res) => {
const newPost = new Post({
eventTitle: req.params.title,
eventText: req.body.eventText
});
newPost.save().then(post => res.json(post));});
const postData = {
title: '?',
text: '?'
};
axios
.post(`/api/posts/${postData.title}`, postData.text)
.then(res => console.log(res))
.catch(err => console.log(err));
如果对提取有任何疑问,可以使用此https://developer.mozilla.org/en-US/。
我希望这对您有用。实际上,我从未使用过fetch,但axios与此相同。
PS:您应该为server.js添加它,以从客户端获取价值。 Node.js主体解析中间件。解析传入请求主体 处理程序之前的中间件,在req.body下可用 属性。
const bodyParser = require('body-parser');
// for parsing application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));
// for parsing application/json
app.use(bodyParser.json());
您的评论和问题的最后答案。
首先,您应将proxy
添加到客户端package.json
您可以npm I concurrently
同时运行服务器和客户端
您的package.json应该包含---我没有创建服务器json,这可能是错误的格式。但是只是一个测试。 **的 part 应该写在服务器的package.json文件中!如果您不想使用它,则只需专注于代码即可解决问题。
{
"name": "react",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.18.0",
"body-parser": "^1.18.3",
"concurrently": "^4.0.1",
"express": "^4.16.4",
"fetch": "^1.1.0",
"node-fetch": "^2.2.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.4",
"isomorphic-fetch": "^2.2.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
**"server": "node server.js",**
**"client": "npm start",**
**"dev": "concurrently \"npm run server\" \"npm run client\"",**
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:5000"
}
npm I node-fetch
在客户端
import React, {Component} from 'react';
//import axios from 'axios';
//import fetch from 'node-fetch';
import fetch from 'isomorphic-fetch';
class SendMessage extends Component {
constructor(props) {
super(props);
this.state = {
title: '',
text: ''
};
this.onChange = this.onChange.bind(this);
this.onSubmit = this.onSubmit.bind(this);
}
onSubmit(e){
e.preventDefault();
const newUser = {
title: this.state.title,
text: this.state.text,
};
// axios.post('/users/create', newUser)
// .then(res => console.log(res))
// .catch(err => console.log(err));
fetch('/users/create', {
method: 'post',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(newUser)
}).then(res=>res.json())
.then(res => console.log(res));
}
onChange(e){
this.setState({[e.target.name]:e.target.value})
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<input type="text" name='title' onChange={this.onChange} value={this.state.title} placeholder="title"/>
<input type="text" name='text' onChange={this.onChange} value={this.state.text} placeholder="text"/>
<input type="submit" value="Submit"/>
</form>
</div>
);
}
}
export default SendMessage;
服务器端server.js
const express = require ('express');
const bodyParser = require('body-parser');
//import route
const users = require('./route');
var app = express();
//Body parser middleware
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
// Use routes
app.use('/users', users);
const port = process.env.PORT || 5000;
app.listen(port, () => console.log(`Server running on port ${port}`));
服务器端route.js
const express = require('express');
const router = express.Router();
router.post('/create', (req,res) => {
console.log(req.body);
const user =
{
title: req.body.title ===null ? 'Untitled Note' : req.body.title,
text: req.body.text
};
res.status(200).json(user);
});
module.exports = router;
答案 1 :(得分:1)
当Node.js服务器正在侦听“ create”时,您正在向“ / user / create”发送请求。尝试更改
fetch('http://localhost:3001/user/create'
到
fetch('http://localhost:3001/create'
答案 2 :(得分:0)
您可以使用body-parser中间件来解析请求的正文
在您的server.js中:
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.json({limit: '10mb'}));
并假设您将一个对象发送到服务器,如:
let data = {
myProp: 'myVal1'
}
然后您可以在请求中获取它:
router.post('/create', (req,res,) => {
let value = req.body.myProp;
console.log('value in body: ' + value);
// execute...
});
这将记录:
value in body: myVal1
我也强烈建议对您的请求使用Axios而不是fetch,并阅读我的答案in this post,其中讨论了一些差异以及如果您已经在使用fetch则如何实现axios。这样,您就不需要例如对数据进行字符串化处理,也可以解决此处讨论的其他问题。
如果您使用Axios(带有async / await),请按如下所示设置您的请求对象:
let reqObj = {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8'
},
url: 'http://localhost:3001/user/create',
data: {
myProp: 'myVal1'
}
};
并使用以下命令将请求发送到axios:
let response = await axios(reqObj);
答案 3 :(得分:0)
最好的方法,开始创建文件api.js
import axios from "axios";
export default {
user: {
createBio: data => axios.post(`${process.env.API_HOST}/user/create`, {data}).then(res => res),
}
}
然后,如果您使用redux,则可以从组件或操作中调用函数createBio,
如果您遇到访问控制允许来源问题,请使用CORS