2021-12-13(月)第6週1日

213003 ワード
テキストリンク
最初からやり直し
index.html - mylist-boot/src/main/resources/static
ulラベルをクリア
静的-連絡先フォルダを消去

変数、配列、演算子、および制御文の実装→連絡先管理


Front-end
static/index.html
.index.html←連絡先メイン画面(連絡先リスト出力)
.form.html←連絡先入力画面
.view.html←連絡先詳細フォームの表示と変更
Back-end
ContactController
.list()←リストデータの提供
.add()←連絡先入力の処理
.get()←連絡詳細の提供
.update()←連絡先情報の変更
.delete()←連絡先削除処理
サーバ側のレンダリング方法も変更しようとします.
Javaプログラムの役割を明確にする
かみ合わない
http://localhost:8080/contact/index.html

特殊研究生院
ディジタルステーション
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MyList!</title>
</head>
<body>
<h1>MyList에 오신 걸 환영합니다!</h1>
<p>이 프로젝트는 자바 실전 프로그래밍을 경험하기 위해 만든 프로젝트입니다.</p>
<ul>
  <li><a href="contact/index.html">연락처</a></li>
</ul>
</body>
</html>

基本的にはtboby
tr = table row
th = table head
td = table data
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h1>연락처</h1>
<table border="1">
  <tr>
    <th>이름</th>
    <th>이메일</th>
    <th>전화</th>
    <th>회사</th>
  </tr>
   <tr>
     <td>홍길동</td>
     <td>[email protected]</td>
     <td>010-1111-1111</td>
     <td>비트캠프</td>
   </tr>
   <tr>
     <td>홍길동2</td>
     <td>[email protected]</td>
     <td>010-1111-1111</td>
     <td>비트캠프</td>
   </tr>
</table>
</body>
</html>


tbodyへ
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h1>연락처</h1>
<table border="1">
  <thead>
    <tr>
      <th>이름</th>
      <th>이메일</th>
      <th>전화</th>
      <th>회사</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>[email protected]</td>
      <td>010-1111-1111</td>
      <td>비트캠프</td>
    </tr>
    <tr>
      <td>홍길동2</td>
      <td>[email protected]</td>
      <td>010-1111-1111</td>
      <td>비트캠프</td>
    </tr>
  </tbody>
</table>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h1>연락처</h1>
<table border="1">
  <thead>
    <tr>
      <th>이름</th>
      <th>이메일</th>
      <th>전화</th>
      <th>회사</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>[email protected]</td>
      <td>010-1111-1111</td>
      <td>비트캠프</td>
    </tr>
    <tr>
      <td>홍길동2</td>
      <td>[email protected]</td>
      <td>010-1111-1111</td>
      <td>비트캠프</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var contacts = [
    "aaa1,[email protected],1111,비트캠프",
    "aaa2,[email protected],1111,비트캠프",
    "aaa3,[email protected],1111,비트캠프",
    "aaa4,[email protected],1111,비트캠프",
    "aaa5,[email protected],1111,비트캠프"
  ];

  for (contact item of contacts) {
    console.log(contact);
  }
</script>
</body>
</html>

文字列から名前、Eメール、電話、会社情報を抽出

<script type="text/javascript">
  var contacts = [
    "aaa1,[email protected],1111,비트캠프",
    "aaa2,[email protected],1111,비트캠프",
    "aaa3,[email protected],1111,비트캠프",
    "aaa4,[email protected],1111,비트캠프",
    "aaa5,[email protected],1111,비트캠프"
  ];

  for (var contact of contacts) {
    console.log(contact.split(","));
  }
</script>
<script type="text/javascript">
  var contacts = [
    "aaa1,[email protected],1111,비트캠프",
    "aaa2,[email protected],1111,비트캠프",
    "aaa3,[email protected],1111,비트캠프",
    "aaa4,[email protected],1111,비트캠프",
    "aaa5,[email protected],1111,비트캠프"
  ];

  for (var contact of contacts) {
    var values = contact.split(",");
    console.log(values[0], values[1], values[2], values[3]);
  }
</script>

テーブルに追加するtrラベルの作成

