时间戳

首页 > 解决方案 > 文档未定义 Node.js

javascript - 文档未定义 Node.js

问题描述

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

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

问题是我有 2 个 js 文件 Index.js（节点 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>

标签： javascriptnode.jsexpressdom

解决方案

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

结论

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

推荐阅读