express 로 아주 간단한 게시판 만들기
구현 계획
1. 최소한의 기능만을 제공한다
- 글쓰기(insert)
- 수정하기(update)
- 삭제하기(delete)
- 읽기(select)
2. 최소한의 view를 제공한다
- 일부러는 아니고 프론트를 할줄 몰라서 ㅠㅠ..........
3. 카운팅 기능을 제공한다
- 글을 edit 시도시에는 글의 count는 상승하지 않는다
- 글을 read시에는 count가 상승한다
1. 라이브러리 설치
- 각 필요한 라이브러리들을 설치해줍니다.
- npm install {NAME}으로 설치 도중 오류 발생시 sudo 권한으로 설치해줍니다.
sudo npm install fs
sudo npm install ejs
sudo npm install express
sudo npm install body-parser
sudo npm install mysql
2. mysql 설치
- windows의 경우 mysql-server 를 한번 설치하다가 중간에 오류가 발생했을때 다시 설치를 해도 제대로 설치가 되지 않는 경우가 많습니다.
- 이런 경우에는 마음을 내려놓고 bitnami를 설치해주는것이 편리합니다.
3. mysql 설정
- database를 생성해줍니다.
create database board;
- 게시판도 생성해줍니다.
- id는 auto_increment로 설정해줍니다.
CREATE TABLE `freeboard` (
`id` int NOT NULL AUTO_INCREMENT,
`name` varchar(50) COLLATE utf8mb4_general_ci NOT NULL,
`title` varchar(50) COLLATE utf8mb4_general_ci NOT NULL,
`content` varchar(500) COLLATE utf8mb4_general_ci NOT NULL,
`count` int,
`updateTimestamp` timestamp default now(),
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_general_ci;
INSERT INTO freeboard (name, title, content) VALUES('a', 'a', 'a');
INSERT INTO freeboard (name, title, content) VALUES('a', 'a', 'a');
INSERT INTO freeboard (name, title, content) VALUES('a', 'a', 'a');
2. app.js
- 각 필요한 라이브러리들을 임포트 해주고 app을 생성해줍니다
const fs = require('fs');
const ejs = require('ejs');
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
let client = mysql.createConnection({
user: 'root',
database: 'board',
password: '123456'
});
let app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.listen(52273, () => {
console.log("server run by 52273");
});
3. list.html
- 기본 html ui는 버튼 디자인이 예쁘지 않아서 부트스트랩을 가져다가 썼습니다.
- <style> 태그 사이에 넣어주면 부트스트랩이 적용됩니다.
- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</style>
</head>
<body>
<h1>freeboard</h1>
<button type="button" onclick="location.href='/insert'" class="btn btn-primary">insert</button>
<hr/>
<table width="100%" border="1">
<tr>
<th style="width: 8%">id</th>
<th style="width: 11%">name</th>
<th style="width: 45%">title</th>
<th style="width: 7%">count</th>
<th style="width: 13%">updateTimestamp</th>
<th style="width: 8%">delete</th>
<th style="width: 8%">edit</th>
</tr>
<% data.forEach(function (item, index) { %>
<tr>
<td><%= item.id %></td>
<td><%= item.name %></td>
<td><a href="/detail/<%= item.id %>"><%= item.title %></a></td>
<td><%= item.count %></td>
<td><%= item.updateTimestamp %></td>
<td><button type="button" onclick="location.href='/delete/<%= item.id %>'" class="btn btn-danger">delete</button></td>
<td><button type="button" onclick="location.href='/edit/<%= item.id %>'" class="btn btn-info">edit</button></td>
</tr>
<% }); %>
</table>
</body>
</html>
4. app.js
localhost:{PORT}/ 에 접속시 게시글 목록을 바로 볼 수 있도록 추가해줍니다.
게시글 목록에서 글 본문은 필요 없기 때문에 제외하고 select 하도록 했습니다.
페이징 처리는 하지 않았습니다.
날짜를 전체로 가져오면 지저분하기 때문에 date_format(updateTimestamp,\'%Y-%m-%d %H:%i:%s\') updateTimestamp 로 포맷을 정해서 가져온다
const fs = require('fs');
const ejs = require('ejs');
const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
let client = mysql.createConnection({
user: 'root',
database: 'board',
password: '123456'
});
let app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.get('/', (req, res) => {
fs.readFile('list.html', 'utf-8', (err, data) => {
client.query('SELECT id, name, title, count, date_format(updateTimestamp,\'%Y-%m-%d %H:%i:%s\') updateTimestamp ' +
'FROM freeboard', (err, result) => {
res.send(ejs.render(data, {
data: result
}));
});
});
});
app.listen(52273, () => {
console.log("server run by 52273");
});