前端mock数据使用简单demo

1、安装

npm i mockjs --save
var Mock = require(‘mockjs’)

2、模拟数据的两种方式

1.数据模板
2.数据占位符

详见 https://github.com/nuysoft/Mock/wiki/Syntax-Specification

3、主要方法

3.1 Mock.mock()
完整用法:

Mock.mock(url, type, template|function)
  • url: 请求的地址
  • type: 请求的方法
  • template: 请求的数据模板
  • function: 用于生成请求数据的函数,传入一个参数function(options),options有三个属性(url,type,body),前面两个属性和上文的url和type一样,body中带有请求的一些参数

3.2 Mock.setup()

配置拦截 Ajax 请求时的行为
作用之一:设置异步
例子

Mock.setup({
    Timeout: 400
})
Mock.setup({
    Timeout: '200-600'
})

4、具体例子,在vue中使用(我在项目中的用法)

1.创建mockdata文件夹,新建两个文件:data.js和index.js,名字可以自定义,一个作为数据源文件,一个处理请求简单逻辑
Random.* 的用法详见第二点的第二小点

2.mockdata/data.js

/****************************************************************************************/
// mockdata/data.js文件

const Random = require('mockjs').Random
const total = 120 
/** 
 *  uid 序号
 *  title 标题
 *  author 作者
 *  moduleName 所属板块
 *  createTime 创建时间
 *  reading 阅读
 *  focus 关注
 *  good 点赞
 *  forum 评论
 *  status 状态
 */
const tiezi = Array(total).fill().map((item, idx) => {
    let reading = Random.integer(1, 99999) 
    return {
      uid: idx + 1,
      title: Random.ctitle(7, 13),
      author: Random.cname(),
      moduleName: Random.pick(
        ['早筛', '肺癌', '治疗', '提问', '肠癌']
      ),
      createTime: new Date(Random.datetime('yyyy/MM/dd HH:mm:ss')),
      reading: reading,
      focus: Random.integer(reading/50, reading/10),
      good: Random.integer(reading/10, reading/5),
      forum: Random.integer(reading/100, reading/50),
      status: Random.pick(
        ['待审核', '已审核', '未通过', '封贴']
      )
    }
  })

  let data = {
    tiezi: tiezi
  }
  export default dat

3.mockdata/index.js文件

/****************************************************************************************/
// mockdata/index.js

var Mock = require('mockjs')

import _data from './data'

/**
 *  @request query
 *  type 请求数据类型(tiezi,tiwen),默认为tiezi
 *  page 请求页数,默认为1
 *  pageSize 每页数据条数,默认为10
 * 
 * @repsonse data
 *  type 请求数据类型(tiezi,tiwen),默认为tiezi
 *  page 请求页数,默认为1
 *  pageSize 每页数据条数,默认为10
 *  data 表格数据
 *  total 数据总数
 *  
 */

function mockData(_query) {
    let query = _query || {}
    let page = query.page || 1
    let pageSize = query.pageSize || 10
    let type = query.type || 'tiezi'
    let total = _data[type].length
    console.log(query)
    let data = _data[type].filter((item, index) => {
        return (index >= (page-1)*pageSize) && (index <= page*pageSize-1)
    })
    return {
        type: type,
        page: page,
        total: total,
        data: data,
        pageSize: pageSize
    }
}

// Mock.mock( url, post/get , 返回的数据)
/**
 * options: {
 *  url: 请求地址,
 *  type: 请求方式get/post
 *  body: 请求参数,注意类型是字符串
 *  }
 */
Mock.mock('/table/list', 'get', (options) => {
    console.log(options)
    // 这里的options.body类型为字符串,传入的时候要转化一下,将其转成json格式。这里我偷懒,就没写了。。。
    return mockData(options.body)
});

Mock.setup({
    timeout: '200-600'
})

4.main.js和components

/****************************************************************************************/
// main.js文件

require('./mockdata')

/****************************************************************************************/
// components/*

this.$http({
    url: '/table/list',
    method: 'GET',
    data: {
      name: 'XYTang'
    }
}).then((resp) => {
    console.log(resp)
})

你可能感兴趣的:(web前端)