在 SPA（Single-Page Application）开发中，数据管理是一个重要的环节。TypeORM 是一个强大的对象关系映射（ORM）框架，可以帮助我们轻松地管理应用中的数据。
TypeORM 简介
TypeORM 支持多种数据库，如 MySQL、PostgreSQL、SQLite、SQL Server 等，并提供了一些便捷的 ORM 功能，如使用实体类封装数据表结构、自动生成数据表、查询构建器、数据变化监听等等。
实现 SPA 数据库管理
在 SPA 开发中，通常会采用一些现代化的前端框架，如 React、Angular、Vue 等。下面以 Vue.js 为例来介绍如何使用 TypeORM 管理数据库。
安装和配置 TypeORM
首先，我们需要在项目中安装 TypeORM 和相关的数据库驱动程序。在 Vue.js 中，我们可以使用 npm 来安装 TypeORM：
npm install typeorm mysql
上例中，我们选择了使用 MySQL 作为数据库。当然，你也可以选择其他数据库，如 PostgreSQL、SQLite 等。
为了让 TypeORM 能够连接到数据库，我们需要在项目的根目录下创建一个 ormconfig.json 配置文件，内容如下：
-- -------------------- ---- -------
-
------- --------
------- ------------
------- -----
----------- -------
----------- ---------
----------- -------
-------------- -----
----------- -
--------------------
--
------ -
-------------- ------------
-
-这里配置了数据库类型、主机地址、端口号、用户名、密码、数据库名称等信息。注意其中的 entities 字段指定了 TypeORM 实体类的位置，这里配置为 src/entity/**/*.ts 表示实体类文件可以存放在 src/entity 文件夹及其子文件夹中，并以 .ts 结尾。cli 下的 entitiesDir 字段指定了命令行工具生成实体类的位置。
创建实体类
在 TypeORM 中，数据表结构可以使用实体类来描述。例如，我们要在数据库中创建一个 user 表，可以定义一个 User 实体类，如下：
-- -------------------- ---- -------
------ - ------- ------- ---------------------- - ---- ----------
---------
------ ----- ---- -
-------------------------
--- -------
---------
----- -------
---------
---- -------
-上例中，我们使用了 TypeORM 的装饰器 @Entity、@Column 和 @PrimaryGeneratedColumn 来描述实体类。@Entity 表示这是一个实体类，会被 TypeORM 当做数据库中的一张表来处理；@Column 表示这是一条数据表中的一个字段；@PrimaryGeneratedColumn 表示这是数据表的主键，并且自动生成唯一标识符。
使用实体类操作数据库
我们可以使用 TypeORM 的 getRepository 方法来获取一个实体类的 Repository 对象，以对数据库进行增删改查等操作。例如，我们要从数据库中获取所有用户数据，可以这样写：
import { getRepository } from "typeorm";
import { User } from "./entity/User";
const userRepository = getRepository(User);
const allUsers = await userRepository.find();上例中，首先获取了一个 User 实体类的 Repository 对象 userRepository，然后通过 find 方法查询到了所有用户数据。以下是一些常用的数据库操作方法：
find()：查询数据库中所有数据。findOne(id)：根据 ID 查询数据库中的某一条数据。save(entity)：保存数据到数据库中。如果没有 ID，则表示新增数据；否则表示修改数据。remove(entity)：删除数据库中的某一条数据。
数据变化监听
在 SPA 应用中，常常需要监听数据库中某些数据的变化，以便及时更新前端页面的显示。TypeORM 提供了一些便捷的数据变化监听器，可以帮助我们轻松地实现这一功能。
例如，我们要实现一个 user 组件，在打开组件时加载所有用户数据，并在数据库中有数据变化时自动刷新显示。可以这样写：
-- -------------------- ---- -------
------ - ---------- --- - ---- -------------------------
------ - ------------- - ---- ----------
------ - ---- - ---- ----------------
----------
------ ------- ----- -------- ------- --- -
------- ------ ------ - ---
------- -------------- - --------------------
----- --------- -
---------- - ----- ---------------------------
-------------------
---------------------------
---------------------------- -------
------------------
-------------- ------- -- -
---------- - ------
---
----- ------------ - ---------------------------------------
-------------------------------
---------- -
------ -----
--
------------------ -
----- ---- - -------------
----------------- ---------- -----------
--
------------------ -
----- ---- - -------------
----------------- ---------- ----------
--
------------------ -
----- ---- - -------------
----------------- ---------- ----------
--
---
-
-上例中，我们首先使用 userRepository.find() 方法获取所有用户数据，并将其存储在 users 变量中；然后，通过 createQueryBuilder 方法使用查询构建器来获取修改时间更新最新的若干条数据，并在数据更新后将其重新赋值给 users 变量，以实现数据增删查时的刷新显示。另外，通过订阅数据库变化事件来监听数据的插入、更新和删除等行为，并输出日志信息。
总结
TypeORM 提供了强大的数据管理和操作功能，可以帮助我们轻松地实现 SPA 应用中的数据管理。在使用 TypeORM 进行数据管理时，我们需要先安装和配置 TypeORM，然后定义实体类来描述数据表结构，最后使用 Repository 对象来对数据库进行增删改查等操作。同时，TypeORM 还提供了数据变化监听器，可以方便地实现数据更新时的刷新显示等功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64b2db7248841e9894f0b539