Vue-Cli中模拟后端接口返回数据

场景

有的时候我们需要从后台返回数据，但是后台没有提供这个接口，我们可以将数据打包到js文件中，然后向外暴露要使用的数据作为后台接口返回的数据

举例

模拟物流接口数据的返回

1. 网上所需要的数据接口
   http://www.kuaidi.com/index-ajaxselectcourierinfo-777047814861045-shentong-KUAIDICOM1632379610218.html

2. 创建wuliudata.js文件

export default [
	{
		"time": "2021-09-22 12:29:07",
		"context": "【济南市】包裹已签收！签收人是【工业北路老有福商店】，如有问题请联系陈洪良：，投诉电话： 速递期待再次为您服务！"
	},
	{
		"time": "2021-09-22 07:46:59",
		"context": "【济南市】【济南历城华山网点】的小哥陈洪良正在派件（可放心接听专属热线），投诉电话:"
	},
	{
		"time": "2021-09-22 07:46:18",
		"context": "【济南市】 快件到达【济南历城华山网点】"
	},
	{
		"time": "2021-09-21 13:31:12",
		"context": "【济南市】快件离开【济南转运中心】已发往【济南历城华山网点】"
	},
	{
		"time": "2021-09-21 13:20:56",
		"context": "【济南市】 快件到达【济南转运中心】"
	},
	{
		"time": "2021-09-20 20:00:52",
		"context": "【金华市】快件离开【义乌丰树转运中心】已发往【济南转运中心】"
	},
	{
		"time": "2021-09-20 19:53:35",
		"context": "【金华市】 快件到达【义乌丰树转运中心】"
	},
	{
		"time": "2021-09-20 15:24:41",
		"context": "【金华市】快件离开【义乌后宅网点】已发往【义乌丰树转运中心】"
	},
	{
		"time": "2021-09-20 15:00:17",
		"context": "【金华市】【义乌后宅网点】的占冬梅已取件。投诉电话:|出港查件"
	}
]

3. 根据组件的生命周期来进行加载上面导出的数据

// 由于后端还未提供接口，供临时测试使用
import wuliuList from './wuliudata.js'
export default {
  data(){
    return {
      // 物流数据
      wuliuList
    }
  },
  methods:{
       async showWuLiu(){
            this.toggleWuliuDialogVisible = true
	    // 此处接口没有返回结果，暂不处理
	    // let {data:res} = await this.$http.get('/kuaidi/123')
	    // console.log(wuliuList)
       }
  }
}		

效果图：

4. 然后根据数据渲染结构

<el-timeline>
  <el-timeline-item
		v-for="(item, index) in wuliuList"
		:key="index"
		:timestamp="item.time">
  	{{item.context}}
   </el-timeline-item>
</el-timeline>

效果图：