Node JS - 如何将某些内容打印到 HTML 页面答案

【问题标题】：Node JS - How can I print something to an HTML PageNode JS - 如何将某些内容打印到 HTML 页面
【发布时间】：2018-08-29 05:03:03
【问题描述】：

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

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

这是服务器 atm（对不起，变量和 cmets 是葡萄牙语，这是用于学校目的）

为英语目的更新了代码（也去掉了葡萄牙语 cmets）

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

【问题讨论】：

你能把你的一些变量名和 cmets 翻译成英文吗？这对你有很大帮助:-)
鉴于您使用的是 express，为什么不使用像 pug 这样的模板引擎呢？查看expressjs.com/en/guide/using-template-engines.html
我用英文变量更新了代码

标签： javascript html json node.js

【解决方案1】：

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

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

有many different template engines可供选择。

【讨论】：

似乎很简单，但他们说创建html页面并使用onload事件加载列表并显示它（在DOM表中，但我会尝试解决之后）
@Kami — 这是一个糟糕的主意，但如果你真的想这样做，那么要搜索的关键字就是 Ajax。范围太广，无法在此介绍。

【解决方案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>

看起来像：

杰克布

在客户端。

【讨论】：