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

Question

我正在努力建立一个将显示详细页面的工作逻辑显示帖子的标题、图片和详细信息。到目前为止，我已经设法显示列表页面，该页面实际上列出了当前登录用户的所有帖子以及标题、图像和详细信息。当我点击图片时，我应该会被带到一个链接，该链接将显示特定帖子的详细信息。顺便说一句，链接看起来像这样 http://192.168.1.250:5000/ideas/detail/5d491f36886a56259bad2580详细页面符合预期，但很有趣，标题、图片和帖子的详细信息没有显示，更糟糕的是，在我的 detail.handlebars View 页面上，我有一个虚拟文本“未列出视频创意”好吧，这段文字被渲染了。下面是我的路线 ideas.js 代码，分别查看 index.handlebars、detail.handlebars。非常感谢您的帮助和支持。

ideas.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( View )

{{#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( View )

{{#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
router.get('/detail/:id', ensureAuthenticated, (req, res) => {
  Idea.findOne ({
  _id: req.params.id
  })
    .then(idea => {
      res.render('ideas/detail', {
       idea:idea


  });
});  
});

并对 View (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要克服相对路径问题，请添加 /如上所述。以下是编辑后的 View ( 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}}