[AXBoot] 거래처 관리 페이지 생성하기

yesjm·2021년 4월 15일

IntelliJ axboot web

JAVA기반 웹개발자 양성과정

목록 보기

4/20

오늘의 목표

기본 템플릿을 이용해 거래처 관리 페이지 생성하기!

기본 템플릿

오늘의 목표

오전 수업

COMPANY_M 테이블 생성

개발자도구 - H2 Console에서 아래 코드 입력

CREATE TABLE company_m (
 ID            BIGINT(20) NOT NULL auto_increment,
 COMPANY_NM    VARCHAR(30),
 CEO           VARCHAR(30),
 BIZNO         VARCHAR(10),
 TEL           VARCHAR(18),
 ZIP           VARCHAR(7),
 ADDRESS       VARCHAR(200),
 ADDRESS_DETAIL VARCHAR(200),
 EMAIL         VARCHAR(50),
 REMARK        VARCHAR(500),
 USE_YN        VARCHAR(1),
 CREATED_AT    TIMESTAMP,
 CREATED_BY    VARCHAR(100),
 UPDATED_AT    TIMESTAMP,
 UPDATED_BY    VARCHAR(100)
)

COMPANY_M 테이블이 생성되었다.
COMPANY_M table

ModelExtractor

역공학으로 테이블 코드 생성하기
package 이름은 company, class name은 Company로!

이렇게 하면

자동으로 코드가 생성되어 있다. 이 상태에서 실행하면 에러난다.

COMPANY 관련 코드 수정

2번에서 생성된 코드는 그대로 쓸 수 있는건 아니고 수정이 필요하다
자바단 코드를 수정할때는 항상 돌아가고 있는 프로젝트 끄고 수정 진행하기
src/main/java/edu/axboot/domain/sample/parent 패키지의 샘플코드 보고 형식을 맞춰서 수정하면 된다.
Company, CompanyRepository, CompanyService, CompanyController 파일 전부 샘플코드를 보고 수정했다.

여기까지 마치면 다시 프로젝트 돌려서 확인. 에러 없이 작동하면 일단 성공

Swagger 확인

get, put 확인.
put에 입력한 json 데이터

[
  {
    "id": 0,
    "companyNm": "카카오",
    "ceo": "김범수",
    "bizno": "",
    "tel": "",
    "zip": "",
    "address": "",
    "addressDetail": "",
    "email": "",
    "remark": "",
    "useYn": "",
    "__deleted__": false,
    "__created__": false,
    "__modified__": false
  }
]

swagger가 잘 작동하는 것을 확인했다.

H2 Console에서도 확인을 완료했으면 성공! 이제 프론트단 작업이 가능해진다.

단축키
ctrl+shift+f12 : 코드 페이지만 전체화면으로 표시됨
shift 두번 누르기 : 검색 팝업 나옴

오후 수업

Front-End 개발
- jsp 수정 : 실시간 반영 안됨 (인텔리제이 커뮤니티 버전)
- js 수정 : 실시간 반영됨

오전수업에서 만든 서버단을 화면에 출력하기

COMPANY_M 테이블의 데이터를 출력할 메뉴 화면 생성

_ 3일차 수업 내용 참고

거래처 관리의 .jsp 파일을 먼저 만들고

메뉴 관리에서 기술정보-거래처 관리를 연결했다.

company.jsp 파일 수정

검색 조건들을 회사명, 대표자, 사업자번호로 수정해준다.

        <div role="page-header">
            <ax:form name="searchView0">
                <ax:tbl clazz="ax-search-tbl" minWidth="500px">
                    <ax:tr>
                        <ax:td label='회사명' width="300px">
                            <input type="text" class="form-control" />
                        </ax:td>
                        <ax:td label='대표자' width="300px">
                            <input type="text" class="form-control" />
                        </ax:td>
                        <ax:td label='사업자번호' width="300px">
                            <input type="text" class="form-control" />
                        </ax:td>
                    </ax:tr>
                </ax:tbl>
            </ax:form>
            <div class="H10"></div>
        </div>

company.js 파일 수정

swagger 경로를 확인하고 search와 save를 연결해준다

    PAGE_SEARCH: function (caller, act, data) {
        axboot.ajax({
            type: "GET",
            url: "/api/v1/company",
            data: caller.searchView.getData(),
            callback: function (res) {
                caller.gridView01.setData(res);
            },
            options: {
                // axboot.ajax 함수에 2번째 인자는 필수가 아닙니다. ajax의 옵션을 전달하고자 할때 사용합니다.
                onError: function (err) {
                    console.log(err);
                }
            }
        });

        return false;
    },
    PAGE_SAVE: function (caller, act, data) {
        var saveList = [].concat(caller.gridView01.getData());
        saveList = saveList.concat(caller.gridView01.getData("deleted"));

        axboot.ajax({
            type: "PUT",
            url: "/api/v1/company",
            data: JSON.stringify(saveList),
            callback: function (res) {
                ACTIONS.dispatch(ACTIONS.PAGE_SEARCH);
                axToast.push("저장 되었습니다");
            }
        });
    },

화면에 출력해주는 gridView 부분도 company db에 맞게 key, label 수정해준다.

fnObj.gridView01 = axboot.viewExtend(axboot.gridView, {
    initView: function () {
        var _this = this;
        this.target = axboot.gridBuilder({
            showRowSelector: true,
            frozenColumnIndex: 0,
            multipleSelect: true,
            target: $('[data-ax5grid="grid-view-01"]'),
            columns: [
                {key: "id", label: "ID", width: 100, align: "left", editor: "text"},
                {key: "companyNm", label: "회사명", width: 300, align: "left", editor: "text"},
                {key: "ceo", label: "대표자", width: 100, align: "center", editor: "text"},
                {key: "bizno", label: "사업자번호", width: 100, align: "center", editor: "text"},
                {key: "tel", label: "전화번호", width: 100, align: "center", editor: "text"},
                {key: "address", label: "주소", width: 100, align: "center", editor: "text"},
                {key: "addressDetail", label: "상세주소", width: 100, align: "center", editor: "text"},
                {key: "email", label: "이메일", width: 100, align: "center", editor: "text"},
                {key: "remark", label: "비고", width: 100, align: "center", editor: "text"}

            ],
            body: {
                onClick: function () {
                    this.self.select(this.dindex, {selectedClear: true});
                }
            }
        });

~~key값을 잘 확인하고 적자.. companyNm을 company로 적어서 조회기능부터 안되더라..~~

거래처관리 데이터 추가가 안되는 상황

company.js의 PAGE_SAVE의 "modified" 제거하니 db에 데이터 추가 성공

SimpleJpaModel -> BaseJpaModel로 변경

Company.java 파일의 Company 클래스는 기존에 SimpleJpaModel을 extends 하고 있다. 이 상태에서는 CREATED_AT, CREATED_BY, UPDATED_AT, UPDATED_BY가 저장되지 않는다.
서버단에서 작성해줘야 하는 부분이고 물론 수작업으로도 가능하다.