JS/JS__node-express게시판만들기

1 - 설정 및 read

말하는감자 2020. 11. 12. 14:44

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

<!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");
});

'JS > JS__node-express게시판만들기' 카테고리의 다른 글

1 - 설정 및 read  (0) 2020.11.12