이것은 <b>자바</b>입니다.
Javaデータを制御するデータ
他のデータを制御するデータ=meta data=markup=tag
tagは他のデータを制御するデータです
マークアップともマークアップとも呼ばれます
Hyper-Text Markup Language(HTML)
要素(element)=tag
<開始ラベル>コンテンツ<終了ラベル>
<script type="text/javascript">
  var contacts = [
    "aaa1,[email protected],1111,비트캠프",
    "aaa2,[email protected],1111,비트캠프",
    "aaa3,[email protected],1111,비트캠프",
    "aaa4,[email protected],1111,비트캠프",
    "aaa5,[email protected],1111,비트캠프"
  ];

  for (var contact of contacts) {
    var values = contact.split(",");
    var tr = document.createElement("tr");
    tr.innerHTML = `<td>${values[0]}</td>
    <td>${values[1]}</td>
    <td>${values[2]}</td>
    <td>${values[3]}</td>`
    console.log(tr);
  }
</script>

trラベルをテーブルに追加


tableにidを付与
x-contact-table
html大文字と小文字を区別しない
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
<h1>연락처</h1>
<table id="x-contact-table" border="1">
  <thead>
    <tr>
      <th>이름</th>
      <th>이메일</th>
      <th>전화</th>
      <th>회사</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>홍길동</td>
      <td>[email protected]</td>
      <td>010-1111-1111</td>
      <td>비트캠프</td>
    </tr>
    <tr>
      <td>홍길동2</td>
      <td>[email protected]</td>
      <td>010-1111-1111</td>
      <td>비트캠프</td>
    </tr>
  </tbody>
</table>
<script type="text/javascript">
  var contacts = [
    "aaa1,[email protected],1111,비트캠프",
    "aaa2,[email protected],1111,비트캠프",
    "aaa3,[email protected],1111,비트캠프",
    "aaa4,[email protected],1111,비트캠프",
    "aaa5,[email protected],1111,비트캠프"
  ];

  var tbody = document.querySelector("#x-contact-table tbody")

  for (var contact of contacts) {
    var values = contact.split(",");
    var tr = document.createElement("tr");
    tr.innerHTML = `<td>${values[0]}</td>
    <td>${values[1]}</td>
    <td>${values[2]}</td>
    <td>${values[3]}</td>`

    tbody.appendChild(tr);

  }
</script>
</body>
</html>

既存の洪吉童を取り除く
package com.eomcs.mylist;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController // 이 클래스가 클라이언트 요청 처리 담당자임을 표시한다.
public class ContactController {

  @RequestMapping("/contact/list")
  public Object list() {
    String[] contacts = {
        "aaa1,[email protected],1111,비트캠프",
        "aaa2,[email protected],1111,비트캠프",
        "aaa3,[email protected],1111,비트캠프",
        "aaa4,[email protected],1111,비트캠프",
        "aaa5,[email protected],1111,비트캠프"
    };
    return contacts;
  };

}
["aaa1,[email protected],1111,비트캠프","aaa2,[email protected],1111,비트캠프","aaa3,[email protected],1111,비트캠프","aaa4,[email protected],1111,비트캠프","aaa5,[email protected],1111,비트캠프"]
バックエンド開発者はすでに彼らの仕事を終えた.
先端開発開始

AJAXを使用してサーバ上のREST APIと連携して使用


fetch("/contact/list").then().then()
サーバ応答後
response => response.json()
JavaScriptオブジェクトに分割
JavaScriptオブジェクトで作ったものを返してください.
サーバへの接続
リクエストサーバ
サーバからの応答
fetch(url).そして(関数)
サーバから応答を受信すると、関数が呼び出されます.
fetch(url).そして(関数).そして(関数)
前の関数の呼び出しが完了すると
例外が発生したときに呼び出される関数を登録する構文があるはずです.
大分類の分類詳細の検索
js fetch
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch .catch(error => console.error(error)); 
<script type="text/javascript">

  var tbody = document.querySelector("#x-contact-table tbody")

  fetch("/contact/list")
    .then(response => response.json())
    .then(contacts => {
      for (var contact of contacts) {
        var values = contact.split(",");
        var tr = document.createElement("tr");
        tr.innerHTML = `<td>${values[0]}</td>
        <td>${values[1]}</td>
        <td>${values[2]}</td>
        <td>${values[3]}</td>`

        tbody.appendChild(tr);

      }
    })

