помогите разобраться с выводом nodejs express

122

13 июня 2019, 06:10

Появилась новая проблема. Сброшу только код сервера и всех .ejs - файлов. Проблема в том, что данные картинки не отображаются теперь на странице поста!Я просто не совсем понимаю, как использовать 1 файл в разных местах, может лучше создать отдельно другой шаблон, что бы небыль таких проблем? Я думаю проблемы уйдут почти все сразу!

Сервер находится в корне. Все фалды .ejs - находятся в /views/ (кроме последнего, его место расположения /views/blocks/post.ejs)

server.js -->

var express = require("express");
var bodyParser = require('body-parser');
var MongoClient = require('mongodb').MongoClient;
var ObjectId = require('mongodb').ObjectId;
var db = require('./db');
var app = express();
var urlencodedParser = bodyParser.urlencoded({ extended: false })
var obj = [
  {
    title: "What about my Blog",
    id: 1,
    url: "http://nabeel.co.in/files/bootsnipp/gallery/1.jpg",
    description: 'Now i want to tell you something...'
  },
  {
    title: "What about my Blog",
    id: 2,
    url: "http://nabeel.co.in/files/bootsnipp/gallery/2.jpg",
    description: 'Now i want to tell you something...'
  },
  {
    title: "What about my Blog",
    id: 3,
    url: "http://nabeel.co.in/files/bootsnipp/gallery/3.jpg",
    description: 'Now i want to tell you something...'
  }
];
console.log(obj[0].url);
app.set("view engine", "ejs");
app.use("/public", express.static("public"));
// Home Page Getting
app.get('/', function(req, res) {
    res.render('home', {obj: obj});
});
//About Page Getting
app.get('/about', function(req, res){
  res.render('about');
});
//Post ID
app.get('/post/:id', function(req, res){
  res.render('post-page', {postId: req.param.id, item: obj});
});
//About Page Getting
app.get('/contact', function(req, res){
  res.render('contact');
});
// Error 404 Page
app.use(function(req, res) {
    res.render("404");
});
app.listen(3000);

home.ejs -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pavel's Blog</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
    <link rel="stylesheet" href="/public/css/style.css">
  </head>
  <body>
    <header id="header__main">
      <% include blocks/navigation.ejs %>
    </header>
    <section id="posts">
      <div class="container gal-container">
        <div class="row">
          <% obj.forEach(function(item){ %>
                    <% include blocks/post.ejs %>
                <% }); %>
        </div>
      </div>
    </section>
    <% include blocks/footer.ejs %>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

post-page.ejs -->

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Pavel's Blog</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"
    integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
    <link rel="stylesheet" href="/public/css/style.css">
  </head>
  <body>
    <header id="header__main">
      <% include blocks/navigation.ejs %>
    </header>
    <section id="posts">
      <div class="container gal-container">
        <h1><%= item.title %></h1>
        <% include blocks/post.ejs %>
        <p><%= item.description %></p>
      </div>
    </section>
    <% include blocks/footer.ejs %>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
  </body>
</html>

ну и сам post.ejs -->

<div class="col-md-4 col-sm-6 co-12 gal-item">
  <div class="box">
    <a href="/post/<%= item.id %>" data-toggle="modal" data-target="#<%= item.id %>">
      <img src="<%= item.url %>">
    </a>
    <div class="modal fade" id="8" tabindex="-1" role="dialog">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
          <div class="modal-body">
            <img src="<%= item.url %>">
          </div>
          <div class="col-md-12 description">
            <h4>This is the eighth one on my Gallery</h4>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Вы передаете в шаблон весь объект постов, а нужно только нужный Вам пост согласно его id. Для этого используемся filter.

var obj = [ 
  { 
    title: "What about my Blog", 
    id: 1, 
    url: "http://nabeel.co.in/files/bootsnipp/gallery/1.jpg", 
    description: 'Now i want to tell you something...' 
  }, 
  { 
    title: "What about my Blog", 
    id: 2, 
    url: "http://nabeel.co.in/files/bootsnipp/gallery/2.jpg", 
    description: 'Now i want to tell you something...' 
  }, 
  { 
    title: "What about my Blog", 
    id: 3, 
    url: "http://nabeel.co.in/files/bootsnipp/gallery/3.jpg", 
    description: 'Now i want to tell you something...' 
  } 
]; 
let = need_id = 2; //искомый id  
let find = obj.filter(item => {return (item.id == need_id)? item: false}); 
console.log(find);

Ваш route будет выглядеть так

app.get('/post/:id', function(req, res){ 
  let post = obj.filter(item => {return (item.id == req.params.id)? item: false})[0]; 
 
  res.render('post-page', {postId: req.params.id, item: post}); 
});