为什么 "res.sendFile()" fucntion(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.哈巴狗”)。它在浏览器中输出 'index.pug' 文件，但是当我提交包含详细信息的表单时，它什么也不做。这是我的 '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

sendFile 仅适用于静态中间件中指定的 static 文件。 pug 浏览器无法识别文件，因此无法显示。
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

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

为什么 "res.sendFile()" fucntion(Express.js) 不能处理 'pug' 文件？

Why doesn't "res.sendFile()" fucntion(Express.js) work with 'pug' files?

mongoose

mongodb

node.js

express

pug