Sequelize 实践：使用 Ant Design 前端 UI 组件库构建界面-JavaScript中文网-JavaScript教程资源分享门户

前言

Sequelize 是一个基于 Node.js 的 ORM 框架，它支持多种数据库，包括 MySQL、PostgreSQL、SQLite 和 MSSQL 等。Ant Design 是一个优秀的前端 UI 组件库，提供了许多常用的组件和模板，可以帮助开发者快速构建界面。

在本文中，我们将介绍如何使用 Sequelize 和 Ant Design 来构建一个简单的 CRUD 应用程序，并提供示例代码和指导意义。

准备工作

在开始之前，我们需要安装一些必要的工具和组件：

Node.js：我们需要安装 Node.js，它是一个基于 Chrome V8 引擎的 JavaScript 运行环境，可以让我们在服务器端运行 JavaScript 代码。
Sequelize：我们需要安装 Sequelize，它是一个基于 Promise 的 ORM 框架，可以让我们使用 JavaScript 对数据库进行操作。
Ant Design：我们需要安装 Ant Design，它是一个优秀的前端 UI 组件库，提供了许多常用的组件和模板，可以帮助我们快速构建界面。

使用以下命令来安装这些工具和组件：

npm install --save sequelize sequelize-cli mysql2 antd

创建数据库

在本文中，我们将使用 MySQL 数据库。我们需要先创建一个数据库，然后创建一个表来存储我们的数据。

使用以下命令来创建数据库：

CREATE DATABASE test;

然后，我们需要创建一个名为 users 的表来存储用户信息。使用以下命令来创建表：

CREATE TABLE users (
  id INT NOT NULL AUTO_INCREMENT,
  name VARCHAR(50) NOT NULL,
  email VARCHAR(50) NOT NULL,
  password VARCHAR(50) NOT NULL,
  PRIMARY KEY (id)
);

初始化 Sequelize

接下来，我们需要初始化 Sequelize。使用以下命令来生成一个 Sequelize 配置文件：

npx sequelize-cli init

这将生成一个名为 .sequelizerc 的文件和一个名为 config/config.json 的配置文件。

打开 config/config.json 文件，修改数据库连接信息：

