为什么“res.sendFile()”函数（Express.js）不适用于“pug”文件？

Question

我正在学习在 mongodb 中使用 express。我有这段代码，它可以工作（但它不包括“pug”文件）

var express = require("express");
var app = express();
var port = 3000;
var bodyParser = require("body-parser");
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

var mongoose = require("mongoose");
mongoose.Promise = global.Promise;
mongoose.connect("mongodb://localhost:27017/my_db");
var personSchema = new mongoose.Schema({
    name: String,
    age: Number,
    nationality: String,
});
var Person = mongoose.model("Person", personSchema);

//this code block will be reused in this question, from here
app.get("/", (req, res) => {
    res.sendFile(__dirname + "/index.html");
});
//to here

app.post("/person", (req, res) => {
    var myData = new Person(req.body);
    myData
        .save()
        .then((item) => {
            res.send("Name saved to database");
        })
        .catch((err) => {
            res.status(400).send("Unable to save to database");
        });
});

app.listen(port, () => {
    console.log("Server listening on port " + port);
});

我不会在此处包含index.html 文件，因为我认为这是不必要的。但是，当我要使用“pug”文件执行相同的操作（通过 from 向数据库输入数据）时，代码不会输出任何内容，而是会自动下载我使用的“pug”文件。这是我从上面的代码中改变的。

app.set('view engine', 'pug');
app.set('views','./views');

app.get("/", (req, res) => {
    res.sendFile(__dirname + "/views/index.pug");
});

然后我对该代码块进行了一些更改。我将 res.sendFile(__dirname + "/views/index.pug") 更改为 res.render(__dirname + "/views/index.pug")。它在浏览器中输出“index.pug”文件，但是当我提交带有详细信息的表单时，它什么也不做。这是我的“哈巴狗”文件。

html
    head
        title MongoDB

body
    form(action = '/person', method = 'POST')
    br
    div
    label Enter Your Name: 
    input(type = 'text', name = 'name')
    br
    div
    label Enter Your Age: 
    input(type = 'number', name = 'age')
    br
    div
    label Enter Your Nationality: 
    input(type = 'text', name = 'nationality')
    br
    div
    button(type = 'submit') Submit
        

请帮助我修改此代码以使用“pug”文件而不是“html”文件提交数据。 （实际上我找到了几种使用'pug + expressjs + mongoose'的方法。由于这些方法非常不同，我无法修改这段代码。这就是我向社区寻求帮助的原因...谢谢！）

Answer 1

1. sendFile 仅适用于静态中间件中指定的 static 文件。 pug文件浏览器不理解，所以无法显示。

2. Pug 依赖缩进，所以...

html
    head
        title MongoDB

body
    form(action = '/person', method = 'POST')
        br
        div
        label Enter Your Name: 
        input(type = 'text', name = 'name')
        br
        div
        label Enter Your Age: 
        input(type = 'number', name = 'age')
        br
        div
        label Enter Your Nationality: 
        input(type = 'text', name = 'nationality')
        br
        div
        button(type = 'submit') Submit

将在表单中添加所有输入和标签，而您的代码会将它们放在表单之外，从而使表单无用。