Spring Data JPA, Spring Boot, Oracle, AngulerJS 적용게시판실습 게시판리스트보기.

Size: px

Start display at page:

Download "Spring Data JPA, Spring Boot, Oracle, AngulerJS 적용게시판실습 게시판리스트보기."

Ezra Moody
5 years ago
Views:

1 Spring Data JPA, Spring Boot, Oracle, AngulerJS 적용게시판실습 게시판리스트보기 Spring JDBC 또는 MyBatis로만들때보다쉽고빠르게작성할수있다. 스프링컨트롤러는 RestController를적용했으며, 뷰페이지에 Bootstrap 및 AngulerJS 적용했다. 프로젝트전체구조는다음과같다. [BoardRepository.java] 기본적으로제공하는 JpaRepository 를상속받아만들면된다.

2 JpaRepository는 PagingAndSortingRepository를상속받았고 PagingAndSortingRepository는 CrudRepository( 기본적인 CRUD 기능을제공한다 ) 를상속받았으며다시 CrudRepository는 Repository 인터페이스를상속받았다. 그러므로 JpaRepository는모든기능을다사용할수있고추가적으로영속성컨텍스트에 flush하거나엔티티를배치로삭제할수있다. 기본기능만으로도게시판기능을구현할수있으므로 JpaRepository를상속받자. package jpa.board.repository; import org.springframework.data.jpa.repository.jparepository; import jpa.board.model.board; public interface BoardRepository extends JpaRepository<Board, Integer> { 서비스쪽클래스를작성하자. [BoardService.java] package jpa.board.service; import org.springframework.data.domain.page; import jpa.board.model.board; public interface BoardService { // 게시판리스트보기 public Page<Board> findall(integer curpage); JpaRepository 의 findall() 메소드를호출만하면되는데페이징기능을구현하기위해 PageRequest 를만들고이를 findall() 메소드의인자로넣어주면된다. Board 테이블에서정렬한칼럼이두개이상이므로 Sort 를 new 하면서 Order 를필요한만큼 생성해주면되고 ASC 는오름차순, DESC 는내림차순, 그뒤의문자열은 Board 엔티티의속성 이다.

3 [BoardServiceImpl.java] package jpa.board.service; import org.springframework.beans.factory.annotation.autowired; import org.springframework.data.domain.page; import org.springframework.data.domain.pagerequest; import org.springframework.data.domain.sort; import org.springframework.data.domain.sort.direction; import org.springframework.data.domain.sort.order; import org.springframework.stereotype.service; import jpa.board.model.board; import public class BoardServiceImpl implements BoardService BoardRepository // // 게시판리스트보기, 한페이지에 3개씩 // curpage: 요청하는페이지, 첫페이지는 0 // public Page<Board> findall(integer curpage) { PageRequest pr = new PageRequest(curPage, 3, new Sort( new Order(Direction.DESC, "reply"), new Order(Direction.ASC, "replystep"))); return boardrepository.findall(pr); 컨트롤러를작성하자. [BoardController.java]

4 package jpa.board.controller; import org.springframework.beans.factory.annotation.autowired; import org.springframework.data.domain.page; import org.springframework.data.domain.pageable; import org.springframework.stereotype.controller; import org.springframework.ui.model; import org.springframework.web.bind.annotation.pathvariable; import org.springframework.web.bind.annotation.requestmapping; import org.springframework.web.bind.annotation.requestmethod; import jpa.board.model.board; public class BoardController BoardService boardservice; // // 루트요청 (localhost:8080/board/) 시리스트보기로 = RequestMethod.GET) public ModelAndView index() { //jsp아래 board.jsp 호출 return new ModelAndView("board"); // // 게시판리스트보기 method = RequestMethod.GET) public ResponseEntity<Page<Board>> list(model model, Pageable Integer curpage) { Page<Board> page = boardservice.findall(curpage); return new ResponseEntity<Page<Board>>(page, HttpStatus.OK);

5 src/main/webapp/js, src/main/webapp/jsp 폴더를만들고 app.js, board_controller.js, board_service.js, list.jsp 를만들자. [src/main/webapp/js /app.js] 'use strict'; var App = angular.module('myboard',[]); [src/main/webapp/js /board_service.js] 'use strict'; App.factory('BoardService', ['$http', '$q', function($http, $q){ return { ]); ; list: function(curpage) { return $http.get(' + curpage).then( function(response){ console.log("[service:list]server call suceeded."); return response.data;, function(errresponse){ console.error('error while fetching contents'); return $q.reject(errresponse); ); [src/main/webapp/js /board_controller.js] 'use strict'; App.controller('BoardController', ['$scope', 'BoardService', function($scope, BoardService) { var self = this;

6 self.board={id:null,name:'',passwd:'',title:'',content:''; self.page=[]; ]); // 리스트보기 self.list = function(curpage){ BoardService.list(curPage).then( function(data) { self.page = data; console.log("[controller:list]", self.page); //alert(" 목록보기성공!");, function(errresponse){ console.error('error while fetching page...'); ); ; self.list(0); [board.jsp] <%@ page contenttype="text/html; charset=utf-8"%> <%@ taglib prefix="c" uri=" <%@ taglib prefix="fmt" uri=" <html> <head> <title>spring JPA 게시판 </title> <link rel="stylesheet" href=" <style>.name.ng-valid { background-color: lightgreen;.name.ng-dirty.ng-invalid-required { background-color: red;

7 .name.ng-dirty.ng-invalid-maxlength { background-color: yellow;.passwd.ng-valid { background-color: lightgreen;.passwd.ng-dirty.ng-invalid-required { background-color: red;.passwd.ng-dirty.ng-invalid-maxlength { background-color: yellow;.title.ng-valid { background-color: lightgreen;.title.ng-dirty.ng-invalid-required { background-color: red;.title.ng-dirty.ng-invalid-maxlength { background-color: yellow; body, #mainwrapper { height: 70%; background-color: rgb(245, 245, 245); body,.form-control { font-size: 12px!important;

8 .floatright { float: right; margin-right: 18px;.has-error { color: red;.formcontainer { background-color: #DAE8E8; padding: 20px;.tablecontainer { padding-left: 20px;.generic-container { width: 80%; margin-left: 20px; margin-top: 20px; margin-bottom: 20px; padding: 20px; background-color: #EAE7E7; border: 1px solid #ddd; border-radius: 4px; box-shadow: px black;.custom-width { width: 80px!important;.pointer { cursor: pointer; </style>

9 <script src=" <script src="<c:url value='/js/app.js' />"></script> <script src="<c:url value='/js/board_service.js' />"></script> <script src="<c:url value='/js/board_controller.js' />"></script> </head> <body ng-app="myboard" class="ng-cloak" ng-controller="boardcontroller as ctrl"> <div class="generic-container" ng-controller="boardcontroller as ctrl" style="width: 800px;"> <div class="panel panel-default"> <div class="panel-heading"> <span class="lead">spring Data JPA 게시판글쓰기 </span> <div class="formcontainer"> <form ng-submit="ctrl.submit()" name="myform" class="formhorizontal"> <input type="hidden" ng-model="ctrl.board.id" /> <div class="row"> <div class="form-group col-md-6"> <label class="col-md-2 control-lable" for="name">name : </label> <div class="col-md-7"> <input type="text" ngmodel="ctrl.board.name" id="name" class="name formcontrol input-sm" placeholder="enter your Name" required ng-maxlength="20" /> <div class="has-error" ngshow="myform.$dirty"> <span ngshow="myform.name.$error.required">this is a required field</span> <span ng-show="myform.name.$error.maxlength">maximum length is

10 20</span> <span ng-show="myform.name.$invalid">this invalid </span> field is <div class="row"> <div class="form-group col-md-6"> <label class="col-md-2 control-lable" for="passwd">password :</label> <div class="col-md-7"> <input type="password" ngmodel="ctrl.board.passwd" id="passwd" class="passwd form-control input-sm" placeholder="enter your Password" required ng-maxlength="20" /> <div class="has-error" ngshow="myform.$dirty"> <span ngshow="myform.passwd.$error.required">this is a required field</span> <span ng-show="myform.passwd.$error.maxlength">maximum length is 20</span> <span ng-show="myform.passwd.$invalid">this field is invalid </span> for="title">title :</label> <div class="row"> <div class="form-group col-md-6"> <label class="col-md-2 control-lable"

11 model="ctrl.board.title" id="title" control input-sm" your Title" required /> show="myform.$dirty"> show="myform.title.$error.required">this is a field</span> <span ng-show="myform.title.$invalid">this invalid </span> <div class="col-md-7"> <input type="text" ng- class="title form- placeholder="enter <div class="has-error" ng- <span ng- required field is <div class="row"> <div class="form-group col-md-6"> <label class="col-md-2 control-lable" for="content">contents :</label> <div class="col-md-7"> <textarea rows="4" ngmodel="ctrl.board.content" id="content" class="content form-control input-sm" placeholder="enter your Contents" required > </textarea> <div class="has-error" ngshow="myform.$dirty"> <span ngshow="myform.content.$error.required">this is a required

12 field</span> <span ng-show="myform.content.$invalid">this invalid </span> field is <div class="row"> <div class="form-actions floatright"> <input type="submit" value="{{!ctrl.board.id? 'Add' : 'Update'" class="btn btn-primary btnsm" ng-disabled="myform.$invalid"> <button type="button" ngclick="ctrl.reset()" class="btn btn-warning btnsm" ng-disabled="myform.$pristine">reset Form</button> </form> <div class="panel panel-default" style="float: center;"> <div class="panel-heading"> <span class="lead">spring Data JPA 게시판리스트보기 </span> <h5> 총 {{ctrl.page.totalelements</span> 건 </h5> <div class="tablecontainer"> <table width="600" border="1" align="left" class="table tablehover"> <tr align="left"> <th align="center"> 순번 </th> <th align="center"> 글번호 </th>

13 </tr> <th align="center"> 제목 </th> <th align="center"> 글쓴이 </th> <th align="center"> 등록일 </th> <th align="center"> 조회수 </th> <th align="center"> 조회 / 삭제 </th> <tr data-ng-repeat="board in ctrl.page.content"> <td align="center"><span ngbind="{{$index+1"></span></td> <td align="center"><span ngbind="board.id"></span></td> <td align="left">  <span ng-repeat="n in [].constructor(board.replylevel) track by $index"> </span> <span ng-bind="board.title"></span> </td> <td align="center"><span ngbind="board.name"></span></td> <td align="center">{{board.regdate date:"yy.mm.dd hh:mm"</td> <td align="center"><span ngbind="board.readcount"></span></td> <td> <button type="button" ngclick="ctrl.edit(board.id)" class="btn btn-success custom-width">edit</button> <button type="button" ngclick="ctrl.remove(board.id)" class="btn btn-danger custom-width">remove</button> </td> </tr> </tbody> </table>

14 <div>  <ul class="pagination"> <li ng-class="{disabled: ctrl.page.number === ng-show="ctrl.page.number!== 0" class="pointer" ng-click="ctrl.list(ctrl.page.number- <span ng-show="ctrl.page.number <li ng-class="{disabled: ctrl.page.number === <a ng-show="ctrl.page.number!== class="pointer" ng- <span ng-show="ctrl.page.number </li> 0"><a 1)">Prev</a> === 0">Prev</span></li> ctrl.page.totalpages - 1"> ctrl.page.totalpages - 1" click="ctrl.list(ctrl.page.number+1)">next</a> === ctrl.page.totalpages - 1">Next</span> </ul> </body> </html> [JpaboardApplication.java] 스프링부트메인 package jpa.board; import java.util.date; import org.springframework.beans.factory.annotation.autowired;

15 import org.springframework.boot.commandlinerunner; import org.springframework.boot.springapplication; import org.springframework.boot.autoconfigure.springbootapplication; import jpa.board.model.board; import public class JpaboardApplication implements BoardRepository boardrepository; public static void main(string[] args) { SpringApplication.run(JpaboardApplication.class, args); public void run(string...args) { // 테스트를위해글9개입력 Board b1 = new Board(); b1.setcontent("jpa강좌추천해주세요1~"); b1.setname(" 홍길동1"); b1.setpasswd("1111"); b1.setreadcount(0); b1.setregdate(new Date()); b1.setreply(1); b1.setreplylevel(0); b1.setreplystep(0); b1.settitle(" 강좌추천요망1"); boardrepository.save(b1); Board b2 = new Board(); b2.setcontent("jpa강좌추천해주세요2~"); b2.setname(" 홍길동2"); b2.setpasswd("1111"); b2.setreadcount(0); b2.setregdate(new Date()); b2.setreply(2); b2.setreplylevel(0); b2.setreplystep(0); b2.settitle(" 강좌추천요망2"); boardrepository.save(b2); Board b3 = new Board();

16 b3.setcontent("jpa강좌추천해주세요3~"); b3.setname(" 홍길동3"); b3.setpasswd("1111"); b3.setreadcount(0); b3.setregdate(new Date()); b3.setreply(3); b3.setreplylevel(0); b3.setreplystep(0); b3.settitle(" 강좌추천요망3"); boardrepository.save(b3); Board b4 = new Board(); b4.setcontent("ojc로가세요..."); b4.setname(" 홍길동4"); b4.setpasswd("1111"); b4.setreadcount(0); b4.setregdate(new Date()); b4.setreply(6); b4.setreplylevel(1); b4.setreplystep(1); b4.settitle("[ 답변 ] 강좌추천요망6"); boardrepository.save(b4); Board b5 = new Board(); b5.setcontent("ojc로가세요..."); b5.setname(" 홍길동5"); b5.setpasswd("1111"); b5.setreadcount(0); b5.setregdate(new Date()); b5.setreply(2); b5.setreplylevel(1); b5.setreplystep(1); b5.settitle("[ 답변 ] 강좌추천요망2"); boardrepository.save(b5); Board b6 = new Board(); b6.setcontent("jpa강좌추천해주세요6~"); b6.setname(" 홍길동6"); b6.setpasswd("1111"); b6.setreadcount(0); b6.setregdate(new Date()); b6.setreply(6); b6.setreplylevel(0); b6.setreplystep(0); b6.settitle(" 강좌추천요망6"); boardrepository.save(b6); Board b7 = new Board(); b7.setcontent("jpa강좌추천해주세요7~"); b7.setname(" 홍길동7"); b7.setpasswd("1111"); b7.setreadcount(0); b7.setregdate(new Date());

17 b7.setreply(7); b7.setreplylevel(0); b7.setreplystep(0); b7.settitle(" 강좌추천요망 7"); boardrepository.save(b7); Board b8 = new Board(); b8.setcontent("ojc로가세요..."); b8.setname(" 홍길동8"); b8.setpasswd("1111"); b8.setreadcount(0); b8.setregdate(new Date()); b8.setreply(7); b8.setreplylevel(1); b8.setreplystep(1); b8.settitle("[ 답변 ] 강좌추천요망7"); boardrepository.save(b8); Board b9 = new Board(); b9.setcontent("jpa강좌추천해주세요9~"); b9.setname(" 홍길동9"); b9.setpasswd("1111"); b9.setreadcount(0); b9.setregdate(new Date()); b9.setreply(9); b9.setreplylevel(0); b9.setreplystep(0); b9.settitle(" 강좌추천요망9"); boardrepository.save(b9); 실행 ( 리스트보기에는페이지기능이적용되어있다.

Spring Data JPA Simple Example

Spring Data JPA Simple Example http://ojcedu.com, http://ojc.asia Spring Boot, WEB MVC, Spring Data JPA, Maria DB 를이용하여간단히예제를만들어보자. 프로젝트생성 마리아 DB 설치는아래 URL 참조 http://ojc.asia/bbs/board.php?bo_table=lecspring&wr_id=524