翱翔清单前后端分离，使用HTTP协议通信。

发送包

原型

export class RequestPacket {
    constructor(requestType,content) {
        this.content = content;
        this.requestType = requestType;
    }

    toJsonString() {
        return JSON.stringify(this);
    }

    static fromJsonString(jsonString) {
        let obj = JSON.parse(jsonString);
        return new RequestPacket(obj.content, obj.requestType);
    }
}

参数

requestType：

export class RequestType {
    static None = "None";
    static EnumerateToDoWorkList = "EnumerateToDoWorkList";
    static QueryToDoWork = "QueryToDoWork";
    static CreateToDoWork = "CreateToDoWork";
    static EditToDoWork = "EditToDoWork";
    static DeleteToDoWork = "DeleteToDoWork";
    static ModifyToDoWork = "ModifyToDoWork";
    static EditPomodoro = "EditPomodoro";
    static StartPomodoro = "StartPomodoro";
    static EndPomodoro = "EndPomodoro";
    static UserRegister = "UserRegister";
    static UserLogin = "UserLogin";
    static UserLogout = "UserLogout";
    static Synchronize = "Synchronize";
    static ConfigureBackEnd = "ConfigureBackEnd";
    static ToDoWorkItemNotification = "ToDoWorkItemNotification";
}

返回包

export class ResponsePacket {
    constructor(status, message, content) {
        this.status = status;
        this.message = message;
        this.content = content;
    }

    toJsonString() {
        return JSON.stringify(this);
    }

    static fromJsonString(jsonString) {
        let obj = JSON.parse(jsonString);
        return new ResponsePacket(obj.status, obj.message, obj.content);
    }
}

示例

发包：

<template>

<v-btn @click="sendPostRequest" class="mb-5">Send POST Request</v-btn>

</template>

<script setup>
//...
const sendPostRequest = async () => {
  await refresh();
};

const apiUrl = 'http://localhost:20220/todoworkitem';
const requestType = 'CreateToDoWork';
const Content = JSON.stringify({
  '@class': 'shared.ToDoWorkItem',
  layer : 1,
  innerId : 0,
  importancePriority : 1,
  emergencyPriority : 1,
  title : '测试事项',
  subtitle : '测试子事项',
  description : '测试描述',
  createTime : '2023-12-29T20:20:20',
  startTime : '2023-12-29T21:20:20',
  deadLine : '2023-12-29T22:20:20',
  status : 'Activated',
  subToDoWorkItemInnerIdList: [],
  pomodoroRecordInnerIdList : []
});

const { data, pending, error, refresh } = useFetch(apiUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    content: Content,
    requestType: requestType,
  }),
});

//...
</script>

解析返回包：

<template>
<v-card v-if="result" class="mt-5">
        <v-card-title class="border-bottom mb-4">
          <p class="text-h5">返回包：</p>
        </v-card-title>
        <v-card-text>
          <p class="text-h5 mb-5">原文：{{ result }}</p>

          <!-- 使用 v-data-table 来展示表格 -->
          <v-data-table
              :headers="tableHeaders"
              :items="[result]"
              :items-per-page="5"
              class="elevation-1"
          ></v-data-table>
        </v-card-text>
      </v-card>

      <v-alert v-if="error" type="error" class="mt-5">
        <h2 class="text-h3">Error:</h2>
        <pre>{{ error }}</pre>
      </v-alert>

      <v-progress-linear v-if="pending" class="mt-5"></v-progress-linear>
</template>

<script setup>
//...

// 使用 ref 来保存表格的头部信息
const tableHeaders = ref([
  { title: 'Status', value: 'status' },
  { title: 'Message', value: 'message' },
  { title: 'Content', value: 'content' },
]);

const result = ref(null);

onMounted(() => {
  refresh();
});

watch(data, (newData) => {
  // 将 JSON 字符串解析为对象
  result.value = JSON.parse(newData);
});


</script>

效果图：