如何使用react js连接mysql数据库[重复]

Posted 2023-02-24

【中文标题】如何使用react js连接mysql数据库[重复]

【英文标题】：How to mysql database connection with react js [duplicate]

【发布时间】：2019-08-19 00:07:52

【问题描述】：

我是 React JS 的初学者。因此，我想学习如何将 React JS、Node JS 和 mysql 一起使用。所以，请给我一些建议和例子。我试着解决这个问题。请帮帮我。

【问题讨论】：

您好，欢迎来到 ***。您可能想先自己搜索。我实际上只是将您的问题标题粘贴到谷歌并得到了第一个结果：***.com/questions/54325397/…

你可以看看 NPM 包，比如Sequelize

有很多教程可以帮助您入门。

【参考方案1】：

您不能使用 ReactJs 添加后端活动。

在 Nodejs 中是可能的。

您可以在 nodejs 中使用sequelize ORM 连接MySql。

续集 ORM

Sequelize 是一个基于 Promise 的 Node.js ORM，适用于 Postgres、MySQL、SQLite 和 Microsoft SQL Server。它在事务、关系、读取复制等方面具有许多可靠的功能。

试试这个：

>npm install --save sequelize
>npm install --save mysql2

设置 Sequelize MySQL 连接

./app/config/env.js

const env = 
  database: 'testdb',
  username: 'root',
  password: '12345',
  host: 'localhost',
  dialect: 'mysql',
  pool: 
    max: 5,
    min: 0,
    acquire: 30000,
    idle: 10000
  
;
 
module.exports = env;

./app/config/db.config.js

const env = require('./env.js');
 
const Sequelize = require('sequelize');
const sequelize = new Sequelize(env.database, env.username, env.password, 
  host: env.host,
  dialect: env.dialect,
  operatorsAliases: false,
 
  pool: 
    max: env.max,
    min: env.pool.min,
    acquire: env.pool.acquire,
    idle: env.pool.idle
  
);
 
const db = ;
 
db.Sequelize = Sequelize;
db.sequelize = sequelize;
 
//Models/tables
db.customers = require('../model/customer.model.js')(sequelize, Sequelize);
 
 
module.exports = db;

创建 Sequelize 模型

module.exports = (sequelize, Sequelize) => 
  const Customer = sequelize.define('customer', 
    firstname: 
    type: Sequelize.STRING
    ,
    lastname: 
    type: Sequelize.STRING
    ,
    age: 
      type: Sequelize.INTEGER
    
  );
  
  return Customer;

路线

./app/controller/customer.route.js

module.exports = function(app) 
 
    const customers = require('../controller/customer.controller.js');
 
    // Create a new Customer
    app.post('/api/customers', customers.create);
 
    // Retrieve all Customer
    app.get('/api/customers', customers.findAll);
 
    // Retrieve a single Customer by Id
    app.get('/api/customers/:customerId', customers.findById);
 
    // Update a Customer with Id
    app.put('/api/customers/:customerId', customers.update);
 
    // Delete a Customer with Id
    app.delete('/api/customers/:customerId', customers.delete);

控制器

const db = require('../config/db.config.js');
const Customer = db.customers;
 
// Post a Customer
exports.create = (req, res) =>   
  // Save to MySQL database
  Customer.create(  
    firstname: req.body.firstname,
    lastname: req.body.lastname,
    age: req.body.age
  ).then(customer =>     
    // Send created customer to client
    res.send(customer);
  );
;
 
// FETCH all Customers
exports.findAll = (req, res) => 
  Customer.findAll().then(customers => 
    // Send all customers to Client
    res.send(customers);
  );
;
 
// Find a Customer by Id
exports.findById = (req, res) =>   
  Customer.findById(req.params.customerId).then(customer => 
    res.send(customer);
  )
;
 
// Update a Customer
exports.update = (req, res) => 
  const id = req.params.customerId;
  Customer.update(  firstname: req.body.firstname, lastname: req.body.lastname, age: req.body.age , 
            where: id: req.params.customerId 
           ).then(() => 
           res.status(200).send("updated successfully a customer with id = " + id);
           );
;
 
// Delete a Customer by Id
exports.delete = (req, res) => 
  const id = req.params.customerId;
  Customer.destroy(
    where:  id: id 
  ).then(() => 
    res.status(200).send('deleted successfully a customer with id = ' + id);
  );
;

Server.js

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
app.use(bodyParser.json())
 
const db = require('./app/config/db.config.js');
  
// force: true will drop the table if it already exists
db.sequelize.sync(force: true).then(() => 
  console.log('Drop and Resync with  force: true ');
);
 
require('./app/route/customer.route.js')(app);
 
// Create a Server
var server = app.listen(8081, function () 
 
  var host = server.address().address
  var port = server.address().port
 
  console.log("App listening at http://%s:%s", host, port)
)

【讨论】：

就像我在另一个答案中引用的那样，不要以 root 身份登录。

这不是安全问题，因为您在客户端上有可用的登录详细信息

【参考方案2】：

在后端文件夹的app.js 中，就像您所做的后端中的server.js 一样，添加以下代码：

const mysql = require('mysql');
const connection = mysql.createConnection(
host: 'localhost',
user:'root',
password:'mysqljs123',//password of your mysql db
database:'react-sql-db'
);

【讨论】：

花点时间阅读帮助中心的editing help。 Stack Overflow 上的格式与其他网站不同。

来自链接的问题：“从不让您的 Web 应用程序以 root 身份登录到数据库。root 可以为所欲为，所以如果您的应用程序有任何漏洞，这只是让你的数据库对黑客来说是一本打开的书。而是专门为这个应用程序创建一个单独的用户帐户，它只有它实际需要的权限才能正常工作。在开发或测试期间甚至不要使用 root 帐户作为快捷方式，因为您还需要测试您的帐户权限 - 否则当您上线时，您可能会遇到与用户帐户设置相关的意外错误。”