MyBatis + SpringBoot로 CRUD 앱 만들기 ※ 불필요한 것은 배 ※ 1/2

16404 단어 MySQLspring-bootcrudMyBatis자바
MyBatis를 사용하여 ToDo 목록을 만듭니다.
목표물은 이쪽↓

  • 할 일 등록 (블랭크를 등록 할 수 없음)
  • 할 일보기
  • 할 일 변경
  • 할 일 지우기
    이상이 가능한 간단한 앱입니다.

    • 작성한 경위



    SpringBoot의 CRUD가 가능한 책은 있지만 MyBatis를 사용한 것은 적습니다. (거의 JPA 또는 JDBC)
    또, Bootstrap나 JS가 섞인 것, HTML이 복잡한 것도 많아, 제가 이해하기 어려웠기 때문에, 알기 쉽고 심플한 것으로 해 보았습니다.

    대상자


  • Controller, Service, Repository가 무엇을 하고 있는지 어떻게 알 수 있는 사람.
  • CRUD가 무엇인지 아는 사람.
  • JPA나 JDBC가 어쩐지 아는 사람.
  • MyBatis를 처음 사용하는 사람.

    • 사용하는 환경



    ■OS : Windows10
    ■IDE : Eclipse
    ■Maven
    ■ SpringBoot
    ■DB : MySQL8.0.22

    MyBatis란?



    간단하게 말하면 DB에 접속해 SQL문을 실행해 주는 것입니다. (O/R 매퍼)
    JDBC보다 간단하고 JSP보다 미세한 SQL 문을 실행할 수 있습니다.
    지금까지는 아마 Repository 클래스에서 작성된 것이 이번에는 Mapper 클래스가 될 것입니다.
    XML에 쓸 수도 있습니다만, 이번은 알기 쉽기 때문에 어노테이션에 써 갑니다.
    (이쪽이 새로운 쓰는 법인 것 같습니다)

    1-1.pom.xml



    이번 DB는 MySQL, O/R 매퍼에 MyBatis, 밸리데이션 기능을 사용하므로 3개를 application에 추가합니다.
            <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.4</version>
        </dependency>
　　　　　　　　　<dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>

    1-2. 아 ぃ 양이온. p 로페 r 지혜 s



    MySQL에 연결합니다.
    #MySQLのDBのURL
spring.datasource.url=jdbc:mysql://localhost:3306/xxxxxxx?serverTimezone=JST

#name、password指定。
spring.datasource.username=root
spring.datasource.password=xxxxxxxx

#SpringBootを起動したときに実行したいSQL文を記述したパス
#schemaにはテーブルを作るSQLを入れておく
spring.datasource.schema=classpath:schema.sql

#これがないとputやdeleteでエラーになる
spring.mvc.hiddenmethod.filter.enabled=true

    자신의 MySQL 환경에 맞추십시오.
    spring.mvc.hiddenmethod.filter.enabled=true가 없으면 오류가 발생합니다.
    여기 난 빠졌어ㅋㅋ


    html의 http 메소드에서 delete와 put을 사용하고 있기 때문에 필요합니다.
    get과 post로 쓰면 불필요합니다.
    이 경우 Controller 어노테이션도 @GetMapping로 정렬하십시오.
    ↓이쪽을 참고로 했습니다.
    htps : // 코 m / 카즈히로 1982 / ms / b8b9965fdf9c5507517

    1-3. MySQL로 테이블 만들기


    CREATE TABLE IF NOT EXISTS todo (
  id bigint(20) NOT NULL AUTO_INCREMENT,
  task varchar(255) DEFAULT NULL,
  PRIMARY KEY (id)
);

    특히 어려운 SQL은 아니지만
    NOT EXISTS는 더 이상 테이블이 존재한다면 다시 만들지 않는다.
    AUTO_INCREMENT는 연속적인 번호를 붙인다.

    2-1.top.html (첫 번째 화면)


    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="layout">
<meta charset="UTF-8">
<title>ToDOリスト</title>

