[CRUD을 이용한 File upload Web] (10) user 데이터 삭제하기

<본 블로그는 DCodeMania 의 유튜브를 참고해서 공부하며 작성하였습니 :-)>

=> CRUD App With Image Upload Using NodeJs, ExpressJs, MongoDB & EJS Templating Engine

 

 

🥕 user 데이터 삭제하기

 

🐧 routes/routes.js

const express = require("express");
const router = express.Router();
const User = require("../models/user");
const multer = require("multer");
const fs = require("fs");
const { resourceLimits } = require("worker_threads");

// image upload
var storage = multer.diskStorage({
  // 파일이 업로드될 경로 설정
  destination: function (req, file, cb) {
    cb(null, "./uploads");
  },
  // timestamp를 이용해 새로운 파일명 설정
  filename: function (req, file, cb) {
    cb(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
  }
})

var upload = multer({
  storage: storage,
}).single("image");   // 한 개의 이미지 처리

// Insert an user into database route
router.post("/add", upload, (req, res) => {
  const user = new User({
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    image: req.file.filename,
  });

  user.save().then((err) => {
    // index.js 에 res.locals.message 있음
    req.session.message = {
      type: "success",
      message: "User added successsfull!"
    };
    // 지정된 다른 URL로 재요청 (홈)
    res.redirect("/");
  }).catch((err) => {
    res.json({ message: err.message, type: "danger" });
  })
});

// 1) Get all users route
router.get("/", async (req, res) => {
  const user = await User.find();

  try {
    // Query를 이용할 때 프로미스를 리턴받고 싶다면 exec() 메서드를 이용
    // find()를 실행하여 Query의 인스턴스를 리턴
    res.render("index", {
      title: "Home Page",
      // 궁금 : 너 왜 error 잡히니?
      users: user
    });
  } catch (error) {
    (error) => {
      res.json({ message: error.message });
    }
  };
});

router.get("/add", (req, res) => {
  res.render("addUsers", { title: "Add users" });
})

// 2) Edit an user routes
router.get("/edit/:id", async (req, res) => {
  let id = req.params.id;
  const user = await User.findById(id);

  try {
    if (user == null) {
      res.redirect("/");
    } else {
      res.render("editUsers", {
        title: "Edit User",
        user: user,
      });
    }
  } catch (err) {
    res.redirect("/");
  }
});

// 3) Update user route
router.post("/update/:id", upload, async (req, res) => {
  let id = req.params.id;
  let new_image = "";

  if (req.file) {
    new_image = req.file.filename;
    try {
      // 동기 방식으로 파일 정보 읽기
      fs.readFileSync("./uploads/" + req.body.old_image);
    } catch (err) {
      console.log(err);
    }
  } else {
    req.image = req.body.old_image;
  }

  //  첫 번째 인자는 업데이트 하고자 하는 문서의 id, 두 번째 인자는 업데이트 할 정보 혹은 내용
  const user = await User.findByIdAndUpdate(id, {
    name: req.body.name,
    email: req.body.email,
    phone: req.body.phone,
    image: new_image
  });

  try {
    req.session.message = {
      type: "success",
      message: "User updated successfully!",
    };
    res.redirect("/");
  } catch (err) {
    res.json({ message: err.message, type: "danger" });
  }
});

// 4) Delete user route
router.get("/delete/:id", async (req, res) => {
  let id = req.params.id;
  // id 를 찾아서 지움
  await User.findByIdAndRemove(id);

  try {
    req.session.message = {
      type: "info",
      message: "User deleted successfully!"
    };
    res.redirect("/");
  } catch (err) {
    res.json({ message: err.message });
  }
});

module.exports = router;

 

🐧 views/editUser.ejs

<%- include("layout/header") %>

  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto mt-4">
        <div class="card shadow">
          <div class="card-header bg-success">
            <h3 class="text-light">Edit User (<%= user.name %>)</h3>
          </div>
          <div class="card-body p-4">
            <!-- add랑 router 경로 같아야 될듯? -->
            <form action="/update/<%= user._id %>" method="post" id="add-form" enctype="multipart/form-data">
              <div class="mb-3">
                <label for="name">Name</label>
                <input type="text" name="name" class="form-control form-control-lg" placeholder="Enter name"
                  value="<%= user.name %>" required />
              </div>
              <div class="mb-3">
                <label for="email">Email</label>
                <input type="email" name="email" class="form-control form-control-lg" placeholder="Enter email"
                  value="<%= user.email %>" required />
              </div>
              <div class="mb-3">
                <label for="phone">Phone</label>
                <input type="tel" name="phone" class="form-control form-control-lg" placeholder="Enter phone"
                  value="<%= user.phone %>" required />
              </div>
              <div class="mb-3">
                <label for="image" class="form-label">Select Image</label>
                <input type="file" name="image" class="form-control form-control-lg" />
                <img src="/<%= user.image %>" width="100" class="img-thumbnail mt-1">
              </div>
              <input type="hidden" name="old_image" value="<%= user.image %>">
              <div class="mb-3 d-grid">
                <input type="submit" name="submit" value="Update User" class="btn btn-success btn-lg" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>

  <%- include("layout/footer") %>

 

사용자를 추가한후에 빨간 쓰레기통을 눌러 삭제를 합니다~~~~~~~~~~ delete!