node.js - node.js、ejs - 无法使用 JSON 格式节点服务器数据库中的数据填充 ejs 页面
问题描述
我目前正在学习一个教程,以提高我对条带集成的理解。它需要以下步骤:
- 配置前端
- 从 JSON 数据库中检索和显示前端信息
- 将信息发送到条带 API
- 支付成功后跳转到网页并显示成功信息
我目前卡在第 2 项上。
我已经根据教程生成了 html 页面,并且静态页面显示正常。请参考https://github.com/walakaka77/stripe-project的主分支
但是,当我尝试显示基于 JSON 数据库的商品页面时,Cannot GET /store.html
在尝试检索商店页面的数据时收到此错误
请参考https://github.com/walakaka77/stripe-project的 itemDatabase 分支 见下面的代码片段。
节点js服务器代码:
if (process.env.NODE_ENV !== 'production') {
require('dotenv').config()
}
const stripeSecretKey = process.env.STRIPE_SECRET_KEY
const stripePublicKey = process.env.STRIPE_PUBLIC_KEY
console.log(stripeSecretKey, stripePublicKey)
const express = require('express')
const app = express()
const fs = require('fs')
app.set('view engine', 'ejs')
//app.use(express.json())
app.use(express.static('public'))
app.listen(3000)
存储 ejs 文件(基于 JSON 数据库循环和显示页面 - 见下文)
<!DOCTYPE html>
<html>
<head>
<title>The Generics | Store</title>
<meta name="description" content="This is the description">
<link rel="stylesheet" href="styles.css" />
<script src="https://checkout.stripe.com/checkout.js" defer></script>
<script>
var stripePublicKey = '<%= stripePublicKey %>'
</script>
<script src="store.js" defer></script>
</head>
<body>
<header class="main-header">
<nav class="main-nav nav">
<ul>
<li><a href="index.html">HOME</a></li>
<li><a href="store.html">STORE</a></li>
<li><a href="about.html">ABOUT</a></li>
</ul>
</nav>
<h1 class="band-name band-name-large">The Generics</h1>
</header>
<section class="container content-section">
<h2 class="section-header">MUSIC</h2>
<div class="shop-items">
<% items.music.forEach(function(item){ %>
<div class="shop-item" data-item-id="<%= item.id %>">
<span class="shop-item-title"><%= item.name %></span>
<img class="shop-item-image" src="Images/<%= item.imgName %>">
<div class="shop-item-details">
<span class="shop-item-price">$<%= item.price / 100 %></span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<% }) %>
</div>
</section>
<section class="container content-section">
<h2 class="section-header">MERCH</h2>
<div class="shop-items">
<% items.merch.forEach(function(item){ %>
<div class="shop-item" data-item-id="<%= item.id %>">
<span class="shop-item-title"><%= item.name %></span>
<img class="shop-item-image" src="Images/<%= item.imgName %>">
<div class="shop-item-details">
<span class="shop-item-price">$<%= item.price / 100 %></span>
<button class="btn btn-primary shop-item-button" type="button">ADD TO CART</button>
</div>
</div>
<% }) %>
</div>
</section>
<section class="container content-section">
<h2 class="section-header">CART</h2>
<div class="cart-row">
<span class="cart-item cart-header cart-column">ITEM</span>
<span class="cart-price cart-header cart-column">PRICE</span>
<span class="cart-quantity cart-header cart-column">QUANTITY</span>
</div>
<div class="cart-items">
</div>
<div class="cart-total">
<strong class="cart-total-title">Total</strong>
<span class="cart-total-price">$0</span>
</div>
<button class="btn btn-primary btn-purchase" type="button">PURCHASE</button>
</section>
<footer class="main-footer">
<div class="container main-footer-container">
<h3 class="band-name">The Generics</h3>
<ul class="nav footer-nav">
<li>
<a href="https://www.youtube.com" target="_blank">
<img src="Images/YouTube Logo.png">
</a>
</li>
<li>
<a href="https://www.spotify.com" target="_blank">
<img src="Images/Spotify Logo.png">
</a>
</li>
<li>
<a href="https://www.facebook.com" target="_blank">
<img src="Images/Facebook Logo.png">
</a>
</li>
</ul>
</div>
</footer>
</body>
</html>
JSON 数据库项目
{
"music": [
{
"id": 1,
"name": "Album 1",
"price": 1299,
"imgName": "Album 1.png"
},
{
"id": 2,
"name": "Album 2",
"price": 1499,
"imgName": "Album 2.png"
},
{
"id": 3,
"name": "Album 3",
"price": 999,
"imgName": "Album 3.png"
},
{
"id": 4,
"name": "Album 4",
"price": 1999,
"imgName": "Album 4.png"
}
],
"merch": [
{
"id": 5,
"name": "T-Shirt",
"price": 1999,
"imgName": "Shirt.png"
},
{
"id": 6,
"name": "Coffee Cup",
"price": 699,
"imgName": "Cofee.png"
}
]
}
有人能告诉我为什么我在尝试查看商店页面时出错。请让我知道是否有其他信息会有所帮助
解决方案
推荐阅读
- reactjs - 带 TypeScript 的 MUIv4 升级 - 无法正确地将道具传播到 TextField
- reactjs - React Masonry 项目对齐问题
- c# - 来自.net的firebase存储上传图像被拒绝
- excel - 如何在 VBA 公式中引用对象变量?
- c# - 将带有数字的字符串转换为字节数组 - C#
- python - 无法使用外键保存 Django 模型
- scala - 在程序中将状态单子结果从一个步骤传递到另一个步骤+提前停止
- tensorflow - 从 tfjs 加载 mobilenet 时出现等待错误
- ios - UITableViewCell 中的 UITextView 在 `textViewDidBeginEditing` 方法中第一次无法分配其委托
- javascript - 如何围绕与原点不同的实体点旋转