在进行前端开发时，经常需要调用后台数据，但在后台接口还没有完成的情况下，我们需要模拟数据进行前端开发及测试。本文将介绍如何在 Angular 项目中使用 json-server 模拟后台数据。
什么是 json-server？
json-server 是一个快速搭建 RESTful API 的工具，支持从 Json 文件自动生成 RESTful API。你只需要编写一个 Json 文件来描述你的数据，然后运行 json-server 即可创建一个 RESTful API。
安装 json-server
使用 npm 安装：
npm install -g json-server
安装完成后，可以通过终端命令 json-server --version 查看版本信息。
编写 Json 数据
我们可以编写一个 Mock 数据文件 db.json，放在项目根目录下，比如：
{
"posts": [
{ "id": 1, "title": "json-server", "author": "typicode" },
{ "id": 2, "title": "mock data", "author": "jimmy" }
]
}Mock 数据文件可以通过访问 http://localhost:3000/posts 进行查看。现在，我们可以利用 Angular 中的 HttpClient 来获取这个数据。
利用 HttpClient 访问数据
在 Angular 项目中使用 HttpClient，首先需要在 app.module.ts 文件中导入和注入 HttpClientModule：
-- -------------------- ---- ------- ------ - ---------------- - ---- ----------------------- ----------- ------------- --------------- -------- --------------- ------------------ ---------- --- ---------- --------------- -- ------ ----- --------- --
然后我们可以在组件中使用 HttpClient 来从 json-server 中获取数据。
-- -------------------- ---- -------
------ - ---------- - ---- -----------------------
------------
--------- ------------
------------ -------------------------
---------- -------------------------
--
------ ----- -------------- ---------- ------ -
------ ----
------------------- ----- ----------- - -
---------- -
----------------------------------------------------------- -- -
---------- - -----
---
-
-在模板中，我们可以使用 *ngFor 来展示数据。
<ul>
<li *ngFor="let post of posts">
{{post.title}} - {{post.author}}
</li>
</ul>现在，我们就可以通过这个组件在前端展示从 json-server 中获取到的数据。
总结
在前端开发阶段中，模拟数据对于快速开发及测试非常实用。本文介绍了如何使用 json-server 模拟后台数据，并通过 Angular 的 HttpClient 来获取数据。我们可以通过这个方法在前端开发过程中快速地搭建 Mock 数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649bf10048841e98948b4827