014前端数据模拟

本文介绍了如何在前端开发中使用Mock.js进行数据模拟,以及如何结合axios进行API请求,展示了如何创建和使用数据模板来生成动态数据,如日期、随机数和图片URL。
摘要由CSDN通过智能技术生成

MOCK
只是在前端开发阶段用到
基于需要的数据格式生产字段

指定拦截请求,然后返回数据格式
需要安装axios,mockjs

import Mock from 'mockjs'

Mock.mock('/product/search',{
    "ret":0,
    "data":
    {
        "mtime": "@datetime",
        "score|1-800":1,
        "rank|1-100":1,
        "stars|1-5":1,
        "nickname":"@cname",
        "img":"@image('200x100','#ffcc33','#FFF','png','Fast Mock')"
    }
});
<template>
  <div id="app">
    <img alt="Vue logo" :src="img">
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'App',
  data:function(){
    return{
      img:""
    }
  },

  mounted:function(){
    axios.get("/product/search").then(res=>{
      console.log(res.data.data.img)
      this.img = res.data.data.img
    })
  }
}
</script>

数据模版
“属性名字|规则”:value
查官方文档
例如
‘name|min-max’:string
重复输出字符串,吃饭次数结余min-max
var data = Mock.mock({
‘name|1-3’:‘a’, 1到3次
})

还要很多@date类型的数据

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值