在 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：
--- ------- ------- -----
上例中，我们选择了使用 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 对象，以对数据库进行增删改查等操作。例如，我们要从数据库中获取所有用户数据，可以这样写：
------ - ------------- - ---- ---------- ------ - ---- - ---- ---------------- ----- -------------- - -------------------- ----- -------- - ----- ----------------------
上例中，首先获取了一个 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