Question

我有一个关于使用Node JS，AJAX等的问题。我正在尝试将JSON文件内容显示在我的HTML页面中。我可以将新对象保存到我的JSON文件中，但我似乎无法找到将它们放入所需HTML页面的好方法。到目前为止，这是我的代码。

＆＃13;

//Vai buscar a express library para utilização do servidor local;
var express = require("express");
//app vai ouvir requests de HTTP
var app = express();
//Require do body parser
var bodyParser = require('body-parser')
//fs requirement - para json
var fs = require("fs")

//Tem que se definir isto se quisermos ter directorias,assim nao precisamos de meter o caminho absoluto todas as vezes
app.use(express.static('public'))
//Utilização do express do bodyParser
app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())
//

//Mandar o fs ler o ficheiro (transformar em JSON), e depois converter o JSON para uma variável para que possa ser utilizada
var fsRead = fs.readFileSync("alunos.json")
var alunos = JSON.parse(fsRead)


//Aqui vai ou direccionar para um página,atraves do send file do res, ou imprimir mensagens com o send
app.get("/", function (req, res) {
    res.sendfile("/public/index.html");
});

//GET da criação de um novo aluno.
app.get('/formulario_get', function(req, res) {
    var response = {
        nome:"ola", //com o GET os parâmetros vêm por querystring
        morada:"morada"
        };
        console.log(response);
        res.send(JSON.stringify(response));
})
//POST do formulário do aluno
    //app.post("no formulário, na parte do action, meter aqui o nome para o servidor saber qual o pedido feito")
app.post('/processarFormulario', function(req, res, next){
    var aluno = {
        numero: req.body.numero,
        nome: req.body.nome, 
        morada: req.body.morada,
        notafinal: req.body.notafinal
    }
    alunos.push(aluno)
    console.log(alunos)
    res.redirect("index.html")
});
//vai imprimir para a consola em que port está a ouvir
var server = app.listen(8081, function () {
    console.log(alunos)
    console.log("Example app listening at http://%s:%s", server.address().address, server.address().port)
});

＆＃13;

这是服务器atm（很抱歉变量和评论是葡萄牙语，这是出于学校目的）

针对英语目的更新的代码（也取出了葡萄牙语评论）

＆＃13;

var express = require("express");

var app = express();

var bodyParser = require('body-parser')

var fs = require("fs")


app.use(express.static('public'))

app.use(bodyParser.urlencoded({extended: false}))
app.use(bodyParser.json())


var fsRead = fs.readFileSync("alunos.json")
var students = JSON.parse(fsRead)


app.get("/", function (req, res) {
    res.sendfile("/public/index.html");
});


app.get('/formulario_get', function(req, res) {
    var response = {
        name:"ola", //com o GET os parâmetros vêm por querystring
        address:"morada"
        };
        console.log(response);
        res.send(JSON.stringify(response));
})

app.post('/processarFormulario', function(req, res, next){
    var student = {
        number: req.body.number,
        name: req.body.name, 
        address: req.body.address,
        grade: req.body.grade
    }
    students.push(student)
    console.log(students)
    res.redirect("index.html")
});

var server = app.listen(8081, function () {
    console.log(students)
    console.log("Example app listening at http://%s:%s", server.address().address, server.address().port)
});

＆＃13;

Answer 1

不要使用静态HTML文件。改为写模板。

您正在使用Express。 This is covered in the documentation

有many different template engines可供选择。

Answer 2

基于第一条评论，我个人会推荐EJS。 EJS的外观和工作方式与HTML类似，它还支持在渲染时将变量发送到网页。例如：

index.js

app.set('view engine', 'ejs');

app.get('/', function(req, res){
    res.render('pages/index', {name: Jakeb});
});

index.ejs

<script>
    var name = <%= JSON.parse(name) %>;
    document.getElementById('name').innerHTML = name;
<script>
<p id='name'></p>

或

<p id='name'><%= JSON.parse(name) %></p>

这看起来像是：

Jakeb

在客户端。

Node JS - 如何在HTML页面上打印内容

2 个答案: