Question

我想在我的页面上显示我在dsa.json文件中的一些数据。我正在使用express与vue。

这是来自server.js的代码：

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

此处的代码来自index.html

中的<script>个代码

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

我使用requirejs（CDN）在index.html中的<script>标记之间要求服务器。

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忍者，但我认为导出函数内的数据不会起作用 - ＆gt; 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();

从.json文件导出json对象到通过express发送并将其分配给变量

1 个答案: