게시판 만들기

게시판 API 테스트 및 확인

API 서버를 띄우고 Swagger 에서 게시판 기능을 확인하고 테스트 해본다.

http://localhost:8080/swagger-ui.html

게시판 API 를 사용할 때에 인증토큰이 필요한데, 인증토큰은 swgger-ui 에서 User API 의 사용자 등록 API 를 호출하고, 등록된 사용자로 인증 API 에서 인증을 하면 인증토큰을 발급 받을 수 있다.

사용자 등록 API 는 테스트를 위해 열어둔 것으로 차후 시스템 연동이 될 경우에는 허용되지 않는다.

게시판 리스트 조회

각각의 도메인 작업은 모듈을 admin-webapp/src/main/webapp/app 하위에 디렉토리를 생성한 후 해당 디렉토리 하위에서 진행한다.

app 디렉토리 밑에 board 디렉토리를 생성한다.

도메인에 대한 기본 골격 만들기

board 디렉토리 밑으로 다음과 같이 파일과 디렉토리를 생성한다.

├── board
│   ├── board-service.js
│   ├── controllers
│   │   ├── BaordDetailCtrl.js
│   │   ├── BoardEditCtrl.js
│   │   └── BoardListCtrl.js
│   ├── module.js
│   └── views
│       ├── detail.html
│       ├── edit.html
│       └── list.html

각각의 파일은 다음 역할을 수행한다.

  • board-service.js : API 서버와 Board 관련된 통신을 수행하는 서비스 클래스
  • module.js : URL Route 기능 수행
  • views/*.html : 뷰 템플릿
  • controllers/*Ctrl.js : 뷰에 해당하는 컨트롤러

모듈 생성

app.boards 라는 이름의 모듈을 app/boards/module.js 위치에 생성한다.

"use strict";

angular.module('app.boards', ['ui.router', 'SmartAdmin'])
    .config(function ($stateProvider) {
        $stateProvider
            .state('app.boards', {
                url: '/boards',
                data: {
                    title: '게시판 관리'
                },
                views: {
                    "content@app": {
                        templateUrl: 'app/boards/views/list.html',
                        controller: 'BoardListCtrl'
                    }
                }
            })
            .state('app.boards.add', {
                url: '/boards/add',
                data: {
                    title: '게시판 등록'
                },
                views: {
                    "content@app": {
                        templateUrl: 'app/boards/views/edit.html',
                        controller: 'BoardEditCtrl'
                    }
                },
                resolve: {
                    srcipts: function(lazyScript){
                        return lazyScript.register([
                            'build/vendor.ui.js'
                        ])

                    }
                }
            })

            .state('app.boards.detail', {
                url: '/boards/{id}',
                data: {
                    title: '게시판 조회'
                },
                views: {
                    "content@app": {
                        templateUrl: 'app/boards/views/detail.html',
                        controller: 'BoardDetailCtrl'
                    }
                }
            })
            .state('app.boards.modify', {
                url: '/boards/{id}/edit/',
                data: {
                    title: '게시판 수정'
                },
                views: {
                    "content@app": {
                        templateUrl: 'app/boards/views/edit.html',
                        controller: 'BoardEditCtrl'
                    }
                },
                resolve: {
                    srcipts: function(lazyScript){
                        return lazyScript.register([
                            'build/vendor.ui.js'
                        ])

                    }
                }
            })
    });

위와 같이 URL 별로 뷰와 컨트롤러를 설정해준다.

그리고 app.js 에 추가된 모듈을 등록해준다.

angular.module('app', [
  ...
  'app.boards'
]

메뉴 추가

admin-webapp/src/main/webapp/app/layout/partials/navigation.tpl.html 에 '게시판목록' 페이지에 접근하는 링크를 추가한다.

<li>
    <a data-ui-sref="app.boards" title="Outlook">
        <i class="fa fa-lg fa-fw fa-home"></i> <span class="menu-item-parent">{{getWord('게시판 관리')}}</span></a>
</li>

서비스 추가

API 서버와 연동을 담당할 서비스 객체를 app/boards/board-service.js 에 정의한다. 정확한 인터페이스는 Swagger 설정을 참조한다

"use strict";

angular.module('app').factory('boardService', function($http, $log, APP_CONFIG) {
    var MODEL = APP_CONFIG.apiRootUrl+'/rest/1/boards'
    /**
     * 전체 목록을 검색한다
     * @param callback [Function]
     */
    var list = function(callback) {
        $http({
            url: MODEL+'.json',
            method: "GET"
        }).success(function (result) {
            callback(result.data);
        }).error(function () {
            $log.log('Error');
            callback([]);
        });
    };
    var add = function(board, callback) {
        $http({
            url: MODEL+'.json',
            method: "POST",
            data: board
        }).success(function (result) {
            callback(result.data);
        }).error(function () {
            $log.log('Error');
            callback([]);
        });
    };
    var update = function(board, callback) {
        $http({
            url: MODEL + "/"+board.code+".json",
            method: "PUT",
            data: board
        }).success(function (result) {
            callback(result.data);
        }).error(function () {
            $log.log('Error');
            callback([]);
        });
    };
    /**
     * 게시판 1개를 조회한다
     * @param {number} id 게시판 코드
     * @param callback
     */
    var getOne = function(id, callback) {
        $http({
            url: MODEL+"/"+id+".json",
            method: "GET"
        }).success(function (result) {
            callback(result.data);
        }).error(function () {
            $log.log('Error');
            callback([]);
        });
    };
    var deleteBoard = function(id, callback) {
        $http({
            url: MODEL+"/"+id+".json",
            method: "DELETE"
        }).success(function (result) {
            callback(result.data);
        }).error(function () {
            $log.log('Error');
            callback([]);
        });
    };
    var getTypes = function(callback) {
        $http({
            url: APP_CONFIG.apiRootUrl+'/rest/1/board_types.json',
            method: "GET"
        }).success(function (result) {
            callback(result.data);
        }).error(function () {
            $log.log('Error');
            callback([]);
        });
    }
    return {
        list : list,
        add : add,
        update : update,
        getOne : getOne,
        deleteBoard : deleteBoard,
        getTypes: getTypes
    }
});

