数据模拟-Mockjs和json-server

  • mock和json-server都是一种模拟数据的手段,当今时代,前后端分离开发模式已经是web开发的是主流了,我们不可能等后端的接口开发完毕了,在进行前端的页面的接口测试,因此前端开发工程师们就想出了一种能够模拟数据并且截获对应接口的网络请求,返回我们模拟的数据的方法,其中最为常见的就是:mockjs,josn-server以及apiFox了,鉴于我们之前已经使用(学习)过mockjs的基本使用,那么这篇博客就直入主题了,重点讲解mock和json-server的基本使用

json-server

  • 官方文档
  • json-server是一个在前端本地运行，可以存储json数据的server。通俗来说，就是模拟服务端接口数据，一般用在前后端分离后，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。相当于一个服务器与数据库的简易结合体。

使用步骤:

  • 下载:
npm install -g json-server
  • 启动json-server
json-server --watch db.json
  • 随后项目文件夹中会自动生成db.json(相当于低配版的数据库)文件夹,里面就有我们初始化的模拟数据,我们可以对这些数据进行增删改查
/* -------- db.json ----------- */
{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}
/* 此时我们可以修改(新增或删除)里面的数据再通过终端中对应的端口号来获取这些数据数据 */

image

  • 修改端口号(修改为5000)
json-server --watch db.json --port 5000
  • 我们也可以通过创建package.json文件来创建指令脚本和管理包版本
npm init
  • 在我们创建好db.json后,这个db.json就相当于我们临时的数据库,我们可以通过发送网络请求来对里面的数据进行增删改查(注意:json-server中内置一个字段,也就是生成的db.json中所有的数据内置一个id字段,用于指向这条数据,我们不能占用它)

代码展示:(增删改查)

  • 操作顺序为:

    1. 发送get请求获取db.json中figures中的书有数据信息
    2. 发送post请求给db.json中的figures中新增 {name:诸葛亮,职位:军师}的数据,id是自增的
    3. 发送get请求查找db.json中 figures 中的id=3且name=关羽的数据
    4. 发送put(覆盖修改)请求将db.json中figures中的id=4的数据,将name改为孔明,职位改为军师
    5. 发送patch(按需修改)请求将db.json中 figures 中的id=4(孔明)的数据,将职位改为监军
    6. 发送delete请求删除db.json中的 figures 中 id=4 的数据(删除孔明)

  • db.json(相当于数据库)

{
  "figures": [
    {
      "id": 1,
      "name": "刘备",
      "职位": "主公"
    },
    {
      "id": 2,
      "name": "张飞",
      "职位": "武将"
    },
    {
      "id": 3,
      "name": "关羽",
      "职位": "马弓手"
    }
  ]
}
  • index.html(前端页面)
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>json-server前端页面</title>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>

