javascript - 返回多个站点的 HTTP 状态码
问题描述
下面的这个组件旨在根据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>
数据.json
[
{
"name": "",
"url": "www.google.com",
"port": 80
},
{
"name": "",
"url": "www.foo.com",
"port": 443
}
]
解决方案
问题可能出在 and 的条件下v-if
,v-else-if
它错误地使用了赋值运算符( =
) 而不是相等运算符。
它当前设置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>
正确的相等运算符是==
or ===
:
<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>
推荐阅读
- csv - 如何在 Python 中使用预训练的 BERT 问答模型进行文本提取?
- node.js - 如何在一个房间中添加多个用户,例如节点 js 中的 whatsapp 组?
- python - 通过appium的Python android:有什么方法可以检测键盘类型?
- javascript - 访问父窗口上动态添加的元素
- c++ - 使用 omp_get_thread_num 索引全局向量是否安全?
- python - python:从收集计数器获取百分比
- kotlin - 这个语法是什么意思:Organization<(Currency, Coupon?) -> Sustenance>()
- python-3.x - 如何为 Pyinstaller 可执行文件指定文件夹?
- python - 将诗歌虚拟环境从 slim-image 复制到 alpine-image 并运行
- kubernetes - Tuned Operator 不激活自定义配置文件 (Openshift 4.6.18)