实操 JSON 数据服务器

JSON 数据服务器

了解服务器的基本工作原理

熟悉数据接口 API 的定制和使用

掌握 json-server 的基本使用

掌握 Axios 的基本使用

掌握浏览器扩展 Postman 的基本使用

资源准备：图片和数据

json-server 安装和基本使用

Postman 的安装和基本使用

Axios 安装和基本使用

准备数据

. 选择或创建一个文件夹如 public 作为各种资源的主目录；利用各种子文件夹存放不同的资源数据，如 data 存放 json、imgs 存放图片、music 存放音乐等等

. json数据：创建 json 数据文件 rank.json；这里以暴露2个接口为例；一个是 info；一个是 cont；这里包括了图片的 src，可以给出完整路径，也可以仅仅给出文件名；数据加载后再2次处理

. 注意：id 为字符串类型

{
  "info":{},
  "cont":[
    {
      "id":"1001",
      "name":"gl",
      "age":18,
      "rank":1,
      "src":"1.jpg"
    },
    {
      "id":"1002",
      "name":"cq",
      "age":20,
      "rank":2,
      "src":"2.jpg"
    }
  ]
}

. 图片数据：创建空白文件夹 imgs，将对应的图片拷贝进去；作为在线资源提供给项目使用

. 其它资源，如视频、音频等

json-server 服务器 - 详细操作，请查看 jsonserver

Postman 的基本使用

用来模拟数据的请求

安装浏览器插件 FeHelper 前端助手或下载更加专业的 Postman（最近官网一直打不开）

. 获取数据 - GET

获取所有数据

http://127.0.0.1:3000/cont

根据 id 获取接口某个数据

http://127.0.0.1:3000/cont/1001

. 增加数据 - POST

. 修改数据 - PUT

. 根据 id 删除某个数据 - DELETE

http://127.0.0.1:3000/cont/1001

Axios 数据请求 - 根据项目需求发起网络请求，详细使用，请查看 Axios

JSON 数据服务器

JSON Server