반응형
EJS
Html + java script 로 Html형식에서 좀더 js를 자유롭게 쓸 수 있도록 해준다.
npm사이트 - ejs 모듈 설치
<%= %>태그를 사용한다.
index.js
const { Console } = require('console');
const exp = require('constants');
var express = require('express');
var app = express();
// post body값을 받기 위한 설정.
app.use(express.json())
app.use(express.urlencoded({extended: true}))
// set the view engine to ejs
app.set('view engine', 'ejs');
// index page
app.get('/', function(req, res) {
// index.ejs 실행
res.render('index', {num: 5});
});
app.get('/create', function(req, res) {
res.send('hi');
console.log(req.query)
});
app.post('/createpo', function(req, res) {
res.send('by');
console.log(req.body)
});
app.listen(8080);
console.log('Server is listening on port 8080');
index.ejs
<!DOCTYPE html>
<html lang="ko">
<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>내 페이지</title>
</head>
<body>
// 덧셈연산
<h1><%= 1+3 %></h1>
// 변수값 출력
<h1><%= num %></h1>
// if활용
<% if(num>4) { %>
<h1><%= num %></h1>
<% } %>
// GET
<form action="/create" method="get">
<input type="text" id="lname" name="content"><br><br>
<input type="submit" value="Submit">
</form>
// POST
<form action="/createpo" method="post">
<input type="text" id="lname" name="contentpo"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>index.js에서 index.ejs파일을 부르기 위해서는 index.ejs파일이 views폴더 안에 들어있어야 한다.
DB없이 게시판 만들기
index.ejs
<!DOCTYPE html>
<html lang="ko">
<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>내 페이지</title>
</head>
<body>
<h1>댓글목록</h1>
<ul>
<% for(comment of comments) { %>
<li><%= comment %></li>
<% } %>
</ul>
<hr>
<form action="/create" method="post">
<input type="text" id="lname" name="content"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>index.js
const { Console } = require('console');
const exp = require('constants');
var express = require('express');
var app = express();
let comments = [];
// post body값을 받기 위한 설정.
app.use(express.json())
app.use(express.urlencoded({extended: true}))
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.render('index', {comments: comments});
});
app.post('/create', function(req, res) {
console.log(req.body)
const { content } = req.body
comments.push(content)
console.log(comments);
res.redirect('/');
});
app.listen(8080);
console.log('Server is listening on port 8080');
데이터베이스
CRUD
- create
- read
- update
- delete
ORM
익숙한 언어(js,java, 등등)의 형태를 사용하여 SQL문으로 변환해주는 기능을 수행
npm사이트 - Sequelize, sqlite3 모듈 설치
index.ejs
<!DOCTYPE html>
<html lang="ko">
<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>내 페이지</title>
</head>
<body>
<h1>댓글목록</h1>
<ul>
<% for(comment of comments) { %>
<li><%= comment.content %></li>
<form action="/update/<%= comment.id %>" method="post">
<input type="text" name="content">
<input type="submit" value="수정하기">
</form>
<form action="/delete/<%= comment.id %>" method="post">
<input type="submit" value="삭제하기">
</form>
<% } %>
</ul>
<hr>
<form action="/create" method="post">
<input type="text" name="content"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>index.js
const { Console } = require('console');
const exp = require('constants');
var express = require('express');
const { userInfo } = require('os');
var app = express();
const { Sequelize, DataTypes, where } = require('sequelize');
const sequelize = new Sequelize({
dialect: 'sqlite',
storage: 'database.sqlite'
});
const Comments = sequelize.define('Comments', {
content: {
type: DataTypes.STRING,
allowNull: false // 필수 강제성 부여
}
}, {
});
(async() => {
// await Comments.sync({force: true}) 초기화되는 옵션
await Comments.sync()
})()
// post body값을 받기 위한 설정.
app.use(express.json())
app.use(express.urlencoded({extended: true}))
app.set('view engine', 'ejs');
// CRUD - Read
app.get('/', async function(req, res) {
const comments = await Comments.findAll();
res.render('index', {comments: comments});
});
// CRUD - Create
app.post('/create', async function(req, res) {
const { content } = req.body
const jane = await Comments.create({content: content})
res.redirect('/');
});
// CRUD - Update
app.post('/update/:id', async function(req, res) {
const { content } = req.body
const { id } = req.params
await Comments.update({content: content}, {
where: {
id : id
}
})
res.redirect('/');
});
// CRUD - Delete
app.post('/delete/:id', async function(req, res) {
const { id } = req.params
await Comments.destroy({
where : {
id : id
}
})
res.redirect('/');
});
app.listen(8080);
console.log('Server is listening on port 8080');반응형
'Web' 카테고리의 다른 글
| [JS] 조코딩 4주차 강의 (0) | 2022.08.13 |
|---|---|
| [JS] 조코딩 3주차 강의 (0) | 2022.08.06 |
| [HTML] 조코딩 2주차 강의 (0) | 2022.07.31 |
| [HTML] 조코딩 1주차 강의 (0) | 2022.07.23 |
| [HTML] 나만의 프로필만들기-스파르타코딩클럽 (0) | 2022.07.22 |
댓글