使用 EJS 访问 MongoDB 中的数组答案

【问题标题】：Accessing array in MongoDB using EJS使用 EJS 访问 MongoDB 中的数组
【发布时间】：2021-05-02 21:06:05
【问题描述】：

所以我有这个代码（user.js）：

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
    username: {
        type: String,
        required: true
    },
    password: {
        type: String,
        required: true
    },
    avatar: {
        type: String,
        //required: true
    },

    email: {
        type: String,
        required: true
    },

    bio: {
        type: String,
        required: true
    },

}, {timestamps: true});

const User = mongoose.model('User', userSchema);

module.exports = User;

我正在尝试访问我的 EJS 文件中的用户名变量，特别是这一行（可以在 profile.ejs 中看到）：

<span class="username"> <%= user.username %> </span>

它的目的是将最近输入的用户名显示到网页中。我已经尝试过但没有成功。

路线如下：

app.get('/profile', (req, res) => {
    res.render('profile');
});

profile 是应该显示用户名的 EJS 文件。

这是 Node.js 文件：

const express = require('express');
const mongoose = require('mongoose');
const User = require('./models/user');
const Post = require('./models/post');
const morgan = require('morgan');

const app = express();

// mongoDB
const dbURI = 'mongodb+srv://DeveloperOne:pepper143@the-little-helper.9kzsf.mongodb.net/the-little-helper?retryWrites=true&w=majority';
mongoose.connect(dbURI, {useNewUrlParser: true, useUnifiedTopology: true})
    .then((result) => app.listen(3000))
    .catch((err) => console.log(err));

app.use(express.static('public'));
app.use(express.urlencoded({extended: true}));
app.use('/css', express.static(__dirname + 'public/css'));
app.use('/images', express.static(__dirname + 'public/images'));
app.use('/jquery', express.static(__dirname + 'public/jquery'));
app.use('/js', express.static(__dirname + 'public/js'));
app.use('/media', express.static(__dirname + 'public/jquery'));
app.use(express.static(__dirname + '/venobox'));
app.use(express.static(__dirname + '/webfonts'));

app.use(morgan('dev'));
app.use((req, res, next) => {
  res.locals.path = req.path;
  next();
});

app.set('view engine', 'ejs');

app.get('/create-post', (req, res) => {

});

app.get('/', (req, res) => {
    res.render('index');
});


app.get('/index2', (req, res) => {
    res.render('index2');
});

app.get('/profile', (req, res) => {
    res.render('profile');
});

app.post('/index2', (req, res) => {
    const user = new User(req.body);
    //console.log(user.username);
    user.save()
    .then((result) => {
        res.redirect('/index2');
    })
    .catch((err) => {
        console.log(err);
    })
});

app.get('/baking_feed', (req, res) => {
    res.render('baking_feed');
});

app.get('/baking_feed2', (req, res) => {
    res.render('baking_feed2');
});

app.get('/cooking_feed', (req, res) => {
    res.render('cooking_feed');
});

app.get('/cooking_feed2', (req, res) => {
    res.render('cooking_feed2');
});

app.get('/budgeting_feed', (req, res) => {
    res.render('budgeting_feed');
});

app.get('/budgeting_feed2', (req, res) => {
    res.render('budgeting_feed2');
});

app.get('/gardening_feed', (req, res) => {
    res.render('gardening_feed');
});

app.get('/gardening_feed2', (req, res) => {
    res.render('gardening_feed2');
});

app.get('/sewing_feed', (req, res) => {
    res.render('sewing_feed');
});

app.get('/sewing_feed2', (req, res) => {
    res.render('sewing_feed2');
});

以及需要显示用户名的新 EJS 文件 (profile.ejs)（带有 USERNAME HERE 的那个）：

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="UTF-8">
        <title>Profile</title>
        <link rel="stylesheet" href="/css/all.min.css">
        <link rel="stylesheet" href="/css/style.css">
        <script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
        <link rel="stylesheet" src="venobox/venobox.css" type="text/css" media="screen" />
        <script type="text/javascript" src="/venobox/venobox.min.js"></script>
    </head>
    <body>
        <nav>
            <label class="homepage"><i class="fab fa-angellist"></i> Company Name</label>
            <ul> 
                <li><a class="active" href="/index2"><i class="fas fa-home"></i> Home</a></li>
                <li><a href="/"><i class="fas fa-sign-out-alt"></i> Log Out</a></li>
            </ul>
        </nav>
        <div class="container">
            <div class="profile-header">
                <div class="profile-img">
                    <img src = "./images/art.jpg" width="200">
                </div>
            </div>
            <div class="info-border">
                <div class="profile-info">
                    <span class="username"> USERNAME HERE </span>
                    <span class="user-desc">Insert bio here</span>
                </div>
            </div>
            <div class="profile-option">
                <ul>
                    <li><a class="active" id="button" href="#"><i class="fas fa-user-cog"></i> Edit Profile</a></li>
                </ul>
            </div>
            <div class="main-profile">
                <div class="main-nav">
                    <ul>
                        <li onclick="tabs(0)" class="user-posts active"><i class="fas fa-stream"></i>  Posts</li>
                        <li onclick="tabs(1)" class="user-collections"><i class="fas fa-bookmark"></i> Collections</li>
                        <li onclick="tabs(2)" class="user-faves"><i class="fas fa-star"></i> Favorites</li>
                    </ul>
                </div>
                <div class="profile-body">
                    <div class="profile-posts tab">
                        <div class="videos">
                            <div class="video" style="background-image: url(media/reef.jpg);">
                                <a class="venobox" data-autoplay="true" data-vbtype="video" href="https://youtu.be/DV0vpUmugMc"><i class="fas fa-play"></i></a>
                            </div>
                            <div class="video" style="background-image: url(media/reef.jpg);">
                                <a class="venobox" data-autoplay="true" data-vbtype="video" href="https://youtu.be/DV0vpUmugMc"><i class="fas fa-play"></i></a>
                            </div>
                            <div class="video" style="background-image: url(media/reef.jpg);">
                                <a class="venobox" data-autoplay="true" data-vbtype="video" href="https://youtu.be/DV0vpUmugMc"><i class="fas fa-play"></i></a>
                            </div>
                            <div class="video" style="background-image: url(media/reef.jpg);">
                                <a class="venobox" data-autoplay="true" data-vbtype="video" href="https://youtu.be/DV0vpUmugMc"><i class="fas fa-play"></i></a>
                            </div>
                        </div>
                    </div>
                    <div class="profile-collections tab">Insert collection here</div>
                    <div class="profile-faves tab">Insert faves here</div>
                </div>    
            </div>
        </div>
        <div class="bg-modal">
            <div class="modal-content">
                <div class="close">+</div>
                <img src = "./images/profile.png" width="200">
                <form action="">
                    <div class="user-details">
                        <div class="input-box">
                            <span class="avatar"><i class="fas fa-user"></i> Change Avatar</span>
                            <input type="file" id="img" name="img" accept="image/*">
                        </div>
                        <div class="input-box">
                            <span class="user-name"><i class="far fa-id-card"></i> Username</span>
                            <input type="text" class="modal-input" placeholder="Enter your username" required>
                        </div>
                        <div class="input-box">
                            <span class="email"><i class="fas fa-envelope-open-text"></i> Email Address</span>
                            <input type="email" class="modal-input" placeholder="Enter your email address" required>
                        </div>
                        <div class="input-box">
                            <span class="bio"><i class="fas fa-quote-left"></i> Bio</span>
                            <input type="text" class="modal-input" placeholder="Write a short description" required>
                        </div>
                        <div class="input-box">
                            <span class="old-password"><i class="fas fa-unlock-alt"></i> Old Password</span>
                            <input type="password" class="modal-input" plac eholder="Enter your old password" required>
                        </div>
                        <div class="input-box">
                            <span class="new-password"><i class="fas fa-key"></i> New Password</span>
                            <input type="password" class="modal-input" placeholder="Enter your new password" required>
                        </div>    
                    </div>                   
                    <div class="button">
                        <input type="submit" value="Submit">
                    </a>
                </form>
            </div>
        </div>
        <script src="./jquery/profile.js" type="text/javascript"></script>
    </body>
</html>

