Question

我想模拟API调用。我正在VueJS中编写一个应用程序，我目前正在从我创建的硬编码JSON文件中检索我的数据。

例如，来自我的App.vue：

<template>
  <p>{{ teams.yankees.city }}</p> // Will output "New York"
</template>

<script>
  import teams from './teams.json'

  export default {
    data() {
      return { teams }
    }
  }
</script>

来自我的teams.json文件：

{
  "yankees": [
    { "city": "New York", "established": 1901, "worldSeries": 27 } 
  ]
  ...
}

我现在可以成功地从我的本地JSON文件中检索我的数据 - 但是我怎样才能使用“函数存根”来检索数据，这样我将来可以交换真正的RESTful API调用？ / p>

是否有某个准系统资源，它显示了如何设置调用我的本地JSON文件的模拟休息服务？

Answer 1

使用json文件作为模拟数据，除了简单的http服务器外，你不需要任何东西。将teams.json文件放在项目目录中的某个位置，并使用您选择的http服务器提供它，例如simple, zero-configuration command-line http server。

然后使用Vue resource插件访问您的模拟数据：

{
  this.$http.get('http://localhost:8080/teams.json').then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });
}

我猜您不想在服务电话中对网址进行硬编码。我喜欢做的是有一个映射文件，我在其中定义资源名称并将它们映射到具体路径：

{
  teams: 'http://localhost:8080/teams.json'
}

这样我就可以在不改变业务代码的情况下在不同的资源位置之间切换。

如果您需要更复杂的内容，可以自行构建或查看现有服务，例如mockable.io或apiary.io。

使用Javascript

1 个答案: