JSON-Objekt aus .JSON-Datei exportieren, um durch express zu vue und es der Variablen zuweisen

Question

Ich möchte auf meiner Seite einige Daten anzeigen, die ich in dsa.json Datei habe. Ich benutze Express mit Vue.

Hier ist mein Code aus der server.js:

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

Hier Code zwischen <script> Tags in index.html

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

I requirejs bin mit (CDN) zu verlangen, Server zwischen <script> Tags in index.html.

index.html befindet sich im öffentlichen Verzeichnis, dsa.json und server.js befinden sich im Hauptkatalog.

Hier sind die Fehler, die ich in dem Client erhalten:

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

Ich denke, es hat etwas mit Kontext und Umfang zu tun, aber ich weiß nicht, was genau.

Ich verwende Chrome.

Answer 1

Ihr Ansatz ist völlig falsch. Sie können das Serverskript nicht auf Ihrer Seite einschließen. Außerdem bin ich kein NodeJS Ninja, aber ich glaube nicht, dass das Exportieren der Daten innerhalb der Funktion funktioniert ->exports.data = data.

Die Abhilfe:

Server-Seite:

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); 
}); 

Kunde:

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();