文档未定义 Node.js

Question

我有一个小型电子商务项目，我正在尝试构建购物车

我正在使用以下堆栈 Node.js、Express.js、Ejs（模板）

问题是我有 2 个 js 文件 Index.js（节点 js 的主要 controller 文件）showProducts.js（普通 Js 文件）

所以基本上我想从 show Products.js 文件中导出 function 或模块以在 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>

Answer 1

问题是document在 node.js 环境中不可用。 您有 2 个选项来解决此问题。

选项 1. 创建 2 个文件

为服务器端部分（用于 nodejs）创建一个文件，为客户端创建另一个文件（并在此处访问文档）。 您可以在 html 文件中包含第二个文件。

选项 2. 拆分文件的 node.js 部分

您可以检查文件是否在服务器端运行并在此处运行特定代码。 这是一个例子：

const isNode = typeof window === 'undefined';

if (isNode) {
  function kam() {
    console.log("kamran is the best in the world");
  }

  // Note that module.exports is not available on browser js
  module.exports = kam;
} else {
  function filterSelection() {
    document.doSomething();
  }
}

结论

我更喜欢将服务器端和客户端代码放在不同的文件中（第一个选项），因为它可以轻松维护代码，也不会将服务器端代码泄漏给客户端（用户将无法使用开发人员查看服务器代码工具）。

文档未定义 Node.js

问题描述

1 个解决方案

解决方案1
0 2020-07-06 14:18:42

选项 1. 创建 2 个文件

选项 2. 拆分文件的 node.js 部分

结论

文档未定义 Node.js

问题描述

1 个解决方案

解决方案1 0 2020-07-06 14:18:42

选项 1. 创建 2 个文件

选项 2. 拆分文件的 node.js 部分

结论

解决方案1
0 2020-07-06 14:18:42