</script>
console.log(response); console.log(response.json()); 
  @RequestMapping("/contact/add")
  public Object add(String name, String email, String tel, String company) {
    String contact = name + "," + email + "," + tel + "," + company;
    return contact;
  }

http://localhost:8080/contact/add?name=aaa&[email protected]&tel=010-1111-1111&company=%EB%B9%84%ED%8A%B8%EB%B9%84%ED%8A%B8 
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>연락처</title>
</head>
<body>
<h1>새 연락처</h1>
<form>
  이름 : <input type="text"><br>
  이메일 : <input type="text"><br>
  전화 : <input type="text"><br>
  회사 : <input type="text"><br>
  <button type="button">등록</button>
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>연락처</title>
</head>
<body>
<h1>새 연락처</h1>
<form>
  이름 : <input type="text"><br>
  이메일 : <input type="text"><br>
  전화 : <input type="text"><br>
  회사 : <input type="text"><br>
  <button id="x-add-btn" type="button">등록</button>
</form>

<script type="text/javascript">
  var addBtn = document.querySelector("#x-add-btn");
  addBtn.onclick = function() {
    console.log("click!")
  };
</script>
</body>
</html>

ボタンをクリックすると、入力フォームの値が取得されます。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>연락처</title>
</head>
<body>
<h1>새 연락처</h1>
<form>
  이름 : <input id="x-name" type="text"><br>
  이메일 : <input id="x-email" type="text"><br>
  전화 : <input id="x-tel" type="text"><br>
  회사 : <input id="x-company" type="text"><br>
  <button id="x-add-btn" type="button">등록</button>
</form>

<script type="text/javascript">
  var addBtn = document.querySelector("#x-add-btn");
  addBtn.onclick = function() {
    var name = document.querySelector("#x-name");
    var email = document.querySelector("#x-email");
    var tel = document.querySelector("#x-tel");
    var company = document.querySelector("#x-company");

    console.log(name.value, email.value, tel.value, company.value);

  };
</script>
</body>
</html>

入力値サーバーへ送信


入力した値をサーバに送信して登録する
REST APIの呼び出し
サーバはjsonを返さず、文字列を返すからです.
response.text()
<script type="text/javascript">
  var addBtn = document.querySelector("#x-add-btn");

  addBtn.onclick = function() {
    var name = document.querySelector("#x-name");
    var email = document.querySelector("#x-email");
    var tel = document.querySelector("#x-tel");
    var company = document.querySelector("#x-company");

    // console.log(name.value, email.value, tel.value, company.value);

    fetch(`/contact/add?name=${name.value}&email=${email.value}&tel=${tel.value}&company=${company.value}`)
      .then(function(response) {
        return response.text();
      })
      .then(function(text) {
        console.log(text);
      });

  };
</script>

json文字列の両側に二重引用符が必要です
  @RequestMapping("/contact/add")
  public Object add(String name, String email, String tel, String company) {
    String contact = "\"" + name + "," + email + "," + tel + "," + company + "\"";
    return contact;
  }
<script type="text/javascript">
  var addBtn = document.querySelector("#x-add-btn");

  addBtn.onclick = function() {
    var name = document.querySelector("#x-name");
    var email = document.querySelector("#x-email");
    var tel = document.querySelector("#x-tel");
    var company = document.querySelector("#x-company");

    // console.log(name.value, email.value, tel.value, company.value);

    fetch(`/contact/add?name=${name.value}&email=${email.value}&tel=${tel.value}&company=${company.value}`)
      .then(function(response) {
        // return response.text();
        return response.json(); // json 형식의 문자열을 자바스크립트 객체로
      })
      .then(function(text) {
        console.log(text);
      });

  };
</script>
再修正

キャンセルボタンの追加

  <button id="x-add-btn" type="button">등록</button>
  <button id="x-cancel-btn" type="button">취소</button>
</form>

<script type="text/javascript">
  var addBtn = document.querySelector("#x-add-btn");
  var cancelBtn = document.querySelector("#x-cancel-btn");
名前付け時の一貫性の維持
  cancelBtn.onclick = function() {
    window.location.href = "index.html";
  };
キャンセルボタンを押してリストに戻る

リファクタリング


管理のためのソースコードの変更
コスト→実行速度が低下する可能性があります.
ソースコードを変更して実行回数を減らし、実行速度を速める
コスト→ソースコードが理解しにくくなります.
一度だけ使用する変数
refactoring-tempをqueryで置き換える
一時変数を1回だけ書く場合は、メソッドを呼び出すときに直接挿入します.
関数の戻り値を一度に受信する変数のみを使用する場合は、変数ではなく関数呼び出しを挿入します.
すなわち,一時変数を用いた位置に直接関数呼び出しを挿入する!
addBtn、calcelBtnおよびなし
<script type="text/javascript">

  document.querySelector("#x-add-btn").onclick = function() {

    var name = document.querySelector("#x-name");
    var email = document.querySelector("#x-email");
    var tel = document.querySelector("#x-tel");
    var company = document.querySelector("#x-company");

    // console.log(name.value, email.value, tel.value, company.value);

    fetch(`/contact/add?name=${name.value}&email=${email.value}&tel=${tel.value}&company=${company.value}`)
      .then(function(response) {
        return response.text();
        // return response.json(); // json 형식의 문자열을 자바스크립트 객체로
      })
      .then(function(text) {
        console.log(text);
      });

  };

  document.querySelector("#x-cancel-btn").onclick = function() {
    window.location.href = "index.html";
  };
</script>

必須入力の確認


アスタリスク(*)エントリは必須です.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>연락처</title>
</head>
<body>
<h1>새 연락처</h1>
<form>
  이름* : <input id="x-name" type="text"><br>
  이메일* : <input id="x-email" type="text"><br>
  전화* : <input id="x-tel" type="text"><br>
  회사 : <input id="x-company" type="text"><br>
  별표(*) 항목은 필수 입력입니다.<br>
  <button id="x-add-btn" type="button">등록</button>
  <button id="x-cancel-btn" type="button">취소</button>
</form>

<script type="text/javascript">

  document.querySelector("#x-add-btn").onclick = function() {

    var name = document.querySelector("#x-name");
    var email = document.querySelector("#x-email");
    var tel = document.querySelector("#x-tel");
    var company = document.querySelector("#x-company");

    // console.log(name.value, email.value, tel.value, company.value);

    if (name.value == "" || email.value == "" || tel.value == "") {
      window.alert("필수 입력 항목이 비어 있습니다.");
      return;
    }

    fetch(`/contact/add?name=${name.value}&email=${email.value}&tel=${tel.value}&company=${company.value}`)
      .then(function(response) {
        return response.text();
        // return response.json(); // json 형식의 문자열을 자바스크립트 객체로
      })
      .then(function(text) {
        console.log(text);
      });

  };

  document.querySelector("#x-cancel-btn").onclick = function() {
    window.location.href = "index.html";
  };
</script>
</body>
</html>
JavaScriptはブラウザで実行されます

最適化-検索ラベルをリスナーの外に配置します。


外に出て一度だけ探します.

以前見つけたものをそのまま使う.
tagオブジェクトの基本変数をpropertiesと呼びます.
id, type, className, name
デフォルト変数+構成の追加
.onclick → .name
リスナーで変数を検索するときに、ローカル変数がない場合は、タグオブジェクトで検索します.
タグオブジェクトも存在しない場合は、windowオブジェクト(グローバルオブジェクト)で検索します.
https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onkeydown 
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>연락처</title>
</head>
<body>
<h1>새 연락처</h1>
<form>
  이름* : <input id="x-name" type="text"><br>
  이메일* : <input id="x-email" type="text"><br>
  전화* : <input id="x-tel" type="text"><br>
  회사 : <input id="x-company" type="text"><br>
  별표(*) 항목은 필수 입력입니다.<br>
  <button id="x-add-btn" type="button">등록</button>
  <button id="x-cancel-btn" type="button">취소</button>
</form>

<script type="text/javascript">
  var xName = document.querySelector("#x-name");
  var xEmail = document.querySelector("#x-email");
  var xTel = document.querySelector("#x-tel");
  var xCompany = document.querySelector("#x-company");

  document.querySelector("#x-add-btn").onclick = function() {


    // console.log(name.value, email.value, tel.value, company.value);

    if (xName.value == "" || xEmail.value == "" || xTel.value == "") {
      window.alert("필수 입력 항목이 비어 있습니다.");
      return;
    }

    fetch(`/contact/add?name=${xName.value}&email=${xEmail.value}&tel=${xTel.value}&company=${xCompany.value}`)
      .then(function(response) {
        return response.text();
        // return response.json(); // json 형식의 문자열을 자바스크립트 객체로
      })
      .then(function(text) {
        console.log(text);
      });

  };

  document.querySelector("#x-cancel-btn").onclick = function() {
    window.location.href = "index.html";
  };
