Sequelize 实践：使用 AngularJS 前端框架展示数据-JavaScript中文网-JavaScript教程资源分享门户

前言

Sequelize 是一个 Node.js ORM（Object Relational Mapping，对象关系映射）工具，它支持多种数据库，包括 MySQL、PostgreSQL、SQLite 和 Microsoft SQL Server。Sequelize 提供了强大的查询功能和数据模型映射，使得在 Node.js 中操作数据库变得更加容易和高效。

AngularJS 是一个流行的前端框架，它使用了 MVVM（Model-View-ViewModel，模型-视图-视图模型）架构模式，使得开发者可以更好地组织代码和管理数据。AngularJS 提供了丰富的指令和组件，可以轻松地实现数据绑定、表单验证、动态路由等功能。

本文将介绍如何使用 Sequelize 和 AngularJS 结合展示数据。我们将使用 MySQL 数据库作为示例，并在 Node.js 环境下编写后端代码。本文假设读者已经熟悉 Node.js 和 AngularJS 的基本知识。

准备工作

在开始本文的实践部分之前，我们需要先准备好以下工具和环境：

Node.js 和 npm：我们将使用 Node.js 作为后端运行环境和 npm 作为包管理工具。
MySQL 数据库：我们将使用 MySQL 作为数据库，需要先安装并配置好。
Sequelize：我们需要安装 Sequelize 和 sequelize-cli 作为 ORM 工具和命令行工具。

安装 Sequelize 和 sequelize-cli 的命令如下：

npm install --save sequelize
npm install --save-dev sequelize-cli

实践步骤

第一步：创建数据库和数据表

我们首先需要创建一个数据库和一个数据表，用于存储我们的数据。在 MySQL 中，我们可以使用以下命令创建一个名为 test 的数据库：

CREATE DATABASE test;

接着，我们可以使用 Sequelize 的命令行工具来生成一个数据模型和一个数据迁移文件。数据模型用于定义数据表的结构和字段，数据迁移文件用于管理数据库的版本和更新。

使用以下命令初始化 Sequelize：

npx sequelize-cli init

这将生成一个名为 models 的文件夹和一个 .sequelizerc 文件。我们可以在 .sequelizerc 文件中配置 Sequelize 的参数，例如数据库连接信息和数据模型文件夹路径。

接着，我们可以使用以下命令生成一个数据模型和一个数据迁移文件：

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

这将生成一个名为 User 的数据模型和一个名为 XXXXXXXXXXXXXX-create-user.js 的数据迁移文件，其中 XXXXXXXXXXXXXX 是一个时间戳。

我们可以编辑 User 数据模型文件，定义数据表的结构和字段。例如：

module.exports = (sequelize, DataTypes) => {
  const User = sequelize.define('User', {
    firstName: DataTypes.STRING,
    lastName: DataTypes.STRING,
    email: DataTypes.STRING
  });

  return User;
};

我们可以编辑数据迁移文件，定义数据库的版本和更新。例如：

module.exports = {
  up: (queryInterface, Sequelize) => {
    return queryInterface.createTable('Users', {
      id: {
        allowNull: false,
        autoIncrement: true,
        primaryKey: true,
        type: Sequelize.INTEGER
      },
      firstName: {
        type: Sequelize.STRING
      },
      lastName: {
        type: Sequelize.STRING
      },
      email: {
        type: Sequelize.STRING
      },
      createdAt: {
        allowNull: false,
        type: Sequelize.DATE
      },
      updatedAt: {
        allowNull: false,
        type: Sequelize.DATE
      }
    });
  },
  down: (queryInterface, Sequelize) => {
    return queryInterface.dropTable('Users');
  }
};

接着，我们可以使用以下命令执行数据迁移，将数据库更新到最新版本：

npx sequelize-cli db:migrate

第二步：编写后端代码

我们可以使用 Node.js 和 Express 框架编写后端代码，实现数据的增删改查功能。我们需要安装以下依赖：

express：Express 框架。
body-parser：解析 HTTP 请求体的中间件。
cors：处理跨域请求的中间件。
sequelize：Sequelize ORM 工具。
mysql2：MySQL 数据库驱动。

使用以下命令安装依赖：

npm install --save express body-parser cors sequelize mysql2

接着，我们可以编写以下后端代码：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const { Sequelize, Op } = require('sequelize');

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

const sequelize = new Sequelize('test', 'root', 'password', {
  host: 'localhost',
  dialect: 'mysql'
});

const User = sequelize.import('./models/user');

app.get('/api/users', async (req, res) => {
  const { firstName, lastName, email } = req.query;
  const where = {};

  if (firstName) {
    where.firstName = { [Op.like]: `%${firstName}%` };
  }

  if (lastName) {
    where.lastName = { [Op.like]: `%${lastName}%` };
  }

  if (email) {
    where.email = { [Op.like]: `%${email}%` };
  }

  const users = await User.findAll({ where });
  res.json(users);
});

app.post('/api/users', async (req, res) => {
  const { firstName, lastName, email } = req.body;
  const user = await User.create({ firstName, lastName, email });
  res.json(user);
});

app.put('/api/users/:id', async (req, res) => {
  const { id } = req.params;
  const { firstName, lastName, email } = req.body;
  const user = await User.findByPk(id);

  if (!user) {
    return res.status(404).json({ error: 'User not found' });
  }

  user.firstName = firstName;
  user.lastName = lastName;
  user.email = email;
  await user.save();

  res.json(user);
});

