req.param()
выполняет поиск указанного пути в URL-пути, теле и строке запроса (в указанном порядке).Если в запросе нет ни одного значения параметра с указанным name
, он возвращает undefined
или необязательный defaultValue
, если указан.
параметры пути URL (req.params
)
например, запрос /create/4
на маршрутизацию /create/:id
содержит параметры пути URL req.params.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
к вашему клиентскому пакету. Json Вы можете npm I concurrently
запустить сервер и клиент одновременно
Ваш package.json должен включать --- Я не создал сервер json, это может быть неправильный формат.Но только тест. part of ** должен быть записан в файл 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;