【发布时间】：2020-10-26 16:21:45
【问题描述】：
我有一个小型电子商务项目，我正在尝试构建购物车
我正在使用以下堆栈 Node.js、Express.js、Ejs（模板）
问题是我有 2 个 js 文件 Index.js（node js 的主控制器文件） showProducts.js（普通 Js 文件）
所以基本上我想从 show Products.js 文件中导出一个函数或模块，以便在 index.js 中调用它。我得到的错误是文档未定义。
我是 Node js 的新手。我大致研究了 Browserify 和 JSDOM，但我很困惑这些问题的解决方案。
我已经被这个问题困扰了 2 天，请帮忙。
// Index.js File the Controller
const express = require("express");
const app = express();
const mysql = require("mysql");
const bodyParser = require("body-parser");
const fileUpload = require("express-fileupload");
const uuid = require("uuid");
const kam = require("./public/js/showProducts"); // I am requring it here
kam(); // calling the function
//Showproducts Normal Js file
function kam() {
console.log("kamran is the best in the world");
}
module.exports = kam;<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
/>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="scss/all.css" />
<title>Products</title>
</head>
<style>
.product-box li {
float: left;
list-style-type: none;
width: 300px;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 10px;
text-align: center;
}
.filter-cat {
display: none;
}
.show {
display: block;
}
/* Add a light grey background on mouse-over */
.btn:hover {
background-color: #ddd;
}
/* Add a dark background to the active button */
.btn.active {
background-color: #666;
color: white;
outline: 0;
box-shadow: none;
}
.bag-btn {
background: black;
color: white;
border: transparent;
padding: 5px 10px;
}
</style>
<body>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<div class="container">
<div class="row">
<div class="col-3">
<!-- Brand -->
<a class="navbar-brand" href="#">Kamran</a>
</div>
<!-- Links -->
<div class="col-9">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="/">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="products">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart"
>Cart <span class="badge"></span
></a>
</li>
<button>
<a style="float: right;" href="addProducts">Backend </a>
</button>
</ul>
</div>
</div>
</div>
</nav>
<div class="space-50"></div>
<div class="container">
<h1>Our Products</h1>
<div class="space-50"></div>
<div class="search-bar text-center">
<input
type="text"
id="search-bar"
placeholder="Search Products"
onkeyup="searchProducts()"
/>
</div>
<div class="space-30"></div>
<div id="myBtnContainer" class="text-center">
<button class="btn active" onclick="filterSelection('all')">
All Products
</button>
<button class="btn" onclick="filterSelection('cable')">Cables</button>
<button class="btn" onclick="filterSelection('charger')">
Car Charger
</button>
<button class="btn" onclick="filterSelection('powerbank')">
Power Bank
</button>
<button class="btn" onclick="filterSelection('glass')">
Tempered Glass
</button>
</div>
<div class="space-50"></div>
<div class="products-area">
<div class="row">
<% for (var i = 0; i < data.length; i++) { %>
<ul class="product-box text-center filter-cat">
<li class="single-product">
<p><%= data[i].id %></p>
<img src="<%= data[i].productImage %>" width="50%" />
<h3><%= data[i].productName %></h3>
<h4>Rs. <%= data[i].productPrice %></h4>
<div class="space-20"></div>
<button class="bag-btn" onclick="addCart();">Add To Bag</button>
</li>
</ul>
<% } %>
</div>
</div>
</div>
<script src="./js/showProducts.js"></script>
</body>
</html>【问题讨论】：
标签： javascript node.js express dom