React 打造页面可视化搭建 3 - MySQL 与 Sequelize 篇

2023-10-16 06:19:43

正文

数据库与 Sequelize ORM

在前端开发中，我们经常需要与数据库进行交互，以存储和检索数据。React 生态系统中，有一个名为 Sequelize 的 ORM（对象关系映射）库，它可以帮助我们轻松实现与数据库的交互。

Sequelize 支持多种数据库，包括 MySQL、PostgreSQL、SQLite 等。在本章中，我们将重点关注 MySQL 数据库。MySQL 是一款流行的开源关系型数据库，以其高性能和可靠性著称。

要使用 Sequelize，我们需要先安装它：

npm install sequelize

安装完成后，我们就可以在代码中使用 Sequelize 了。首先，我们需要创建一个 Sequelize 实例，并传入数据库连接信息：

const Sequelize = require('sequelize');
const sequelize = new Sequelize('database', 'username', 'password', {
  host: 'localhost',
  dialect: 'mysql'
});

接下来，我们就可以定义数据模型了。数据模型了数据库中的数据结构，包括表的名称、列的名称和类型等信息。例如，我们可以定义一个 User 模型：

const User = sequelize.define('user', {
  id: {
    type: Sequelize.INTEGER,
    primaryKey: true,
    autoIncrement: true
  },
  name: {
    type: Sequelize.STRING,
    allowNull: false
  },
  email: {
    type: Sequelize.STRING,
    allowNull: false,
    unique: true
  },
  password: {
    type: Sequelize.STRING,
    allowNull: false
  }
});

定义好数据模型后，我们需要同步数据库结构：

sequelize.sync();

同步完成后，我们就可以使用 Sequelize 来操作数据库了。例如，我们可以这样插入一条数据：

const user = await User.create({
  name: 'John Doe',
  email: 'john.doe@example.com',
  password: 'password'
});

我们也可以这样查询数据：

const users = await User.findAll();

Sequelize 还支持事务（transaction），事务是一组原子性的数据库操作，要么全部成功，要么全部失败。我们可以这样使用事务：

const transaction = await sequelize.transaction();

try {
  const user1 = await User.create({
    name: 'John Doe',
    email: 'john.doe@example.com',
    password: 'password'
  }, { transaction });

  const user2 = await User.create({
    name: 'Jane Doe',
    email: 'jane.doe@example.com',
    password: 'password'
  }, { transaction });

  await transaction.commit();
} catch (err) {
  await transaction.rollback();
}

在事务中，如果任何一个操作失败，整个事务都会回滚，以确保数据的一致性。

React 与 Sequelize 的集成

现在，我们已经了解了 Sequelize 的基本用法，接下来我们将学习如何将其集成到 React 应用中。

首先，我们需要在 React 应用中安装 Sequelize：

npm install sequelize react-sequelize

安装完成后，我们就可以在 React 组件中使用 Sequelize 了。例如，我们可以这样查询数据：

import { useState, useEffect } from 'react';
import { useSequelize } from 'react-sequelize';

const Users = () => {
  const [users, setUsers] = useState([]);
  const User = useSequelize('user');

  useEffect(() => {
    User.findAll().then(users => {
      setUsers(users);
    });
  }, []);

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
};

export default Users;