时间戳

首页 > 解决方案 > 如何在 html 中显示 sql 查询的结果？

javascript - 如何在 html 中显示 sql 查询的结果？

问题描述

我想在我的网页中显示 sql 查询的结果。我在服务器端使用 NodeJs，在客户端使用 VueJs。

我查询我的数据库，我得到了这个结果：

[
  {
    Time_Stamp: 2019-12-09T11:54:00.000Z,
    Time_Stamp_ms: 136,
    CadenceInstant195: 660,
    TempsCycle: 5388,
    Totalisateur195: 0,
    NCPoste1: 87,
    NCPoste2: 2649,
    NCPoste4: 503,
    NCPoste6: 1821,
    NCPoste7: 5590,
    EtatMachine: 0
  },
  {
    Time_Stamp: 2019-12-09T11:55:00.000Z,
    Time_Stamp_ms: 200,
    CadenceInstant195: 660,
    TempsCycle: 5395,
    Totalisateur195: 0,
    NCPoste1: 87,
    NCPoste2: 2649,
    NCPoste4: 503,
    NCPoste6: 1821,
    NCPoste7: 5590,
    EtatMachine: 0
  }
]

这个结果存储在我的 js 文件中的一个变量中，如下所示：

window.onload = function () {
    var consultation = new Vue({
        el:"#consultation",
        data: {
            data : []       
        },
        methods: {
            load: function() {
                this.$http.get("/data?startDate="+this.filtres.startDate+" "+this.filtres.startHour+"&endDate="+this.filtres.endDate+" "+this.filtres.endHour).then(function(response) {
                    this.data = response.body;
                    console.log(this.data);
                })
            }
        }
    })
}

该函数load()将查询抛出到数据库。

我的html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/style.css">

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

    <title>Historique</title>
</head>
<body>
    <div id="consultation">
            {{todos}}
    </div>
    <script src='/AffichageHistorique/js/vue.js'></script>
    <script src='/AffichageHistorique/js/vue-resource.min.js'></script>
    <script src='/AffichageHistorique/js/historique.js'></script>
</body>
</html>

现在我想将查询结果显示到我的网页中，但我不知道如何。当我写入{{data}}我的 HTML 代码时，它没有显示任何内容。任何想法？

标签： javascriptvue.js

解决方案

您的结果数据为数组格式，您需要循环数据并在 HTML 中绑定。使用 v-for 循环结果数据

  <ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})

推荐阅读