如果你不是前端开发人员，可以考虑使用 Vue.js。

假设你想做一个简单的网页，以美观的方式展示从 REST API 加载的 JSON 数据。用Vue.js实现起来很简单：只需安装 npm 包……等等！你绝对不需要为了网页上的几个脚本而安装或学习另一个服务器架构。只需用传统的引入方式引入 Vue.js 即可，这里提供开发版本（未经压缩，并带有实用的控制台日志）：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

接下来，您将使用一个新组件来显示数据循环，该组件是您将在稍后定义的宠物物品：

<div id="petApp">
    <div>
      <pet-item v-for="item in petList" v-bind:pet="item" v-bind:key="item.id"></pet-item>
    </div>
  </div>

虽然宠物物品定义是一个 Vue 模板，但您可以使用最简单的方式在脚本元素中定义：

<script type="text/javascript">
      Vue.component('pet-item', {
        props : [ 'pet' ],
        template: `
        <div>
          <h3>{{ pet.name }}</h3>
          <div>ID: {{ pet.id }}</div>
        </div>
      `
      })...

注意：请注意用于定义多行字符串的反引号，并非所有旧版浏览器都支持它。

该模板主要使用{{Mustache}}标签（除非另有说明，请参阅v-bind属性），但即使如此，如果您习惯了 Thymeleaf 模板，所有元素看起来也会很熟悉——如果您像我一样来自 Spring 世界（并且会像 Thymeleaf 一样有其特殊之处，请再次查看v-bind属性）。

注意：请务必记住，您的模板必须只有一个根元素（这里是一个 div）来包含所有内容。

当然，要查看任何内容，你需要一些数据。虽然你可以手动添加一些示例数据结构，但为什么不直接从 API 获取呢？我将使用对Swagger 演示宠物商店 API 的简单调用，具体来说，

https://petstore3.swagger.io/api/v3/pet/findByStatus?status=available

使用 Axios从 JavaScript 发起 REST 调用非常简单，以下是使用 Axios 获取数据的主要 Vue 应用程序代码（哈哈，我把这个简单的东西叫做“应用程序”）：

var petApp = new Vue({
  el : '#petApp',
  data () {
    return {
      petList: null
    }
  },
  mounted () {
    axios
      .get('https://petstore3.swagger.io/api/v3/pet/findByStatus?status=available')
      .then(response => {
          console.log(response.data)
          this.petList = response.data
      })
      .catch(error => {
        console.log(error)
      })
      .finally(() => this.loading = false)
  }
})

唯一额外的操作是，我希望将响应和错误（如果有）记录到浏览器控制台。此外，API 请求将在 Vue 的 mounted() 函数中发出，这几乎是最基本的使用场景（更多关于Vue 生命周期的信息请点击这里）。

说了这么多，当你在浏览器中加载 HTML 页面时，你会看到一些可以运行的东西，但是……就像这样丑陋不堪：

虽然能用，但是……呃。既然我们正在尝试，何不给这些 div 元素加上一些 Bootstrap 样式，让它们变成流动卡片呢？最终页面在这里，看起来会像下面的片段，根据屏幕宽度以 1、2、4 或 6 列的形式流动显示。

瞧？这么小的东西，我甚至懒得建个仓库。只需要一个 gist 就能开始使用 vue.js 和 axios 了。

#100DaysToOffload（作为挑战赛的一部分发布https://100daystooffload.com/）