To-Do Calendar - Day20 實作使用者自訂排序功能

• 2022/06/08
• 2-minute read
• SideProject

這篇來實作原子習慣列表的自訂排序功能，根據使用者手動的排序結果來更新資料庫。

原子習慣列表自訂排序功能

• 開發流程：
  • 將前端傳來的 habitList 參數已覆蓋的方式存進資料庫中該使用者的 habits document 的 habitList，並將結果並返回前端
  • 最後實作前端呼叫對應的 API，然後顯示更新後返回的結果
    

設計 RESTful API

updateHabitsOrder API

• Request URL

  PUT http://localhost:8080/users/{userId}/habits
  

• Request Body

  {
    "habitsId":"628fd7820f99c13e6d6d95fe",
    "habitList":[
        {"habitId": "habit01", "name": "吃早餐", "checkColor": "red", "createdTime": 1653405213436, "lastModifiedTime":1653405213436},
        {"habitId": "habit02", "name": "喝水2000cc", "checkColor": "yellow", "createdTime": 1653405213436, "lastModifiedTime":1653405213436},
        {"habitId": "habit03", "name": "寫技術部落格", "checkColor": "green", "createdTime": 1653405213436, "lastModifiedTime":1653405213436},
        {"habitId": "36ced75352e74206a9a3b55eeda6b240", "name": "12點前就寢", "checkColor": "pink", "lastModifiedTime":1653405213436}
    ],
  }
  

• Response Body

  {
    "id": "628fd7820f99c13e6d6d95fe",
    "userId": "user01",
    "habitList":[
        {"habitId": "habit01", "name": "吃早餐", "checkColor": "red", "createdTime": 1653405213436, "lastModifiedTime":1653405213436},
        {"habitId": "habit02", "name": "喝水2000cc", "checkColor": "yellow", "createdTime": 1653405213436, "lastModifiedTime":1653405213436},
        {"habitId": "habit03", "name": "寫技術部落格", "checkColor": "green", "createdTime": 1653405213436, "lastModifiedTime":1653405213436},
        {"habitId": "36ced75352e74206a9a3b55eeda6b240", "name": "12點前就寢", "checkColor": "pink", "lastModifiedTime":1653405213436}
    ],
    "createdTime": 1653405213436,
    "lastModifiedTime": 1654445557493
  }
  

實作 Controller 層

• 在 HabitsController class 新增 putHabitsOrder 方法，返回類型為 ResponseEntity<Habits>
• 在方法上加上 @PutMapping 註解，表示前端要使用 PUT 方法來請求 API
• 在 @PutMapping 註解括號中指定 url 路徑，並使用 @PathVariable 註解去取得 url 路徑的值
• 使用 @RequestBody 去接住前端傳來的參數，並使用 @Valid 註解讓寫在 HabitsRequest class 的驗證請求參數的註解生效
• 接著實作 patchHabit 方法（call habitsService 的 putHabitsOrder 方法）

實作 Service 層

• 在 HabitsService interface 宣告 putHabitsOrder 方法
• 接著再到 putHabitsOrder class，實作 putHabitsOrder 方法

實作 Dao 層

• 在 HabitsDao interface 宣告 replaceHabits 方法
• 實作之前可先在 Query Console 測試 MongoDB 原生語法
• 接著再回到 HabitsDaoImpl class，實作 replaceHabits 方法

• 接著運行 Spring Boot 程式，使用 API Tester 測試一下效果

• 測試是否有去驗證前端參數

實作前端串接 API

• 在 src/axios/index.js 新增 apiHabitsOrderUpdate 方法，然後再 export 出去給外面的組件 import

  export const apiHabitsOrderUpdate = (userId, habitsId, habitList) =>
  instance.put(`/users/${userId}/habits`, {
    habitsId: habitsId,
    habitList: habitList,
  });
  

• 當排序變更時，觸發 datadragEnd 事件呼叫 updateHabitsOrder API

  ...
  import { apiHabitsQuery, apiHabitsOrderUpdate, apiHabitTrackerQuery, apiHabitAdd, apiHabitUpdate, apiHabitDelete, apiPickedDayAdd, apiPickedDayRemove } from "../../api/index.js";
  ...
  
    datadragEnd(evt) {
      let self = this;
      apiHabitsOrderUpdate(
        self.$store.state.userId,
        self.pickedHabit.habitId,
        self.habitList
        ).then((res=>{
          self.habitList = res.data.habitList;
        }));
    },
  

運行結果

參考資料

• Java 工程師必備！Spring Boot 零基礎入門