jsonファイルを.jsonファイルからexpressを介して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>タグ間のコードは、私が<script>タグ間のサーバーを必要とするrequirejs（CDN）を使用していたindex.html

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

にあります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();