前端项目模拟数据两种方式

最新推荐文章于 2024-05-17 09:06:10 发布

止步前行

最新推荐文章于 2024-05-17 09:06:10 发布

阅读量5.6k

点赞数 11

分类专栏：前端文章标签： mockjs json-server 前端模拟数据

本文链接：https://blog.csdn.net/zxd1435513775/article/details/124589734

版权

前端专栏收录该内容

15 篇文章 1 订阅

订阅专栏

对前后端分离的项目，前端开发需要联调接口，如果后台服务的接口进度比前端的慢，除了等待，还可以进行本地数据的模拟。通过数据模拟，前端人员可以不依赖API开发，而在本地搭建一个JSON服务，自己产生测试数据。

在项目中mock（模拟数据）数据，可以把它当真实接口数据用。

1. Mock.js

Mock.js官方网站：http://mockjs.com/

官网很简单明了的一句话：生成随机数据，拦截 Ajax 请求

Mock.js会拦截ajax请求，并不会将请求真的发出去，只是项目本地随机生成的数据。

模拟的数据一般：对象、数组

// 表示随机生成1-10次我爱你
{
    'a|1-10':'我爱你'
}

mock（模拟数据）数据需要使用到mockjs模块，所以需要在项目中进行引入。

不同的项目引入的方式不同，可以参考官网

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

本文在Vue项目中引入，正好官网也没有描述到。

1.1 安装依赖包mockjs

npm install --save mockjs

1.2 在 src 目录下创建 mock 文件夹

在这里插入图片描述

1.3 准备模拟的数据

准备 json 数据，mock 文件夹中创建相应的 json 文件，json 数据需要格式化，如上图

注意：在模拟数据时，如果需要用到图片，要把mock数据需要的图片放置于public文件夹中！！！public 文件夹在打包的时候，会把相应的资源原封不动打包到 dist 文件夹

例如：banner.json数据

[
  {
    "id": "1",
    "imgUrl": "/images/banner1.jpg"
  },
  {
    "id": "2",
    "imgUrl": "/images/banner2.jpg"
  },
  {
    "id": "3",
    "imgUrl": "/images/banner3.jpg"
  },
  {
    "id": "4",
    "imgUrl": "/images/banner4.jpg"
  }
]

对于mock其他的使用示例，可以参考官网：

http://mockjs.com/examples.html

1.4 创建 mockServer.js

创建mockServer.js通过 mock 插件实现模拟数据。这个mockServer.js文件名随便写，并不一定要这个。

//  先引入mockjs模块
import Mock from 'mockjs'

// 把Json数据格式引入进来【Json数据格式根本没有对外暴露，但是可以引入】
// webpack默认对外暴露的：图片、json数据格式
import banner from './banner.json'

// mock数据：第一个参数请求地址，第二个参数请求数据
Mock.mock('/mock/home/banner', { code: 200, data: banner })

注意：

对于上面存放模拟数据的banner.json文件，并没有对外暴露，但在mockServer.js中却可以使用。这个因为对于webpack当中一些模块：图片、json，不需要对外暴露，因为默认就是对外暴露。

最后通过Mock.mock()方法进行模拟数据

1.5 引入mockServer.js

mock需要的数据和相关mock模块编写完毕后，mockServer.js需要执行一次，如果不执行，那就相当于没写一样。所以需要在main.js的入口文件中引入mockServer.js

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from '@/store'

// 引入mockServer.js
import '@/mock/mockServer'

Vue.config.productionTip = false

new Vue({
  render: (h) => h(App),
  // 注册路由信息，当这里书写router的时候，组件身上都拥有$route,$router属性
  router,
  // 注册仓库，组件实例的身上会多一个属性$store属性
  store,
}).$mount('#app')

1.6 配置Axios请求

在API文件夹中创建mockRequest.js，对于正式联调的请求建议分开。如下图：request.js用于正在与后台联调发送的请求，mockRequest.js则专门用于获取模拟数据用的axios实例。两份代码一模一样，但配置的baseURL不同。

在这里插入图片描述

import axios from 'axios'

