在React.js网络应用程序发送数据到数据库

Question

我正在创建一个web应用程序，我很好奇如何发送数据到MySQL数据库。我有一个函数，当用户按下按钮时被调用，我想这个函数以某种方式发送数据到MySQL服务器。有谁知道如何解决这个问题？我试过npm MySQL模块，但它似乎连接不起作用，因为它是客户端。还有其他的方式吗？我需要一个想法让我开始。

问候

Answer 1

您将需要处理来自你的阵营应用请求，并相应地更新数据库的服务器。 一种方式是使用的NodeJS，Express和node-mysql作为服务器：

var mysql = require('mysql'); 
var express = require('express'); 
var app = express(); 

// Set up connection to database. 
var connection = mysql.createConnection({ 
    host: 'localhost', 
    user: 'me', 
    password: 'secret', 
    database: 'my_db', 
}); 

// Connect to database. 
// connection.connect(); 

// Listen to POST requests to /users. 
app.post('/users', function(req, res) { 
    // Get sent data. 
    var user = req.body; 
    // Do a MySQL query. 
    var query = connection.query('INSERT INTO users SET ?', user, function(err, result) { 
    // Neat! 
    }); 
    res.end('Success'); 
}); 

app.listen(3000, function() { 
    console.log('Example app listening on port 3000!'); 
}); 

然后你可以使用fetch一个阵营组件内做一个POST请求到服务器，有点像这样：

class Example extends React.Component { 
    constructor() { 
    super(); 
    this.state = { user: {} }; 
    this.onSubmit = this.handleSubmit.bind(this); 
    } 
    handleSubmit(e) { 
    e.preventDefault(); 
    var self = this; 
    // On submit of the form, send a POST request with the data to the server. 
    fetch('/users', { 
     method: 'POST', 
     data: { 
      name: self.refs.name, 
      job: self.refs.job 
     } 
     }) 
     .then(function(response) { 
     return response.json() 
     }).then(function(body) { 
     console.log(body); 
     }); 
    } 
    render() { 
    return (
     <form onSubmit={this.onSubmit}> 
     <input type="text" placeholder="Name" ref="name"/> 
     <input type="text" placeholder="Job" ref="job"/> 
     <input type="submit" /> 
     </form> 
    ); 
    } 
} 

请记住，这只是实现此目的的无限途径之一。

Answer 2

这取决于你的应用程序的组织方式，我猜你有一台服务器可以提供你的React应用程序代码。 我会根据自己的喜好使用一个模块建议您发送必要的信息到你的服务器（如果有的话）：

• fetch内置XHR API（https://developer.mozilla.org/en/docs/Web/API/Fetch_API）
• request基于回调的NPM模块（https://www.npmjs.com/package/request）
• axios基于承诺新公共管理模块（https://www.npmjs.com/package/axios）

如果你正在寻找一个模块/插件做所有的WO rk从客户端到数据库我不知道，也不确定是否有这种情况，因为通常建议使用代理（服务器重定向，但也要格式化或阻止客户端与数据库之间的请求）。

然后，在您的服务器格式化的必要信息（如果有的话）是由你的MySQL数据库可用，然后用您所选择的模块，请联系您的MySQL数据库，第一个最流行的模块似乎是： https://www.npmjs.com/package/mysql ，但如果你知道另一个或有其他偏好继续下去。 （例如，使用MongoDB，我们可以使用Mongoose来简化请求）