javascript - 从浏览器发送获取获取请求时，Pug 模板未在浏览器中呈现

问题描述

我正在做一个小项目，其中数据是从数据库中按日期选择的。为大胆起见，我在这里不包括所有与数据库相关的工作。我只是潜入问题领域。

我在用：

Express 和 Pug 在后端
在前端获取 API。

浏览器是 Chrome

我的前端文件的代码 - getDates.html - 如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Get Dates</title>
    <link rel="stylesheet" href="styles.css">

    <script>
        window.onload = ()=>{
            document.getElementById('confirm').addEventListener('click', sendData)

            function sendData(e){
                e.preventDefault()

                const dates = document.querySelectorAll('input[type=date]')
                let data = {}

                for (date of dates){
                    data[date.name]= date.value
                }

                // using fetch to send get request to server 
                fetch(`/${data.sdate}/${data.edate}`, 
                      { method: 'GET',
                        mode: 'no-cors' } )
                        .catch( err => console.log(err)  )
            }
        }
    </script>

</head>
<body>

    <div class="wrapper">
        <div>Enter Dates</div>
        <form action="">
            <label for="sdate">Start date:</label>
            <input type="date" name="sdate" id="sdate">
            
            <label for="edate">End date:</label>
            <input type="date" name="edate" id="edate">
            <button id="confirm">Confirm</button>
        </form>

    </div>

</body>
</html>

我的后端 index.js 文件的代码如下：

const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 5000;

// data received from database 
const data = [
    { date : new Date('2021-04-01'), id : 1, amount: 100, remark : 'test1' },
    { date : new Date('2021-04-05'), id : 2, amount: 100, remark : 'test2' },
    { date : new Date('2021-04-07'), id : 3, amount: 100, remark : 'test3' },
    { date : new Date('2021-04-09'), id : 4, amount: 100, remark : 'test4' },
    { date : new Date('2021-04-10'), id : 5, amount: 100, remark : 'test5' },
    { date : new Date('2021-04-14'), id : 6, amount: 100, remark : 'test6' },
    { date : new Date('2021-04-15'), id : 7, amount: 100, remark : 'test7' },
    { date : new Date('2021-04-18'), id : 8, amount: 100, remark : 'test8' },
    { date : new Date('2021-04-19'), id : 9, amount: 100, remark : 'test9' },
    { date : new Date('2021-04-20'), id : 10, amount: 100, remark : 'test10' }
]


app.use(express.static(__dirname));
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');

app.get('/', (req, res)=>{
    res.sendFile(__dirname + '/getDates.html')
})


app.get('/:p1/:p2', (req, res)=>{

    // filter data datewise 
    const filtered = data.filter( element =>{
        return element.date >= new Date( `${req.params.p1}` ) && element.date <= new Date( `${req.params.p2}` )
    } )
    

    // prepare data for use with pug template 
    let fData =[]
    fData.push( Object.keys( filtered[0] ).map(x => x.toUpperCase() ) ) 

    for (let line of filtered){
        fData.push( Object.values( line ) )   
    }

    // console.log( fData )  // check data on console -->> upto here it works fine 
    res.render('report', { title: 'Sale data', rows: fData })  // this is not rendered if fetch request is sent 

})

app.listen(port, ()=>  console.log(`Server running on port no: ${port} ...`))

我的哈巴狗文件的代码如下：

doctype html
html(lang="en")
    head
        meta(charset="UTF-8")
        meta(http-equiv="X-UA-Compatible", content="IE=edge")
        meta(name="viewport", content="width=device-width, initial-scale=1.0")
        title Report
        link(rel="stylesheet" href="../styles.css")
    body 
        .tableDiv 
            div #{title}
            table 
                each row in rows 
                    tr 
                        each col in row 
                            td #{col}

我的 CSS 文件 style.css 的代码如下：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    font: bold 12px arial;  /* short-cut ->> weight style size family */
}

.wrapper {
    margin: 5px;
    background-color: aliceblue;
    padding: 10px 30px;
    display: inline-block;
    border: 1px solid black;
    border-radius: 5px;
}

.wrapper div {
    border-bottom: 1px solid black;
    display: inline-block;
    margin-bottom: 5px;
}

.wrapper form label {
    margin-top: 10px;
}

.wrapper form label, .wrapper form input {
    display:block;
}

.wrapper form button {
    margin-top: 10px;
    padding: 5px 15px;
}

.tableDiv {
    margin: 10px;
    padding: 10px;
    display: inline-block;
}

.tableDiv div {
    padding: 5px;
    text-align: center;
    background-color: beige;
    border: 1px solid gray;
}

.tableDiv table, .tableDiv td {
    border: 1px solid gray;
    border-collapse: collapse;
}

.tableDiv table td {
    padding: 5px 10px;
}

从上面的代码可以看出：

有 index.js 文件将 css 格式的 getDates.html 文件提供给浏览器以获取所需的信息。
当用户输入开始日期、结束日期并按下确认按钮时，将获取获取请求发送到服务器。
按下确认按钮时浏览器控制台中没有错误。
服务器接收请求并准备数据以用于 pug 模板文件，当控制台记录时，该文件会显示在控制台中。 这意味着应用程序在这一行之前表现正确 - index.js 中的“console.log(fData)”，这就是问题所在。
pug 文件 report.pug 不会呈现给浏览器。
有趣的是，当直接在地址栏中输入“http://localhost:5000/2021-04-01/2021-04-10”并按回车时，会渲染 pug 模板！！！！！！

我不知道发生了什么。我的问题是：

获取请求是否正确发送以获取按日期的动态结果？
服务器端是否存在阻止模板呈现的错误？

我将不胜感激。

标签： javascriptexpresspug

javascript - 从浏览器发送获取获取请求时，Pug 模板未在浏览器中呈现

问题描述

解决方案

推荐阅读