게시판 리스트 조회 페이지 추가

app/boards/views/list.html

<div id="content">
    <div class="row">
        <big-breadcrumbs items="['사용자 관리', '권한 목록']" icon="home" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
    </div>

    <!-- content -->

    <!-- widget grid -->
    <section id="widget-grid" data-widget-grid>
        <!-- row -->
        <div class="row">
            <div class="col-sm-12">
                <div class="well">
                    <h1>게시판 목록</h1>
                    <div class="alert alert-info">
                        Note: 게시판 목록을 조회합니다
                    </div>
                    <div class="text-right alert sm">
                        <button type="submit" class="btn btn-primary" data-ui-sref="app.boards.add">게시판 추가</button>
                    </div>
                    <table class="table table-bordered">
                        <thead>
                        <tr>
                            <th>코드</th>
                            <th>게시판명</th>
                            <th>유형</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr ng-repeat="board in boards">
                            <td>{{board.code}}</td>
                            <td><a ui-sref="app.boards.detail({id: board.code})">{{board.name}}</a></td>
                            <td>{{board.type.name}}</td>
                        </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        </div>
        <!-- end row -->
    </section>
</div>

app/boards/controller/BoardListCtrl.js

'use strict';

angular.module('app.boards').controller('BoardListCtrl', function ($scope, $state, boardService) {
    boardService.list(function(boards) {
        $scope.boards = boards;
    }, {});
});

게시판 추가/수정 페이지 추가

app/boards/views/edit.html

<div id="content">
    <div class="row">
        <big-breadcrumbs items="['게시판 관리', '게시판 등록']" icon="home" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
    </div>

    <!-- content -->

    <!-- widget grid -->
    <section id="widget-grid" widget-grid>

        <!-- row -->
        <div class="row">

            <!-- NEW WIDGET START -->
            <article class="col-sm-12 col-md-12 col-lg-12">

                <!-- Widget ID (each widget will need unique ID)-->
                <div jarvis-widget id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false">

                    <header>
                        <span class="widget-icon"> <i class="fa fa-eye"></i> </span>
                        <h2>권한 정보</h2>

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget content -->
                        <div class="widget-body">

                            <form name="boardForm" smartValidateForm class="form-horizontal" ng-submit="submit()" >

                                <fieldset>
                                    <legend>기본정보</legend>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">코드</label>
                                        <div class="col-md-10">
                                            <md-input-container >
                                                <input name="code" placeholder="게시판을 식별하는 유일한 코드를 입력하세요" type="text" ng-model="board.code" required  ng-disabled="!mutableCode">
                                                <div ng-messages="board.code.$error" ng-show="board.code.$dirty">
                                                    <div ng-message="required">This is required!</div>
                                                </div>
                                            </md-input-container>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">게시판명</label>
                                        <div class="col-md-10">
                                            <md-input-container flex="grow" >
                                                <input name="name" placeholder="게시판명을 입력하세요" type="text" ng-model="board.name" required class="flex-100">
                                                <div ng-messages="board.name.$error" ng-show="board.name.$dirty">
                                                    <div ng-message="required">This is required!</div>
                                                </div>
                                            </md-input-container>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">유형</label>
                                        <div class="col-md-10">
                                            <md-select ng-model="board.type.code">
                                                <md-option ng-value="type.code" ng-repeat="type in types">{{ type.name }}</md-option>
                                            </md-select>
                                        </div>
                                    </div>
                                </fieldset>

                                <div class="form-actions">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <button class="btn btn-default" type="button" ng-click="cancel()">
                                                Cancel
                                            </button>
                                            <button class="btn btn-primary" type="submit">
                                                <i class="fa fa-save"></i>
                                                Submit
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </form>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

            </article>
            <!-- WIDGET END -->


        </div>

        <!-- end row -->

    </section>
