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

Posted 2023-03-07

【中文标题】尽管正确链接 HTML，但未定义错误

【英文标题】：Undefined error despite linking HTML correctly

【发布时间】：2020-11-06 21:21:33

【问题描述】：

我已将路由链接到 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>

【问题讨论】：

你能检查一下这条记录是否在表 SELECT * FROM agentavia 中？

您的routes.js 文件中不应有另一个app.get(... 中的app.get(...。这不是它的工作方式，这意味着如果您重新启动服务器，已经登录的人将无法访问/admin。另外，既然你在admin.js 中正确定义了它，为什么还要在那里？您不能在多个地方定义它。正如@VijayPalaskar 所建议的那样，尝试console.log(data) 正上方res.render('adminhome', title... 以查看该数据是否存在

是的，我确实有里面的记录。我什至设法让它在另一个文件夹中工作，所以我将它一点一点地转移到我在这里展示的原始项目文件夹中。至于 app.get 部分，当我从其他示例中看到时，实际上有一个现有示例，它工作得很好。那么使用 router 而不是 app.get 会更好吗？

是路由器而不是 app.get。我认为你的文件扩展名有问题。你能检查一下它是否适用于 ..ejs 扩展名？

我已经尝试在渲染页面之前放置console.log。它没有提供任何数据...

【参考方案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

【讨论】：

感谢您的帮助，但我仍然收到相同的错误 agentData is not defined 尽管将所有 app.get 更改为 router.get。我还将 adminhome.html 更改为 adminhome.ejs。我应该用最新的代码更新问题吗？

看到我已经更新了我的答案。我在本地服务器上测试过。它工作正常

如果身份验证失败并传递错误消息，您可以重定向到登录，如果成功则重定向到仪表板页面。我建议你不要使用 ejs。使用任何前端技术 react,angular,vue js

Cannot GET /admin/edit/1 this message正在显示或另一条消息显示？

显示此消息是因为您尚未定义任何路线。它将与 /edit/1 一起工作到 /admin/edit/1 必须工作你需要像这样定义路由或 app.use('/admin',load path of route file) ..all url of this route js文件从 /admin 路径开始。另一种方法是 router.get('admin/edit/:id',() => ) 但这不是更好的方法。它会起作用的更多信息：expressjs.com/en/guide/routing.html