본문 바로가기
개발/Spring Boot

스프링부트(Spring Boot) 게시판 만들기 #11 - 게시판 글쓰기

by chansungs 2023. 10. 3.
728x90
반응형

환경

- intellij, 자바11, mysql, mybatis, jsp 

 

 

목록, 수정, 삭제를 만들어 봤습니다.

등록을 한번 만들어보겠습니다.

 

INSERT INTO study.notice (title, content, create_id, create_at)

VALUES('제목', '내용', '작성자', CURRENT_TIMESTAMP);

 

테스트로 만들었던 insert문을 이용해서 수정해서 만들겠습니다.

 

 

 

NoticeController


/** 게시판 등록 화면 */
@RequestMapping(value = "/insert-view", method = RequestMethod.GET)
public String noticeInsertView() {
    return "notice/noticeInsert";
}

/** 게시판 등록 */
@RequestMapping(value = "/insert", method = RequestMethod.POST)
@ResponseBody
public int insertNotice(@RequestBody NoticeRequest noticeRequest) {
    System.out.println("insertNotice noticeRequest ==> " + noticeRequest);
    return noticeService.insertNotice(noticeRequest);
}

 

NoticeService

public int insertNotice(NoticeRequest request) {
    return noticeMapper.insertNotice(request);
}

 

NoticeMapper

int insertNotice(NoticeRequest request);

 

Notice.xml

<!-- 게시판 등록 -->
<insert id="insertNotice" parameterType="com.example.springbasic.notice.dto.request.NoticeRequest">
    INSERT INTO study.notice (title, content, create_id, create_at)
    VALUES(#{title}, #{content}, #{createId}, CURRENT_TIMESTAMP);
</insert>

 

게시판 목록에 등록 버튼을 만들어줍니다.

<div>
    <button type="button" onclick="insertNoticeMove();">등록</button>
</div>
// 등록화면 이동
function insertNoticeMove() {
    location.href = "notice/insert-view";
}

 

 

noticeInsert.jsp 생성

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>게시판 등록</title>
</head>
<body>

    <table border="1" cellspacing="0" cellpadding="0" width="90%">
        <tr width="90%">
            <td width="10%" align="center">작성자</td>
            <td width="50%"><input type="text" name="createId" id="createId" style="width: 95%;" placeholder="작성자를 입력하세요."></td>
        </tr>
        <tr>
            <td align="center">제목</td>
            <td><input type="text" name="title" id="title" style="width: 95%;" placeholder="제목을 입력하세요."></td>
        </tr>
        <tr>
            <td align="center">내용</td>
            <td><textarea name="content" id="content" style="width: 95%;height: 200px;" placeholder="내용 입력하세요."></textarea></td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button type="button" onclick=insertNotice();>등록</button>
                <button type="button" onclick="noticeListMove();">목록</button>
            </td>
        </tr>
    </table>

</body>
</html>
<script>

    const insertNotice = () => {

        const reqData = {
            createId : document.querySelector("#createId").value,
            title : document.querySelector("#title").value,
            content : document.querySelector("#content").value
        }

        console.log(reqData);

        $.ajax({
            type: 'post',
            url: '/notice/insert',
            data: JSON.stringify(reqData),
            dataType : "json",
            contentType:"application/json",
            success: function (resData) {
                console.log(resData);
                if (resData == 1) {
                    alert("등록완료")
                }
            },
            error: function (err) {
                console.log(err);
            }
        });

    }

</script>

 

화면

 

 

 

기본적인 CRUD를 완성했습니다!!! 크으.. 너무 행복하네요.

이 게시판에 이제 뭘 더 추가할까 고민입니다.

 

생각해보고 추가 후 포스팅 하겠습니다.

 

소스는 깃을 확인해 주세요.

https://github.com/pork1375/spring-basic

 

GitHub - pork1375/spring-basic

Contribute to pork1375/spring-basic development by creating an account on GitHub.

github.com

 

 

감사합니다.

 

728x90
반응형