2022年03月22日(火)

14.1 Javaスクリプトテンプレートエンジンの導入:Handlebarsテンプレートエンジンの適用
Handlebars JavaScriptライブラリの追加(/src/main/resources/static)

14.1 JavaScriptテンプレートエンジン

JavaScriptテンプレートエンジンの検索
MyBatisはSQLテンプレートエンジンです
https://colorlib.com/wp/top-templating-engines-for-javascript/
/Users/nana/git/bitcamp-study/mylist-boot/app/src/main/resources/static
https://handlebarsjs.com/installation/#npm-or-yarn-recommended
npm install handlebars
dist : distribution

<script src="../node_modules/handlebars/dist/handlebars.min.js"></script>

↑このJavaScriptファイルにHandlebarsという名前のオブジェクトが定義されています

  // 템플릿 엔진 준비
  var template = Handlebars.compile("<p>{{name}} 님 반갑습니다!</p>");
  
  // 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
  var obj = new Object();
  obj.name = "홍길동";
  
  var str = template(obj);
  
  console.log(str);

sqlコードをxmlファイルに分離するのと同じ
https://handlebarsjs.com/installation/#usage
scriptラベルで包む
将来使用するhtmlコードの一部を分離するために使用します

<script>
<p>{{name}} 님 반갑습니다!</p>
</script>

scriptタグにJavaScriptコードが入っていると思っていたのですが、そうではなかったのでエラー
scriptラベルにjsコードを含める
デフォルトはtype=「text/javascript」

<script type="text/ohora">
<p>{{name}} 님 반갑습니다!</p>
</script>

type="text/ohora"
ohoraを書くと他の開発者を混同する可能性があります
意味を持って名前を書かなければならない

<script type="text/x-handlebars-template">
<p>{{name}} 님 반갑습니다!</p>
</script>

type="text/x-handlebars-template"
テキストはテキストですがJavaScriptではありませんので無視します
Webブラウザは画面に出力せずに無視されます
scriptラベルにidを付ける
id="template1"

<script id="template1" type="text/x-handlebars-template">
<p>{{name}} 님 반갑습니다!</p>
</script>

  // 템플릿 엔진에서 사용할 HTML 조각을 가져오기
  var tamplate1 = document.querySelector("#template1");
  console.log(template1.innerHTML);

scriptラベルにhtmlを渡すHandlebars.compile(template1.innerHTML)現在javascriptにhtmlはありません

  // 템플릿 엔진에서 사용할 HTML 조각을 가져오기
  var tamplate1 = document.querySelector("#template1");

  // 템플릿 엔진 준비
  var template = Handlebars.compile(template1.innerHTML);

名前を変更
template → htmlGenerator

  // 템플릿 엔진에서 사용할 HTML 조각을 가져오기
  var tamplate1 = document.querySelector("#template1");
  
  // 템플릿 엔진 준비
  var htmlGenerator = Handlebars.compile(template1.innerHTML);
  
  // 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
  var obj = {
		  name: "임꺽정"
  };
  
  var str = htmlGenerator(obj);
  
  console.log(str);

実際の作業では、変数を単独で作成せずに、オブジェクトをパラメータに直接渡します.

  // 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
  var str = htmlGenerator({
      name: "임꺽정"
  });

Javascriptオブジェクトをテンプレートエンジンのパラメータ値として渡します.このオブジェクトにはテンプレートに入る値が含まれている必要があります.

  // 템플릿 엔진에서 사용할 HTML 조각을 가져오기
  var tamplate1 = document.querySelector("#template1");
  
  // 템플릿 엔진 준비
  var htmlGenerator = Handlebars.compile(template1.innerHTML);
  
  // 템플릿 엔진에 값이 들어있는 객체를 줘서 텍스트를 생성한다.
  var str = htmlGenerator({
      name: "임꺽정"
  });
  
  console.log(str);

idの名前を変更
template1 → tr-template
値を入力する場所に2つのカッコ{}を使用

<script id="tr-template" type="text/x-handlebars-template">
<tr>
  <td>{{no}}</td>
  <td><a href="view.html?no={{no}}">{{name}}</a></td>
  <td>{{email}}</td>
  <td>{{tels.[0].tel}}</td>
  <td>{{company}}</td>
</tr>
</script>

id="tr-template"

  fetch("/contact/list")
    .then(function(response) {
      return response.json();
    })
    .then(function(contacts) {
    	var tbodyContent = "";
      for (var contact of contacts) {
    	  // 값이 들어있는 객체를 가지고 템플릿 엔진을 실행하여 HTML을 생성한다.
    	  var str = htmlGenerator(contact);
        
    	  tbodyContent += str;
      }
      tbody.innerHTML = tbodyContent;
    });

