res.render 문제질문입니다

[김범우]

 " width="50%" height="200px">
                        <button class="btn btn-danger mt-1" data-id="<%=data2[i]._id %>">수정</button>
                    </li>
                </div>
                <% } %>
        </div>
    </div>
    <script>
        $('.btn').click(function (e) {
            var pointer = e.target.dataset.id;
            console.log(pointer);
            $.ajax({
                method: 'POST',
                url: '/change',
                data: { _id: pointer }
            }).done(function(결과){
                console.log('ajax post요청 성공');
            })
        })
    </script>

버튼선택해서 데이터를 ajax으로 /change 에 잘보냈습니다

서버에서는 요청.body로 받아서 db에서 내용을 찾아서 

console.log에 모두 잘보여줍니다

{
_id: 7,
title: '콜라',
description: '코카콜라',
date: '2021-12-13',
img: 'coke2.jpg'
}

여기까지 아무문제없이 항상잘되었습니다 빠트린게 없는거같은데

app.post("/change", function (요청, 응답) {
  db.collection("product").findOne({ _id: parseInt(요청.body._id) },function (err,result) {
      if(err) {return err;}
      var 결과 =result;
      console.log(결과);
      응답.render('change.ejs',{data:result});
    }
  );
});

서버에서 응답.render(change.ejs) 를해도 안되고 redirect로 다른 페이지나오게해도 안됩니다

응답.send 도 안됩니다  이상합니다 컴퓨터도 다시껏다켜보고 localhost 번호도 바꿔도보고

별짓 다해봣습니다 오타도없고요 이게 무슨 버그인건가요?

ejs 파일을 다지우고  p태그에 글하나만쓰고

응답.render 해도 안됩니다

오로지 app.get 으로 /change,fucntion(req,res){

응답.render('change.ejs') 만됩니다

post로 데이터 받아서  change.ejs 에 쏴주려고하는데 다른 프로젝트 연습은 죄다되는데

이것만안됩니다 이럴때가있는건가요?

 

[codingapple]

app.use(express.json());

이걸 서버파일 상단에 추가해봅시다 

아니면 /change post요청 처리해주는 코드가 주변에 하나 더있거나 그럴 수도 있습니다

[김범우]

아. .  빠른답변 너무 감사드립니다
하지만 상단에 코드 추가하고

주변에 코드 중복된거있나봐도 없는데도 페이지로 안넘어가네요 ;; ㅠㅠ  에러라도뜨면 찾아낼텐데 환장하겠네요 ㅎ;;

const express = require("express");
const app = express();
app.use(express.json());
const bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extends: true }));
const MongoClient = require("mongodb").MongoClient;
require("dotenv").config();
app.set("view engine", "ejs");
const methodOverride = require("method-override");
app.use(methodOverride("_method"));
app.use("/public", express.static("public"));

var db;
MongoClient.connect(process.env.MONGO_DB, function (err, client) {
  db = client.db("toyapp");
  app.listen(process.env.ROOT, function () {
    console.log("Listenig 8000");
  });
});
// 이미지 업로드를 위한 설치및 세팅  multer
let multer = require("multer");
var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, "./public/image"); /* 설정한경로에 저장해라 */
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname); /* 사용자가 저장한 이미지이름그데로저장 */
  },
});
var upload = multer({ storage: storage });
app.post("/upload", upload.single("image"), function (요청, 응답) {
  db.collection("counter").findOne(
    { name: "게시물개수" },
    function (err, result) {
      if (err) return err;
      var 총개시물개수 = result.totalpost;
      db.collection("product").insertOne(
        {
          _id: 총개시물개수 + 1,
          title: 요청.body.title,
          description: 요청.body.description,
          date: 요청.body.date,
          img: 요청.file.filename,
        },
        function (err, result) {
          응답.redirect("/");
          db.collection("counter").updateOne(
            { name: "게시물개수" },
            { $inc: { totalpost: 1 } }
          );
        }
      );
    }
  );
});
app.get("/", function (요청, 응답) {
  응답.render("main.ejs");
  console.log("main");
});
app.get("/sale", function (요청, 응답) {
  응답.render("sale.ejs");
});
app.get("/change", function (요청, 응답) {
    응답.render("change.ejs");
  });
 
app.post("/change", function (요청, 응답) {
  db.collection("product").findOne({ _id: parseInt(요청.body._id) },function (err,result) {
      var 결과 =result;
      console.log(결과);
      응답.render('change.ejs',{data:result});
    });
});

/* 상품 보여주는 거 */
app.get("/detail", function (요청, 응답) {
  db.collection("product")
    .find()
    .toArray(function (err, result) {
      응답.render("detail.ejs", { data: result });
    });
});
app.get("/update", function (요청, 응답) {
  db.collection("product")
    .find()
    .toArray(function (err, result) {
      응답.render("update.ejs", { data: result });
    });
});
app.get("/delete", function (요청, 응답) {
  응답.render("delete.ejs");
});

 

서버 코드입니다.

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Update page</title>
    <!-- JQuery import -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Bootstrap import -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
        crossorigin="anonymous"></script>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
    <!-- CSS Import -->
    <link rel="stylesheet" href="/public/main.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <% for (var i=0; i < data.length; i++){ %>
                <div class="col-6">
                    <li class="list-group-item">
                        <p>글번호 : <%=data[i]._id %>
                        </p>
                        <h4 class="text" data-id="<%=data[i]._id %>">상품명 : <%=data[i].title %>
                        </h4>
                        <h4 class="text">상품설명 : <%=data[i].description %>
                        </h4>
                        <p>상품등록 날짜 :<%=data[i].date %>
                        </p>>
                        " width="50%" height="200px">
                        <button class="btn btn-danger mt-1" data-id="<%=data[i]._id %>">수정</button>
                    </li>
                </div>
                <% } %>
        </div>
    </div>
    <script>
        $('.btn').click(function (e) {
            var pointer = e.target.dataset.id;
            console.log(pointer);
            $.ajax({
                method: 'POST',
                url: '/change',
                data: { _id: pointer }
            }).done(function(결과){
                console.log('ajax post요청 성공');
            })
        })
    </script>
</body>

</html>

ejs 코드입니다

"dependencies": {
    "body-parser": "^1.19.1",
    "dotenv": "^10.0.0",
    "ejs": "^3.1.6",
    "express": "^4.17.1",
    "method-override": "^3.0.0",
    "mongodb": "^4.2.1",
    "multer": "^1.4.4",
    "nodemon": "^2.0.15"
  }
}

dependencies 입니다 ㅠㅠ 도와주세요 ㅠㅠ

 

[codingapple]

app.post('/change' )가 ajax요청을 처리하는 api 였군요 

ajax 요청일 경우 응답.render 하면 안먹을 수 있습니다 ajax는 그냥 새로고침없이 데이터 주고받는 방법이라 그렇습니다

done 안에다가 자바스크립트로 페이지 이동하는 코드를 작성하거나 

ajax말고 새로고침되는 폼을 이용하거나 그러면 됩니다 

[김범우]

아 . .  선생님 너무 감사합니다 

ajax 요청은 응답으로 안될수있다는 좋은 경험하게되었습니다

ejs에서 자바스크립트로 done 에 location.href 사용했는데

잘되지만 데이터 바인딩을위해

 

ajax말고 선생님 말씀데로 form으로 post요청 하니 잘받아집니다!! 

 

ㅠㅠ 선생님의 무심한말투에 이미적응되서 패키지 강의를 다보게되었네요 . . 

앞으로도 좋은강의 올려주시겠지만

 

mySQL  과 node.js 도 선생님 강의로 배우면 더좋을듯합니다

나중에 영상제작하시면 참좋겠네요 .!!  감사합니다 

[글쓴이]

글