[JavaScript知识库]前端开发使用模拟数据的两个方式以及使用步骤：json-server和mock.js

? ? 作为前端开发人员，当后端还没有写好接口，但是我们又不想写静态的数据的话，可以使用模拟数据。

1、json-server和mock.js简介

? ? json-server:利用json-server，可以自己起一个本地的mock-server来完全模拟请求以及请求回来的过程。只需要提供一个json文件，或者写几行简单的js脚本就可以模拟出RESTful API的接口。还可以设置表连接。

更详细的json-server:json-server - npmhttps://www.npmjs.com/package/json-server

? ? mock.js:利用mock.js可以生成随机数、拦截AJAX请求、模拟后端数据等。

使用案例：mock.js 的作用 - 一个の人 - 博客园作用一：mock.js生成随机数据 mock.js支持各种数据的随机生成，官网也有具体的示例 它可以生成你想要的各种随机数据，这里我们用接口测试工具apipost演示一下mock.js生成随机数据。 https://www.cnblogs.com/xuezhongyu/p/15184185.html

更详细的可以访问mock.js官网：Mock.jshttp://mockjs.com/

2、?json-server的使用步骤

第一步：准备一个json文件,如db.json

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

第二步：下载json-server库

在json文件目录中打开powershell

npm install -g json-server

// 检查是否安装成功
$ json-server -v

第三步：启动服务（记得加watch实时监听，就不需要每回数据变化了都重启服务）

// --watch:开启实时监听 ? 也可以指定端口号
.\db.json：指定要启动哪个json文件 ?--port：指定端口号
json-server --watch .\db.json --port 8000

// 执行后的就产生了如图的接口，就可以向restful API一样使用。而且不存在跨域问题。

?3、json-server实现增删改查，实现表连接

? ? 3.1 查询

// 请求id为1的文章
axios.get('http://localhost:8000/posts/1'，{
           console.log(res.data)
          })

? ? 3.2 增

// 添加新的一篇文章(id会自己实现自增)
axios.post('http://localhost:8000/posts'，{
           title:'新增的文章的title'
           author:"新文章的作者"
          })

? ? 3.3 更新

? ? 替换式的更新：

// 替换式的更新,执行后对象中只有id和title了
axios.put('http://localhost:8000/posts/1'，{
              title:'修改了对象中的title'
          })

? ? ?补丁式的更新：

// 补丁式的更新,执行后对象中title的内容被修改了，其它的内容都不变
axios.patch('http://localhost:8000/posts/1'，{
          title:'修改了对象中的title'
          })

? ? 3.4 删除指定数据

// 删除第一篇文章
axios.delete('http://localhost:8000/posts/1')

? ? ?3.5 表关联（_embed）

// _embed:向下检索。在posts接口中，会先以posts接口中的文章为基础，向下根据postId找到每一篇文章的评论
// 请求文章的同时，将每一篇文章的对应评论变成属性comments[]一起取出来
axios.delete('http://localhost:8000/posts/?_embed=comments').then(res => {
    console.log(res.data)
})

? ? 3.6 表连接（_expand）

// _expand:向上检索。在comments接口中，会先以comments接口中的评论为基础，根据postId向上找到每一个评论对应的文章
// 请求评论的同时，将每一个评论的对应的文章变成属性post[]一起取出来
axios.delete('http://localhost:8000/comments/?_expand=post').then(res => {
    console.log(res.data)
})

?4、mock.js的使用案例（在react脚手架项目中）

第一步：安装

# 安装
npm install mockjs

第二步：创建mock文件

// src/mock/index.js
import Mock from 'mockjs'

// 模拟get请求的接口
Mock.mock('/api/getMyList', {
    list: [
        {
            title: "我是my中的数据1"
        },
        {
            title: "我是my中的数据2"
        },
        {
            title: "我是my中的数据3"
        }
    ]
})

Mock.mock('/api/getRefeList', {
    list: [
        {
            title: "我是推荐中的数据111111"
        },
        {
            title: "我是推荐中的数据222222"
        },
        {
            title: "我是推荐中的数据333333"
        }
    ]
})

第三步：将mock文件与项目建立关联，或者只关联需要用到mock数据的组件

// APP.js ?将mock和文件相关联
import './mock'
// 此时，就可以通过请求接口请求到mock数据了

第四步：请求该接口的数据

// 在需要mock数据的组件里请求数据
import axios from 'axios'


axios.get('/api/getMyList').then(res => {
                console.log(res.data.list)
            })

不同环境下的使用步骤：

https://github.com/nuysoft/Mock/wiki/Getting-Startedhttps://github.com/nuysoft/Mock/wiki/Getting-Started

?