</script>
</body>
</html>

登録してリスト画面に移動

    fetch(`/contact/add?name=${xName.value}&email=${xEmail.value}&tel=${xTel.value}&company=${xCompany.value}`)
      .then(function(response) {
        return response.text();
        // return response.json(); // json 형식의 문자열을 자바스크립트 객체로
      })
      .then(function(text) {
        console.log(text);
        location.href = "index.html";
      });
登録ボタンを押してリスト画面に入ります

REST API機能の変更


連絡先データの保持
配列をローカル変数からインスタンス変数に変換します.
何枚目に置くべきか分からないのではないでしょうか.
size
配列内のカウント
package com.eomcs.mylist;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController 
// 이 클래스가 클라이언트 요청 처리 담당자임을 표시한다.
// 이 표시(애노테이션)가 붙어있어야만 스프링 부트가 인식한다.
public class ContactController {

  String[] contacts = new String[5];
  int size = 0;

  @RequestMapping("/contact/list")
  public Object list() {
    return contacts;
  };

  @RequestMapping("/contact/add")
  public Object add(String name, String email, String tel, String company) {
    String contact = name + "," + email + "," + tel + "," + company;
    contacts[size++] = contact;
    return size;
  }

}
  @RequestMapping("/contact/list")
  public Object list() {
    return contacts;
  };
現在含まれている数のみが返されます.
新しいアレイを作成できるのは、アレイに格納されている値のみです.
  @RequestMapping("/contact/list")
  public Object list() {
    String[] arr = new String[size]; // 배열에 저장된 값만 복사할 새 배열을 만든다.
    for (int i = 0; i < size; i++) {
      arr[i] = contacts[i]; // 전에 배열에서 값이 들어 있는 항목만 복사한다.
    }
    return arr; // 복사한 항목들을 담고 있는 새 배열을 리턴한다.
  };
http://localhost:8080/contact/add?name=aaa&[email protected]&tel=010-1111-1111&company=aaaa
クエリーで連絡先を追加し、ディレクトリを確認すると、効果的です.

view.html


form.htmlをコピーします.
連絡先名に詳細を表示するリンクを追加します.
  var tbody = document.querySelector("#x-contact-table tbody")

  fetch("/contact/list").then(function(response){
  return response.json();
}).then(function(contacts) {
  console.log(contacts)
  for (var contact of contacts) {
    console.log(contact); // 예) "홍길동1,[email protected],010-1111-2222,비트캠프"
    var contact = contact.split(","); // 예) ["홍길동1","[email protected]","010-1111-2222","비트캠프"]
    var tr = document.createElement("tr");
    tr.innerHTML = `<td><a href="/contact/get?email=${contact[1]}">${contact[0]}</a></td>
      <td>${contact[1]}</td>
      <td>${contact[2]}</td>
      <td>${contact[3]}</td>`;
    tbody.appendChild(tr);
  }
});

URLからクエリーリストを抽出します.
クエリーから電子メールの値を抽出します.
0個以上～からなるオブジェクト
空き箱があるかもしれません.
いちじコーディング
次に0～3を一度にエンコードします


後ろの疑問符をくれない人がいる
  var arr = location.href.split("?");
  console.log(arr);
  if (arr.length == 1) {
    alert("요청 형식이 올바르지 않습니다.")
    return;
  }
  console.log("=======>")

例外.
  var arr = location.href.split("?");
  console.log(arr);
  if (arr.length == 1) {
    alert("요청 형식이 올바르지 않습니다.")
    throw "URL 형식 오류!";
  }
  var arr = location.href.split("?");
  console.log(arr);
  if (arr.length == 1) {
    alert("요청 형식이 올바르지 않습니다.")
    throw "URL 형식 오류!";
  }

  var qs = arr[1];
  console.log(qs);

