关于mock的相关学习

 ̄綄美尐妖づ 提交于 2020-03-25 22:42:15

前后端分离,可以提升开发效率, 增强代码可维护性。前后端分离开发,使用mock来模拟数据

1.使用json-server打造mock server

优秀的mock server应该有的特性:

快速搭建

支持标准的Restful操作

支持标准的Restful路由规则

自定义路由,中间件支持等等。

下面的地址可以查看json-server的相关内容

https://github.com/typicode/json-server

首先在项目里面安装json-server,如下命令,

npm install json-server --save-dev

在项目的根目录下面创建db.json文件,粘贴一下官网上的代码,文件内容如下:

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

然后在package.json文件的scripts字段里面添加下面的代码

 "mock": "json-server --watch db.json"

保存之后直接运行命令

npm run mock

看到控制台输出下面内容:

{_}/ hi!

Loading db.json
Done

Resources
http://localhost:3000/posts
http://localhost:3000/comments
http://localhost:3000/profile

Home
http://localhost:3000

Type s + enter at any time to create a snapshot of the database
Watching...

在浏览器中输入 http://localhost:3000/posts 地址打开看一下:可以看到下面的内容,返回了我们定义的数据

[
  {
    "id": 1,
    "body": "some comment",
    "postId": 1
  }
]

当修改db.json中内容时候,如下所示,打开地址看到的内容也不相同

{
    "posts": [
      { "id": 1, "title": "json-server", "author": "typicode" },
      { "id": 2, "title": "json-server-2", "author": "typicode" }
    ],
    "comments": [
      { "id": 1, "body": "some comment", "postId": 1 }
    ],
    "profile": { "name": "typicode" }
  }

浏览器中看到返回的信息是这样的

[
  {
    "id": 1,
    "title": "json-server",
    "author": "typicode"
  },
  {
    "id": 2,
    "title": "json-server-2",
    "author": "typicode"
  }
]

http://localhost:3000/posts/1 当我们输入这样的地址时,浏览器中会返回第1条的数据。

第3条中的数据是返回对象的数据。

2.分析和创建Restful接口

根据项目中的应用,更改db.json文件内容,内容如下:

{
    "categories": [
      {
        "name": "旅行",
        "iconName": "ios-plane",
        "id": "1",
        "type": "outcome"
      },
      {
        "name": "其他",
        "iconName": "ios-apps",
        "id": "15",
        "type": "income"
      }
    ],
    "items": [
      {
        "title": "再次更新标题",
        "price": 2000,
        "date": "2018-09-15",
        "monthCategory": "2018-9",
        "id": "_qmatbbwq0",
        "cid": "6",
        "timestamp": 1536969600000
      },   
      {
        "title": "新的旅行条目",
        "price": 10000,
        "date": "2019-01-05",
        "monthCategory": "2019-1",
        "timestamp": 1546646400000,
        "id": "_cg4a9gzya",
        "cid": "1"
      }
    ]
  }

get 的请求,我们可以直接在浏览中输入地址来判断,那post请求呢?

使用postman测试API接口,官网地址

https://www.postman.com/

postman的特点:

支持各种操作系统

有非常简洁易用的界面

可以支持API测试的导出,很容易分享给其他开发

3.Axios

Axios的优点:前后发送请求,获取后台数据

输入下面命令安装axios

npm install axios --save

在react项目中的index.js中引入这个api

import Axios from 'axios'

该项目在运行的时候就要开2个terminal窗口,一个窗口运行

npm run mock

另外一个窗口运行

npm start 

发现下面的提示信息,是因为mock server和react的端口撞上了,我们可以给mock修改一个端口

? Something is already running on port 3000.

Would you like to run the app on another port instead? (Y/n)

在package.json文件中修改scripts内容

"mock": "json-server --watch db.json --port 3004"

如果每次都要运行这2个命令启动mock server和react项目,这样比较麻烦,有没有简单一点的办法呢?

通过借助工具concurrently 来实现一条命令运行多条命令,利用npm安装这个工具

npm install concurrently --save -dev

下面的2条命令就变成了一条

"start": "react-scripts start",

"mock": "json-server --watch db.json --port 3004"

如下所示引入axios,获取模拟的接口数据,发现报错了

import React from 'react';
import ReactDOM from 'react-dom';
import TabelBasic from './antd/TabelBasic'
import axios from 'axios';

axios.get('localhost:3004/items').then((response) => {
    console.log(response);
});

ReactDOM.render(<TabelBasic /> ,document.getElementById('root'));
serviceWorker.unregister();

Access to XMLHttpRequest at 'localhost:3004/items' from origin 'http://localhost:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
:3004/items:1 Failed to load resource: net::ERR_FAILED
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:83)

这个报错是由于跨域导致的错误,2个服务器端口不一致导致的,可以通过添加package.json的文件内容来解决这个问题:

"proxy": "http://localhost:3004"

然后修改index.js内容,重启服务,就正常了。

import React from 'react';
import ReactDOM from 'react-dom';
import TabelBasic from './antd/TabelBasic'
import axios from 'axios';

axios.get('/items').then((response) => {
    console.log(response);
});

ReactDOM.render(<TabelBasic /> ,document.getElementById('root'));
serviceWorker.unregister();

浏览器控制台打印下面的内容,说明get请求已经成功了

  1. data: (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
  2. status: 200
  3. statusText: "OK"
  4. headers: {access-control-allow-credentials: "true", cache-control: "no-cache", connection: "close", content-encoding: "gzip", content-type: "application/json; charset=utf-8", …}
  5. config: {url: "/items", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
  6. request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}

如何发送post请求呢?

拷贝一条数据,调用post请求发送方法,如下面的代码:

import React from 'react';
import ReactDOM from 'react-dom';
import axios from 'axios';

const newItem={
    "title": "再端到端",
    "price": 2000,
    "date": "2019-09-15",
    "monthCategory": "2018-9",
    "id": "_qmatbbwq0222",
    "cid": "622",
    "timestamp": 1536969600000
  }

axios.post('/items', newItem).then((response) => {
    console.log(response);
})

ReactDOM.render(<TabelBasic /> ,document.getElementById('root'));
serviceWorker.unregister();

结果如下所示:status的数值改变了

{data: {…}, status: 201, statusText: "Created", headers: {…}, config: {…}, …}
data: {title: "再端到端", price: 2000, date: "2019-09-15", monthCategory: "2018-9", id: "_qmatbbwq0222", …}
status: 201
statusText: "Created"
headers: {access-control-allow-credentials: "true", access-control-allow-origin: "http://localhost:3004/", access-control-expose-headers: "Location", cache-control: "no-cache", connection: "close", …}
config: {url: "/items", method: "post", data: "{"title":"再端到端","price":2000,"date":"2019-09-15","…tbbwq0222","cid":"622","timestamp":1536969600000}", headers: {…}, transformRequest: Array(1), …}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
__proto__: Object
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!