[筆記] 使用JS建立RESTful API

idobest

前言:

本篇是紀錄JavaScript RESTful API的簡單學習筆記
學習的內容來自 [ Alex 宅幹嘛 ] 👨‍💻 JSON 與 RESTFUL API 串接一次搞定

上一篇 [筆記] 使用VUE建立RESTful API 也是看Alex大大的教學影片
實作VUE的RESTful API，才發現自己對JS完全不熟，還好Alex頻道上有
有JS版的RESTful API教學，所以就花了點時間練習...感謝Alex大大

這次的內容會使用到 json-server套件，在之前的文章已經有提過怎麼使用了
請查閱[筆記] 使用VUE建立RESTful API

所需要的 data.json格式 如下:

{"users":
    [
        {"name":"胖虎",
        "id":1}
    ]
}

版本一

這個版本為 [ Alex 宅幹嘛 ] 👨‍💻 JSON 與 RESTFUL API 串接一次搞定
最後所完成的範例程式

圖1

版本一程式碼如下:

版本二

這個版本是我後來修改的版本，所要是解決 JS動態標籤與屬性值的問題

圖2

版本二程式碼如下:

在版本2與版本1不同的地方是:刪除跟修改的功能不需要自己填物件的id值
並把原先ul 改成 ol

以下是實作版本2的過程中所碰到的問題:

問題1: 將 id值塞入a tag裡面

圖3

答:

這個不管寫什麼程式都會碰到...(寫python也碰過)
字串裡面要加入變數，就要跟單引號雙引號反斜線...勾勾纏
我只能一個一個慢慢試...

問題2:點擊a tag時，取得相對應的id值

圖4

答:

這部分一開始google的解答，都不是我要的...
例如:頁面只有一個連結，把連結寫死a[0]、a[1]之類的
最後找到解答，不過版本太舊 Jqurey 1.9就不支援
詳細內容參考Reference 2 and 3

以上就是這次筆記的內容，想要學VUE還是乖乖的從JS學起...

Reference:

  1. [ Alex 宅幹嘛 ] 👨‍💻 JSON 與 RESTFUL API 串接一次搞定
  2. Use jQuery click to handle anchor onClick()
  3. jQuery 1.9 .live() is not a function