所以程序的流程是这样的，首先，它要求用户注册（index.ejs），然后将用户重定向到（index2.ejs），这是注册用户的主页，当用户点击个人资料页面（profile.ejs），它应该显示他们的用户名和其他详细信息。

【问题讨论】：

您可以将用于呈现此页面的路由添加到问题中吗？
要渲染一个页面，你应该有一个带有 res.render 的 get 路由
@MohamedOraby app.get('/index2', (req, res) => { res.render('index2'); });像这样？
是的，但是您需要使用 findOne 从数据库中获取用户并将其呈现在页面上，请查看下面的答案以供参考

标签： html node.js mongodb mongoose

【解决方案1】：

你的获取路线应该是这样的

app.get('/index2/:id', async (req, res) => {
  try {
    const user = await User.findOne({ _id: req.params.id })
    return res.render('index2', { user })
  } catch (error) {
    return res.status(400).send(err)
  }
})

编辑：我对您的代码进行了一些更改，我添加了一个访问用户的用户列表，并在单击时重定向到他们的个人资料，这样您就可以了解如何从数据库中获取 user._id

const express = require('express');
const mongoose = require('mongoose');
const User = require('./models/user');
// const Post = require('./models/post');
const morgan = require('morgan');
const path = require('path')

const app = express();

// mongoDB
const dbURI = 'mongodb+srv://DeveloperOne:pepper143@the-little-helper.9kzsf.mongodb.net/the-little-helper?retryWrites=true&w=majority';
mongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then((result) => app.listen(3000))
  .catch((err) => console.log(err));

app.use(express.static(path.join(__dirname, 'public')));
app.use(express.urlencoded({ extended: true }));
app.use(express.static(__dirname + '/venobox'));
app.use(express.static(__dirname + '/webfonts'));

app.use(morgan('dev'));
app.use((req, res, next) => {
  res.locals.path = req.path;
  next();
});

app.set('view engine', 'ejs');

app.get('/create-post', (req, res) => {

});

app.get('/', (req, res) => {
  res.render('index');
});


app.get('/index2', (req, res) => {
  res.render('index2');
});

app.get('/profile/:id', async (req, res) => {
  const user = await User.findOne({ _id: req.params.id })
  return res.render('profile', { user });
});

app.post('/index2', (req, res) => {
  const user = new User(req.body);
  //console.log(user.username);
  user.save()
    .then((result) => {
      res.redirect('/index2');
    })
    .catch((err) => {
      console.log(err);
    })
});

app.get('/baking_feed', (req, res) => {
  res.render('baking_feed');
});

app.get('/baking_feed2', (req, res) => {
  res.render('baking_feed2');
});

app.get('/cooking_feed', (req, res) => {
  res.render('cooking_feed');
});

app.get('/cooking_feed2', (req, res) => {
  res.render('cooking_feed2');
});

app.get('/budgeting_feed', (req, res) => {
  res.render('budgeting_feed');
});

app.get('/budgeting_feed2', (req, res) => {
  res.render('budgeting_feed2');
});

app.get('/gardening_feed', (req, res) => {
  res.render('gardening_feed');
});

app.get('/gardening_feed2', (req, res) => {
  res.render('gardening_feed2');
});

app.get('/sewing_feed', (req, res) => {
  res.render('sewing_feed');
});

app.get('/sewing_feed2', (req, res) => {
  res.render('sewing_feed2');
});

app.get('/user-list', async (req, res) => {
  try {
    const users = await User.find()
    return res.render('user-list', { users })
  } catch (err) {
    return res.status(400)
  }
})

你 profile.ejs <span class="username"><%= user.username %></span> 应该可以工作

【讨论】：

这行得通！但是 EJS 文件不会读取标记本身。第一个
您确定找到了用户本身吗？因为我看不出您的 ejs 格式有问题，请尝试 console.log(user) 如果它返回 null 然后确保您的 id 正确（文档 _id）
它 100% 有效，我现在刚刚尝试了控制台日志，它在终端中显示了我的输入。也许已经被删除了？呃。
对我来说很好，尝试使用 h1 标签将 user.username 渲染到其他地方，也许这是一个 css 问题？
我不知道为什么，但是当我运行 index2 网页时，它显示无法读取 null 的属性“用户名”。但它是有价值的。