๐ ๊ณต๋ถํ๋ ์ง์ง์ํ์นด๋ ์ฒ์์ด์ง?
[CRUD์ ์ด์ฉํ File upload Web] (10) user ๋ฐ์ดํฐ ์ญ์ ํ๊ธฐ ๋ณธ๋ฌธ
๐ฉ๐ป ๋ฐฑ์๋(Back-End)/Node js
[CRUD์ ์ด์ฉํ File upload Web] (10) user ๋ฐ์ดํฐ ์ญ์ ํ๊ธฐ
์ง์ง์ํ์นด 2023. 3. 11. 21:32728x90
๋ฐ์ํ
<๋ณธ ๋ธ๋ก๊ทธ๋ 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") %>
728x90
๋ฐ์ํ
'๐ฉโ๐ป ๋ฐฑ์๋(Back-End) > Node js' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
Comments