在 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}}