文檔未定義 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