오늘 내가 배운 것
1. Express를 이용한 CRUD
Express 통신을 이용한 CRUD의 C, U영역 만들기
전체적인 흐름은 위에 사진과 같은 흐름으로 진행된다.
작성 시 주의사항
1. a태그를 이동시 경로를 잘 확인해서 적어야 한다. 기존엔 파일을 이동하는 것이었는데, 지금은 경로를 지정해 경로에 해당하는 라우터를 읽고 요청과 응답 메시지에 의해 파일을 보여주는 것이다.
2. view페이지에 선택한 게시글로 가기 위해서 고유 index를 querystring에 같이 담아서 확인할 수 있도록 한다.
완성 확인하기
코드 확인하기
더보기
index.html
<!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>Document</title>
</head>
<body>
{{name}} Hello, world@@@
<a href="/list">리스트 바로가기</a>
<script type='text/javascript' src="/js/index.js"></script>
</body>
</html>list.html
<!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>Document</title>
</head>
<body>
<h1> 게시판 리스트 입니다.</h1>
<table>
<tr>
<td>번호</td>
<td>제목</td>
<td>작성자</td>
<td>작성일</td>
<td>조회수</td>
</tr>
{% for item in list %}
<tr>
<!-- nunjucks의 index값을 구할 때 사용 -->
<td>{{loop.index-1}}</td>
<td><a href="/view?index={{loop.index-1}}">{{item.subject}}</a></td>
<td>{{item.name}}</td>
<td>4</td>
<td>5</td>
</tr>
{%endfor%}
</table>
<a href="/write">글작성</a>
</body>
</html>write.html
<!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>Document</title>
</head>
<body>
<h1>Write페이지 입니다.</h1>
<form action="/write" method="post">
<ul>
<li>
제목 : <input type="text" name='subject'>
</li>
<li>이름 : <input type="text" name="name"></li>
<li>내용<br/>
<textarea name="content" ></textarea></li>
</ul>
<button type="submit">전송</button>
</form>
</body>
</html>view.html
<!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>Document</title>
</head>
<body>
<h1>VIEW페이지 입니다.</h1>
<ul>
<li>제목 : {{subject}}</li>
<li>작성자 : {{name}}</li>
<li>내용 : {{content}}</li>
</ul>
<a href="/list">리스트페이지로 돌아가기</a>
</body>
</html>server.js
const express = require('express')
const nunjucks = require('nunjucks')
const app = express()
const list = [{name:"test", subject:"test", content:"test"}]
app.set('view engine','html')
nunjucks.configure('views', {
express:app,
})
app.use(express.static("public"))
app.use(express.urlencoded({extended : false}))
app.get('/', (req, res)=>{
const{name} = req.query
res.render('index.html' , {name})
})
app.get('/list' , (req,res)=>{
res.render('list.html', {list})
})
app.get('/write', (req, res)=>{
res.render('write.html')
})
app.post('/write', (req,res)=>{
const {name, content, subject} = req.body
list.push({name,content,subject})
res.redirect(`view?index=${list.length-1}`)
})
app.get('/view', (req,res)=>{
const {index} = req.query
console.log(list[index])
res.render("view.html",{...list[index]})
})
app.listen(3000, ()=>{
console.log("server start")
})index.js
alert('hello~!~!~!')
'시작 > TIL(Today I Learned)' 카테고리의 다른 글
| 221221 - JavaScript - Promise() (0) | 2022.12.21 |
|---|---|
| 221220 - Node Express - Router 객체를 이용한 라우팅 분리 (0) | 2022.12.21 |
| 221215 - Node Express - defer와 DOMContentLoaded (1) | 2022.12.16 |
| 221214 - Node Express 기초 (0) | 2022.12.15 |
| 221213 - HTTP 통신 / Request, Response Message (0) | 2022.12.14 |
댓글