{
  "development": {
    "username": "root",
    "password": "",
    "database": "test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "test": {
    "username": "root",
    "password": "",
    "database": "test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  },
  "production": {
    "username": "root",
    "password": "",
    "database": "test",
    "host": "127.0.0.1",
    "dialect": "mysql"
  }
}

创建模型

接下来，我们需要创建一个模型来映射数据库中的 users 表。使用以下命令来生成一个模型：

npx sequelize-cli model:generate --name User --attributes name:string,email:string,password:string

这将生成一个名为 user.js 的文件，它包含了一个 User 模型。

打开 user.js 文件，修改模型定义：

'use strict';
const { Model } = require('sequelize');
module.exports = (sequelize, DataTypes) => {
  class User extends Model {
    static associate(models) {}
  };
  User.init({
    name: DataTypes.STRING,
    email: DataTypes.STRING,
    password: DataTypes.STRING
  }, {
    sequelize,
    modelName: 'User',
  });
  return User;
};

同步数据库

接下来，我们需要同步数据库，以便 Sequelize 可以创建 users 表。使用以下命令来同步数据库：

npx sequelize-cli db:migrate

创建控制器和路由

接下来，我们需要创建一个控制器和一些路由来处理 HTTP 请求。在本文中，我们将使用 Express 来处理 HTTP 请求。

使用以下命令来安装 Express：

npm install --save express

创建一个名为 server.js 的文件，添加以下内容：

const express = require('express');
const bodyParser = require('body-parser');
const { User } = require('./models');

const app = express();
app.use(bodyParser.json());

app.get('/users', async (req, res) => {
  const users = await User.findAll();
  res.send(users);
});

app.post('/users', async (req, res) => {
  const user = await User.create(req.body);
  res.send(user);
});

app.put('/users/:id', async (req, res) => {
  const user = await User.findByPk(req.params.id);
  if (!user) {
    return res.sendStatus(404);
  }
  await user.update(req.body);
  res.send(user);
});

app.delete('/users/:id', async (req, res) => {
  const user = await User.findByPk(req.params.id);
  if (!user) {
    return res.sendStatus(404);
  }
  await user.destroy();
  res.sendStatus(204);
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

创建界面

接下来，我们需要使用 Ant Design 来创建一个界面，以便用户可以使用界面来添加、编辑和删除用户。

使用以下命令来安装 React 和 React DOM：

npm install --save react react-dom

使用以下命令来安装 Babel 和 Webpack：

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack webpack-cli webpack-dev-server html-webpack-plugin

创建一个名为 index.html 的文件，添加以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sequelize Ant Design Demo</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

创建一个名为 App.js 的文件，添加以下内容：

import React, { useState, useEffect } from 'react';
import { Table, Button, Modal, Form, Input } from 'antd';
import axios from 'axios';

const { confirm } = Modal;

const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};

const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const App = () => {
  const [users, setUsers] = useState([]);
  const [form] = Form.useForm();

  useEffect(() => {
    axios.get('/users').then((res) => {
      setUsers(res.data);
    });
  }, []);

  const handleAdd = () => {
    form.resetFields();
    Modal.confirm({
      title: 'Add User',
      content: (
        <Form {...layout} form={form}>
          <Form.Item label="Name" name="name" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item label="Email" name="email" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item label="Password" name="password" rules={[{ required: true }]}>
            <Input.Password />
          </Form.Item>
        </Form>
      ),
      onOk: () => {
        form.validateFields().then((values) => {
          axios.post('/users', values).then((res) => {
            setUsers([...users, res.data]);
          });
        });
      },
    });
  };

  const handleEdit = (record) => {
    form.setFieldsValue(record);
    Modal.confirm({
      title: 'Edit User',
      content: (
        <Form {...layout} form={form}>
          <Form.Item label="Name" name="name" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item label="Email" name="email" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item label="Password" name="password" rules={[{ required: true }]}>
            <Input.Password />
          </Form.Item>
        </Form>
      ),
      onOk: () => {
        form.validateFields().then((values) => {
          axios.put(`/users/${record.id}`, values).then(() => {
            setUsers(users.map((user) => (user.id === record.id ? { ...user, ...values } : user)));
          });
        });
      },
    });
  };

  const handleDelete = (record) => {
    confirm({
      title: 'Delete User',
      content: `Are you sure to delete ${record.name}?`,
      onOk: () => {
        axios.delete(`/users/${record.id}`).then(() => {
          setUsers(users.filter((user) => user.id !== record.id));
        });
      },
    });
  };

  const columns = [
    { title: 'Name', dataIndex: 'name' },
    { title: 'Email', dataIndex: 'email' },
    { title: 'Password', dataIndex: 'password' },
    {
      title: 'Action',
      render: (_, record) => (
        <>
          <Button type="link" onClick={() => handleEdit(record)}>Edit</Button>
          <Button type="link" onClick={() => handleDelete(record)}>Delete</Button>
        </>
      ),
    },
  ];

  return (
    <>
      <Button type="primary" onClick={handleAdd}>Add User</Button>
      <Table dataSource={users} columns={columns} rowKey="id" pagination={false} />
    </>
  );
};

export default App;

创建一个名为 index.js 的文件，添加以下内容：

import React from 'react';
import ReactDOM from 'react-dom';
import { ConfigProvider } from 'antd';
import App from './App';

import 'antd/dist/antd.css';

ReactDOM.render(
  <ConfigProvider>
    <App />
  </ConfigProvider>,
  document.getElementById('root')
);

创建一个名为 webpack.config.js 的文件，添加以下内容：

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './index.js',
  output: {
    filename: 'bundle.js',
    path: __dirname + '/dist',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './index.html',
    }),
  ],
  devServer: {
    port: 8080,
    proxy: {
      '/users': 'http://localhost:3000',
    },
  },
};

运行应用程序

现在，我们可以使用以下命令来运行应用程序：

npx webpack serve

这将启动一个开发服务器，可以在浏览器中访问应用程序。

总结

在本文中，我们介绍了如何使用 Sequelize 和 Ant Design 来构建一个简单的 CRUD 应用程序。我们创建了一个模型来映射数据库中的 users 表，然后编写了一些控制器和路由来处理 HTTP 请求。最后，我们使用 Ant Design 来创建一个界面，以便用户可以使用界面来添加、编辑和删除用户。希望本文能够帮助您更好地理解 Sequelize 和 Ant Design，并帮助您构建更好的应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658e9e7feb4cecbf2d47baa2