</div>

app/boards/controller/BoardEditCtrl.js

'use strict';

angular.module('app.boards').controller('BoardEditCtrl', function ($scope, $state, boardService) {

    boardService.getTypes(function(types) {
       $scope.types = types;
    });

    if($state.$current.name == 'app.boards.modify') {
        $scope.mutableCode = false
        $scope.pageTitle = "게시판 수정"
        boardService.getOne($state.params['id'], function(board) {
            $scope.board = board;
        });

        $scope.submit = function() {
            var request = {
                code: $scope.board.code,
                name: $scope.board.name,
                type: $scope.board.type.code,
            };
            boardService.update(request, function(data) {
                $state.go('app.boards');
            });
        };
    }else {
        $scope.mutableCode = true
        $scope.pageTitle = "게시판 등록"

        $scope.board = {

        };

        $scope.submit = function() {
            var request = {
                code: $scope.board.code,
                name: $scope.board.name,
                type: $scope.board.type.code,
            };
            boardService.add(request, function() {
                $state.go('app.boards');
            });
            return false;
        }
    }

    $scope.updateBoard = function() {
        boardService.update($scope.board, function() {
            $state.go('app.boards');
        });
    };

    $scope.cancel = function() {
        $state.go('app.boards');
    }

});

게시판 단일 조회 페이지 추가

app/boards/views/detail.html

<div id="content">
    <div class="row">
        <big-breadcrumbs items="['사용자 관리', '권한 조회']" icon="home" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></big-breadcrumbs>
    </div>

    <!-- content -->

    <!-- widget grid -->
    <section id="widget-grid" widget-grid>

        <!-- row -->
        <div class="row">

            <!-- NEW WIDGET START -->
            <article class="col-sm-12 col-md-12 col-lg-12">

                <!-- Widget ID (each widget will need unique ID)-->
                <div jarvis-widget id="wid-id-0" data-widget-colorbutton="false" data-widget-editbutton="false">
                    <header>
                        <span class="widget-icon"> <i class="fa fa-eye"></i> </span>
                        <h2>약관정보</h2>

                    </header>

                    <!-- widget div-->
                    <div>

                        <!-- widget content -->
                        <div class="widget-body">

                            <form class="form-horizontal">

                                <fieldset>
                                    <legend>기본정보</legend>
                                    <div class="form-group">
                                        <label class="col-md-2 text-right">코드</label>
                                        <div class="col-md-10">
                                            {{board.code}}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 text-right">게시판명</label>
                                        <div class="col-md-10">
                                            {{ board.name }}
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-md-2 text-right">유형</label>
                                        <div class="col-md-10">
                                            {{ board.type.name }}
                                        </div>
                                    </div>

                                </fieldset>


                                <div class="form-actions">
                                    <div class="row">
                                        <div class="col-md-12">
                                            <a ui-sref="app.boards"><button class="btn btn-default" type="button">
                                                Cancel
                                            </button></a>
                                            <a ui-sref="app.boards.modify({id: board.code})"><button class="btn btn-warning" type="button">
                                                <i class="fa fa-edit"></i>
                                                Modify
                                            </button></a>
                                            <button class="btn btn-danger" type="button" ng-click="promptDelete()">
                                                <i class="fa fa-trash-o"></i>
                                                Delete
                                            </button>
                                        </div>
                                    </div>
                                </div>

                            </form>

                        </div>
                        <!-- end widget content -->

                    </div>
                    <!-- end widget div -->

                </div>
                <!-- end widget -->

            </article>
            <!-- WIDGET END -->


        </div>

        <!-- end row -->

    </section>

</div>

app/boards/controller/BoardDetailCtrl.js

'use strict';

angular.module('app.boards').controller('BoardDetailCtrl', function ($scope, $state, boardService) {

    boardService.getOne($state.params['id'], function(board) {
        $scope.board = board;
    });

    /*
     * SmartAlerts
     */
// With Callback
    $scope.promptDelete =  function () {
        $.SmartMessageBox({
            title: "게시판 삭제",
            content: "게시판을 삭제하시겠습니까?",
            buttons: '[No][Yes]'
        }, function (ButtonPressed) {
            if (ButtonPressed === "Yes") {
                boardService.deleteBoard($scope.board.code, function() {
                    $.smallBox({
                        title: "게시판 삭제 완료",
                        content: "<i class='fa fa-clock-o'></i> <i>게시판이 삭제되엇습니다.</i>",
                        color: "#659265",
                        iconSmall: "fa fa-check fa-2x fadeInRight animated",
                        timeout: 4000
                    });
                    $state.go('app.boards')
                });
            }
            if (ButtonPressed === "No") {

            }

        });
    };

});

results matching ""

    No results matching ""