如何在Vue.js前端展示Node.js返回的SQL查询结果？

Hey, let's break down the issues here and fix your data display problem step by step!

Key Issues & Fixes #

1. Template Variable Mismatch

First, your HTML template uses {{todos}} but your Vue instance's data only defines a data array. These names need to match. Even if you fix that, directly rendering {{data}} will just show [object Object],[object Object] since it's an array of objects—so we'll use v-for to display the actual content properly.

2. Potential this Binding Problem

In your load method, using a regular function in .then() might cause this to not point to the Vue instance (though sometimes Vue handles this, it's safer to use an arrow function to guarantee the correct context).

3. Uninitialized filtres Variable

Your load method references this.filtres.startDate etc., but filtres isn't defined in your data—this will cause errors when making the request, leading to no data being returned.

Modified Working Code #

HTML (Updated Template)

<!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">
    <!-- Loop through each data item to display readable content -->
    <div v-for="(record, index) in data" :key="index" class="data-record">
      <p><strong>Timestamp:</strong> {{ record.Time_Stamp }}</p>
      <p><strong>Cadence:</strong> {{ record.CadenceInstant195 }}</p>
      <p><strong>Machine State:</strong> {{ record.EtatMachine }}</p>
      <!-- Add other fields you want to display here -->
      <hr>
    </div>

    <!-- Optional: Show raw data structure for debugging -->
    <pre>Raw Data: {{ data }}</pre>
  </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>

JavaScript (Updated Vue Instance)

window.onload = function () { 
  var consultation = new Vue({ 
    el:"#consultation", 
    data: { 
      data : [],
      // Initialize filtres to avoid undefined errors
      filtres: {
        startDate: '',
        startHour: '',
        endDate: '',
        endHour: ''
      }
    }, 
    methods: { 
      load: function() { 
        // Use template literals for cleaner URL construction
        const requestUrl = `/data?startDate=${this.filtres.startDate} ${this.filtres.startHour}&endDate=${this.filtres.endDate} ${this.filtres.endHour}`;
        
        // Arrow function ensures `this` points to the Vue instance
        this.$http.get(requestUrl)
          .then((response) => { 
            this.data = response.body; 
            console.log('Loaded data:', this.data); 
          })
          // Add error handling to debug failed requests
          .catch((error) => {
            console.error('Failed to fetch data:', error);
          })
      } 
    },
    // Auto-load data when the component is mounted
    mounted() {
      this.load();
    }
  }) 
}

Explanation of Changes #

• Matching Variable Names: The template now uses data (matching your Vue instance's data property) and v-for to iterate over each record in the array.
• Correct this Binding: Arrow functions in .then() ensure this.data refers to the Vue instance's data array, so the response is properly assigned.
• Initialized filtres: Prevents undefined errors when building the request URL.
• Error Handling: The .catch() block helps debug if the request itself is failing (e.g., wrong URL, backend issues).
• Auto-Load Data: The mounted hook calls load() automatically when the Vue instance is ready, so you don't have to trigger it manually.

内容的提问来源于stack exchange，提问作者MissKnacki