クエリーから電子メール値を抽出
これを切り直す&
JavaScript文字列の検索
  // 2) 쿼리 스트링에서 email 값을 추출한다.
  var values = qs.split("&");
  for (var value of values) {
    if (value.startsWith("email=")) {
      console.log("ok!");
      break;
    }
  }
  // 2) 쿼리 스트링에서 email 값을 추출한다.
  var values = qs.split("&");
  for (var value of values) {
    if (value.startsWith("email=")) {
      console.log(value.split("=")[1]);
      break;
    }
  }
  // 2) 쿼리 스트링에서 email 값을 추출한다.
  var email = null;
  var values = qs.split("&");
  for (var value of values) {
    if (value.startsWith("email=")) {
      email = value.split("=")[1];
      break;
    }
  }

  if (email == null) {
    alert("이메일 값이 없습니다.");
    throw "파라미터 오류"
  }
パラメータが間違っています.Eメールを受信していません

詳細をEメールでサーバに要求
  // 3) 서버에서 가져온 데이터를 화면에 출력한다.
  var contact = "홍길동,[email protected],1111,비트캠프";
  var values = contact.split(",");
  // fetch(`/contact/get?email=${email}`)
  //   .then(funciton(response) {
  //     return
  //   })
  //   .then();

  var xName = document.querySelector("#x-name");
  var xEmail = document.querySelector("#x-email");
  var xTel = document.querySelector("#x-tel");
  var xCompany = document.querySelector("#x-company");

  xName.value = values[0];
  xEmail.value = values[1];
  xTel.value = values[2];
  xCompany.value = values[3];
  // 3) 연락처 상세 정보를 화면에 출력한다.
  var contact = "홍길동,[email protected],1111,비트캠프";
  var values = contact.split(",");

  var xName = document.querySelector("#x-name");
  var xEmail = document.querySelector("#x-email");
  var xTel = document.querySelector("#x-tel");
  var xCompany = document.querySelector("#x-company");

  xName.value = values[0];
  xEmail.value = values[1];
  xTel.value = values[2];
  xCompany.value = values[3];

REST API-getの実装


アレイに入力した数のみを繰り返すことができます
size
繰り返し文が終わる前に値が見つからない場合は、空の文字列を返します.
  @RequestMapping("/contact/get")
  public Object get(String email) {
    for (int i = 0; i < size; i++) {
      if (contacts[i].split(",")[1].equals(email)) {
        return contacts[i];
      }
    }
    return "";
  }
サーバの交換後に再起動
サーバの再起動後に連絡先を再登録する必要がある

学習用
実戦
労せずして得る

スクリーンとREST APIの統合


サーバからデータを取得します.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>연락처</title>
</head>
<body>
<h1>연락처 상세</h1>
<form>
  이름* : <input id="x-name" type="text"><br>
  이메일* : <input id="x-email" type="text"><br>
  전화* : <input id="x-tel" type="text"><br>
  회사 : <input id="x-company" type="text"><br>
  별표(*) 항목은 필수 입력입니다.<br>
  <button id="x-update-btn" type="button">변경</button>
  <button id="x-cancel-btn" type="button">취소</button>
</form>

<script type="text/javascript">

  // URL에서 쿼리스트링(query string)을 추출한다.
  var arr = location.href.split("?");
  console.log(arr);
  if (arr.length == 1) {
    alert("요청 형식이 올바르지 않습니다.")
    throw "URL 형식 오류!";
  }

  var qs = arr[1];
  console.log(qs);

  // 2) 쿼리 스트링에서 email 값을 추출한다.
  var email = null;
  var values = qs.split("&");
  for (var value of values) {
    if (value.startsWith("email=")) {
      email = value.split("=")[1];
      break;
    }
  }

  if (email == null) {
    alert("이메일 값이 없습니다.");
    throw "파라미터 오류"
  }

  console.log(email);

  var xName = document.querySelector("#x-name");
  var xEmail = document.querySelector("#x-email");
  var xTel = document.querySelector("#x-tel");
  var xCompany = document.querySelector("#x-company");

  // 3) 서버에서 데이터 가져오기
  fetch(`/contact/get?email=${email}`)
    .then(function(response) {
      return response.text();
    })
    .then(function(contact) {
      var values = contact.split(",");

      // 4) 연락처 상세 정보를 화면에 출력한다.
      xName.value = values[0];
      xEmail.value = values[1];
      xTel.value = values[2];
      xCompany.value = values[3];
    })

  document.querySelector("#x-update-btn").onclick = function() {
    if (xName.value == "" || xEmail.value == "" || xTel.value == "") {
      window.alert("필수 입력 항목이 비어 있습니다.");
      return;
    }

    fetch(`/contact/add?name=${xName.value}&email=${xEmail.value}&tel=${xTel.value}&company=${xCompany.value}`)
      .then(function(response) {
        return response.text();
        // return response.json(); // json 형식의 문자열을 자바스크립트 객체로
      })
      .then(function(text) {
        console.log(text);
        location.href = "index.html";
      });

  };

  document.querySelector("#x-cancel-btn").onclick = function() {
    window.location.href = "index.html";
  };