重複文を変換しながらtrラベルを作成しないでください.
https://handlebarsjs.com/guide/builtin-helpers.html#each
これはパラメータオブジェクトのことです
配列から1つ取り出して実行

  fetch("/contact/list")
    .then(function(response) {
      return response.json();
    })
    .then(function(contacts) {
    	// 서버에서 받은 연락처 배열을 가지고 템플릿 엔진을 실행하여 tbody 콘텐트를 생성한다.
      tbody.innerHTML = htmlGenerator(contacts);
    });

JAvascriptのhtmlコード
カードはdivタグです
画像はdivラベル内にあります

15.1 MyBasisの高度な機能:テーブル結合と動的SQLの処理

    select 
      c.contact_no,
      c.name,
      c.email,
      c.company,
      t.ct_no,
      t.tt_no,
      t.tel
    from
      ml_contact c
      left outer join ml_cont_tel t on c.contact_no=t.contact_no
    order by 
      c.name asc

15.1 MyBatisプレミアム機能

90-MyListプロジェクト2/43ページ
①テーブル結合とJavaオブジェクト
(連絡先)(電話番号)
連絡先
new Contact()
同じデータに対して1つのオブジェクトのみを作成
電話番号
new ContactTel()
データごとにオブジェクトを作成new Contact()-new ContactTel()←包含関係(集約)
連絡先には電話番号が含まれています

  <resultMap type="contact" id="contactMap">
  
    <id column="contact_no" property="no"/>
    <result column="name" property="name"/>
    <result column="email" property="email"/>
    <result column="company" property="company"/>
    
    <collection property="tels" ofType="contactTel">
      <id column="ct_no" property="no"/>
      <result column="tt_no" property="telTypeNo"/>
      <result column="tel" property="tel"/>      
    </collection>
    
  </resultMap>

MyBatis自動作成
Contactオブジェクトは1つのみ作成されます
ContactTelオブジェクト3つ作成
ディレクトリに入れ、挿入List<Contact> telhttp://localhost:8080/contact/list
電話番号がない人はどうなりますか.

関連する純粋なデータはouter joinを行わなければなりません
http://localhost:8080/contact/index.html

    select 
      c.contact_no,
      c.name,
      c.email,
      c.company,
      t.ct_no,
      t.tt_no,
      t.tel
    from 
      ml_contact  c
      left outer join ml_cont_tel t on c.contact_no=t.contact_no
    where 
      c.contact_no=#{no}

複数回のselectに比べてjoinは時間がかかりません


既存の挿入文には1つのデータしか追加できません

  <insert id="insertTel" parameterType="ContactTel">
    insert into ml_cont_tel(contact_no, tt_no, tel)
    values(#{contactNo}, #{telTypeNo}, #{tel});
  </insert>

一度に複数追加できます.
ContactDaoインタフェースにinsertTels()メソッドを追加

 int insertTels(List<ContactTel> tels);

https://mybatis.org/mybatis-3/dynamic-sql.html

  <insert id="insertTels" parameterType="list">
    insert into ml_cont_tel(contact_no, tt_no, tel)
    values
    <foreach collection="list" item="tel" separator=",">
    (#{contactNo}, #{telTypeNo}, #{tel})
    </foreach>
  </insert>

ContactDaoインタフェース

int insertTels(@Param("contactNo") int contactNo, @Param("tels") List<ContactTel> tels);

@Param("contactNo")←SQL Mapperが使用する名前
@Param("tels")←SQL Mapperで使用する名前

  <insert id="insertTels">
    insert into ml_cont_tel(contact_no, tt_no, tel)
    values
    <foreach collection="tels" item="tel" separator=",">
    (#{contactNo}, #{telTypeNo}, #{tel})
    </foreach>
  </insert>

  <insert id="insertTels">
    insert into ml_cont_tel(contact_no, tt_no, tel)
    values
    <foreach collection="tels" item="contactTel" separator=",">
    (#{contactNo}, #{contactTel.telTypeNo}, #{contactTel.tel})
    </foreach>
  </insert>

<foreach collection="tels" item="contactTel" separator=",">telsからcontactTelというものを取り出しました.

  @Override
  @Transactional // 다음 메서드는 트랜잭션 안에서 실행하도록 설정한다.
  public int add(Contact contact) {
    contactDao.insert(contact);
    contactDao.insertTels(contact.getNo(), contact.getTels());
    return 1;
  }

http://localhost:8080/contact/add?name=x4&[email protected]&company=bitcamp&tel=1_02-0000-0001&tel=2_02-0000-0002&tel=3_010-0000-0003

入力された数に基づいてSQL文を動的に生成

  @Override
  @Transactional
  public int update(Contact contact) {
    int count = contactDao.update(contact);
    if (count > 0) {
      contactDao.deleteTelByContactNo(contact.getNo()); // 전화번호 변경 전에 기존 전화번호를 모두 삭제한다.
      contactDao.insertTels(contact.getNo(), contact.getTels());
    }
    return count;
  }

https://mybatis.org/mybatis-3/dynamic-sql.html

ドアを渡したら...
セッションログインの使用
ファイルのアップロード
Facebookにログイン