<body>
    <button id="get">get获取所有数据</button><br><br>
    <button id="post">post新增数据</button><br><br>
    <button id="getSearch">get查找数据</button><br><br>
    <button id="put">put修改数据</button><br><br>
    <button id="patch">patch修改数据</button><br><br>
    <button id="delete">delete删除数据</button>

    <script>
        // 获取dom元素
        var get = document.querySelector('#get')//获取所有数据
        var post = document.querySelector('#post')//新增数据
        var getSearch = document.querySelector('#getSearch')//查找数据
        var put = document.querySelector('#put')//修改数据1
        var patch = document.querySelector('#patch')//修改数据2
        var Delete = document.querySelector('#delete')//删除数据

        // 1. get(获取所有数据) => 获取db.json中 figures 的所有数据
        get.onclick = () => {
            axios.get('http://localhost:3000/figures').then(res => {
                console.log(res.data);
            })
        }

        // 2. post(新增数据) => 向db.json中的 figures 中新增 {name:诸葛亮,职位:军师},id是自增的
        post.onclick = () => {
            axios.post('http://localhost:3000/figures', {
                "name": "诸葛亮",
                "职位": "军师"
            },).then((res) => {
                console.log(res.data);
            })
        }

        // 3. get(查找数据对应的数据) => 查找db.json中 figures 中的id=3且name=关羽的数据
        getSearch.onclick = () => {//切记这里拼接上字符串不能带""
            axios.get('http://localhost:3000/figures?id=3&name=关羽').then(res => {
                console.log(res.data);
            })
        }

        // 4. put(修改对应的数据) => 将db.json中 figures 中的id=4的数据,将name改为孔明,职位改为军师
        // 他会找到db.json中对应的数据,再用你传过去的数据覆盖掉原来的数据
        put.onclick = () => {
            axios.put('http://localhost:3000/figures/4', {
                "name": "孔明",
                "职位": "军师"
            }).then(res => {
                console.log(res.data);
            })
        }

        // 5. patch(修改对应的数据) => 将db.json中 figures 中的id=4的数据,将职位改为监军
        // 他会找到db.json中对应的数据,然后按需修改原来数据中对应的你传过去的属性
        patch.onclick = () => {
            axios.patch('http://localhost:3000/figures/4', {
                "职位": "监军",
            }).then(res => {
                console.log(res.data);
            })
        }

        // 6. delete(删除对应的数据) => 删除db.json中的 figures 中 id=4 的数据(删除孔明)
        Delete.onclick = () => {
            axios.delete('http://localhost:3000/figures/4').then(res => {
                console.log(res.data);
            })
        }
    </script>
</body>

</html>
  • 结果展示:
    image

同时json-server还支持类似数据库的语句操作和静态资源部署

  1. 数据库的语句操作:(get请求)

    1. 模糊搜索: 我们可以在url上拼接上q字段来进行模糊搜索 =>http://localhost:3000/figures?q=1, 表示搜索db.json中figures中 任意属性带1的所有数据
    2. 分页搜索: 分页采用_page来设置页码，_limit来控制每页显示条数。如果没有指定 _limit ，默认每页显示10条 => http://localhost:300figures?_page=1&_limit=2, 表示搜索db.json中figures中 第一页的前两条数据
    3. 排序 : 排序采用 _sort 来指定要排序的字段， _order 来指定排序是正排序还是逆排序（asc | desc ，默认是asc）=> http://localhost:3000/figures?_sort=id&_order=desc, 表示根据id的倒序排序获取所有数据
    4. 取局部数据: Slice 采用 __start 来指定开始位置，_ _end 来指定结束位置, 或者是用_limit来指定从开始位置起往后取几个数据 => http://localhost:3000/figures?_start=0&_end=2, 表示由0开始,获取到2的数据
    5. 更加细致的过滤条件:
      1. 采用 _gte _lte 来设置一个取值范围 => http://localhost:3000/figures?id_gte=5&id_lte=9,表示获取figures中,id由5到9的数据
      2. 采用_ne来设置不包含某个值 => http://localhost:3000/figures?id_ne=1&id_ne=2&id_ne=3, 表示获取figures不包含 id为1,2,3的数据
      3. 采用_like来设置匹配某个字符串 => http://localhost:3000/figures?id_like=9, 表示匹配figures中id属性为9的数据
    6. 等等……..

  2. 静态资源部署

    1. 在项目的根目录中创建json_sever_config.json文件
    {
      "port": 3000,			// 端口号          
      "watch": true,		// 开启可被监听
      "static": "./public",	// 部署的静态资源目录
      "read-only": false, 	// 关闭只读模式
      "no-cors": true, 		// 允许跨域请求
      "no-gzip": false		// 关闭gzip
    }
    1. 重新启动项目(加上我们刚刚配置的json_sever_config.json文件)
    json-server --watch db.json json_server_config.json
    1. 结果展示:

image

Mockjs

  • 官方网站

  • 官方文档

  • 在往期的博客我已经介绍过mock的基本使用了,那么在这篇博客中我们就再一次讲解一下吧!

  • 使用mock我们可以拦截对应的ajax接口请求,然后返回我们自己模拟的数据,这些数据可以是我们自己设置好的,也可以是使用mock模拟出来的

