vue+mockjs模擬數據以及list分頁功能

vue+mockjs模擬數據以及list分頁功能

msyrrr關注

0.1442019.06.01 10:30:30字數 132閱讀 2,317

第一步：安裝mockjs

npm install mockjs --save-dev

第二步：創建 mock.js 文件

//mock.js 文件

import Mock from 'mockjs' // 引入mockjs

const Random = Mock.Random // Mock.Random 是一個工具類，用於生成各種隨機數據

const dataList = [] // 用於接受生成數據的數組

for (let i = 0; i < 26; i++) { // 可自定義生成的個數

  const template = {

    'Boolean': Random.boolean, // 可以生成基本數據類型

    'Natural': Random.natural(1, 10), // 生成1到100之間自然數

    'Integer': Random.integer(1, 100), // 生成1到100之間的整數

    'Float': Random.float(0, 100, 0, 5), // 生成0到100之間的浮點數,小數點後尾數爲0到5位

    'Character': Random.character(), // 生成隨機字符串,可加參數定義規則

    'String': Random.string(2, 10), // 生成2到10個字符之間的字符串

    'Range': Random.range(0, 10, 2), // 生成一個隨機數組

    'Date': Random.date(), // 生成一個隨機日期,可加參數定義日期格式

    'Image': Random.image(Random.size, '#02adea', 'Hello'), // Random.size表示將從size數據中任選一個數據

    'Color': Random.color(), // 生成一個顏色隨機值

    'Paragraph': Random.paragraph(2, 5), // 生成2至5個句子的文本

    'Name': Random.name(), // 生成姓名

    'Url': Random.url(), // 生成web地址

    'Address': Random.province() // 生成地址

  }

  dataList.push(template)

}

// list 分頁接口()

Mock.mock('http://localhost:8080/api/list', 'post', (params) => {

  var info = JSON.parse(params.body)

  var [index, size, total] = [info.pageIndex, info.pageSize, dataList.length]

  var len = total / size

  var totalPages = len - parseInt(len) > 0 ? parseInt(len) + 1 : len

  var newDataList = dataList.slice(index * size, (index + 1) * size)

  return {

    'code': '0',

    'message': 'success',

    'data': {

      'pageIndex': index,

      'pageSize': size,

      'rows': newDataList,

      'total': total,

      'totalPages': totalPages

    }

  }

})

第三步：main.js 文件引入mock.js 文件 （或者引入你需要的某個文件中也可以）

require('./utils/mock.js')

第四步：使用

listParams = {

        pageIndex: 0,

        pageSize: 10

 }

async getList() {

         const result = await ajax.post('[http://localhost:8080/api/list'], JSON.stringify(this.listParams));

      if (result.code === '0') {

        this.tableData = result.data.rows

        this.initPager.total = result.data.total

      }

    }

*注意：1、如果開發中有用後臺的域名, mockjs中定義接口加上本地的主機名，不然會有跨域的問題