尽管正确链接 HTML，但未定义错误

Question

我已将路由链接到 html，但 html 一直显示 agentData 未定义。为什么它给我这个错误 尽管正确链接它。 app.js 代码是我链接登录和管理路由的地方。 Routes是登录的地方 根据用户名和密码控制用户的去向。一旦他们登录到 routes.js 然后我会呈现 html 页面 admin.js，是它从 mysql 数据库中获取所有数据并输出为表的地方。如您所见，我确实声明了 agentData 在 admin.js 中。但是，如果我在 routes.js 中删除 app.get/admin，他们会给我另一个错误，不能 /Get admin 错误。什么 我应该怎么做？

routes.js

const express = require('express');
const router = express.Router();
const db = require('../server');

router.get("/",  async function (request, response) {
    response.render("login.ejs");
  });

  router.get("/register", async function (req, res) {
    res.render("register.ejs");
  });

  router.post("/login", async function (request, response) {
    const { username, password } = request.body;

    if (username == 2 && password == 2) {
      response.redirect("/admin");
    } 

    else {
      return response.status(401).json({
        message: "Auth fail",
      });
    }
  });

  router.get('/admin', function(req, res, next) {
    console.log('reach page');
    const sql='SELECT * FROM agentavia';
    db.query(sql, function (err, data, fields) {
      console.log(data);
    if (err) throw err;
    res.render('adminhome', { title: 'Agent List', agentData: data});
  });
  });
  
  router.get('/edit/:id', function(req, res, next) {
    const AgentId= req.params.id;
    const sql=`SELECT * FROM agentavia WHERE id=${AgentId}`;
    db.query(sql, function (err, data) {
      if (err) throw err;
      res.render('modifyAgent', { title: 'Agent List', editData: data[0]});
    });
  });
  
  router.post('/edit/:id', function(req, res, next) {
    const id= req.params.id;
      const updateData=req.body;
      const sql = `UPDATE agentavia SET ? WHERE id= ?`;
      db.query(sql, [updateData, id], function (err, data) {
      if (err) throw err;
      console.log(data.affectedRows + " record(s) updated");
    });
    res.redirect('/admin');
  });
  
  module.exports = router;

adminhome.ejs

    <table border="1">
        <tr>
            <th>S.N</th>
            <th>Agent Name</th>
            <th>Agent ID</th>
            <th>AgentStatus</th>
            <th>Edit</th>
        </tr>

        <% if(agentData.length!=0){ var i=1; agentData.forEach(function(data){ %>
        <tr>
            <td><%=i; %></td>
            <td><%=data.agentName %></td>
            <td><%=data.agentID %></td>
            <td><%=data.agentStatus %></td>
            <td><a href="/admin/edit/<%=data.id%>">Edit</a></td>
        </tr>
        <% i++; }) %> <% } else{ %>
        <tr>
            <td colspan="7">No Data Found</td>
        </tr>
        <% } %>
    </table>

修改agent.ejs

<div class="agent-detail">
   
    <form action="<%=(typeof editData!='undefined')?'/admin/edit/'+editData.id:'/admin/create'%>" method="POST">
          <label>Agent Name</label>
          <input type="agentname" placeholder="Enter Agent Name" name="agentName" required value="<%=(typeof editData!='undefined')? editData.agentName:''%>">
          <label>Agent ID</label>
          <input type="agentID" placeholder="Enter Agent ID" name="agentID" required value="<%=(typeof editData!='undefined')? editData.agentID:''%>">
          <label>Agent Status</label>
          <input type="Agent Status" placeholder="Enter Agent Status" name="agentStatus" required value="<%=(typeof editData!='undefined')? editData.agentStatus:''%>">
          <button type="submit">Submit</button>
        </div>
  </div>

Answer 1

1.文件扩展名中的问题。它应该是 adminhome.ejs 而不是 adminhome.html

或者另一种方法是使用包含

关于如何使用包含请参阅此Ejs engine with html not working

这个例子我在本地测试过。它工作正常

app.js

    const express = require('express');
    const app = express();

    // set the view engine to ejs
    app.set('view engine', 'ejs');

    // index page 
    app.get('/', function (req, res) {
        var data = [
            { id: 1,agentName: 'Bloody Mary', agentID: 3,agentStatus: 'yes' },
            { id:2,agentName: 'Martini', agentID: 5 ,agentStatus: 'no'},
            { id:3,agentName: 'Scotch', agentID: 10 ,agentStatus: 'yes'}
        ];


        res.render('index', {
            agentData: data
        });
    });

    app.listen(3000, () => console.log('listening at 3000'));

索引.ejs

    <h2>Loop</h2>

    <table border="1">
        <tr>
          <th>S.N</th>
          <th>Agent Name</th>
          <th>Agent ID</th>
          <th>AgentStatus</th>
          <th>Edit</th>
        </tr>
      
        <% if(agentData.length!=0){ var i=1; agentData.forEach(function(data){ %>
        <tr>
          <td><%=i; %></td>
          <td><%=data.agentName %></td>
          <td><%=data.agentID %></td>
          <td><%=data.agentStatus %></td>
          <td><a href="/agents/edit/<%=data.id%>">Edit</a></td>
        </tr>
        <% i++; }) %> <% } else{ %>
        <tr>
          <td colspan="7">No Data Found</td>
        </tr>
        <% } %>
      </table>

Ejs 参考：https://www.npmjs.com/package/ejs