[大数据]练习电商后台项目物流接口失效，使用json文件模拟接口调用数据

?练习电商后台管理系统项目的时候遇到?物流接口后台报错，不会解决后台问题，就使用获取json文件数据来模拟调用接口请求：

1.页面展示

?2.准备json文件及内容

这个json文件最好写在public文件夹下，因为http://localhost:8080/会自动访问到public文件夹下的内容

{
    "data": [
      {
        "time": "2018-05-10 09:39:00",
        "ftime": "2018-05-10 09:39:00",
        "context": "已签收,感谢使用顺丰,期待再次为您服务",
        "location": ""
      },
      {
        "time": "2018-05-10 08:23:00",
        "ftime": "2018-05-10 08:23:00",
        "context": "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
        "location": ""
      },
      {
        "time": "2018-05-10 07:32:00",
        "ftime": "2018-05-10 07:32:00",
        "context": "快件到达 [北京海淀育新小区营业点]",
        "location": ""
      },
      {
        "time": "2018-05-10 02:03:00",
        "ftime": "2018-05-10 02:03:00",
        "context": "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
        "location": ""
      },
      {
        "time": "2018-05-09 23:05:00",
        "ftime": "2018-05-09 23:05:00",
        "context": "快件到达 [北京顺义集散中心]",
        "location": ""
      },
      {
        "time": "2018-05-09 21:21:00",
        "ftime": "2018-05-09 21:21:00",
        "context": "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
        "location": ""
      },
      {
        "time": "2018-05-09 13:07:00",
        "ftime": "2018-05-09 13:07:00",
        "context": "顺丰速运 已收取快件",
        "location": ""
      },
      {
        "time": "2018-05-09 12:25:03",
        "ftime": "2018-05-09 12:25:03",
        "context": "卖家发货",
        "location": ""
      },
      {
        "time": "2018-05-09 12:22:24",
        "ftime": "2018-05-09 12:22:24",
        "context": "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
        "location": ""
      },
      {
        "time": "2018-05-08 21:36:04",
        "ftime": "2018-05-08 21:36:04",
        "context": "商品已经下单",
        "location": ""
      }
    ],
    "meta": { "status": 200, "message": "获取物流信息成功！" }
  }

?3.在组件中获取json文件里的数据

此时写法可以跟调用接口一样，只是将接口地址换成json文件的地址；这样接口修复好了直接修改地址就可以调用接口的数据，是不是很方便？

// 显示物流信息方法
        async showProgressBox() {
            this.progressVisible = true
            //'/kuaidi/1106975712662'这个接口不可用，使用wuliu.json里的模拟数据
            const {data: res} = await this.$http.get('http://localhost:8080/wuliu.json')
            if(res.meta.status !== 200) {
                return this.$message.error('获取物流信息失败！')
            }
            this.$message.success('获取物流信息成功！')

            this.progressInfo = res.data
        },

?4.将数据展示再页面上

<el-dialog title="物流进度" :visible.sync="progressVisible" width="50%">
        <el-timeline>
            <el-timeline-item v-for="(activity, index) in progressInfo" :key="index" :timestamp="activity.time">
            {{activity.context}}
            </el-timeline-item>
        </el-timeline>
        </el-dialog>

由于使用的vue版本比较低，所以这里使用时间线el-timeline组件需要在导入element ui的js中导入对应的文件

?

 import TimeLine from './timeline/index.js'
 import TimeLineItem from './timeline-item/index.js'

 Vue.use(TimeLine)
 Vue.use(TimeLineItem)

其中progressVisible和progressInfo都是定义在data里的数据

?