본문 바로가기
개발/Spring Boot

스프링부트(Spring Boot) 게시판 만들기 #8 - 상세 만들기

by chansungs 2023. 9. 25.
728x90
반응형

환경

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

 

게시판 상세를 만들어보겠습니다.

전체 소스를 올릴 것이니 확인해 보시기 바랍니다.

중간중간 수정한 소스들도 있습니다!!

 

Notice.xml

<?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">
<mapper namespace="com.example.springbasic.notice.mapper.NoticeMapper">

    <!-- 게시글 목록 -->
    <select id="selectNoticeList" resultType="com.example.springbasic.notice.dto.response.NoticeResponse">
        select
             RANK() over (ORDER BY notice_id desc) as rankNo
            ,notice_id
            ,title
            ,content
            ,create_id
            ,create_at
        from study.notice
    </select>

    <!-- 게시글 단건 조회 -->
    <select id="selectOneNotice" parameterType="int"
            resultType="com.example.springbasic.notice.dto.response.NoticeResponse">
        select
              notice_id
             ,title
             ,content
             ,create_id
             ,create_at
        from study.notice
        where 1=1
          and notice_id = #{noticeId}
    </select>

</mapper>

 

NoticeMapper

package com.example.springbasic.notice.mapper;

import com.example.springbasic.notice.dto.response.NoticeResponse;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

@Mapper
public interface NoticeMapper {

    List<NoticeResponse> selectNoticeList();

    NoticeResponse selectOneNotice(int noticeId);

}

 

NoticeService

package com.example.springbasic.notice.service;

import com.example.springbasic.notice.dto.response.NoticeResponse;
import com.example.springbasic.notice.mapper.NoticeMapper;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
@RequiredArgsConstructor
public class NoticeService {

    private final NoticeMapper noticeMapper;


    public List<NoticeResponse> selectNoticeList() {
        return noticeMapper.selectNoticeList();
    }

    public NoticeResponse selectOneNotice(int noticeId) {
        return noticeMapper.selectOneNotice(noticeId);
    }

}

 

 

NoticeController

package com.example.springbasic.notice.controller;

import com.example.springbasic.notice.dto.response.NoticeResponse;
import com.example.springbasic.notice.service.NoticeService;
import lombok.RequiredArgsConstructor;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import java.util.List;

@Controller
@RequiredArgsConstructor
@RequestMapping("/notice")
public class NoticeController {

    private final NoticeService noticeService;

    /** 게시판 목록 */
    @RequestMapping(value = "", method = RequestMethod.GET)
    public String notice(Model model) {

        List<NoticeResponse> noticeResponse = noticeService.selectNoticeList();
        System.out.println("notice noticeResponse ==> " + noticeResponse);
        model.addAttribute("notices", noticeResponse);

        return "notice/notice";
    }

    /** 게시판 상세 */
    @RequestMapping(value = "/notice-detail/{noticeId}", method = RequestMethod.GET)
    public String noticeDetail(@PathVariable("noticeId") int noticeId, Model model) {

        NoticeResponse noticeResponse = noticeService.selectOneNotice(noticeId);
        System.out.println("noticeDetail noticeResponse ==> " + noticeResponse);
        model.addAttribute("notice", noticeResponse);

        return "notice/noticeDetail";
    }

}

 

 

notice.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>
    <meta charset="UTF-8">
    <title>게시판 목록</title>
</head>
<style>
    table { border: 1px solid black; }
    th { border: 1px solid black; width: 5%; }
    td { border: 1px solid black; width: 5%; }
</style>
<body>
    <h1>게시판 목록</h1>

    <table border="1">
        <tr>
            <th>순번</th>
            <th>제목</th>
            <th>작성자</th>
            <th>등록일</th>
        </tr>
        <c:forEach var = "list" items = "${notices}">
            <tr>
                <td>${list.rankNo}</td>
                <td onclick="detailMove('${list.noticeId}');">${list.title}</td>
                <td>${list.createId}</td>
                <td>${list.createAt}</td>
            </tr>
        </c:forEach>

    </table>

</body>
</html>
<script>

    // 상세화면 이동
    function detailMove(noticeId) {
        location.href = "notice/notice-detail/" + noticeId;
    }

</script>

 

 

noticeDetail.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>
    <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%">${notice.createId}</td>
    </tr>
    <tr>
        <td align="center">제목</td>
        <td><input type="text" name="subject" style="width: 95%;" value="${notice.title}"></td>
    </tr>
    <tr>
        <td align="center">내용</td>
        <td><textarea name="content" style="width: 95%;height: 200px;">${notice.content}</textarea></td>
    </tr>
    <tr>
        <td colspan="2" align="center">
            <button type="button">수정</button>
            <button type="button" onclick="noticeListMove();">목록</button>
        </td>
    </tr>
</table>

</body>
</html>
<script>

    // 목록이동
    function noticeListMove() {
        location.href = "/notice";
    }

</script>

 

 

패키지 구조 입니다.

참고 바랍니다.

 

 

실행화면입니다. ㅎㅎㅎ

제목을 클릭하면 상세화면으로 이동합니다!!

 

소스는 깃헙에서 확인하셔도 됩니다.

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
반응형