【发布时间】：2021-04-24 18:49:34
【问题描述】：
我正在做一个小项目，其中数据是按日期从数据库中选择的。 为大胆起见，我在这里不包括所有与数据库相关的工作。我只是 深入问题区域。
我正在使用：
- 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} ...`))
我的 pug 文件代码如下：
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”并按下 输入，哈巴狗模板渲染！！！！！！
我不知道发生了什么。我的问题是：
- 获取请求是否正确发送以获取按日期的动态结果？
- 服务器端是否存在阻止模板呈现的错误？
我将不胜感激。
【问题讨论】：
标签： javascript express pug