我是nodejs和express的新手，当我在localhost:3000中运行网络服务器时，它工作正常，但是当我将其上传到GitHub时，弹出了404错误：（。
我有一个带有stripe付款平台的购物车网站
很抱歉，没有任何有价值的信息。我刚开始学习这门语言几个月，然后会很高兴获得有关404错误的任何帮助：/
server.js代码
if (process.env.NODE_ENV !== 'production') {
require('dotenv').config()
}
const stripeSecretKey = process.env.STRIPE_SECRET_KEY
const stripePublicKey = process.env.STRIPE_PUBLIC_KEY
const express = require('express')
const app = express()
const fs = require('fs')
const stripe = require('stripe')(stripeSecretKey)
const path = require('path')
app.set('view engine', 'ejs')
app.use(express.json())
app.use(express.static('public'))
app.get('/store', function(req, res) {
fs.readFile('items.json', function(error, data) {
if (error) {
res.status(500).end()
} else {
res.render('store.ejs', {
stripePublicKey: stripePublicKey,
items: JSON.parse(data)
})
}
})
})
app.post('/purchase', function(req, res) {
fs.readFile('items.json', function(error, data) {
if (error) {
res.status(500).end()
} else {
const itemsJson = JSON.parse(data)
const itemsArray = itemsJson.music.concat(itemsJson.merch)
let total = 0
req.body.items.forEach(function(item) {
const itemJson = itemsArray.find(function(i) {
return i.id == item.id
})
total = total + itemJson.price * item.quantity
})
stripe.charges.create({
amount: total,
source: req.body.stripeTokenId,
currency: "ils",
}).then(function() {
console.log('Charge Successful')
res.json({ message: 'Successfully purchased items' })
}).catch(function() {
console.log('Charge Fail')
res.status(500).end()
})
}
})
})
app.listen(3000)
package.json
{
"name": "current-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"ejs": "^2.7.4",
"express": "^4.17.1",
"heroku": "^7.39.3",
"stripe": "^6.36.0"
},
"devDependencies": {
"dotenv": "^6.2.0"
}
}
store.ejs代码>>>>
<!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"
data-key="pk_test_Bw3njISkUtVgbdP0ClLHa5fi00TTeF0KGP"
></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">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>
和store.js
if (document.readyState == 'loading') {
document.addEventListener('DOMContentLoaded', ready)
} else {
ready()
}
function ready() {
var removeCartItemButtons = document.getElementsByClassName('btn-danger')
for (var i = 0; i < removeCartItemButtons.length; i++) {
var button = removeCartItemButtons[i]
button.addEventListener('click', removeCartItem)
}
var quantityInputs = document.getElementsByClassName('cart-quantity-input')
for (var i = 0; i < quantityInputs.length; i++) {
var input = quantityInputs[i]
input.addEventListener('change', quantityChanged)
}
var addToCartButtons = document.getElementsByClassName('shop-item-button')
for (var i = 0; i < addToCartButtons.length; i++) {
var button = addToCartButtons[i]
button.addEventListener('click', addToCartClicked)
}
document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked)
}
function purchaseClicked() {
alert('Thank you for your purchase')
var cartItems = document.getElementsByClassName('cart-items')[0]
while (cartItems.hasChildNodes()) {
cartItems.removeChild(cartItems.firstChild)
}
updateCartTotal()
}
function removeCartItem(event) {
var buttonClicked = event.target
buttonClicked.parentElement.parentElement.remove()
updateCartTotal()
}
function quantityChanged(event) {
var input = event.target
if (isNaN(input.value) || input.value <= 0) {
input.value = 1
}
updateCartTotal()
}
function addToCartClicked(event) {
var button = event.target
var shopItem = button.parentElement.parentElement
var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText
var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText
var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src
addItemToCart(title, price, imageSrc)
updateCartTotal()
}
function addItemToCart(title, price, imageSrc) {
var cartRow = document.createElement('div')
cartRow.classList.add('cart-row')
var cartItems = document.getElementsByClassName('cart-items')[0]
var cartItemNames = cartItems.getElementsByClassName('cart-item-title')
for (var i = 0; i < cartItemNames.length; i++) {
if (cartItemNames[i].innerText == title) {
alert('This item is already added to the cart')
return
}
}
var cartRowContents = `
<div class="cart-item cart-column">
<img class="cart-item-image" src="${imageSrc}" width="100" height="100">
<span class="cart-item-title">${title}</span>
</div>
<span class="cart-price cart-column">${price}</span>
<div class="cart-quantity cart-column">
<input class="cart-quantity-input" type="number" value="1">
<button class="btn btn-danger" type="button">REMOVE</button>
</div>`
cartRow.innerHTML = cartRowContents
cartItems.append(cartRow)
cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem)
cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged)
}
function updateCartTotal() {
var cartItemContainer = document.getElementsByClassName('cart-items')[0]
var cartRows = cartItemContainer.getElementsByClassName('cart-row')
var total = 0
for (var i = 0; i < cartRows.length; i++) {
var cartRow = cartRows[i]
var priceElement = cartRow.getElementsByClassName('cart-price')[0]
var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0]
var price = parseFloat(priceElement.innerText.replace('$', ''))
var quantity = quantityElement.value
total = total + (price * quantity)
}
total = Math.round(total * 100) / 100
document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total
}