JSON-server建一支RESTful API


Posted by hoyi-23 on 2021-10-05

寫JSON

  1. JSON就是JavaScript的陣列
  2. 基本上文字都要使用雙引號

json-server

載入json-server

npm install -g json-server

啟用json-server並指向JSON檔案

json-server --watch db.json

使用Postman

可以測試 GET/POST/PUT/DELETE

建一個RESTful API

REST 觀念

  1. RESTful的核心就是客戶端發出的數據操作指令都是動詞+賓語
    eg: GET/posts
  2. 動詞都必須是大寫
  3. 使用HTTP的方法,對應CRUD(GET/POST/PUT/PATCH/DELETE)
  4. 後接的賓語必須是名詞,是HTTP動詞作用的對象。
    eg: /users 是正確的,但是/getusers就是錯誤的

AXIOS

因為接下來的練習要用axios,所以也提一下!
Axios是一個基於promise的HTTP庫,可以用在瀏覽器或node.js中。
基本上有五種請求方式:

  1. get
  2. post
  3. put 整筆更新
  4. patch 局部更新
  5. delete

實作

GET

  1. 拿取全部資料
    axios.get("http://localhost:3000/posts")
    .then(response => {
    console.log(response.data)
    posts.value.push(...response.data)
    })
    .catch(error => console.log(error))
    
  2. 拿取特定資料
    要拿特定的資料就需要帶入參數params
    帶入的方法有兩種,一個是直接放在網址內,一個是寫params物件帶入
    //第一行也可以這樣寫
    //axios.get("http://localhost:3000/posts",{params: { ID: 1 }})
    axios.get("http://localhost:3000/posts/1")
    .then(response => {
    console.log(response.data)
    posts.value.push(...response.data)
    })
    .catch(error => console.log(error))
    

POST

axios({
method: "post",
url: "http://localhost:3000/posts",
headers: {
    'Content-type': 'application/json; charset=UTF-8',
},
data: {
    title: post.value.title,
    body: post.value.body
    }
})
.then(response => {
    console.log(response)
})
.catch(error => {
    console.log(error)
})

DELETE

axios({
    method: "delete",
    url: `http://localhost:3000/posts/${id}`,
})
.then(response => {
        console.log(response)
})
.catch(error => {
    console.log(error)
})

#restful-api #json-server







Related Posts

MTR04_0811

MTR04_0811

CSS 基礎 part2

CSS 基礎 part2

記一次 Leetcode 刷題體悟 - Valid Number

記一次 Leetcode 刷題體悟 - Valid Number


Comments