使用步骤:

  • 安装mock
npm i mockjs
  • 使用mock模拟数据
/* --------- 使用mock模拟数据 ----------- */

// 1. 引入mock
const Mock = require("mockjs")

// 2. 使用mock模拟数据(生成10个人的数据)
var ourData = []
var count = 10

for(var i= 0; i < count; i++){
    ourData.push(
        Mock.mock({
            id:Mock.Random.guid(),//随机生成id
            name:Mock.Random.cname(),//随机生成中文名
            addr: Mock.mock('@county(true)'),//随机生成地址
            headpic:Mock.Random.image('100x100', 'image')//随机生成100x100,文字:个人头像,天蓝色
        })
    )
}

module.exports = ourData
  • 使用mock返回自己设置的数据(本地数据)
/* --------- 使用mock拦截请求,返回我们自己的数据 ----------- */
module.exports =  [
    {
        id:1,
        name:'刘备',
        position:'主公'    
    },
    {
        id:2,
        name:'张飞',
        position:'武将'
    },
    {
        id:3,
        name:'关羽',
        position:'马弓手'
    },
    {
        id:4,
        name:'诸葛亮',
        position:'军师'
    }
]
  • app.js中运行服务器(express)
const express = require('express')
const app = express()

// 引入mock数据
const mockData = require('./mockData/mockData.js')
const ourData = require('./mockData/ourData.js')

// 1. 返回mock模拟的数据
app.get('/mockData',(req,res)=>{
    res.send(mockData)
})

// 2. 返回我们自己写的数据(本地数据)
app.get('/ourData',(req,res)=>{
    res.send(ourData)
})


app.listen(3000,()=>{
    console.log('服务器已启动,3000端口正在监听');
})

结果展示:

  • 返回mock模拟数据
    image

  • 返回我们自己设置的数据(本地数据)
    image

接口拦截功能:

  • 还是同一个项目,这次我们建立一个前端页面用于发送网络请求,同时在该前端页面中以cdn的方式引入Mock并设置一个按钮,点击发送网路请求去请求上面我们自己写的mock数据(ourData)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>接口拦截</title>
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

    <!-- （必选）加载 Mock -->
    <script src="http://mockjs.com/dist/mock.js"></script>
</head>
<body>
    <button id="send">发送请求(mock拦截)</button>

    <script>
        // 使用mock拦截网络请求
        Mock.mock('http://localhost:3000/ourData',{msg:'请求拦截成功!'})

        var send = document.querySelector('#send')
        // 发送网络请求去向服务器请求数据(ourData我们自己写的数据)
        send.onclick = ()=>{
            axios.get('http://localhost:3000/ourData').then(res=>{
                console.log('数据请求成功!',res.data);
            })
        }
    </script>
</body>
</html>
  • 结果展示:
    image

Mock在vue项目中实现请求接口拦截返回模拟数据

实现步骤:

  1. 模拟数据:与上面的一致(ourData,mockData)
  2. 创建mock拦截器(在项目根目录下创建Mock文件夹里面创建index.js)
// mock设置:拦截请求,返回我模拟的数据
import Mock from 'mockjs'
import mockData from './mockData/mockData'
import ourData from './mockData/ourData'
Mock.mock('http://localhost:3000/mockData','get', mockData)//拦截对应的接口返回我们自己模拟的数据(Mock模拟的数据)
Mock.mock('http://localhost:3000/ourData', 'get',ourData)//拦截对应的接口返回我们自己模拟的数据(我们自己写的数据)
  1. 在Vue项目中的main.js中引入全局Mock拦截器
/* ------------------- Vue项目中的main.js ---------------------- */
// ..........
require('../mock/index.js');//全局引入mock拦截器
// ..........
  1. 这样以后我们在整个项目中只要发送get网络请求的url与mock拦截器中的一致,那么这个请求都会被拦截到然后返回mock设置好的数据