// 利用axios对象的create方法，去创建一个案axios实例
// requests就是案axios，只不过稍微配置一下
const requests = axios.create({
  // 配置对象
  // 基础路径，发请求的时候，路径当中会出现api
  baseURL: '/mock',
  timeout: 5000,
})

// 请求拦截器，在发请求之前，请求拦截器可以检测到，可以在请求发出去之前做一些事情
requests.interceptors.request.use((config) => {
  // config配置对象，对象里面有一个属性很重要，headers请求头
  return config
})

// 响应拦截器
requests.interceptors.response.use(
  (res) => {
    return res.data
  },
  (error) => {
    return Promise.reject(new Error('failed'))
  }
)

export default requests

1.7 编写接口

// 用于发送真正的请求与后台联调
import requests from './request'
// 专门用于mock数据用的请求
import mockRequests from './mockRequest'

export const reqCategoryList = () => {
  return requests({
    url: '/product/getBaseCategoryList',
    method: 'get',
  })
}

// 调用的是mockRequests发送请求
export const reqBannerList = () => {
  return mockRequests({
    url: '/home/banner',
    method: 'get',
  })
}

在开发项目时切记，某一个功能完毕后，一定要进行单元测试，看看数据是否OK

2. json-sever

下面介绍下另一种模拟数据的方式：json-server，json-server是一个在前端本地运行，可以存储json数据的server

json-server官网：https://github.com/typicode/json-server#getting-started

2.1 全局安装

使用npm全局安装json-server：

npm install -g json-server

可以通过查看版本号，来测试是否安装成功：

json-server -v

在这里插入图片描述

2.2 创建json数据

在任意一个文件夹下，在命令行执行代码，会自动在文件夹下创建出一个db.json文件

json-server --watch db.json

在这里插入图片描述

根据结果提示，可以在浏览器中访问 http://localhost:3000，看到如下页面：

在这里插入图片描述

可以分别点击/posts /comment /profile 链接，看下请求地址和内容

在这里插入图片描述

再来查看下自动生成的db.json文件里数据

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

可以发现/posts、/comment、/profile 分别是db.json里面的子对象

json-server把db.json根节点的每一个key，当作了一个router，可以根据这个规则来编写测试数据

2.3 修改端口号

从上面启动日志可以看到，json-server默认是3000端口，但也可以自己指定端口，指令如下：

json-server --watch db.json --port 3001

上面的启动命令有点长，可以考虑使用package.json文件来管理启动命令，在db.json同级文件夹下新建一个package.json，编写如下配置信息：

{
    "scripts": {
        "mock": "json-server db.json --port 3001"
    }
}

再启动服务时只需要执行如下指令：

npm run mock

2.4 配置静态资源

对于静态资源的配置，可以通过命令行来配置，但这样配置会让命令变的很长且容易出错，json-server提供了把所有配置放到一个配置文件中，在启动命令时指定此配置文件，配置文件一般命名为json_sever_config.json

# json_sever_config.json
{
  "port": 3004,            
  "watch": true,           
  "static": "./public",
  "read-only": false, 
  "no-cors": false, 
  "no-gzip": false
}

# package.json
{
    "scripts": {
        "mock": "json-server --c json_sever_config.json db.json"
    }
}

通过上面配置，可以把一些静态资源放在public目录中。

2.5 简单使用

db.json文件里测试数据：

{
    "players": [
        {
            "id": 1,
            "name": "Kobe",
            "age": 36
        },
        {
            "id": 2,
            "name": "Jordan",
            "age": 42
        },
		{
            "id": 3,
            "name": "James",
            "age": 33
        },
		{
            "id": 4,
            "name": "Harden",
            "age": 26
        },
		{
            "id": 5,
            "name": "Curry",
            "age": 26
        }
    ],
    "users": [
        {
            "name": {
                "userName":"admin",
                "nickName":"admin"
            },
            "pwd": "123456"
        },
        {
            "name": {
                "userName":"zhangsan",
                "nickName":"zhangsan"
            },
            "pwd": "123456"
        },
        {
            "name": {
                "userName":"lisi",
                "nickName":"lisi"
            },
            "pwd": "123456"
        }
    ]
}