Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查（一）-阿里云开发者社区

Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查（一）

2023-07-16 222

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Vue(第十六课)JSON-SERVE和POSTMAN技术中对数据的增删改查（一）

了解一下概念:

1 Axios

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

特性

从浏览器创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF

2 json-server 详解

JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json 文件作为 api 的数据源。

安装json-server

npm install -g json-server
复制代码

启动 json-server

json-server可以直接把一个json文件托管成一个具备全RESTful风格的API,并支持跨域、jsonp、路由订制、数据快照保存等功能的 web 服务器。

json-server --watch --port 3000 db.json

3 postman工具Apl

一个在前端本地运行，可以存储 json 数据的server。

作为一个前端开发工程师，在后端还没有准备好的时候，不可避免的要使用mock的数据。在本地模拟后端接口用来测试前端效果这种做法称之为构建前端Mock 。很多时候，我们并不想使用简单的静态数据，而是希望自己起一个本地的server来完全模拟请求以及请求回来的过程。json-server是一个很好的工具。

安装 json-server

npm install json-server -g

标题

db.json文件

{
  "students": [
    {
      "name": "我修改的数据",
      "age": "27",
      "id": 1003
    },
    {
      "id": 1004,
      "name": "王者荣耀",
      "sex": "男",
      "height": "190",
      "weight": "67",
      "job": "Web开发工程师"
    },
    {
      "name": "硝酸",
      "sex": "男",
      "height": "178",
      "weight": "58",
      "job": "前端开发工程师",
      "id": 1005
    },
    {
      "name": "小黄入",
      "sex": "男",
      "height": "198",
      "weight": "78",
      "job": "王者",
      "id": 1006
    },
    {
      "name": "小黄",
      "sex": "男",
      "height": "198",
      "weight": "78",
      "job": "王者",
      "id": 1007
    },
    {
      "name": "小黄",
      "sex": "男",
      "height": "198",
      "weight": "78",
      "job": "王者",
      "id": 1008
    },
    {
      "id": 1009
    },
    {
      "id": 1010
    },
    {
      "name": "小黄",
      "sex": "男",
      "height": "198",
      "weight": "78",
      "job": "王者",
      "id": 1011
    },
    {
      "id": 1012
    },
    {
      "name": "小黄",
      "sex": "男",
      "height": "198",
      "weight": "78",
      "job": "王者",
      "id": 1013
    }
  ],
  "teachers": [
    {
      "id": 101,
      "name": "王路通",
      "sex": "男",
      "subject": "前端开发工程师"
    },
    {
      "id": 102,
      "name": "王米",
      "sex": "女",
      "subject": "前端开发工程师"
    },
    {
      "id": 103,
      "name": "顾路通",
      "sex": "男",
      "subject": "前端开发工程师"
    },
    {
      "id": 104
    },
    {
      "name": "我是数据",
      "sex": "男",
      "subject": "墙隔断",
      "id": 105
    },
    {
      "name": "小明",
      "sex:男": "",
      "subject:随口": "",
      "id": 106
    }
  ],
  "profile": {
    "name": "typicode"
  }
}