在 express.js (node.js) 中努力设置显示详细页面的逻辑

Question

我正在努力建立一个工作逻辑，该逻辑将显示一个显示帖子标题、图像和详细信息的详细页面。 到目前为止，我已经设法显示列表页面，该页面实际上列出了当前登录用户的所有帖子，包括标题、图像和详细信息。 当我点击图片时，我想会被带到一个链接，该链接将显示特定帖子的详细信息。 顺便说一句，链接看起来像这样http://192.168.1.250:5000/ideas/detail/5d491f36886a56259bad2580好吧，我的代码奇怪的是，当我点击图像时，我按预期被带到了详细页面，但足够有趣帖子的标题、图像和详细信息未显示，更糟的是在我的 detail.handlebars 视图页面上，我有一个虚拟文本“未No video ideas listed ”，此文本已呈现。 下面是我的路由idea.js 代码，分别查看index.handlebars、detail.handlebars。 我非常感谢您的帮助和支持。

idea.js（路由）

const express = require('express');
const mongoose = require('mongoose');
const router = express.Router();
const {ensureAuthenticated} = require('../helpers/auth');

// Load Idea Model
require('../models/Idea');
const Idea = mongoose.model('ideas');

// Idea Index Page
router.get('/', ensureAuthenticated, (req, res) => {
  Idea.find({user: req.user.id})
    .sort({date:'desc'})
    .then(ideas => {
      res.render('ideas/index', {
        ideas:ideas
      });
    });
});

// Idea Detail Page
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne ({
  _id: req.params.id
  })
  .then(idea => {
   if(idea.user != req.user.id){
      req.flash('error_msg', 'Not Authorized');
      res.redirect('/ideas');
   } else {
      res.render('ideas/detail', {
       idea:idea
     });
    }

  });
});

// Process Detail
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne({
    _id: req.params.id
  })
  .then(idea => {
    // new values
    idea.title = req.body.title;
    idea.imageUrl = req.file.path;
    idea.details = req.body.details

 })
  });


// Add Idea Form
router.get('/add', ensureAuthenticated, (req, res) => {
  res.render('ideas/add');
});

// Edit Idea Form
router.get('/edit/:id', ensureAuthenticated, (req, res) => {
  Idea.findByIdAndUpdate({
    _id: req.params.id
  })
  .then(idea => {
    if(idea.user != req.user.id){
      req.flash('error_msg', 'Not Authorized');
      res.redirect('/ideas');
    } else {
      res.render('ideas/edit', {
        idea:idea
      });
    }

  });
});

// Process Form
router.post('/', ensureAuthenticated, (req, res) => {
  let errors = [];

  if(!req.body.title){
    errors.push({text:'Please add a title'});
  }
  if(!req.body.details){
    errors.push({text:'Please add some details'});
  }

  if(errors.length > 0){
    res.render('/add', {
      errors: errors,
      title: req.body.title,
      imageUrl: req.file.path,
      details: req.body.details

    });
  } else {
    const newUser = {
      title: req.body.title,
      imageUrl: req.file.path,
      details: req.body.details,
      user: req.user.id
    }
    new Idea(newUser)
      .save()
      .then(idea => {
        req.flash('success_msg', 'Video idea added');
        res.redirect('/ideas');
      })
  }
});

// Edit Form process
router.put('/:id', ensureAuthenticated, (req, res) => {
  Idea.findByIdAndUpdate({
    _id: req.params.id
  })
  .then(idea => {
    // new values
    idea.title = req.body.title;
    idea.imageUrl = req.file.path;
    idea.details = req.body.details

    idea.save()
      .then(idea => {
        req.flash('success_msg', 'Video idea updated');
        res.redirect('/ideas');
      })
  });
});

// Delete Idea
router.delete('/:id', ensureAuthenticated, (req, res) => {
  Idea.deleteOne({_id: req.params.id})
    .then(() => {
      req.flash('success_msg', 'Video idea removed');
      res.redirect('/ideas');
    });
});

module.exports = router;

index.handlebars（视图）

{{#each ideas}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>

    <a href="/ideas/detail/{{id}}"><img class="ind1Class"  src="{{imageUrl}}" alt="thumbnail" class="img-thumbnail"
  style="width: 200px">

    <p>{{details}}</p>
    <a class="btn btn-dark btn-block mb-2" href="/ideas/edit/{{id}}">Edit</a>
    <form method="post" action="/ideas/{{id}}?_method=DELETE">
      <input type="hidden" name="_method" value="DELETE">
      <input type="submit" class="btn btn-danger btn-block" value="Delete">
    </form>
  </div>
{{else}}
  <p>No video ideas listed</p>
{{/each}}

detail.handlebars（查看）

{{#each ideas}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>
     <img class="detaClass" src="{{imageUrl}}">
    <p>{{details}}</p>
    <a class="btn btn-dark btn-block mb-2" href="/ideas/edit/{{id}}">Edit</a>
    <form method="post" action="/ideas/{{id}}?_method=DELETE">
      <input type="hidden" name="_method" value="DELETE">
      <input type="submit" class="btn btn-danger btn-block" value="Delete">
    </form>
  </div>
{{else}}
  <p>No video ideas listed</p>
{{/each}}

Answer 1

我终于明白了这一点，我没有注意太多的紧张......特别是如果只是吹了一毫'无论如何让我们停止追逐，路线ideas.js上几乎没有什么问题，并查看detail.handlebars // Idea Detail Page 部分应该是这样的，

   // Idea Detail Page
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne ({
  _id: req.params.id
  })
    .then(idea => {
      res.render('ideas/detail', {
       idea:idea


  });
});  
});

并且在视图（ detail.handlebars ）上需要进行一些调整，因为在 app.js 上我使用静态方法来保存图像目录，以便自动处理请求并通过 express 返回文件。 我们需要添加/上<div class="name"><img src="{{{imageUrl}}}"</div>以便它看起来像这样<div class="name"><img src="/{{{imageUrl}}}"</div>否则，如果您单击损坏的图像并在新标签上说打开图像，您将意识到它正在尝试到达路径/ideas/detail/images/2019-08-16T11:13:17.831Z-flask.png并且它会抱怨Cannot GET /ideas/detail/images/2019-08-16T11:13:17.831Z-flask.png来Cannot GET /ideas/detail/images/2019-08-16T11:13:17.831Z-flask.png相对路径问题添加/作为以上建议。 下面是编辑后的视图（ detail.handlebars ）

{{#idea}}
  <div class="card card-body mb-2">
    <h4>{{title}}</h4>

    <div class="name"><img src="/{{{imageUrl}}}"</div>

    <p>{{details}}</p>

  </div>
{{/idea}}