6 作業

在 index.js 檔案中，第一行先放入以下：

var user_id = 1; // 自己的座號

初始載入時，顯示 loading icon：

$("ul.task_list").html('<li style="text-align: center;"><i class="fas fa-spinner fa-spin fa-3x"></i></li>');

GET: 取得待辦事項列表

GET https://notes.webmix.cc/ajax/teach/api/list.php

取得待辦事清的清單列表。

Path Parameters

Name	Type	Description
user_id*	string	自己的座號，例：1

200 取得待辦事項的資料。

[
  {
    "item_id": "abc",
    "name":"dddda",
    "star":0,
    "sort":1
  },
  {
    "item_id": "abc123",
    "name":"dddd",
    "star":0,
    "sort":1
  }
]

403 禁止取得待辦事項的list。

POST: 新增待辦事項

POST https://notes.webmix.cc/ajax/teach/api/add.php

輸入欲新增的待辦事項。

Request Body

Name	Type	Description
user_id*	string	自己的座號，例：1
name*	string	待辦事項的文字

200 回傳新增的待辦事項資料。item_id:伺服器回傳的待辦事項id。

{
  "item_id": "abc123",
  "name":"dddd",
  "star":0,
  "sort":1
}

403 不正確的方式取得，禁止讀取資料。

新增資料與顯示資料結果：

DELETE: 移除單筆待辦事項

DELETE https://notes.webmix.cc/ajax/teach/api/delete_item.php

移除單筆待辦事項

Request Body

Name	Type	Description
user_id*	string	自己的座號，例：1。
item_id*	string	待辦事項的id。

200 回傳成功訊息(包含資料)，或待辦事項找不到或未定義

/* 刪除待辦事項成功 */
{
  "msg":"delete success",
  "data":[
    {
      "item_id":529,
      "name":"as",
      "star":0,"sort":1
    },
    {
      "item_id":376,
      "name":"d1",
      "star":0,"sort":1
    }
  ]
}

/* 待辦事項找不到 */
{
  msg: "item id not found",
}

/* 待辦事項未定義 */
{
  msg: "item id not defined"
}

403 未使用DELETE或其它原因。

DELETE: 清空所有待辦事項

DELETE https://notes.webmix.cc/ajax/teach/api/delete_all.php

清空所有待辦事項。

Request Body

Name	Type	Description
user_id*	string	自己的座號，例：1。

200 清空成功。

{
  "msg": "delete all success",
  "data": []
}

星號更新的注意事項

加上以下的 css：

div.star_block{
  display: inline-block;
  position: relative;
}
div.temp_loading{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsla(0, 0%, 0%, .1);
  text-align: center;
  z-index: 2;
  color: white;
}
div.temp_loading > span{
  display: inline-block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

串接 API 之前，執行：

$(this).closest("div.star_block").append('<div class="temp_loading"><span><i class="fas fa-spinner fa-spin"></i></span></div>');

串接 API 之後，執行：

$(this).closest("div.star_block").find("div.temp_loading").remove();

PATCH: 更新待辦事項的星號

PATCH https://notes.webmix.cc/ajax/teach/api/patch_star.php

更新待辦事項的星號。

Request Body

Name	Type	Description
user_id*	string	自己的座號，例：1。
item_id*	string	待辦事項的id。
star*	string	星號數字。

200 回傳的可能訊息：

// 更新成功
{
  "msg": "star update success",
  "item_id": "893",
  "star": 2
}

// 未使用正確的 PATCH
{
  "msg": "denied"
}

// user_id 未傳送
{
  "msg": "user_id not defined"
}

// 未傳送 star 或 傳送小於 0
{
  "msg": "star not defined"
}

// item_id 未傳送
{
  "msg": "item_id not defined"
}

// item_id 找不到
{
  "msg": "item_id not found"
}

撰寫排序的注意事項

• 需將排序的 API 部份，寫在另一個函式。

• 在 css 檔的 article.task_container 樣式，加上一行：position: relative; 。

串接 API 之前，執行：

$("article.task_container").append("<div class='temp_loading'><span><i class='fas fa-spinner fa-spin fa-5x'></i></span></div>");

串接 API 之後，執行：

$("article.task_container").children("div.temp_loading").remove();

PATCH: 更新待辦事項的排序

PATCH https://notes.webmix.cc/ajax/teach/api/patch_sort.php

Request Body

Name	Type	Description
user_id*	string	自己的座號，例：1。
item_id*	string	待辦事項id。
direction*	string	up 或 down。

200 回傳已經排序好的所有資料。

{
  "msg":"update sort success",
  "data":[
    {
      "item_id": 878,
      "name": "測試的待辦事項",
      "star": 3,
      "sort": 1
    },
    {
      "item_id": 722,
      "name": "a3",
      "star": 0,
      "sort": 2
    },
    {
      "item_id": 537,
      "name": "a1",
      "star": 0,
      "sort": 3
    }
  ]
}

PUT: 更新單筆待辦事項當中，所用者所打的字。

PUT https://notes.webmix.cc/ajax/teach/api/update_item.php

更新的資料：使用者所打的字。

Request Body

Name	Type	Description
user_id*	string	自己的座號，例：1。
item_id*	string	待辦事項id。
name*	string	待辦事項文字。

200 回傳的資料

{
  "msg": "item update success",
  "item_id": "899",
  "name": "測試的文字"
}

完成示意

Java 班先下載

完成版的 JS 版本(未串接 API)： https://alldata.sgp1.digitaloceanspaces.com/sample/assignment_js_only.zip