【发布时间】：2017-12-30 11:39:18
【问题描述】：
我在使用 fetch 中的 post 方法时遇到了问题，因为我的服务器正在从客户端接收一个空对象。我已在客户端签入，无法发送我要发送的值。
这是我的服务器：
const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const mysql = require('mysql');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: true
}));
// connection configurations
const mc = mysql.createConnection({
host: 'localhost',
user: 'root',
password: '12345',
database: 'node_task_demo',
//socketPath: '/Applications/MAMP/tmp/mysql/mysql.sock'
});
// connect to database
mc.connect();
// default route
app.get('/', function (req, res) {
return res.send({ error: true, message: 'hello' })
});
// Here where I'm calling in the client side
app.get('/todos', function (req, res) {
mc.query('SELECT * FROM tasks', function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: 'Todo list' });
});
});
// Search for todos with ‘bug’ in their name
app.get('/todos/search/:keyword', function (req, res) {
var mensaje = 'Todos search list.';
let keyword = req.params.keyword;
mc.query("SELECT * FROM tasks WHERE task LIKE ? ", ['%' + keyword + '%'], function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: mensaje});
});
});
// Retrieve todo with id
app.get('/todo/:id', function (req, res) {
let task_id = req.params.id;
if (!task_id) {
return res.status(400).send({ error: true, message: 'Please provide task_id' });
}
mc.query('SELECT * FROM tasks where id=?', task_id, function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results[0], message: 'Todos list.' });
});
});
// Add a new todo
app.post('/todo/meterla', function (req, res) {
let task = req.body.task;
if (!task) {
return res.status(400).send({ error:true, message: 'Please provide task' });
}
//var task = req.body.task;
var query = mc.query("INSERT INTO tasks SET ? ", { task: task}, function (error, results, fields) {
if (error) throw error;
console.log(task);
return res.send({ error: false, data: results, message: 'New task has been created successfully.' });
});
});
// Update todo with id
app.put('/todo', function (req, res) {
let task_id = req.body.task_id;
let task = req.body.task;
if (!task_id || !task) {
return res.status(400).send({ error: task, message: 'Please provide task and task_id' });
}
mc.query("UPDATE tasks SET task = ? WHERE id = ?", [task, task_id], function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: 'Task has been updated successfully.' });
});
});
// Delete todo
app.delete('/todo', function (req, res) {
let task_id = req.body.task_id;
if (!task_id) {
return res.status(400).send({ error: true, message: 'Please provide task_id' });
}
mc.query('DELETE FROM tasks WHERE id = ?', [task_id], function (error, results, fields) {
if (error) throw error;
return res.send({ error: false, data: results, message: 'Task has been updated successfully.' });
});
});
// all other requests redirect to 404
app.all("*", function (req, res, next) {
return res.send('page not found');
next();
});
// port must be set to 8080 because incoming http requests are routed from port 80 to port 8080
app.listen(8081, function () {
console.log('Escuchando por el puerto 8081');
});
// allows "grunt dev" to create a development server with livereload
module.exports = app;
这是我的客户：
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {data: ""};
this.state_2 = {message: []};
this.onSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
fetch('/todo/1')
.then((response) => response.json())
.then((responseJson) =>{
this.setState({
message: responseJson.data
});
})
}
handleSubmit(e){
e.preventDefault();
var self = this;
// On submit of the form, send a POST request with the data to the server.
fetch('/todo/meterla',{
method: 'POST',
body:{
task: self.refs.task.value
}
})
.then(function(response){
return response.json()
}).then(function(body){
console.log(body);
alert(self.refs.task.value)
});
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<form onSubmit={this.onSubmit}>
<input type="text" placeholder="task" ref="task"/>
<input type="submit"/>
</form>
<p className="App-intro">
Este es el resultado de la consulta = <b>{JSON.stringify(this.state.message)}</b>
</p>
</div>
);
}
}
export default App;
【问题讨论】：
标签： node.js api reactjs express fetch