將json對象從.json文件導出爲vue，並將其指定給變量

Question

我想在我的頁面上顯示我在dsa.json文件中的一些數據。我用vue使用express。

下面是從server.js我的代碼：

var data; 
fs.readFile('./dsa.json', 'utf8', (err, data) => { 
    if (err) throw err; 
    exports.data = data; 
}); 

這裏的代碼標籤<script>之間的index.html

var server = require(['../server']); 
var data = server.data; 
var scoreboards = new Vue({ 
    el: '#scoreboard', 
    data: { 
     students: data 
    } 
}); 

我使用requirejs（CDN），要求<script>標籤之間的服務器在index.html中。

index.html位於公共目錄中，而dsa.json和server.js位於主目錄中。

下面是我在客戶端得到錯誤：

require.min.js:1 GET http://localhost:3000/server.js 
require.min.js:1 Uncaught Error: Script error for "../server" 

我認爲它是與語境和範圍，但我不知道究竟是什麼。

我正在使用Chrome。

Answer 1

你的方法是完全錯誤的。你不能在你的頁面上包含服務器腳本。此外，我不是一個NodeJS忍者，但我不認爲導出數據內的數據將工作 - >exports.data = data。

解決方法：

服務器端：

const fs = require('fs'); 
const express = require('express'); 
const app = express(); 

const data = fs.readFileSync('./dsa.json', 'utf8'); // sync is ok in this case, because it runs once when the server starts, however you should try to use async version in other cases when possible 

app.get('/json', function(req, res){ 
    res.send(data); 
}); 

客戶端：

var xhr = new XMLHttpRequest(); 
xhr.open('GET', '/json', true); 
xhr.addEventListener('load', function() { 
    var scoreboards = new Vue({ 
    el: '#scoreboard', 
    data: { 
     students: JSON.parse(xhr.response) 
    } 
    }); 
}); 
xhr.addEventListener('error', function() { 
    // handle error 
}); 
xhr.send();