728x90
반응형

DB없이 게시판 만들기 [express, ejs]

 

deploy : https://port-0-crud-sqlite-jocoding-53px25lbuimiei.gksl2.cloudtype.app/

깃허브저장소 : https://github.com/pyoja/crud_sqlite_jocoding

 

index.js

var express = require('express');
var app = express();

let comments = [];

// req.body 오는 값을 읽기 위해 적용
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// <%= %> 또는 <% %> 같이 html에서 js를 쓰기위한 ejs 라이브러리
app.set('view engine', 'ejs');

// index page
app.get('/', function(req, res) {
  res.render('index', {comments: comments});
});

app.post('/create', function(req, res) {
    console.log(req.body)
    const {content} = req.body //form태그에 있는 name="content"
    comments.push(content)
    console.log(comments)
    res.redirect('/')
});

app.listen(3000);
console.log('Server is listening on port 3000');

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>

sqlite를 이용한 DB활용

https://sequelize.org/ 를 이용하여 SQL문법이 아닌 JS 문법으로 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.id %> <%= 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" id="lname" name="content"><br><br>
        <input type="submit" value="Submit">
      </form>
</body>
</html>

index.js

var express = require('express');
var app = express();

const { Sequelize, DataTypes } = require('sequelize');
const sequelize = new Sequelize({
    dialect: 'sqlite',
    storage: 'database.sqlite'
  });

const Commnets = sequelize.define('Commnets', {
  content: {
    type: DataTypes.STRING,
    allowNull: false
  },

}, {
  // Other model options go here
});

(async() => {
await Commnets.sync();
})();

// req.body 오는 값을 읽기 위해 적용
app.use(express.json())
app.use(express.urlencoded({ extended: true }))

// <%= %> 또는 <% %> 같이 html에서 js를 쓰기위한 ejs 라이브러리
app.set('view engine', 'ejs');

// index page
app.get('/', async function(req, res) {
    const comments = await Commnets.findAll();
    res.render('index', { comments: comments });
});

app.post('/create', async function(req, res) {
    console.log(req.body)
    const {content} = req.body //form태그에 있는 name="content"
    await Commnets.create({ content : content });
    res.redirect('/')
});

app.post('/update/:id', async function(req, res) {
    const {content} = req.body
    const {id} = req.params
    await Commnets.update({ content: content }, {
    where: {
      id: id
    }
  });

    res.redirect('/')
});

app.post('/delete/:id', async function(req, res) {
    const {id} = req.params
    await Commnets.destroy({
    where: {
      id: id
    }
  });
    res.redirect('/')
});

app.listen(3000);
console.log('Server is listening on port 3000');
728x90
반응형

+ Recent posts