尽管正确链接了HTML,但仍存在未定义的错误

时间:2020-07-17 05:34:50

标签: javascript html node.js ejs

我已将路由链接到html,但是html不断显示agentData尚未定义。为什么给我这个错误 尽管链接正确。我在app.js代码中链接了用于登录和管理的路由。路线是登录的地方 根据用户名和密码控制用户的去向。一旦他们登录routes.js,然后在 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>

modifyagent.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>

1 个答案:

答案 0 :(得分:2)

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'));

Index.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