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

Question

我是节点新手并制作了一个简单的登录页面 - 客户端 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），我如何从客户端执行此操作，如果我不能，可以做什么有吗？

Answer 1

正如我所见，您正在使用 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>
<% } %>