W12_作業一實作記錄 [ MTR05 ] 實作之三


Posted by Christy on 2021-08-30

1. hw1_實作 API 新增留言

MTR05_第十二週（06/28 ~ 07/04）：前後端整合_作業一帶著做之打造後端 API：Part1

流程：

a. 先引入連線

b. 引入 header('Content-Type: application/json;charset=utf-8'); 把資料變成 json 格式

c. 錯誤處理：如果沒有 content, nickname, site_key 就回傳錯誤訊息

if (
    empty($_POST['content']) ||
    empty($_POST['nickname']) ||
    empty($_POST['site_key'])
  ) {
    $json = array(
      "ok" => false,
      "message" => "Please input missing fileds"
    );

    $response = json_encode($json);
    echo $response;
    die();
  }

d. 把資料拿進來以後，新增到資料庫裡面

e. 如果沒有資料，做錯誤處理

f. 用 postman 做 API 測試，線上版的不能用，後來下載了桌面版的，在下面選 desktop agent，因為非同源政策的關係，不可以用瀏覽器版本的

遇到的困難：

  1. 跟著老師打程式碼，真的就是要細心！有些錯誤自己看半天都找不到，就這樣卡了一小時，沒關係，找到就好！（成功了真的好開心）

2. hw1_實作 API 顯示留言

MTR05_第十二週（06/28 ~ 07/04）：前後端整合_作業一帶著做之打造後端 API：Part1_13':15"

流程：

a. 引入連線還有 header('Content-type: application/json;charset=utf-8');

b. 錯誤處理，檢查 $_GET[] 有沒有拿到東西；在這裡我們拿的資料是 site_key

c. 我們現在用的是 GET 方法拿到 site_key

d. sql 拿資料：要 nickname, content, created_at(記得一定要用防 sql injection 的方法 stmt prepare)

e. 錯誤處理：如果沒有結果的話，就回傳錯誤訊息

f. 為什麼要用get_result():

當使用 stmt prepare 且需要得到回傳的結果時，就要用這個函式

mysqli_stmt::get_result:
Gets a result set from a prepared statement as a mysqli_result object

g. 為什麼要用 array_push():

抓到資料以後，要把資料放到 array 裡面，用法：

<?php
  $stack = array("orange", "banana");
  array_push($stack, "apple", "raspberry");
  print_r($stack);
?>

// 上面會輸出
Array
(
  [0] => orange
  [1] => banana
  [2] => apple
  [3] => raspberry
)

遇到的困難：

  1. 永遠檢查 sql 語法，方法就是把它丟進 mysql 裡面檢查

  2. array 裡面永遠要用逗號分隔

程式碼：

<?php  
  require_once('conn.php');
  header('Content-type: application/json;charset=utf-8');
  if (
    empty($_GET['site_key'])
  ) {
    $json = array(
      "ok" => false,
      "message" => "Please add site_key in url"
    );

    $response = json_encode($json);
    echo $response;
    die();
  }

  $site_key = $_GET['site_key'];

  $sql = "select nickname, content, created_at from discussions where site_key = ? order by id desc";
  $stmt = $conn->prepare($sql);
  $stmt->bind_param('s', $site_key);
  $result = $stmt->execute();

  if (!$result) {
   $json = array(
     "ok" =>  false,
     "message" => $conn->error
    );

    $response = json_encode($json);
    echo $response;
    die(); 
  }

  $result = $stmt->get_result();
  $discussions = array();
  while($row = $result->fetch_assoc()) {
    array_push($discussions, array(
      "nickname" => $row["nickname"],
      "content" => $row["content"],
      "created_at" => $row["created_at"]
    ));
  }
  $json = array(
    "ok" => true,
    "discussions" => $discussions
  );

  $response = json_encode($json);
  echo $response;
?>

3. hw1_實作 API 串接

MTR05_第十二週（06/28 ~ 07/04）：前後端整合_作業一帶著做之打造後端 API：Part2

a. 先用 bootstrap 刻 UI: 就是去找適合的物件貼上

b. 串 API 04':50"

b.1 先顯示留言資料：

