用react框架写完登录注册页面后如何用react框架连数据库

React 作为一个前端框架，无法直接连接数据库。通常情况下，我们需要使用后端框架来处理数据库操作，并提供接口供前端调用。

常用的后端框架有 Express、Koa、Django、Flask 等等，其中 Express 和 Koa 是基于 Node.js 的框架，可以使用 Node.js 提供的模块连接各种类型的数据库，例如 MySQL、MongoDB 等等。

下面以 Express 和 MySQL 为例，演示如何使用 React 和 Express 连接数据库：

1. 首先需要安装 `mysql` 和 `express` 模块：

npm install mysql express

2. 在 Express 应用中引入 `mysql` 模块，并创建一个 MySQL 连接对象：

const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'mydatabase'
});

connection.connect();

在这个例子中，我们使用 `mysql.createConnection()` 方法创建了一个 MySQL 连接对象，并指定了连接的主机、用户名、密码和数据库名。然后调用 `connection.connect()` 方法连接到数据库。

3. 在 Express 应用中提供接口，处理前端发送的登录和注册请求，并使用 MySQL 连接对象操作数据库：

app.post('/api/login', (req, res) => {
  const { username, password } = req.body;
  const sql = `SELECT * FROM users WHERE username='${username}' AND password='${password}'`;

  connection.query(sql, (error, results, fields) => {
    if (error) {
      res.status(500).json({ message: 'Error connecting to database' });
    } else if (results.length === 0) {
      res.status(401).json({ message: 'Invalid username or password' });
    } else {
      res.json({ message: 'Login successful' });
    }
  });
});

app.post('/api/register', (req, res) => {
  const { username, password } = req.body;
  const sql = `INSERT INTO users (username, password) VALUES ('${username}', '${password}')`;

  connection.query(sql, (error, results, fields) => {
    if (error) {
      res.status(500).json({ message: 'Error connecting to database' });
    } else {
      res.json({ message: 'Registration successful' });
    }
  });
});

在这个例子中，我们为 Express 应用提供了两个接口 `/api/login` 和 `/api/register`，分别用于处理登录和注册请求。在处理请求时，我们使用 MySQL 连接对象执行 SQL 查询或插入操作，并根据操作结果返回相应的响应数据。

4. 在 React 应用中发送登录和注册请求，并处理响应数据：

import React, { useState } from 'react';

function Login() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [message, setMessage] = useState('');

  const handleLogin = async () => {
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });
    const data = await response.json();
    setMessage(data.message);
  };

  const handleRegister = async () => {
    const response = await fetch('/api/register', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    });
    const data = await response.json();
    setMessage(data.message);
  };

  return (
    <div>
      <input type="text" placeholder="Username" value={username} onChange={e => setUsername(e.target.value)} />
      <input type="password" placeholder="Password" value={password} onChange={e => setPassword(e.target.value)} />
      <button onClick={handleLogin}>Login</button>
      <button onClick={handleRegister}>Register</button>
      <p>{message}</p>
    </div>
  );
}

export default Login;

在这个例子中，我们在 React 应用中提供了两个按钮，分别用于发送登录和注册请求。在点击按钮时，我们使用 `fetch()` 方法向 Express 后端发送 HTTP POST 请求，并将用户名和密码作为 JSON 数据放在请求体中。然后处理 Express 后端返回的响应数据，并将消息显示在页面上。

通过以上步骤，我们就可以实现 React 和 Express 连接 MySQL 数据库，并提供登录和注册接口供 React 前端调用。当然，实际中还有很多细节需要处理，例如安全性、数据验证等等，需要根据具体情况进行调整和优化。