Question

我正在开发一个程序，用户点击菜单项，在这种情况下，团队进入我的后端服务器并通过 fetch 读取本地 json 文件，从而显示在我的索引上。 html 浏览器。尽管我已经调用了操作来执行所需的功能，但什么也没发生。我收到错误：Uncaught ReferenceError: require is not defined AND Uncaught ReferenceError: TeamsModel is not defined at (index):25 at teamModel.js:3。可能是什么问题呢？这是我的代码：

index.html

<!DOCTYPE html>
<html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>WebApp</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <link rel="stylesheet" type="text/css" href="css/bulma-min.css">

    <style>
        .eNavAction {cursor:pointer}
        .buttons {margin-top: 20px}
        .section {padding-top: 0;}
    </style>

    <script src="js/simple-helper.js"></script>
    <script src="./model/teamModel.js"></script>
    <script src=".view/teamView.js"></script>
    <script src="./controller/mainController.js"></script>
    
   <script>
        
        var Current = {};
        const Model = new TeamsModel();
        const View = new TeamView();
        const ViewTal = new TalView();
        const ModelTal = new MathModel();
        const Controller = new MainController();

        Current.setting = {} 
        Current.setting.tal =  [
            {
                "tal": "10,343,24,345,22,23,233,45,200,500,300" 
            }
        ];

        document.addEventListener('DOMContentLoaded', function() {
           // Controller.init();
           Helper.onClassClick('eNavAction', Controller.navAction);
        });

    </script>
</head>
<body>
    <nav class="navbar is-link" role="navigation" aria-label="main navigation">
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                <span style="font-weight:bold; font-size:20px">My Web App1</span>
            </a>
        </div>
              
        <div id="navbar" class="navbar-menu">
            <div class="navbar-start">
                <a class="eNavAction navbar-item" action ="teams" >Teams</a>
                <a class="eNavAction navbar-item" action= "tal" >Sum</a>
            </div>
        </div>
    </nav>

    <section class="section">
        <div id="main-container" class="container section-container"  >
            <div id="team-list-container" class="container section-container" style="display:none">
                <div id="team-list"></div>
            
            </div>
        </div>

        <div id="tal-list-container" class="container section-container" style="display:none">
            <div id="tal-list"></div> 

        </div>
    
    </section>
</body>
</html>

mainController.js

class MainController {
    constructor() {}
   
    renderHomePage() {
        Model.loadTeams()
        .then(response => response.json())
        .then(function(data) {   
            Current.teams = data;
            View.teamListView(data);
            /*res.render("index", { // output as string
                teamsList: `${JSON.stringify(data, null, 2)}`    // A property called teamList to be displayed on the browser
                                                                 //teamsList: teamView.TeamsView(`${JSON.stringify(data, null, 2)}`)
                                                                
            })*/
        })
    }
    

    renderSum() {
        let tal =  Current.setting.tal;

        ModelTal.addera(tal)
        .then(response => response.json())
        .then(function(data) {  
            Current.summa = data;
            ViewTal.Summa(data);
            /*res.render("post-tal", { // output as string
                jsonOjbect: `${JSON.stringify(data, null, 2)}`,
                Sum: `${JSON.stringify(JSON.parse(data.summa), null, 2)}`   // A property called Sum to be displayed on the browser 
           
            })*/
        })
    }

    navAction() {
        let action = this.getAttribute('action');  
         if (action == "teams") {
             Controller.renderHomePAge();
         }
         else if (action == "tal") {
             Controller.renderSum();
         }
         
     }
  
}

teamModel.js

'use strict';

const fs = require('fs/promises');

class TeamsModel {

  static async loadTeams() {  
    try {
         let rawData = await fs.readFile('./json/prov-nodes.json')
        let teams = JSON.parse(rawData);
        return teams;

    } catch (error) {
      console.log(error)
    }
    console.log('This is after the read call');
  }

}

module.exports = TeamsModel;

teamView.js

class TeamView {
    
    teamListView(data) {
        Helper.hideClass('section-container'); 
        
        let html = '<table class="table" style="width: 800px">';
        html += '<tr><td colspan="2">Team</td></tr>';

            html += '<tr>';
                html += '<td>' + data + '</td>';
            html += '</tr>';     
       
        html += '</table>';
        Helper.setHtml('team-list', html);
        Helper.show('team-list-container');
    }  
}

我的 Node js 程序给了我错误：Uncaught ReferenceError: require is not defined

0 个答案: