javascript - 如何在express js中将数组值发送到html页面

标签 javascript html node.js express

我有这个简单的 app.js 使用 Express JS\NODEJS

var express= require("express");
var path= require("path");
var app= express();    
app.use(express.static(__dirname));
var users=[ {   userName: "faizan",  password: "faizan",  email: "mfkj@live.com"},
            {   userName: "ali",     password: "ali",     email: "xyz@live.com"},
            {   userName: "hussain", password: "hussain", email: "abc@live.com"},
            {   userName: "hassan",  password: "hassan",  email: "xyz@mail.com"},
];

app.get('/',function(request , response){
    response.sendFile(__dirname+ '/index.html');

});

app.get('/frmSignUp', function(request, response){
    users.push({
        userName: request.query["userName"],
        password: request.query["password"],
        email: request.query["email"]
    });
    response.sendFile(__dirname+ '/dashboard.html');
    //how can i show my user array items in my dashboard html page?? Question1

});

app.get('/frmSignIn',function(request, response)
{
    if(users.contains(request.query["userName"])) //this is invalid
// is there any way available to check userName in array that is this exists?
    response.sendFile(__dirname+ '/dashboard.html');

})

var server =app.listen(3010, function(){
    console.log("server running on port "+ server.address().port);
})

我在根目录中有索引注册登录和仪表板 HTML 页面。我有上面代码中注释的问题,请让我知道我可以做这些事情吗?

最佳答案

回答您的问题:

  1. 使用模板。从现有的 html 中执行此操作的最简单方法可能是使用 ejs (首先在项目根目录中npm install ejs)。示例:

    • app.js:

      app.set('view engine', 'ejs');
      
      // ...
      
      app.get('/frmSignUp', function(request, response) {
        users.push({
          userName: request.query["userName"],
          password: request.query["password"],
          email: request.query["email"]
        });
        response.render('dashboard.ejs', { users: users });
      });
      
    • dashboard.ejs:

      <html>
        <head>
          <title>Dashboard</title>
        </head>
        <body>
          <h1>Users</h1>
          <ul>
          <% users.forEach(function(user) { %>
            <li><%= user.userName %></li>
          <% }); %>
          </ul>
        </body>
      </html>
      
  2. 由于您有一个对象数组,并且要检查 userName 字符串,因此您需要手动循环 users 数组并进行比较用户名

关于javascript - 如何在express js中将数组值发送到html页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26690271/

相关文章:

Javascript : How to avoid addition of a new property in a function?

html - Timevis - 使用自定义 css 更改字体大小

javascript - 想要使用提交处理程序

javascript - JSON 数据解析不起作用

javascript - 如何使整个应用程序都可以访问一个文件的变量?

javascript - 如何在 A 帧中暂停视频球?

javascript - react /功能组件/ Prop 改变/getDerivedStateFromProps

javascript - VSCode Javascript - 获取准确的本地新 Date() 值

javascript - 你如何解决这个node.js未定义属性的错误?

javascript - 奇怪的 JavaScript 函数调用构造 (0, <function>)()