使用NodeJS和express登录成功后如何显示用户信息

Question

我使用 Cloud Firestore 作为我的数据库，所有前端都在 HTML、CSS、JS 中，我正在处理后端部分。 我成功构建了 2 个注册功能（用于医生和患者）和登录（所有用户一次登录）。 成功登录后，项目需要导航到 2 个页面/路线。 医生仪表板（如果是正在登录的医生）和患者仪表板（如果是患者）。 我正在使用用户的用户名登录。问题是我不知道如何在仪表板页面上显示用户名（不是用户名，这是一个不同的属性）。 成功登录后，用户信息应该来自数据库，我需要在登录后请求重定向到的 HTML 页面上显示。 我也在分享仪表板页面的登录和注册功能以及 HTML 代码。 请帮忙。

index.js

const express = require('express')
const cors = require('cors');
const config = require('./config');
const path = require('path');
const firebase = require('firebase');
const routes = require('./routes');

const app = express();
app.use(express.urlencoded({extended: true}));
app.use(express.json());
app.use(express.static(path.join(__dirname, "/")));
var fb = firebase.initializeApp(config.firebaseConfig);
var db = firebase.firestore(fb);

app.use('/', routes)
app.listen(process.env.port || 3000);
console.log("Running at port 3000")

app.post('/register-patient', (req, res) => {
  var name = req.body.name;
  var username = req.body.username;
  var email = req.body.email;
  var password = req.body.password;

  db.collection('users').doc(username).set({
    name: name,
    email: email,
    username: username,
    password: password,
    category: "patient"
  })
  .then(() => {
      console.log("Document written with ID: ", username);
      res.redirect('/patient-dashboard.html')
  })
  .catch((error) => {
      console.error("Error adding document: ", error);
  })
})

app.post('/login', (req, res) => {
  var username = req.body.username;
  var password = req.body.password;

  var docRef = db.collection("users").doc(username);
  docRef.get().then((doc) => {
    if (doc.exists) {
      var info = doc.data();
      if (info.password === password) {
        var category = info.category;
        if (category === 'doctor') {
          res.send(username);
          res.redirect('/doctor-dashboard.html');
        } else {
          res.redirect('/patient-dashboard.html');
        }
      } else {
        console.log("Wrong password");
      }
    } else {
      console.log("No such document");
    }
  }).catch((err) => {
    console.error(err)
  })
})

路由.js

const express = require('express');
const router = express.Router();
const path = require('path');

router.get('/', (req, res) => {
  res.sendFile(path.join(__dirname + '/index.html'))
});

router.get('/login.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/login.html'))
});

router.get('/register.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/register.html'))
});

router.get('/doctor-register.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/doctor-register.html'))
})

router.get('/doctor-dashboard.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/doctor-dashboard.html'))
})

router.get('/patient-dashboard.html', (req, res) => {
  res.sendFile(path.join(__dirname + '/patient-dashboard.html'))
})

module.exports = router

患者仪表板.html

<!DOCTYPE html> 
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>AARC-PLUS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <!-- Favicons -->
    <link href="assets/img/favicon.png" rel="icon">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- Fontawesome CSS -->
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/fontawesome.min.css">
    <link rel="stylesheet" href="assets/plugins/fontawesome/css/all.min.css">
    <!-- Main CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <a name="home"></a>
    <!-- Main Wrapper -->
    <div class="main-wrapper">
        <!-- Header -->
        <script src="assets/js/header-patient.js"></script>
        <!-- /Header -->
            
        <!-- Page Content -->
        <div class="content">
            <div class="container-fluid">
                <div class="row">
                    
                    <!-- Profile Sidebar -->
                    <div class="col-md-5 col-lg-4 col-xl-3 theiaStickySidebar">
                        <div class="profile-sidebar">
                            <div class="widget-profile pro-widget-content">
                                <div class="profile-info-widget">
                                    <a href="#" class="booking-doc-img">
                                        <img src="assets/img/patients/patient.jpg" alt="User Image">
                                    </a>
                                    <div class="profile-det-info">
                                        <h3 name="name">Richard Wilson</h3>
                                        <div class="patient-details">
                                            <h5><i class="fas fa-birthday-cake"></i> 24 Jul 1983, 38 years</h5>
                                            <h5 class="mb-0"><i class="fas fa-map-marker-alt"></i> Newyork, USA</h5>
                                        </div>
                                    </div>
                                </div>
                            </div>

我没有在此处粘贴整个 HTML 代码，因为它太长了，我认为最好指出我想要修改的确切位置。 它是<h3 name="name">Richard Wilson</h3>我想根据用户的信息进行修改。

如果您需要更多代码，请告诉我。

Answer 1

 res.redirect('/doctor-dashboard.html',{"user":username);

 <h3 name="name"><%=user.name%></h3>

Answer 2

最后我找到了解决方案。 感谢Gajanan为我指明了正确的方向。 在他的回答中，他使用res.redirect() ，它给出了一个错误。 相反，我使用npm install ejs安装了ejs模块，并将我的视图引擎设置为index.js文件中的 ejs。

然后我将所有 html 文件重命名为<filename>.ejs ，创建了一个名为views的目录并将所有.ejs文件放在该目录中。

之后我添加了这一行app.set('view engine', 'ejs'); 到我的index.js文件并将行res.redirect('/doctor-dashboard.html')更改为res.render('doctor-dashboard', {name: *Value*})并使用Gajanan的建议修改对应的 ejs 文件，即<h3><%= name%></h3> ，瞧。 有效！！！

使用NodeJS和express登录成功后如何显示用户信息

问题描述

2 个解决方案

解决方案1
0 2021-05-03 11:10:11

解决方案2
0 已采纳 2021-05-05 11:29:53

使用NodeJS和express登录成功后如何显示用户信息

问题描述

2 个解决方案

解决方案1 0 2021-05-03 11:10:11

解决方案2 0 已采纳 2021-05-05 11:29:53

解决方案1
0 2021-05-03 11:10:11

解决方案2
0 已采纳 2021-05-05 11:29:53