文档未定义node.js

提问者：小点点

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

我正在使用以下堆栈node.js，express.js，Ejs（模板）

问题是我有两个js文件index.js（节点js的主控制器文件）showproducts.js（普通js文件）

所以基本上我想从show products.js文件中导出一个函数或模块，以便在index.js中调用它。我得到的错误是document is not definited。

我是节点JS上的新手。我粗略地研究了Browserify和JSDOM，但我搞不清楚它们是不是问题的解决方案。

这个问题我已经困了两天了，请帮帮我。

错误（附加）在此处输入图像描述

null

// 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>

null

共1个答案

匿名用户

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

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

您可以检查文件是否在服务器端运行，并在此运行特定代码。下面是一个例子:

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();
  }
}

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