时间戳

首页 > 解决方案 > Node js，我无法让我的浏览器按钮获取 json 文件中的团队列表

node.js - Node js，我无法让我的浏览器按钮获取 json 文件中的团队列表

问题描述

我是 Node js 的新手，我正在编写一个程序来从本地 json 文件中获取数据并显示在浏览器中，但是当我单击按钮时没有任何反应。也没有收到错误。程序运行如下： 1）。node app.js 2.) 在服务器上打开 index.html (127.0.0.1:3000) 3.) 单击“获取团队列表”按钮。该按钮有一个 action = "teams" 并且控制器应该调用该操作以从 json 文件中获取团队。控制器调用模型，然后在名为“teamList”的 index.htm 属性中呈现数据。然后我希望看到浏览器中显示的团队。这是我的代码：

应用程序.js：

const path = require("path");
const express = require('express');
const cors = require('cors');
const fetch = require('node-fetch');
const bodyParser = require('body-parser'); 
const router  = require('./routes/router');

const app = express();

app.use(express.urlencoded({extended: false}));
app.use(express.json());
app.use(express.static("public"));
app.set("views" , "views");
app.set("view engine", "hbs");

const host = "127.0.0.1"
const port = 3000

app.use(cors());
app.use(bodyParser.json());

//app.use('/', router);


app.get('/', (req, res) =>{
    res.render("index", {
         teamsList: ""
    })
})

app.get('/add', (req, res) =>{
    res.render("post-tal", {
        Sum: ""
    })
})

app.listen(port, host, () => {
    console.log(`The server is running at: http://${host}:${port}`);
});

索引.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">
   
    <style>
        .eNavAction {cursor:pointer}
        .buttons {margin-top: 20px}
    </style>
    <script src="js/simple-helper.js"></script>
    <script src="../controller/MainController.js"></script>
    <script src="apiServer/controller.js"></script>
    <script src="apiServer/model/apiServer-model.js"></script>
    <script src="apiServer/routes/router.js"></script>
        
   <script>
        
        var Current = {};
        const Model = new TeamsModel();
        const View = new TeamView();
        const ViewTal = new TalView();
        const Controller = new MainController();

        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 App</span>
            </a>
        </div>
              
        <div id="navbar" class="navbar-menu">
            <div class="navbar-start">
                <a class="eNavAction navbar-item" action ="teams">Teams</a>
                <a class="navbar-item" action= "tal" href="http://127.0.0.1:3000/add">Sum</a>
            </div>
        </div>
    </nav>

    <div class="section">
        <div id="main-container">
            <button class="eNavAction navbar-item" action ="teams">Get list of the team</button>
            <div id="listContainer">
              
                {{teamsList}}

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

主控制器.js：

class MainContainer {
        teamList = (req, res) => {
            Model.loadTeams()
            .then(function (data) {
                res.json(data);
                //res.send(data);
                res.render("index", {
                    teamList: {data}   // A property called teamList to be displayed on the browser
                })
            })
            .catch(error => console.log(error));
        }
    
        navAction() {
            let action = this.getAttribute('action');  
                if (action == "teams") {
                    Controller.teamList();
                }else if(action == "tal")
                Controller.calculateSum();
        }
    
    }

模型.js

class TeamsModel {
    
      async loadTeams() {
        try {
          const json = await fetch('./json/prov-nodes.json', 'utf8')
          .then(function(response){
            return response.json();
          })
          .then(function(data){
            console.log(data);
          });
        }catch (error) {
          console.log(error)
        }
    }
}

标签： node.jsjsonexpressmodel-view-controller

解决方案

我试图重建你的问题。首先，我表明我修复了代码并获得了结果： 截屏

controller.js( Model.js)中的代码

class TeamsModel {
  async loadTeams() {
    try {
      const json = await fetch('/data/prov-nodes.json')
      return json.json(); // Important! return must be in loadTeams!
    }catch (error) {
      console.log(error) // it'll never been shown!
    }
  } 
}

如您所见，我用作'/data/prov-nodes.json'路径。是的，现在我可以访问以前没有的文件'./json/prov-nodes.json'。我只是在 app.js 中添加了两个字符串：

app.use('/js', express.static(__dirname + '/controllers')); // allows an access
app.use('/data', express.static(__dirname + '/json')); // allows an access

所以脚本的导入看起来像：

<script src="/js/MainController.js"></script>
<script src="/js/controller.js"></script>

在index.hbs文件中我只是这样做：

const Model = new TeamsModel();
const Controller = new MainController();
Controller.teamList()

我重命名MainContainer class为MainController class（仅用于测试）

...

teamList = (req, res) => {
    Model.loadTeams()
    .then(function (data) {
        console.log('DATA', data); // just output to console if success
    })
    .catch(error => console.log(error));
}

...

我相信这可以帮助您继续编码！我不确定我是否正确地重构了您的代码（模型/控制器），但我已经向您展示了如何快速阅读json file。

├── app.js
├── controllers           - just modules not real controllers :)  
│   ├── MainController.js
│   └── controller.js     - I think this would be a model, sorry :) 
├── json
│   └── prov-nodes.json
├── package-lock.json
├── package.json
└── views
    └── index.hbs

推荐阅读