vue中使用mockjs

1.安装mockjs 和axios

npm install --save-dev mockjs
npm install --save axios

2.在src目录下创建mock文件夹,并创建index.js文件,内容如下:

import Mock from 'mockjs'

const data={ 
    "id":"@guid",
    "name":"@cname",
};

Mock.mock('/api/test', 'post', data)

export default Mock;

3.在main.js中引入mock文件下的index.js文件

import Mock from '@/mock'

4.App.vue中使用






5.常用数据占位符

//数据占位符使用
{
  "integer": "@integer(10, 30)",  //随机生成一个10~30之间的正整数
  "float": "@float(60, 100, 2, 2)",  //随机生成浮点数,参数分别为整数部分最小值和最大值、小数部分保留最小位数和最大位数
  "boolean": "@boolean",       //随机生成boolean
  "string|1-2": "@string",     //随机生成字符串
  "name":"@cname",             //随机生成名字

  "date": "@date(yyyy-MM-dd)", //按照格式随机生成时间
  "datetime": "@datetime",     //随机生成时间
  "now": "@now",               //当前时间

  "id": "@id",                 //随机生成一个 18 位身份证
  "guid": "@guid",             //随机生成一个 GUID
  "url": "@url",               //随机生成url字符串
  "email": "@email",           //随机生成邮箱
  "image": "@image(200x200)",  //随机生成一个大小为200x200的图片链接
  "title": "@title",           //随机生成一句标题,其中每个单词的首字母大写
  "upper": "@upper(@title)",   //把生随机成的标题全部转为大写
  "cparagraph": "@cparagraph", //随机生成一段中文文本
  "csentence": "@csentence",   //随机生成一段中文文本
  "range": "@range(2, 10)" ,   //返回一个内容从2开始到9的整型数组

  "region": "@region",         //随机生成地区 华中
  "province": "@province",     //随机生成省会 省
  "city": "@city",             //随机生成城市 市
  "county": "@county",         //随机生成一个(中国)县
  
  
}

可以使用 Easy Mock 模拟数据 https://easy-mock.com/project/5d15d0f5f406795ca1b8085b

Mock文档:https://github.com/nuysoft/Mock/wiki

你可能感兴趣的:(#,vue)