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

Question

我正在努力建立一个将显示详细页面的工作逻辑显示 post 的标题、图片和详细信息。到目前为止，我已经设法显示列表页面，该页面实际上列出了当前登录用户的所有 post 以及标题、图像和详细信息。当我单击图像时，我应该被带到 link，它将显示特定 post 的详细信息。顺便说一句，link 看起来像这样 http://192.168.1.250:5000/ideas/detail/5d491f36886a56259bad2580 好吧，我的代码的奇怪之处在于，当我在图像上 clink 时，我会按预期进入详细页面，但很有趣post 的标题、图像和详细信息未显示，更糟糕的是，在我的 detail.handlebars 视图页面上，我有一个虚拟文本“No video ideas listed”，而且此文本已呈现。下面是我的路线 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（查看）

{{#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
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 来克服相对路径问题添加 / 如上所述。以下是编辑后的观点 (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}}

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

Struggling to set up a logic to display detailed page in express.js (node.js)

javascript

node.js

express

handlebars.js