본문 바로가기
카테고리 없음

MyBatis를 이용한 SpringBoot 애플리케이션 구현 2 - 게시판 등록

by ^..^v 2020. 6. 1.
728x90
반응형

게시판 목록 조회 페이지에 [새글] 버튼을 추가하고, [새글] 버튼을 클릭했을 때 요청을 처리할 컨트롤러를 추가합니다. 

<!-- /mybatisdemo/src/main/resources/templates/board/boardList.mustache -->

<!DOCTYPE html>
<html>
<head>
   :
</head>
<body>
	<div class="container">
		  :		
		<div>
			<a class="btn btn-primary" href="/boardWrite.do" role="button">새글</a>
		</div>
	</div>
		  :
</body>
</html>
// /mybatisdemo/src/main/java/com/example/mybatisdemo/controller/BoardController.java

package com.example.mybatisdemo.controller;
		:
@Controller
public class BoardController {
		:
	@RequestMapping("/boardWrite.do")
	public String boardWrite() throws Exception {
		return "/board/boardWrite";
	}
}

 

게시판 글쓰기 화면을 생성합니다. 

<!-- /mybatisdemo/src/main/resources/templates/board/boardWrite.mustache -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 등록</title>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">	
</head>
<body>
	<div class="container">
		<h2>게시판 등록</h2>
		<div class="col-md-12">
			<div class="col-md-4">
				<form>
					<div class="form-group">
						<label for="title">제목</label>
						<input type="text" class="form-control" id="title" placeholder="제목을 입력하세요.">
					</div>
					<div class="form-group">
						<label for="creatorId">작성자</label>
						<input type="text" class="form-control" id="creatorId" placeholder="작성자를 입력하세요.">
					</div>
					<div class="form-group">
						<label for="contents">내용</label>
						<input type="text" class="form-control" id="contents" placeholder="내용을 입력하세요.">
					</div>
				</form>
				<a href="/boardList.do" role="button" class="btn btn-secondary">취소</a>
				<button type="button" class="btn btn-primary" id="btnWrite">등록</button>
			</div>
		</div>
	</div>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>	
</body>
</html>

 

게시판 내용 저장을 처리하는 쿼리맵을 정의합니다. 

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0/EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">

<!-- /mybatisdemo/src/main/resources/mapper/sql-board.xml -->
<mapper namespace="com.example.mybatisdemo.mapper.BoardMapper">
		:
	<!-- 게시판 저장 -->
	<insert id="insertBoard" parameterType="com.example.mybatisdemo.dto.BoardDto">
		insert into board (title, contents, creator_id, created_dt, updater_id, updated_dt)
		           values (${title}, contents, ${creatorId}, now(), ${creatorId}, now())
	</insert>
</mapper>

 

맵퍼와 서비스에 게시판 저장을 추가합니다.

// /mybatisdemo/src/main/java/com/example/mybatisdemo/mapper/BoardMapper.java

package com.example.mybatisdemo.mapper;

import java.util.List;

import org.apache.ibatis.annotations.Mapper;

import com.example.mybatisdemo.dto.BoardDto;

@Mapper
public interface BoardMapper {
		:
	// 게시판 저장
	void insertBoard(BoardDto board) throws Exception;
}
// /mybatisdemo/src/main/java/com/example/mybatisdemo/service/BoardService.java

package com.example.mybatisdemo.service;

import java.util.List;

import com.example.mybatisdemo.dto.BoardDto;

public interface BoardService {
		:
	// 게시판 저장
	void insertBoard(BoardDto board) throws Exception;
}
// /mybatisdemo/src/main/java/com/example/mybatisdemo/service/BoardServiceImpl.java

package com.example.mybatisdemo.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.example.mybatisdemo.dto.BoardDto;
import com.example.mybatisdemo.mapper.BoardMapper;

@Service
public class BoardServiceImpl implements BoardService {
	@Autowired
	private BoardMapper boardMapper;
		:
	@Override
	public void insertBoard(BoardDto board) throws Exception {
		boardMapper.insertBoard(board);
	}
}

 

컨트롤러에 사용자 요청과 서비스 맵핑을 추가합니다.

// /mybatisdemo/src/main/java/com/example/mybatisdemo/controller/BoardApiController.java

package com.example.mybatisdemo.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.example.mybatisdemo.dto.BoardDto;
import com.example.mybatisdemo.service.BoardService;

@RequestMapping(path = "/api")
@RestController
public class BoardApiController {
		:
	@PostMapping("/board")
	public void insertBoard(@RequestBody BoardDto boardDto) throws Exception {
		boardService.insertBoard(boardDto);

	}
}

 

게시판 등록 버튼을 클릭했을 때의 동작을 자바스크립트에 추가합니다. 

var board = {
	init: function() {
		var _this = this;
		$('#btnWrite').on('click', function() {
			_this.write();
		});
	}, 
	write: function() {
		var url = '/api/board';
		var data = {
			title: $('#title').val(),
			creatorId: $('#creatorId').val(),
			contents: $('#contents').val()
		};
		fetch(url, {
			method: 'POST', 
			headers: {
				'Content-Type': 'application/json'
			}, 
			body: JSON.stringify(data)
		})
		.then(data => {
			console.log(JSON.stringify(data));
			alert('글이 등록되었습니다.');
			window.location.href = '/boardList.do';
		})
		.catch(error => {
			console.error(error);
			alert('게시글 저장 중 오류가 발생했습니다.');
			window.location.href = '/boardList.do';
		});
	}
};

board.init();

 

게시판 글쓰기 페이지에 자바스크립 코드를 추가합니다.

<!-- /mybatisdemo/src/main/resources/templates/board/boardWrite.mustache -->

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>게시판 등록</title>
<link rel="stylesheet"
	href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">	
</head>
<body>
		:
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>	
	<script src="/js/board.js"></script>
</body>
</html>

 

브라우저를 통해서 테스트합니다.

728x90
반응형
저작자표시 비영리 변경금지

댓글

티스토리툴바