一定開始要用 $(document).ready()

  <script>
    function escape(toOutput){
      return toOutput.replace(/\&/g, '&amp;')
          .replace(/\</g, '&lt;')
          .replace(/\>/g, '&gt;')
          .replace(/\"/g, '&quot;')
          .replace(/\'/g, '&#x27')
          .replace(/\//g, '&#x2F');
    }

    $(document).ready(() => {
      $.ajax({
        url: "http://localhost:8080/christy/discussions/api_comments.php?site_key=christy",
      }).done(function(data) {
        if (!data.ok) {
          alert(data.message)
          return
        }

        const comments = data.discussions;
        for (let comment of comments) {
          $('.comments').append(`
            <div class="card mt-3">
              <div class="card-body">
                <h5 class="card-title">${escape(comment.nickname)}</h5>
                <p class="card-text">${escape(comment.content)}</p>
              </div>
            </div>
          `)
        }
      });
    })
  </script>

b.2 新增留言：

先監聽表單送出事件，可以查 You might not need jQuery 要怎麼 POST

遇到的困難：

  1. chrome 的 dev tool，如果把 selected context only 打勾，就不會顯示錯誤訊息了

  2. 因為非同源政策，所以要加一個 header 在自己寫的 API 檔案裡面

header('Access-Control-Allow-Origin: *');

  1. 因為要用 jQuery，所以要引入在 head 標籤裡；當然要記得引入 bootstrap

  2. 就算跟著老師一起做，還是會有打錯的地方，如果錯了，記得一定一定要停下來訂正，不要繼續跟著走，不然碼越多就越找不到

這次的錯誤是在用 POST 的時候，裡面的data: newCommentData，前面的 data 忘記打。

雖然影片裡面老師說，ES6 參數一樣就不用打，但是這裡參數不一樣！

天阿，找到錯誤好感動！

$.ajax({
          type: 'POST',
          url: 'http://localhost:8080/christy/discussions/api_add_comments.php',
          data: newCommentData
        }).done(function(data) {
          if (!data.ok) {
            alert(data.message)
            return
          }

4. hw1_實作API「載入更多」

MTR05_第十二週（06/28 ~ 07/04）：前後端整合_作業一參考範例（請寫完作業再看）

流程：

有載入更多的按鈕，按下去以後會顯示多五筆留言。

留言順序由新到舊排列，留言大於五筆，才會出現載入更多的按鈕，按下去就會顯示多五筆留言；沒有更多留言時，就不會有載入更多的按鈕。

  1. 先去拿 before 這個資料，把 sql 分成兩種情況：

a. 網址參數有 before

b. 網址參數沒有 before

  1. 記得要帶 id

小結：API 就寫成兩種情況，如果在 postman 可以跑就差不多了

  1. 分頁功能有兩種，page-based, cursor-based

  • page-based 就是有分頁按鈕形式，可以任意跳到某一頁，每一頁的留言筆數是固定的那種

  • cursor-based 的重點在於 before and after

如果 API URL 帶的參數為：...?before=6，就會顯示留言筆數 5, 4, 3, 2, 1

參數為：...?after=5，就會顯示留言筆數為 6, 7, 8, 9, 10

  1. 04':00" - 11':50" 實作 api 載入更多

a. 根據 before 是不是空的，決定要帶什麼參數

我覺得重點觀念是有 before 跟 after 這兩個東西，難理解的觀念是 before 是哪裡來的？sql 語法怎麼寫？在網址上帶參數時，要怎麼規範？

無法再看第三次的時候理解，但是先繼續下去。

遇到的問題：

  1. 在 postman 檢查的時候，要注意 URL 的路徑
  • 老師的程式碼，但是沒有防 sql injection，我下面有改寫。
<?php  
  require_once('conn.php');
  header('Content-type: application/json;charset=utf-8');
  header('Access-Control-Allow-Origin: *');
  if (
    empty($_GET['site_key'])
  ) {
    $json = array(
      "ok" => false,
      "message" => "Please add site_key in url"
    );

    $response = json_encode($json);
    echo $response;
    die();
  }

  $site_key = $_GET['site_key'];

  $sql = 
    "select id, nickname, content, created_at from discussions where site_key = ? " .
    (empty($_GET['before']) ? "" : "and id < ? ") . 
    "order by created_at desc limit 5";

  $stmt = $conn->prepare($sql);
  if (empty($_GET['before'])) {
    $stmt->bind_param('s', $site_key);
  } else {
    $stmt->bind_param('si', $site_key, $_GET['before']);
  }

  $result = $stmt->execute();

  if (!$result) {
   $json = array(
     "ok" =>  false,
     "message" => $conn->error
    );

    $response = json_encode($json);
    echo $response;
    die(); 
  }

  $result = $stmt->get_result();
  $discussions = array();
  while($row = $result->fetch_assoc()) {
    array_push($discussions, array(
      "id" => $row["id"],
      "nickname" => $row["nickname"],
      "content" => $row["content"],
      "created_at" => $row["created_at"]
    ));
  }
  $json = array(
    "ok" => true,
    "discussions" => $discussions
  );

  $response = json_encode($json);
  echo $response;
?>
  • 我的程式碼，有防 sql injection
<?php  
  require_once('conn.php');
  header('Content-type: application/json;charset=utf-8');
  header('Access-Control-Allow-Origin: *');
  if (
    empty($_GET['site_key'])
  ) {
    $json = array(
      'ok' => false,
      'message' => 'Please add site_key in url'
    );

    $response = json_encode($json);
    echo $response;
    die();
  }

  $site_key = $_GET['site_key'];
  $before = $_GET['before'];

  if (!$before) {
    $sql = 'select id, nickname, content, created_at from discussions where site_key = ? order by id desc limit 5';
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('s', $site_key);
  } else {
    $sql = 'select id, nickname, content, created_at from discussions where site_key = ? and id < ? order by id desc limit 5';
    $stmt = $conn->prepare($sql);
    $stmt->bind_param('si', $site_key, $before);
  }

  $result = $stmt->execute();

  if (!$result) {
   $json = array(
     'ok' =>  false,
     'message' => $conn->error
    );

    $response = json_encode($json);
    echo $response;
    die(); 
  }

  $result = $stmt->get_result();
  $discussions = array();
  while($row = $result->fetch_assoc()) {
    array_push($discussions, array(
      'id' => $row['id'],
      'nickname' => $row['nickname'],
      'content' => $row['content'],
      'created_at' => $row['created_at']
    ));
  }
  $json = array(
    'ok' => true,
    'discussions' => $discussions
  );

  $response = json_encode($json);
  echo $response;
?>

5. hw1_實作留言板「載入更多」功能

MTR05_第十二週（06/28 ~ 07/04）：前後端整合_作業一參考範例（請寫完作業再看）12':00" 開始

流程：

  1. 把顯示留言包成一個函式

  2. 16':13" 實作載入更多的按鈕

a. 「載入更多」按鈕要放在 comments 裡面，可以把它獨立成一個字串

b. .on()：jQuery 的 addeventlistener

c. 18':17" 先把載入更多的按鈕移除，加上新的留言，再把按鈕加回去

用事件代理的方式

遇到的問題：

  1. 更改檔名之後，要特別注意 url 路徑

  2. Id 不用 escape() 因為我們跳脫的是特殊符號，數字不需要

  3. 老實說看完兩遍影片並跟著實作以後，並沒有很懂裡面的一些細節。

  4. 為什麼會有錯誤訊息：

Access to XMLHttpRequest at 'file:///Users/christy/.bitnami/stackman/machines/xampp/volumes/root/htdocs/christy/p_discussions/index.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

是因為我把 url 的名稱改了，但是 ajax 裡面如果名稱有變，應該要完整的把名字寫出來，如果只寫成 url,，就會發生這個錯誤。

要寫完整變成 url: getCommentsURL, 後面接變數名稱

  1. 要怎麼在點擊按鈕時，除了抓留言以外，去偵測留言的數量？

  2. 為什麼在 index.html 裡面，getCommentsAPI 這個函式要放一個 call back fn 當第三個參數？

是為了確保執行順序嗎？例如說一定要先確認是否拿到 siteKey and before 才能繼續下去？這裡不是很明白

function getCommentsAPI(siteKey, before, cb) {
  let url = `http://localhost:8080/christy/p_discussions/api_comments.php?site_key=${siteKey}`
  if (before) {
    url += '&before=' + before
  }
  $.ajax({
    url,
  }).done(function(data) {
    cb(data)
  });
}
  1. 如果看完影片自己硬做的話，就會變成網路上看到的文章先在資料庫新增一個表格存 pageToken，接著把全部的 api 都改掉，然後可能會在哪個坑跌倒，又可能就沒有然後了。

所以說我應該要好好利用資源問問題，不要再亂來了。



Christy
Web Developer
Coding on the way




Related Posts

[重新理解 C++] TMP(2): variadic template parameter

[重新理解 C++] TMP(2): variadic template parameter

 CHChang810716
Git問題集 - rebase

Git問題集 - rebase

 TempuraEngineer
淺談 Jamstack 架構

淺談 Jamstack 架構

 SimonAllen

Comments