Ejs、Mysqlを使用したCRUDの実装
40543 ワード
🪓Ejs、Mysqlを使用したCRUDの実装
ejsを使用してCRUDを実装する過程で,Ejs構文を学習する.
文章を読むのがおっくうな人は羽センターでソースコードを見ればいいです人です.
自動完了EJS
もしEjsが自動的に完成しなかったら、私は本当にやりたくありません.
こちらです。をダウンロードしてください
Topictableの作成
Egoingさん生活コードさんがCRUDを勉強している理由を見ていると、文字や内容を含むテーブルの名前はいつもTopicで命名されています.
これは重要な内容ではありません.そうしましょう.create table Topics(
id int auto_increment primary key,
Title varchar(30) not null,
Article varchar(100) not null,
Created date not null
)
Mainページ（READ） app.get("/main", (req, res) => {
const query = "SELECT * from Topics";
db.query(query, (err, result) => {
err ? res.send(err) : res.render("main", { data: result });
});
});
テーブル内のすべてのデータ.ejsに転送します. <body>
<div class="btnBox">
<button
onclick="location.href = '/create'"
class="w-50 mb-5 mt-2 btn btn-success"
>
글쓰기
</button>
</div>
<table class="table TableBox">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">글 제목</th>
<th scope="col">내용</th>
<th scope="col">날짜</th>
<th scope="col">수정/삭제</th>
</tr>
</thead>
<tbody>
<% data.forEach((el,index) => {%>
<tr>
<th scope="row"><%= index + 1%></th>
<td><%= el.Title %></td>
<td><%= el.Article %></td>
<td><%= el.Created.toLocaleDateString() %></td>
<td>
<a class="btn btn-warning" href="/edit/<%= el.id %> ">수정/삭제</a>
</td>
</tr>
</tbody>
<% }) %>
</table>
</body>
</html>
bootstrap-Tableコピーを貼り付けただけ重要なのはこれではありません.
foreach文によるejseach(自動完了)からのデータの受信
リストに追加します.
大事なのは.<a class="btn btn-warning" href="/edit/<%= el.id %> ">수정/삭제</a>
このようにhtmlの間にデータを置くことができます.反応器のように.ああ、そしてvscodeでは、自動的に完成していない、もっときれいに書いている人はいつも変です."/edit/<%= "el.id" %>"
このように閉じると、最初から最後までハードコーディングされ、自動的に異常を完了することはできません.
main.ejs
執筆実施(CREATE)
Create.ejs
<body>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/create"
method="post"
>
<h2 class="text-center">Create</h2>
<div class="d-flex justify-content-center">
<input name="Title" class="w-50 form-control text-center" type="text" />
</div>
<textarea name="Article" class="mt-4 text-center form-control" rows="8">/textarea>
<div class="text-center mt-3">
<button type="submit" class="btn btn-primary">글쓰기</button>
</div>
</form>
</body>
POSTリクエストを/createに送信します.app.post("/create", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const query = `
insert into Topics(Title ,Article,Created)
values(?,?,DATE_FORMAT(now(), '%Y-%m-%d'))`;
db.query(query, [Title, Article], (err, result) => {
err ? res.send(err) : res.send('<script>location.href = "/main"</script>');
});
});
body-parserはタイトルと文章を受信し、insert文を使用してTopics Tableに追加します.
db.これをqeuryの2番目のパラメータとして使用することに慣れていない場合、よく知られている変更形式はこのようになります. insert into Topics(Title ,Article,Created)
values(${Title},${Article},DATE_FORMAT(now(), '%Y-%m-%d'))`;
修正の実装(UPDATE) const ID = req.params.id;
const query = "select * from Topics where id = ?";
db.query(query, ID, (err, result) => {
if (err) {
res.send(err);
} else if (result == "") {
res.send("찾으시는 페이지가 존재하지않습니다.");
} else res.render("Edit", { id: ID, Data: result[0] });
});
});
簡単にidをパラメータとして(/id/3)
見つかった文章をwhere文で返します.
結果値が[]<でない場合は、検索するページがありません. <form id="delete" action="/delete" method="post"></form>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/edit"
method="post"
>
<h2 class="text-center">
<%= Data.Created.toLocaleDateString() + "에 작성됨"%>
</h2>
<input
name="Title"
class="text-center form-control"
value="<%= Data.Title %> "
type="text"
/>
<input name="id" type="hidden" value="<%= Data.id %> " />
<input name="id" form="delete" type="hidden" value="<%= Data.id %> " />
<textarea name="Article" class="mt-4 text-center form-control" rows="8">
<%= Data.Article %>
</textarea
>
<div class="text-center mt-3">
<button type="submit" class="btn btn-warning">수정</button>
<button type="submit" form="delete" class="btn m-3 btn-danger">
삭제
</button>
</div>
</form>
どれも差が少ないのでejs部分は説明する必要はありませんが、よく見ると
formは2つあります.この部分に気をつければいい
今から見れば、私はどうしてそんなにコードを書くのかと思います.面倒くさいので、乞食を作ったような気がします.
/edit postリクエスト処理
app.post("/edit", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const ID = req.body.id;
const query = `
update Topics set Title = ?,
Article = ?,
Created = DATE_FORMAT(now(), '%Y-%m-%d') where id = ? `;
db.query(query, [Title, Article, ID], (err, result) => {
err ? console.log(err)
: res.send('<script>location.href = "/main"</script>');
});
update文を使用して修正機能を実現しました.
完成の様子
https://github.com/leejw05/ejs-board/blob/master/README.md
(動画あり)
しかしCRUDにDがない理由は(Delete)
私の文章を見てついてくる人はいないと思いますが、もし誰かがいたら
Delete機能は自分で実現でき、ダメならGitをクローンして自分のものにすることができます.
Reference
この問題について(Ejs、Mysqlを使用したCRUDの実装), 我々は、より多くの情報をここで見つけました
https://velog.io/@zeta050525/EjsMysql로-CRUD-구현하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
もしEjsが自動的に完成しなかったら、私は本当にやりたくありません.
こちらです。をダウンロードしてください
Topictableの作成
Egoingさん生活コードさんがCRUDを勉強している理由を見ていると、文字や内容を含むテーブルの名前はいつもTopicで命名されています.
これは重要な内容ではありません.そうしましょう.create table Topics(
id int auto_increment primary key,
Title varchar(30) not null,
Article varchar(100) not null,
Created date not null
)
Mainページ（READ） app.get("/main", (req, res) => {
const query = "SELECT * from Topics";
db.query(query, (err, result) => {
err ? res.send(err) : res.render("main", { data: result });
});
});
テーブル内のすべてのデータ.ejsに転送します. <body>
<div class="btnBox">
<button
onclick="location.href = '/create'"
class="w-50 mb-5 mt-2 btn btn-success"
>
글쓰기
</button>
</div>
<table class="table TableBox">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">글 제목</th>
<th scope="col">내용</th>
<th scope="col">날짜</th>
<th scope="col">수정/삭제</th>
</tr>
</thead>
<tbody>
<% data.forEach((el,index) => {%>
<tr>
<th scope="row"><%= index + 1%></th>
<td><%= el.Title %></td>
<td><%= el.Article %></td>
<td><%= el.Created.toLocaleDateString() %></td>
<td>
<a class="btn btn-warning" href="/edit/<%= el.id %> ">수정/삭제</a>
</td>
</tr>
</tbody>
<% }) %>
</table>
</body>
</html>
bootstrap-Tableコピーを貼り付けただけ重要なのはこれではありません.
foreach文によるejseach(自動完了)からのデータの受信
リストに追加します.
大事なのは.<a class="btn btn-warning" href="/edit/<%= el.id %> ">수정/삭제</a>
このようにhtmlの間にデータを置くことができます.反応器のように.ああ、そしてvscodeでは、自動的に完成していない、もっときれいに書いている人はいつも変です."/edit/<%= "el.id" %>"
このように閉じると、最初から最後までハードコーディングされ、自動的に異常を完了することはできません.
main.ejs
執筆実施(CREATE)
Create.ejs
<body>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/create"
method="post"
>
<h2 class="text-center">Create</h2>
<div class="d-flex justify-content-center">
<input name="Title" class="w-50 form-control text-center" type="text" />
</div>
<textarea name="Article" class="mt-4 text-center form-control" rows="8">/textarea>
<div class="text-center mt-3">
<button type="submit" class="btn btn-primary">글쓰기</button>
</div>
</form>
</body>
POSTリクエストを/createに送信します.app.post("/create", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const query = `
insert into Topics(Title ,Article,Created)
values(?,?,DATE_FORMAT(now(), '%Y-%m-%d'))`;
db.query(query, [Title, Article], (err, result) => {
err ? res.send(err) : res.send('<script>location.href = "/main"</script>');
});
});
body-parserはタイトルと文章を受信し、insert文を使用してTopics Tableに追加します.
db.これをqeuryの2番目のパラメータとして使用することに慣れていない場合、よく知られている変更形式はこのようになります. insert into Topics(Title ,Article,Created)
values(${Title},${Article},DATE_FORMAT(now(), '%Y-%m-%d'))`;
修正の実装(UPDATE) const ID = req.params.id;
const query = "select * from Topics where id = ?";
db.query(query, ID, (err, result) => {
if (err) {
res.send(err);
} else if (result == "") {
res.send("찾으시는 페이지가 존재하지않습니다.");
} else res.render("Edit", { id: ID, Data: result[0] });
});
});
簡単にidをパラメータとして(/id/3)
見つかった文章をwhere文で返します.
結果値が[]<でない場合は、検索するページがありません. <form id="delete" action="/delete" method="post"></form>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/edit"
method="post"
>
<h2 class="text-center">
<%= Data.Created.toLocaleDateString() + "에 작성됨"%>
</h2>
<input
name="Title"
class="text-center form-control"
value="<%= Data.Title %> "
type="text"
/>
<input name="id" type="hidden" value="<%= Data.id %> " />
<input name="id" form="delete" type="hidden" value="<%= Data.id %> " />
<textarea name="Article" class="mt-4 text-center form-control" rows="8">
<%= Data.Article %>
</textarea
>
<div class="text-center mt-3">
<button type="submit" class="btn btn-warning">수정</button>
<button type="submit" form="delete" class="btn m-3 btn-danger">
삭제
</button>
</div>
</form>
どれも差が少ないのでejs部分は説明する必要はありませんが、よく見ると
formは2つあります.この部分に気をつければいい
今から見れば、私はどうしてそんなにコードを書くのかと思います.面倒くさいので、乞食を作ったような気がします.
/edit postリクエスト処理
app.post("/edit", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const ID = req.body.id;
const query = `
update Topics set Title = ?,
Article = ?,
Created = DATE_FORMAT(now(), '%Y-%m-%d') where id = ? `;
db.query(query, [Title, Article, ID], (err, result) => {
err ? console.log(err)
: res.send('<script>location.href = "/main"</script>');
});
update文を使用して修正機能を実現しました.
完成の様子
https://github.com/leejw05/ejs-board/blob/master/README.md
(動画あり)
しかしCRUDにDがない理由は(Delete)
私の文章を見てついてくる人はいないと思いますが、もし誰かがいたら
Delete機能は自分で実現でき、ダメならGitをクローンして自分のものにすることができます.
Reference
この問題について(Ejs、Mysqlを使用したCRUDの実装), 我々は、より多くの情報をここで見つけました
https://velog.io/@zeta050525/EjsMysql로-CRUD-구현하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
create table Topics(
id int auto_increment primary key,
Title varchar(30) not null,
Article varchar(100) not null,
Created date not null
)app.get("/main", (req, res) => {
const query = "SELECT * from Topics";
db.query(query, (err, result) => {
err ? res.send(err) : res.render("main", { data: result });
});
});
<body>
<div class="btnBox">
<button
onclick="location.href = '/create'"
class="w-50 mb-5 mt-2 btn btn-success"
>
글쓰기
</button>
</div>
<table class="table TableBox">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">글 제목</th>
<th scope="col">내용</th>
<th scope="col">날짜</th>
<th scope="col">수정/삭제</th>
</tr>
</thead>
<tbody>
<% data.forEach((el,index) => {%>
<tr>
<th scope="row"><%= index + 1%></th>
<td><%= el.Title %></td>
<td><%= el.Article %></td>
<td><%= el.Created.toLocaleDateString() %></td>
<td>
<a class="btn btn-warning" href="/edit/<%= el.id %> ">수정/삭제</a>
</td>
</tr>
</tbody>
<% }) %>
</table>
</body>
</html>
foreach文によるejseach(自動完了)からのデータの受信
リストに追加します.
大事なのは.
<a class="btn btn-warning" href="/edit/<%= el.id %> ">수정/삭제</a>"/edit/<%= "el.id" %>"main.ejs
執筆実施(CREATE)
Create.ejs
<body>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/create"
method="post"
>
<h2 class="text-center">Create</h2>
<div class="d-flex justify-content-center">
<input name="Title" class="w-50 form-control text-center" type="text" />
</div>
<textarea name="Article" class="mt-4 text-center form-control" rows="8">/textarea>
<div class="text-center mt-3">
<button type="submit" class="btn btn-primary">글쓰기</button>
</div>
</form>
</body>
POSTリクエストを/createに送信します.app.post("/create", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const query = `
insert into Topics(Title ,Article,Created)
values(?,?,DATE_FORMAT(now(), '%Y-%m-%d'))`;
db.query(query, [Title, Article], (err, result) => {
err ? res.send(err) : res.send('<script>location.href = "/main"</script>');
});
});
body-parserはタイトルと文章を受信し、insert文を使用してTopics Tableに追加します.
db.これをqeuryの2番目のパラメータとして使用することに慣れていない場合、よく知られている変更形式はこのようになります. insert into Topics(Title ,Article,Created)
values(${Title},${Article},DATE_FORMAT(now(), '%Y-%m-%d'))`;
修正の実装(UPDATE) const ID = req.params.id;
const query = "select * from Topics where id = ?";
db.query(query, ID, (err, result) => {
if (err) {
res.send(err);
} else if (result == "") {
res.send("찾으시는 페이지가 존재하지않습니다.");
} else res.render("Edit", { id: ID, Data: result[0] });
});
});
簡単にidをパラメータとして(/id/3)
見つかった文章をwhere文で返します.
結果値が[]<でない場合は、検索するページがありません. <form id="delete" action="/delete" method="post"></form>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/edit"
method="post"
>
<h2 class="text-center">
<%= Data.Created.toLocaleDateString() + "에 작성됨"%>
</h2>
<input
name="Title"
class="text-center form-control"
value="<%= Data.Title %> "
type="text"
/>
<input name="id" type="hidden" value="<%= Data.id %> " />
<input name="id" form="delete" type="hidden" value="<%= Data.id %> " />
<textarea name="Article" class="mt-4 text-center form-control" rows="8">
<%= Data.Article %>
</textarea
>
<div class="text-center mt-3">
<button type="submit" class="btn btn-warning">수정</button>
<button type="submit" form="delete" class="btn m-3 btn-danger">
삭제
</button>
</div>
</form>
どれも差が少ないのでejs部分は説明する必要はありませんが、よく見ると
formは2つあります.この部分に気をつければいい
今から見れば、私はどうしてそんなにコードを書くのかと思います.面倒くさいので、乞食を作ったような気がします.
/edit postリクエスト処理
app.post("/edit", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const ID = req.body.id;
const query = `
update Topics set Title = ?,
Article = ?,
Created = DATE_FORMAT(now(), '%Y-%m-%d') where id = ? `;
db.query(query, [Title, Article, ID], (err, result) => {
err ? console.log(err)
: res.send('<script>location.href = "/main"</script>');
});
update文を使用して修正機能を実現しました.
完成の様子
https://github.com/leejw05/ejs-board/blob/master/README.md
(動画あり)
しかしCRUDにDがない理由は(Delete)
私の文章を見てついてくる人はいないと思いますが、もし誰かがいたら
Delete機能は自分で実現でき、ダメならGitをクローンして自分のものにすることができます.
Reference
この問題について(Ejs、Mysqlを使用したCRUDの実装), 我々は、より多くの情報をここで見つけました
https://velog.io/@zeta050525/EjsMysql로-CRUD-구현하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
<body>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/create"
method="post"
>
<h2 class="text-center">Create</h2>
<div class="d-flex justify-content-center">
<input name="Title" class="w-50 form-control text-center" type="text" />
</div>
<textarea name="Article" class="mt-4 text-center form-control" rows="8">/textarea>
<div class="text-center mt-3">
<button type="submit" class="btn btn-primary">글쓰기</button>
</div>
</form>
</body>app.post("/create", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const query = `
insert into Topics(Title ,Article,Created)
values(?,?,DATE_FORMAT(now(), '%Y-%m-%d'))`;
db.query(query, [Title, Article], (err, result) => {
err ? res.send(err) : res.send('<script>location.href = "/main"</script>');
});
}); insert into Topics(Title ,Article,Created)
values(${Title},${Article},DATE_FORMAT(now(), '%Y-%m-%d'))`; const ID = req.params.id;
const query = "select * from Topics where id = ?";
db.query(query, ID, (err, result) => {
if (err) {
res.send(err);
} else if (result == "") {
res.send("찾으시는 페이지가 존재하지않습니다.");
} else res.render("Edit", { id: ID, Data: result[0] });
});
});見つかった文章をwhere文で返します.
結果値が[]<でない場合は、検索するページがありません.
<form id="delete" action="/delete" method="post"></form>
<form
id="edit"
style="height: 100vh"
class="container d-flex flex-column justify-content-center"
action="/edit"
method="post"
>
<h2 class="text-center">
<%= Data.Created.toLocaleDateString() + "에 작성됨"%>
</h2>
<input
name="Title"
class="text-center form-control"
value="<%= Data.Title %> "
type="text"
/>
<input name="id" type="hidden" value="<%= Data.id %> " />
<input name="id" form="delete" type="hidden" value="<%= Data.id %> " />
<textarea name="Article" class="mt-4 text-center form-control" rows="8">
<%= Data.Article %>
</textarea
>
<div class="text-center mt-3">
<button type="submit" class="btn btn-warning">수정</button>
<button type="submit" form="delete" class="btn m-3 btn-danger">
삭제
</button>
</div>
</form>formは2つあります.この部分に気をつければいい
今から見れば、私はどうしてそんなにコードを書くのかと思います.面倒くさいので、乞食を作ったような気がします.
/edit postリクエスト処理
app.post("/edit", (req, res) => {
const Title = req.body.Title;
const Article = req.body.Article;
const ID = req.body.id;
const query = `
update Topics set Title = ?,
Article = ?,
Created = DATE_FORMAT(now(), '%Y-%m-%d') where id = ? `;
db.query(query, [Title, Article, ID], (err, result) => {
err ? console.log(err)
: res.send('<script>location.href = "/main"</script>');
});完成の様子
https://github.com/leejw05/ejs-board/blob/master/README.md
(動画あり)
しかしCRUDにDがない理由は(Delete)
私の文章を見てついてくる人はいないと思いますが、もし誰かがいたら
Delete機能は自分で実現でき、ダメならGitをクローンして自分のものにすることができます.
Reference
この問題について(Ejs、Mysqlを使用したCRUDの実装), 我々は、より多くの情報をここで見つけました
https://velog.io/@zeta050525/EjsMysql로-CRUD-구현하기
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
Reference
この問題について(Ejs、Mysqlを使用したCRUDの実装), 我々は、より多くの情報をここで見つけました https://velog.io/@zeta050525/EjsMysql로-CRUD-구현하기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol