在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來簡化請求）