게시판 글 작성하기

게시판에 글을 쓰는 작업도 이어서 진행해보도록 하겠습니다. 게시글을 쓴다는 것은 DB에 내가 쓴 게시글의 내용이 저장된다는 뜻 이겠죠? 일단 간단한 글 쓰기 페이지 폼을 작성해보도록 하겠습니다.

views/write.pug

link(rel='stylesheet', href='css/bootstrap.css')
link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css')
ons-page
    ons-toolbar
    div(style='text-align: center; margin-top:3%;')
        section(style='padding: 8px')
            textarea.text-input#subject(type='text', ng-model='text', placeholder='제목', style='width: 80%; height:30px;')
        section(style='padding: 0 8px 8px')
            textarea.textarea#content(ng-model='text2', placeholder='내용', style='width: 80%; height: 400px;')
        section(style='padding: 0 8px 8px')
            button(type="button" class='btn btn-primary' onclick='submitFunction()') Submit
 
script.
    var subject = document.getElementById('subject');
    var content = document.getElementById('content');
    var url = 'http://localhost:3000/write_receive';
    function submitFunction() {
        var data = {'subject':subject.value, 'content':content.value};
        data = JSON.stringify(data);
        var xhr = new XMLHttpRequest();
        xhr.open('POST',url,true);
        xhr.setRequestHeader('Content-type','application/json');
        xhr.send(data);
        xhr.addEventListener('load',function(){
            var result = JSON.parse(xhr.responseText);
            if(result.result=='ok'){
                alert('작성완료')
                location.replace('http://localhost:3000/commuity')
            }
        })
    }

이 부분에서는 페이지를 렌더링하는 것 뿐만 아니라 client 단에서 server 쪽으로 데이터를 보내는 POST 통신이 필요하기 때문에

post 라우터도 같이 작성해주어야 합니다.

routes/write.js

1 2 3 4 5 6 7 8 9 10 11 12

let express = require('express') let router = express.Router() let app = express(); let path = require('path') app.set('views',path.join(__dirname,'views')); app.set('view engine','pug')   router.get('/',function(req,res){     res.render('write') })   module.exports = router;

cs

routes/write_receive.js

let express = require('express')
let router = express.Router()
let app = express();
let path = require('path')
let board = require('../function/board')
let session = require('express-session')
app.set('views',path.join(__dirname,'views'));
app.set('view engine','pug')
app.use(session({
    secret:'123123123',
    resave:false,
    saveUninitialize:true
}));
 
router.post('/',function(req,res){
    board.boardWriteFunction(req.body.subject,req.body.content,req.session.idx,function(result){
        res.json(result)
    })    
})
 
module.exports = router;

이전과는 다르게 POST 방식을 작성합니다. 

app.js

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const cookieParser = require('cookie-parser');
const bodyParser = require('body-parser');
const session = require('express-session')
const passport = require('passport')
const sequelize = require('sequelize')
const models = require('./models')
const app = express();
 
//app.get
const indexRouter = require('./routes/index');
const commuityRouter = require('./routes/commuity')
const writeRouter = require('./routes/write');
//app.post
const writeReceiveRouter = require('./routes/write_receive');
 
//sequelize
models.sequelize.sync()
    .then(function() {
    console.log('✓ DB connection success.');
      console.log('  Press CTRL-C to stop\n');
  })
  .catch(function(err) {
    console.error(err);
    console.log('✗ DB connection error. Please make sure DB is running.');
    process.exit();
  });
 
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
 
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use(cookieParser())
app.use(session({
    secret:'123123123',
    resave:false,
    saveUninitialize:true
}));
app.use(express.static(__dirname));
 
//get
app.use('/', indexRouter);
app.use('/commuity',commuityRouter);
app.use('/write',writeRouter);
//post
app.use('/write_receive',writeReceiveRouter);
 
// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});
 
// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
 
  // render the error page
  res.status(err.status || 500);
  res.render('error');
});
module.exports = app;
 

웬만하면 commuity 페이지에 글쓰기 버튼을 만들어서 글쓰기 페이지로 넘어가면 좋겠지만 코드가 좀 많이 변형되어버려서 주소를 직접 타이핑하여 글쓰기 페이지로 접근하겠습니다.

일단 실행을 한 후 localhost:3000/write 로 접근하면 이런 페이지가 나올 것입니다.

submit 버튼을 누르게 되면 routes/write_receive.js 파일로 가게 됩니다. 해당 텍스트박스에 작성한 내용을 post 라우터에 넘겨주게 됩니다. 그럼 그 데이터를 가지고 DB 처리를 하는 함수 boardWriteFunction 을 작성해줍니다.

기존에 게시글을 로드하는 함수에 이어서 작성하겠습니다.

function/board.js

let models = require('../models');
 
function boardWriteFunction(subject,content,fk_userId,callback){
    let responseData = {'result':'ok'}
    models.Board.create({
        subject:subject,
        content:content,
        fk_userId: fk_userId,
    }).then(function(result){
        callback(responseData)
    }).catch(function(err){
        console.log(err)
    })
}
 
exports.boardWriteFunction = boardWriteFunction;

제목과 내용을 DB에 저장해준 후에 해당 함수를 호출했던 router에 responseData를 넘겨줍니다. Ajax를 사용하였기 때문에 데이터 처리가 무사히 되었다는 사인을 보낸다고 생각하시면 됩니다.

무사히 전송이 됐다면 이렇게 alert 창이 뜨게 되고 commuity 페이지를 로드해주면 해당 내용이 추가됩니다.