</head>
<body>
    <h1>ToDoリスト</h1>
    <a th:href="@{/todos/new}">
        <button>ToDo作成【NEW】</button>
    </a>
    <div th:if="!${todo.size()}">
        <p>該当の検索結果がありません！</p>
    </div>
    <table th:if="${todo.size()}" border="1">
        <thead>
            <tr>
                <th>ID#</th>
                <th>やること</th>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr th:each="todo:${todo}" th:object="${todo}">
                <!-- each;DBの情報をすべて出すまで繰り返す -->
                <td th:text="*{id}"></td>
                <td th:text="*{task}"></td>
                <td><a th:href="@{/todos/{id}(id=*{id})}">
                        <button>詳細</button>
                </a></td>
                <td><a th:href="@{/todos/{id}/change(id=*{id})}"><button>変更</button></a></td>
                <td>
                    <form th:action="@{/todos/{id}/delete(id=*{id})}"
                        th:method="delete">
                        <button>消去</button>
                    </form>
                </td>
            </tr>
        </tbody>

    </table>
</body>
</html>

    th:if="${todo.size()

    todo이 아무것도 등록하지 않은 경우에는 "해당 검색 결과가 없습니다!"

    th:each="todo:${todo}"th:object="${todo}

    todo이 모두 끝날 때까지 tot 내용을 표시

    th:text="{id}"th:text="{task}"

    todo 내용의 id와 task 보기

    th:method="delete"

    컨트롤러의 @DeleteMapping에 해당합니다.
    get, post 이외에도 나옵니다.

    2-2.new.html (등록 화면)


    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="layout">
<meta charset="UTF-8">
<title>新規ToDo</title>
</head>
<body>

    <h2>新規ToDo作成</h2>

    <form method="post" th:action="@{/todos/new}" th:object="${todo}">
        <ul>
            <li><label>やること</label> <br> <input type="text" id="task"
                name="task" th:field="*{task}" /> 

            </li>

        </ul>

        <button >新規作成</button>
    </form>
</body>
</html>

    th:action="@{/todos/new}"th:object="${todo}"th:field="*{task}"

    object의 todo 안에, task를 채우고, controller의 todos/new에 건네줍니다.

    2-3.show.html (확인 화면)


    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="layout">
<meta charset="UTF-8">
<title>todo</title>

</head>
<body>
    <h2>登録内容確認</h2>
    <div th:object="${todo}">
        <table border="1">

            <tr>
                <th>id</th>
                <td><div th:text="*{id}"></div></td>
            </tr>
            <tr>
                <th>やること</th>
                <td><div ><div th:text="*{task}"></div></div></td>
            </tr>

        </table>
    </div>

</body>
</html>

    todo 내용의 id와 task를 표시합니다.

    2-4.change.html (변경 화면)


    <!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
    layout:decorator="layout">
<meta charset="UTF-8">
<title>ToDo変更</title>

</head>
<body>

    <h2>ToDo変更</h2>

    <form th:action="@{/todos/put/{id}(id=*{id})}" th:method="put"
        th:object="${todo}">
        <!-- 入力したやつをtodoの中にいれて使える -->

        <ul>
            <li><label>やること</label> <br> <input type="text" id="todo"
                name="todo" th:field="*{task}" /> <!-- fieldはramen.shopとかにしてHTMLで使える -->
        </ul>
        <button>更新</button>

    </form>
</body>
</html>

    todo의 내용을 바꿉니다. 거의 new.html과 유사합니다.

    th:action="@{/todos/put/{id}(id=*{id})}"th:method="put"th:object="${todo}"

    task를 다시 채운 todo를 controller의/todos/put/{id}(id={id})에 건네줍니다.
    URL이 해당 id가 되도록 하고 있기 때문에 {id}(id={id}입니다.
    delete와 마찬가지로 Controller @@PutMapping에 해당합니다.

    나머지는 다음 기사로
    htps : // 코 m / 스미 짱 / MS / A 53 223c2 A 727 Kae 26 A 4
    Docker로 Spring Boot 환경 구축(2021년 1월판)
    나중에 Maven + SpringBoot에서 멀티 모듈 프로젝트

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage