时间戳

首页 > 解决方案 > 在客户端 javascript 中呈现模板/视图

javascript - 在客户端 javascript 中呈现模板/视图

问题描述

我是节点新手并制作了一个简单的登录页面 - 客户端 javascript 从输入中获取值，然后向具有包含所有用户帐户的数据库的服务器发出发布请求。在服务器中检查此信息：-如果详细信息正确，则应将它们带到具有动态内容的新页面（他们的用户名）-如果详细信息不正确，则主页不应更改-我只想要一个元素添加说“密码错误，重试”

当我直接从表单发出发布请求但决定更改它以便我可以在登录页面上显示“密码错误，重试”时，这工作正常。

我的客户端 javascript

"use strict"
    
document.querySelector("button").addEventListener("click",submit)
    async function submit(e){
        e.preventDefault();
        let username=document.querySelector("#username").value
        let password=document.querySelector("#password").value
       
        let options = {
            headers:{
                "Content-Type" : "application/json"
            },
            method: "POST",
            body: JSON.stringify({username,password})
        }
        
        let response = await fetch("/api",options)
        let responseData = await response.json()
    
        if(responseData.status == "fail"){
            console.log("show the fail message");
            
        }
    }

我的服务器端 js：

"use strict"

//Installing express
let express = require(`express`)
let app = express()
app.use(express.json())
var bodyParser = require('body-parser')
var urlencodedParser = bodyParser.urlencoded({ extended: false })
let ejs = require('ejs');

app.set("view engine","ejs")
//running the server
app.listen(3000,()=>{
    console.log("server is running boi");
})
//Middleware to load the static content
app.use(express.static('public'))

//Database stuff 
let Datastore = require('nedb')
let db = new Datastore({ filename: 'database.db' });
db.loadDatabase()



//Handler for any post requests made from the form
app.post('/api', urlencodedParser, function (req, res) {
    let user = req.body.username
    
    
    //querying the db
    db.find({username:user},(err,docs)=>{
        if(docs[0]){
            if(docs[0].password == req.body.password){
                console.log("You have logged in!");
                res.send({status:"success"})
            }else{
                console.log("incorrect password")
                res.send({status:"fail"})

            }
        }else{
            console.log("incorrect username");
            res.send({status:"fail"})
        }
        
    })
})

如果用户传递了详细信息并且详细信息正确，那么我希望使用他们的名称呈现一个模板（我使用 EJS），我该如何从客户端执行此操作，如果我不能，我该怎么办？

标签： javascripthtmlnode.jsejs

解决方案

正如我所看到的，您正在使用 EJS，但没有渲染任何东西。相反，您正在向客户端发送 JSON 响应。现在，您可以从您的客户端执行以下操作：

客户端代码：

let responseData = await response.json()
    
  if(responseData.status == "fail"){
      alert('Failed to login');
      // You can do DOM manipulation here. Like: show a message to user
  } else {
    // Login success. Do something here
    alert('Login success')
  }

更新：使用 EJS

app.post('/api', urlencodedParser, function (req, res) {
    let user = req.body.username;
    db.find({username:user},(err,docs)=>{
      if(docs[0]) {
        res.render('template', {user: docs[0]})
      } else {
        res.render('template', {user: null})
      }
    })
}

在您的 EJS 中：

<% if (user === null) { %>
    <h1>Login failed</h1>
  <% } else { %>
    <h1>Login success</h1>
<% } %>

推荐阅读