app.delete('/api/users/:id', async (req, res) => {
  const { id } = req.params;
  const user = await User.findByPk(id);

  if (!user) {
    return res.status(404).json({ error: 'User not found' });
  }

  await user.destroy();
  res.json({ message: 'User deleted' });
});

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

这段代码实现了以下功能：

获取用户列表；
创建用户；
更新用户；
删除用户。

我们可以使用 Postman 工具来测试这些接口。

第三步：编写前端代码

我们可以使用 AngularJS 编写前端代码，实现数据的展示和操作功能。我们需要安装以下依赖：

angular：AngularJS 框架。
angular-route：AngularJS 路由模块。
angular-resource：AngularJS 资源模块。

使用以下命令安装依赖：

npm install --save angular angular-route angular-resource

接着，我们可以编写以下前端代码：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <title>Sequelize 实践：使用 AngularJS 前端框架展示数据</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular-route.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/angular.js/1.8.2/angular-resource.min.js"></script>
  <script>
    var myApp = angular.module('myApp', ['ngRoute', 'ngResource']);

    myApp.config(['$routeProvider', function ($routeProvider) {
      $routeProvider
        .when('/', {
          templateUrl: 'views/user-list.html',
          controller: 'UserListController'
        })
        .when('/users/create', {
          templateUrl: 'views/user-create.html',
          controller: 'UserCreateController'
        })
        .when('/users/:id/edit', {
          templateUrl: 'views/user-edit.html',
          controller: 'UserEditController'
        })
        .otherwise({
          redirectTo: '/'
        });
    }]);

    myApp.factory('User', ['$resource', function ($resource) {
      return $resource('/api/users/:id', { id: '@id' }, {
        update: { method: 'PUT' }
      });
    }]);

    myApp.controller('UserListController', ['$scope', 'User', function ($scope, User) {
      $scope.search = { firstName: '', lastName: '', email: '' };
      $scope.users = User.query($scope.search);

      $scope.searchUsers = function () {
        $scope.users = User.query($scope.search);
      };

      $scope.deleteUser = function (user) {
        if (confirm('Are you sure to delete this user?')) {
          user.$delete(function () {
            $scope.users = User.query($scope.search);
          });
        }
      };
    }]);

    myApp.controller('UserCreateController', ['$scope', '$location', 'User', function ($scope, $location, User) {
      $scope.user = new User();

      $scope.saveUser = function () {
        $scope.user.$save(function () {
          $location.path('/');
        });
      };
    }]);

    myApp.controller('UserEditController', ['$scope', '$location', '$routeParams', 'User', function ($scope, $location, $routeParams, User) {
      $scope.user = User.get({ id: $routeParams.id });

      $scope.updateUser = function () {
        $scope.user.$update(function () {
          $location.path('/');
        });
      };
    }]);
  </script>
</head>
<body>
  <nav>
    <a href="#/">User List</a>
    <a href="#/users/create">Create User</a>
  </nav>

  <div ng-view></div>

  <script type="text/ng-template" id="views/user-list.html">
    <h1>User List</h1>

    <form ng-submit="searchUsers()">
      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" ng-model="search.firstName">

      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" ng-model="search.lastName">

      <label for="email">Email:</label>
      <input type="text" id="email" ng-model="search.email">

      <button type="submit">Search</button>
    </form>

    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Email</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="user in users">
          <td>{{ user.id }}</td>
          <td>{{ user.firstName }}</td>
          <td>{{ user.lastName }}</td>
          <td>{{ user.email }}</td>
          <td>
            <a href="#/users/{{ user.id }}/edit">Edit</a>
            <a href="" ng-click="deleteUser(user)">Delete</a>
          </td>
        </tr>
      </tbody>
    </table>
  </script>

  <script type="text/ng-template" id="views/user-create.html">
    <h1>Create User</h1>

    <form ng-submit="saveUser()">
      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" ng-model="user.firstName" required>

      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" ng-model="user.lastName" required>

      <label for="email">Email:</label>
      <input type="email" id="email" ng-model="user.email" required>

      <button type="submit">Save</button>
    </form>
  </script>

  <script type="text/ng-template" id="views/user-edit.html">
    <h1>Edit User</h1>

    <form ng-submit="updateUser()">
      <label for="firstName">First Name:</label>
      <input type="text" id="firstName" ng-model="user.firstName" required>

      <label for="lastName">Last Name:</label>
      <input type="text" id="lastName" ng-model="user.lastName" required>

      <label for="email">Email:</label>
      <input type="email" id="email" ng-model="user.email" required>

      <button type="submit">Save</button>
    </form>
  </script>
</body>
</html>

这段代码实现了以下功能：

显示用户列表；
搜索用户；
创建用户；
编辑用户；
删除用户。

我们可以使用浏览器打开这个页面，测试这些功能。

总结

本文介绍了如何使用 Sequelize 和 AngularJS 结合展示数据。我们使用了 MySQL 数据库作为示例，并在 Node.js 环境下编写了后端代码。我们使用了 Express 框架和 Sequelize ORM 工具，实现了数据的增删改查功能。我们使用了 AngularJS 框架和路由模块、资源模块，实现了数据的展示和操作功能。我们希望本文能够对读者有所启发和帮助。

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