这是我参与「第四届青训营 」笔记创作活动的的第4天

Json（JavaScript Object Notation）

首先我们需要对json有一定简单认识。第一，JSON 是存储和传输数据的格式。 第二，JSON 经常在数据从服务器发送到网页时使用。

• JSON 是轻量级的数据交换格式
• JSON 独立于语言 
• JSON 是“自描述的”且易于理解
• JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

Mock

mock 的意思是模拟，也就是模拟接口返回的信息，用已有的信息替换它需要返回的信息，从实现对上级模块的测试。 这里分为两类测试：一类是前端对接口的mock，一类是后端中涉及的mock。

JsonServer

JsonServer是非常方便的工具，它可以在一分钟内为您提供一个模拟剩余的json服务器。它的主要的作用就是搭建本地的数据接口，创建json文件，便于调试调用。

Why JsonServer？

在实际项目开发中我们往往需要通过向服务器请求数据来渲染我们的页面，而在没有条件的时候我们则需要mock数据来渲染页面，以达到我们独立前端开发目的，JsonServer是可以方便使用本地mock数据的工具，使用方法也十分简单。下面我们来学习如何使用JsonServer来引用本地json数据。

具体步骤

一、安装全局的json-server

1. 通过windows搜索框输入cmd打开终端
2. 安装全局的json-server。在我们的终端中输入：npm install -g json-server（如果是mac电脑的话，需要在前面加sudo，windows电脑不需要） 操作如下：

二、修改package.json

1. 将命令行定位到自己电脑需要存放文件的位置（最好自己创建一个文件夹，可自己命名，不要用json-server，会报错）
2. 输入npm init --yes
3. 然后初始化一个package.json文件
4. 输入npm i json-server --save
5. 打开package.json，修改一下"scripts"中的内容 操作如下： json_server是自己起的名字

三、创造db.json文件

1. 输入json-server --watch db.json 操作如下： 可以访问http://localhost:3000 查看内容

四、通过修改db.json来创造本地数据

1. 可以修改db.json文件内容，但必须按照json格式（db.json就是你以后需要请求的数据）
2. 输入npm run json_server(自己起的名字json_server) 操作如下：

五、获取数据

1. 在JavaScript中获取数据 操作如下： 可以在网页中渲染我们的数据啦！