반응형
완성된 파일
예제_v8.zip## 해당 게시글의 css와 js는 sementic-ui를 사용 했습니다. ##
## 글을 읽기전 꼭 확인 해주세요. ##
부가적인 설명을 보시기 전, 마리아디비와 마이바티스를 연동을 해야 합니다.
만약, 연동을 하지 않았다면 아래의 링크를 확인 해주세요.
알카이브 파일을 넣는법을 모르신다면 아래의 링크를 참고 해주세요.
DB에 SQL을 넣는법을 모르신다면 아래의 링크를 참고 해주세요.
[Srping] heidisql에 테이블 생성 sql문 넣기
## 결과 화면 ##
## 간단한 소스코드 해석 ##
main.jsp
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>게시판 페이지</title> <!-- css 가져오기 --> <link rel="stylesheet" type="text/css" href="/coco/resources/semantic.min.css"> <style type="text/css"> body { background-color: #DADADA; } body>.grid { height: 100%; } .image { margin-top: -100px; } .column { max-width: 1000px; } .view_btn { cursor: pointer; } </style> </head> <body> <div class="ui middle aligned center aligned grid"> <div class="column"> <h2 class="ui teal image header"> 게시판 페이지 </h2> <div class="ui large form"> <div class="ui stacked segment"> <a href="/coco/write_bbs"><button class="ui fluid large teal submit button">게시글 작성하기</button></a> <table class="ui celled table"> <thead> <tr> <th>#</th> <th>제목</th> <th>등록자</th> <th>등록일</th> </tr> </thead> <tbody id="list"> </tbody> </table> </div> <div class="ui error message"></div> </div> </div> </div> <div class="ui modal" id='view_modal'> <i class="close">x</i> <div class="header" id="b_title"> </div> <div class="content"> <div class="description"> <p style = "text-align: right" id = "b_review"></p> <div id = 'b_content'></div> </div> </div> <div class="actions"> <div class="ui black deny button"> 닫기 </div> </div> </div> <!-- js 가져오기 --> <script src="/coco/resources/jquery3.3.1.min.js"></script> <script src="/coco/resources/semantic.min.js"></script> <script> $(document).ready(function() { $.ajax({ type: "get", url: "bbs_all", success: function(data) { //데이터 만큼 폴문을 돌림 for (var str in data) { //변수 tr에 속성을 data-id로 data[str]['b_no']를 넣어주고 id가 list인 태그에 추가 var tr = $("<tr></tr>").attr("data-id", data[str]['b_no']).appendTo("#list"); //tr에 td테이블 추가 및 클래스 추가 + 텍스트 수정 $("<td></td>").text(data[str]['b_no']).addClass("view_btn").appendTo(tr); $("<td></td>").text(data[str]['b_title']).addClass("view_btn").appendTo(tr); $("<td></td>").text(data[str]['b_ownernick']).addClass("view_btn").appendTo(tr); $("<td></td>").text(FormatToUnixtime(data[str]['b_regdate'])).addClass("view_btn").appendTo(tr); } }, error: function(error) { alert("오류 발생" + error); } }); $(document).on("click", ".view_btn", function() { //해당하는 태그 속성중 DATA-ID를 가져와서 B_NO에 담음 var b_no = $(this).parent().attr("data-id"); $.ajax({ type: "get", url: "get_bbs", data: { b_no: b_no }, success: function(data) { //해당하는 ID에 텍스트문 변경 $("#b_title").text(data['b_title']); $("#b_review").text(data['b_ownernick'] + " - " + FormatToUnixtime(data['b_regdate'])); $("#b_content").text(data['b_content']); //모달을 실행 $('#view_modal').modal('show'); }, error: function(error) { alert("오류 발생" + error); } }); }); function FormatToUnixtime(unixtime) { var u = new Date(unixtime); return u.getUTCFullYear() + '-' + ('0' + u.getUTCMonth()).slice(-2) + '-' + ('0' + u.getUTCDate()).slice(-2) + ' ' + ('0' + u.getUTCHours()).slice(-2) + ':' + ('0' + u.getUTCMinutes()).slice(-2) + ':' + ('0' + u.getUTCSeconds()).slice(-2) }; }); </script> </body> </html> | cs |
## 간단해서 위 소스코드의 해석을 보시면 나머지는 해결 되실꺼에요. ##
## 컨트롤러와 나머지 도메인에 대한 정보는 이전 게시글을 참고 바랍니다. ##
반응형
'스프링(Spring) > 스프링 개발자료 배포' 카테고리의 다른 글
| [Spring] 간단한 게시판 등록 예제 소스 (9) | 2018.12.05 |
|---|---|
| [Spring] 간단한 회원가입 및 로그인 로그아웃 예제 소스 (2) | 2018.11.29 |