</script>
</body>
</html>


クエリーアナライザ
https://developer.mozilla.org/ko/docs/Web/API/URLSearchParams
ない場合はnullを返します
  // 2) 쿼리 스트링에서 email 값을 추출한다.
  var params = new URLSearchParams(qs)
  var email = params.get("email");

連絡先変更の実施


データを検索する鍵として電子メールを使用する
連絡先情報を入力する場合は、連絡先を区切る個別の値を用意する必要があります.
連絡先を登録するたびの一意の番号(一意の値)
キー値は通常数値を使用します
電話、Eメールは後で変更できます
ユーザー固有番号
身分証明書番号が同じです
会員登録時に会員に固有番号を発行する
Eメールは重複できません.修正も不可能です.이메일* : <input id="x-email" type="text" readonly><br>htmlには2つのプロパティがあります.
名前があって価値がある.
名前だけ?値に意味がない.readonlyがあるかどうかだけ見て

不変
メール上部
変更をサーバに送信します.
変更内容を読みます.


更新なしでエラー
  @RequestMapping("/contact/update")
  public Object update(String name, String email, String tel, String company) {
    String contact = name + "," + email + "," + tel + "," + company;
    for (int i = 0; i < size; i++) {
      if (contacts[i].split(",")[1].equals(email)) {
        contacts[i] = contact;
        return 1;
      }
    }
    return 0;
  }
http://localhost:8080/contact/update?name=a1&[email protected]&tel=010-1111-1111&company=%EB%B9%84%ED%8A%B8%EC%BA%A0%ED%94%8412


連絡先の削除の実装


スクリーン実装
削除ボタンを追加し、リスナーを登録します.
<form>
  이메일* : <input id="x-email" type="text" readonly><br>
  이름* : <input id="x-name" type="text"><br>
  전화* : <input id="x-tel" type="text"><br>
  회사 : <input id="x-company" type="text"><br>
  별표(*) 항목은 필수 입력입니다.<br>
  <button id="x-update-btn" type="button">변경</button>
  <button id="x-delete-btn" type="button">삭제</button>
  <button id="x-cancel-btn" type="button">취소</button>
</form>
<button id="x-delete-btn" type="button">삭제</button>

document.querySelector("#x-delete-btn").onclick = function() {
  console.log("삭제!");
};

サーバの削除を要求します.
これは変数を書いています

response.json();
二重引用符なし
  document.querySelector("#x-delete-btn").onclick = function() {
    fetch(`/contact/delete?email=${email}`)
      .then(function(response) {
        return response.json();
      })
      .then(function(result) {
        console.log(result);
      })
  };

シナリオの削除


カットして前に貼る.
  @RequestMapping("/contact/delete")
  public Object delete(String email) {
    for (int i = 0; i < size; i++) {
      if (contacts[i].split(",")[1].equals(email)) {
        // 현재 위치의 다음 항목에서 배열끝까지 반복하여 앞으로 값을 당겨온다.

        for (int j = i + 1; j < size; j++) {
          contacts[j-1] = contacts[j];
        }
        size--;
        return 1; 
      }
    }
    return 0;
  }




削除してから削除すると0
サーバとの連携

文字列の両端に二重引用符を付けます.
数字はJSON形式です.
  document.querySelector("#x-delete-btn").onclick = function() {
    fetch(`/contact/delete?email=${email}`)
      .then(function(response) {
        return response.json();
      })
      .then(function(result) {
        console.log(result);
        location.href = "index.html"
      })
  };

CRUDの作成...
My1Controller.java
必要なものは何ですか.
鍵としてアイテムを使用することにしました.
WPF Button TextBoxフィレット
buttonアニメーション中にイベントに応答できない解決策