返回多个站点的 HTTP 状态码

Question

下面的这个组件旨在根据data.json 文件返回不同站点的HTTP 状态代码。它目前将所有站点显示为“实时”，即使第二个站点不存在，因此应该显示“404”、“503”或“523”。 HTTP 状态代码 200 是“实时”站点的状态。我正在尝试为响应中的每个状态代码实现不同的消息。

ExampleComponent.vue

<template>
  <div class="container">
    <table class="table table-stripped table-hover" id="cont-table">
      <thead>
        <tr>
          <th>URL</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(site, index) in sites" :key="index">
          <td><a v-bind:href="getHref(site)" target="_blank">{{ site.url }}</a></td>
          <td v-if="site.status = 200"><span class="label label-success">Live</span>
          <td v-else-if="site.status = 404"><span class="label label-success">404</span></td>
          <td v-else-if="site.status = 503"><span class="label label-success">503</span></td>
          <td v-else-if="site.status = 523"><span class="label label-success">523</span></td>
        </tr>
      </tbody>
    </table>

  </div>
</template>

<script>
export default {
  data() {
    return {
      siteDataUrl: "./data.json",
      sites: []
    }
  },

  created: function () {
    this.loadData();
  },

  methods: {
    getHref: function (site) {
      if (!site.port) site.port = 80;
      return `https://${site.url}:${site.port}`;
    },

    loadData: function () {
      let self = this
      fetch(this.siteDataUrl)
          .then(r => r.json())
          .then((resp) => {
              self.sites = resp
              self.getStatus();
          });
    },

    getStatus: function () {
      let self = this;
      self.sites.forEach(function (site, index) {
          let url = `https://${site.url}`;
          if (site.port && site.port != 80 && site.port != 443) url += `:${site.port}`;

          fetch(url, { mode: 'no-cors'})
              .then((resp) => {
                  site.status = false;

                  if (resp.status == 200) site.status = 200;
                  if (resp.status == 404) site.status = 404;
                  if (resp.status == 503) site.status = 503;
                  if (resp.status == 523) site.status = 523;

                  self.$set(self.sites, index, site);
              })
      })
    }
  }
}
</script>

data.json

[
  {
    "name": "",
    "url": "www.google.com",
    "port": 80
  },
  {
    "name": "",
    "url": "www.foo.com",
    "port": 443
  }
]

Answer 1

问题可能出在v-if 和v-else-if 的情况下，它们错误地使用了assignment operator (=) 而不是equality operator。

它当前将site.status 设置为非零值，然后评估结果。由于第一个表达式的结果是200，所以第一个条件总是为真，导致模板渲染Live。

<td v-if="site.status = 200"><span class="label label-success">Live</span>
<td v-else-if="site.status = 404"><span class="label label-success">404</span></td>
<td v-else-if="site.status = 503"><span class="label label-success">503</span></td>
<td v-else-if="site.status = 523"><span class="label label-success">523</span></td>

正确的相等运算符是== 或===：

<td v-if="site.status == 200"><span class="label label-success">Live</span>
<td v-else-if="site.status == 404"><span class="label label-success">404</span></td>
<td v-else-if="site.status == 503"><span class="label label-success">503</span></td>
<td v-else-if="site.status == 523"><span class="label label-success">523</span></td>