Vue.js 入門：從零開始做一個極簡 To-Do 應用

来源:https://www.cnblogs.com/leyili/archive/2019/12/25/vue-todo-app.html
-Advertisement-
Play Games

Vue.js 入門：從零開始做一個極簡 To Do 應用 寫作時間：2019 12 10版本信息：Vue.js 2.6.10官網文檔： "https://cn.vuejs.org/" 前言 學習 Vue 的最佳方式之一是「請立刻查閱 Vue.js 的 "官方文檔" 」，簡單看一下「基礎」部分，配合本 ...


Vue.js 入門：從零開始做一個極簡 To-Do 應用

寫作時間：2019-12-10
版本信息：Vue.js 2.6.10
官網文檔：https://cn.vuejs.org/

前言 

學習 Vue 的最佳方式之一是「請立刻查閱 Vue.js 的官方文檔」，簡單看一下「基礎」部分，配合本文食用更佳。

image.png

在開始寫代碼之前，首先去 BootCDN 上找一下目前最新版本完整版的 Vue.js 的鏈接：https://cdn.bootcss.com/vue/2.6.10/vue.js ，與壓縮版（vue.min.js）不同，它（vue.js）包含完整的警告和調試模式。

為了儘可能地保持簡單，本文不使用 Vue CLI 來構建項目，而是像用 jQuery 開發那樣，直接在 HTML 文件里引入 Vue.js 文件。

如果文章中的代碼有不明白的地方，我的建議是：直接抄代碼，看效果，看文檔，改代碼，看效果，如此迴圈往複。

聲明式渲染

瞭解一下 Vue 官網的基礎部分的「聲明式渲染」部分 ，我們可以創建如下代碼：

image.png

此時預覽 index.html 文件，會看到頁面上出現 Hello, Vue.js! 的文字。

組件結構

我們把要做的 To-Do App 拆分成一個個小組件，目前先來一個組件 TodoList 和一個它的子組件 TodoItem 。通過熟悉 官網上的「組件基礎」教程 我們來繼續做下去。

TodoList 組件

先來做一下 TodoList 組件。我把代碼都粘貼過來，方便取用學習。
此文章之後的代碼都是在下麵這段代碼的基礎上修改，到時我就只放修改的部分代碼了，有必要的時候我會把全部代碼貼出來。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js To-Do App</title>
</head>
<body>
  <div id="app">
    <todo-list></todo-list>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    Vue.component('todo-list', {
      data: function() {
        return {}
      },
      template:`
      <ul>
        <li>Todo A</li>
        <li>Todo B</li>
        <li>Todo C</li>
      </ul>
      `
    })

    new Vue({
      el: '#app',
      data: {}
    })
  </script>
</body>
</html>

需要註意的內容：

  1. 組件的代碼需要放到 new Vue 之前
  2. 定義組件的 data 時，data 必須是一個函數
  3. template 中的代碼必須要有個外層容器包裹（最外層只能有一個元素）

改寫 TodoList 組件，添加所需數據：

<!DOCTYPE html>
<html lang="zh-hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js To-Do App</title>
</head>
<body>
  <div id="app">
    <todo-list v-bind:todos="todos"></todo-list>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    Vue.component('todo-list', {
      data: function() {
        return {}
      },
      props: ['todos'],
      template:`
      <div class="todo-list">
        <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
        <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
        <div class="todo-item" v-for="todo in todos">
          <div class="title">{{todo.title}}</div>
          <div class="content">{{todo.content}}</div>
          <div class="button" v-show="!todo.done">點擊完成</div>
          <div class="button" v-show="todo.done">已完成</div>
        </div>
      </div>
      `
    })

    new Vue({
      el: '#app',
      data: {
        todos: [
          {
            title: '待辦 1',
            content: '上課之前要抄一下同學的作業。',
            done: false
          },
          {
            title: '待辦 2',
            content: '課間和朋友去球場打籃球。',
            done: true
          },
          {
            title: '待辦 3',
            content: '英語課上故意調皮一下讓美麗的英語老師註意到然後提問我。',
            done: false
          },
          {
            title: '待辦 4',
            content: '放學後趕緊跑，絕對不能聽某些人的話：「放學後你給我等著」。',
            done: false
          }
        ]
      }
    })
  </script>
</body>
</html>

需要註意的內容：

  1. 數據在 new Vue 的 data 中定義，需要傳遞給  TodoList 組件，使用 v-bind 指令，該代碼表示將 todos 變數傳遞給 TodoList 組件的 todos 屬性。
<div id="app">
  <todo-list v-bind:todos="todos"></todo-list>
</div>
  1. TodoList 組件定義 props 用來接收傳遞過來的 todos ，在組件的 template 中可以直接使用。這裡我們使用 v-for 來迴圈渲染數據。
Vue.component('todo-list', {
  // ... 省略 ...
  props: ['todos'],
    template:`
<div class="todo-list">
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <div class="todo-item" v-for="todo in todos">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button" v-show="!todo.done">點擊完成</div>
    <div class="button" v-show="todo.done">已完成</div>
  </div>
</div>
`
})

雖然寫了給某些元素寫了 class 但是還沒有寫任何樣式，現在打開 index.html 預覽是這樣的：

image.png

TodoItem 組件

現在我們把 class 為 todo-item 的元素提取出來作為單獨的組件，除此之外我們什麼也不做，預覽效果與剛纔一致。

Vue.component('todo-item', {
  props: ['todo'],
  template: `
<div class="todo-item">
  <div class="title">{{todo.title}}</div>
  <div class="content">{{todo.content}}</div>
  <div class="button" v-show="!todo.done">點擊完成</div>
  <div class="button" v-show="todo.done">已完成</div>
</div>
`
})

Vue.component('todo-list', {
  data: function() {
    return {}
  },
  props: ['todos'],
  template:`
<div class="todo-list">
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <todo-item
    v-for="(todo, index) in todos" v-bind:key="index"
    v-bind:todo="todo">
  </todo-item>
</div>
`
})

接下來加入編輯的功能

Vue.component('todo-item', {
  props: ['todo'],
  data: function() {
    return {
      isEditing: false
    }
  },
  template: `
<div>
  <div class="todo-item" v-show="!isEditing">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button edit" v-on:click="showForm">編輯 ✏</div>
    <div class="button" v-show="!todo.done">點擊完成</div>
    <div class="button" v-show="todo.done">已完成</div>
  </div>
  <div class="todo-item" v-show="isEditing">
    <div class="form">
      <div class="field">
        <label>Title</label>
        <input type="text" v-model="todo.title" />
      </div>
      <div class="field">
        <label>Content</label>
        <input type="text" v-model="todo.content" />
      </div>
      <button class="close" v-on:click="closeForm">保存並關閉編輯模式</button>
    </div>
  </div>
</div>
`,
  methods: {
    showForm: function() {
      this.isEditing = true
    },
    closeForm: function() {
      this.isEditing = false
    }
  }
})

添加的代碼做了這幾點：

  1. 在 TodoItem 組件中添加編輯按鈕，並添加一個 isEditing 的屬性用來區分是否是編輯狀態。
  2. 添加編輯模式時 TodoItem 組件的代碼
  3. 添加並綁定打開和關閉編輯模式的事件

刪除 Todo

Vue.component('todo-item', {
  // ... 省略 ...
  template: `
<div>
  <div class="todo-item" v-show="!isEditing">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button edit" v-on:click="showForm">編輯 ✏</div>
    <div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
    <div class="button" v-show="!todo.done">點擊完成</div>
    <div class="button" v-show="todo.done">已完成</div>
  </div>
  // ... 省略 ...
</div>
`,
  methods: {
    // ... 省略 ...
    deleteTodo(todo) {
      this.$emit('delete-todo', todo)
    }
  },
})

在 TodoItem 組件中添加刪除按鈕，並添加刪除的方法，這個方法會向父組件 TodoList 發送一個 delete-todo 事件以及要刪除的 todo 數據。

父組件 TodoList 中添加一個刪除事件，並監聽來自子組件的 delete-todo 事件。

Vue.component('todo-list', {
  data: function() {
    return {}
  },
  props: ['todos'],
  template:`
<div class="todo-list">
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <todo-item
  v-for="(todo, index) in todos" v-bind:key="index"
  v-bind:todo="todo" v-on:delete-todo="deleteTodo"
  >
  </todo-item>
</div>
`,
  methods: {
    deleteTodo(todo) {
      const index = this.todos.indexOf(todo)
      this.todos.splice(index, 1)
    }
  },
})

新增 Todo

新建一個 AddTodo 組件，將組件添加到 TodoList 組件中。

Vue.component('add-todo', {
  data: function() {
    return {
      isAdding: false,
      todo: {
        title: '',
        content: '',
        done: false
      }
    }
  },
  template: `
<div>
  <div v-on:click="showForm">添加 +++</div>
  <div class="form" v-show="isAdding">
    <div class="field">
    <label>標題</label>
    <input type="text" v-model="todo.title" />
    </div>
    <div class="field">
    <label>內容</label>
    <input type="text" v-model="todo.content" />
    </div>
    <button class="close" v-on:click="saveForm">保存</button>
    <button class="close" v-on:click="closeForm">取消</button>
  </div>
</div>
`,
  methods: {
    showForm() {
      this.isAdding = true
    },
    saveForm() {
      if (this.todo.title && this.todo.content) {
        this.$emit('add-todo', this.todo)
        this.closeForm()
      }
    },
    closeForm() {
      this.isAdding = false
      this.todo = {
        title: '',
        content: '',
        done: false
      }
    }
  }
})

Vue.component('todo-list', {
  // ... 省略 ...
  template:`
<div class="todo-list">
  <add-todo v-on:add-todo="addTodo"></add-todo>
  <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
  <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
  <todo-item
    v-for="(todo, index) in todos" v-bind:key="index"
    v-bind:todo="todo" v-on:delete-todo="deleteTodo"
  >
  </todo-item>
</div>
`,
  methods: {
    // ... 省略 ...
    addTodo(todo) {
      this.todos.push(todo)
    }
  },
})

AddTodo 組件預設只顯示一個添加按鈕，當點擊添加按鈕的時候顯示需要填寫的表單，填寫完成後點擊保存，將向父組件 TodoList 發送一個 add-todo 事件以及表單信息。

父組件 TodoList 監聽 add-todo 事件併在事件觸發後向 todos 數據中新增一條由 AddTodo 組件發送的數據。

完成 Todo

TodoItem 組件中，點擊完成按鈕，發送 complete-todo 事件給父組件 TodoList 。

父組件 TodoList 監聽 complete-todo 事件併在事件觸發後從 todos 數據中要完成的那條數據標記為已完成。

Vue.component('todo-item', {
 // ... 省略 ...
  template: `
<div>
  <div class="todo-item" v-show="!isEditing">
    <div class="title">{{todo.title}}</div>
    <div class="content">{{todo.content}}</div>
    <div class="button edit" v-on:click="showForm">編輯 ✏</div>
    <div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
    <div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">點擊完成</div>
    <div class="button" v-show="todo.done">已完成</div>
  </div>
  ......
`,
  methods: {
    // ... 省略 ...
    completeTodo(todo) {
      this.$emit('complete-todo', todo)
    }
  }
})

Vue.component('todo-list', {
  // ... 省略 ...
  template:`
<div class="todo-list">
  ......
  <todo-item
    v-for="(todo, index) in todos" v-bind:key="index"
    v-bind:todo="todo"
    v-on:delete-todo="deleteTodo"
    v-on:complete-todo="completeTodo"
  >
  </todo-item>
</div>
`,
  methods: {
    // ... 省略 ...
    completeTodo(todo) {
      const index = this.todos.indexOf(todo)
      this.todos[index].done = true
    }
  }
})

至此，一個基本功能還算健全的 To-Do App 就完成了。

完整代碼

最終的完整代碼如下，可以直接拿走自己運行預覽一下。

<!DOCTYPE html>
<html lang="zh-hans">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue.js To-Do App</title>
</head>
<body>
  <div id="app">
    <todo-list v-bind:todos="todos"></todo-list>
  </div>

  <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
  <script>
    Vue.component('add-todo', {
      data: function() {
        return {
          isAdding: false,
          todo: {
            title: '',
            content: '',
            done: false
          }
        }
      },
      template: `
      <div>
        <div v-on:click="showForm">添加 +++</div>
        <div class="form" v-show="isAdding">
          <div class="field">
            <label>標題</label>
            <input type="text" v-model="todo.title" />
          </div>
          <div class="field">
            <label>內容</label>
            <input type="text" v-model="todo.content" />
          </div>
          <button class="close" v-on:click="saveForm">保存</button>
          <button class="close" v-on:click="closeForm">取消</button>
        </div>
      </div>
      `,
      methods: {
        showForm() {
          this.isAdding = true
        },
        saveForm() {
          if (this.todo.title && this.todo.content) {
            this.$emit('add-todo', this.todo)
            this.closeForm()
          }
        },
        closeForm() {
          this.isAdding = false
          this.todo = {
            title: '',
            content: '',
            done: false
          }
        }
      },
    })

    Vue.component('todo-item', {
      props: ['todo'],
      data: function() {
        return {
          isEditing: false
        }
      },
      template: `
      <div>
          <div class="todo-item" v-show="!isEditing">
            <div class="title">{{todo.title}}</div>
            <div class="content">{{todo.content}}</div>
            <div class="button edit" v-on:click="showForm">編輯 ✏</div>
            <div class="button delete" v-on:click="deleteTodo(todo)">刪除 ×××</div>
            <div class="button" v-show="!todo.done" v-on:click="completeTodo(todo)">點擊完成</div>
            <div class="button" v-show="todo.done">已完成</div>
          </div>
          <div class="todo-item" v-show="isEditing">
            <div class="form">
              <div class="field">
                <label>Title</label>
                <input type="text" v-model="todo.title" />
              </div>
              <div class="field">
                <label>Content</label>
                <input type="text" v-model="todo.content" />
              </div>
              <button class="close" v-on:click="closeForm">保存並關閉編輯模式</button>
            </div>
          </div>
      </div>
      `,
      methods: {
        showForm: function() {
          this.isEditing = true
        },
        closeForm: function() {
          this.isEditing = false
        },
        deleteTodo(todo) {
          this.$emit('delete-todo', todo)
        },
        completeTodo(todo) {
          this.$emit('complete-todo', todo)
        }
      },
    })

    Vue.component('todo-list', {
      data: function() {
        return {}
      },
      props: ['todos'],
      template:`
      <div class="todo-list">
        <add-todo v-on:add-todo="addTodo"></add-todo>
        <p>已完成：{{todos.filter(todo => todo.done === true).length}}</p>
        <p>未完成：{{todos.filter(todo => todo.done === false).length}}</p>
        <todo-item
          v-for="(todo, index) in todos" v-bind:key="index"
          v-bind:todo="todo"
          v-on:delete-todo="deleteTodo"
          v-on:complete-todo="completeTodo"
        >
        </todo-item>
      </div>
      `,
      methods: {
        deleteTodo(todo) {
          const index = this.todos.indexOf(todo)
          this.todos.splice(index, 1)
        },
        addTodo(todo) {
          this.todos.push(todo)
        },
        completeTodo(todo) {
          const index = this.todos.indexOf(todo)
          this.todos[index].done = true
        }
      },
    })

    new Vue({
      el: '#app',
      data: {
        todos: [
          {
            title: '待辦 1',
            content: '上課之前要抄一下同學的作業。',
            done: false
          },
          {
            title: '待辦 2',
            content: '課間和朋友去球場打籃球。',
            done: true
          },
          {
            title: '待辦 3',
            content: '英語課上故意調皮一下讓美麗的英語老師註意到然後提問我。',
            done: false
          },
          {
            title: '待辦 4',
            content: '放學後趕緊跑，絕對不能聽某些人的話：「放學後你給我等著」。',
            done: false
          }
        ]
      }
    })
  </script>
</body>
</html>

（完）


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第一篇：前端知識之HTML內容
    HTTP協議介紹 什麼是HTTP協議 超文本傳輸協議，規定了瀏覽器與服務端之間數據傳輸的格式。 HTTP協議的四大特性 基於請求響應 一次請求對應一次響應 基於TCP/IP作用於應用層之上的協議 無狀態 不保留客戶端的狀態（如記錄用戶的登錄密碼和賬戶） 因此產生了cookie，session，tok ...
  • JS---元素隱藏的不同方式
    元素隱藏的不同方式 dispaly, visibility, opacity, height&border 為0 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> d ...
  • 7 個令人興奮的 JavaScript 新特性
    前言 一個ECMAScript標準的製作過程，包含了Stage 0到Stage 4五個階段，每個階段提交至下一階段都需要TC39審批通過。本文介紹這些新特性處於Stage 3或者Stage 4階段，這意味著應該很快在瀏覽器和其他引擎中支持這些特性。 一、類的私有變數 最新提案之一是在類中添加私有變數 ...
  • JS---案例：滾動條
    案例：滾動條 html框架分為4部分，最外面的div, 放文字的div, 裝滾動條的div層，以及滾動條本身放在一個div裡面 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> ...
  • JavaScript中用var和不用var的區別
    Javascript聲明變數的，雖然用var關鍵字聲明和不用關鍵字聲明，很多時候運行並沒有問題，但是這兩種方式還是有區別的。可以正常運行的代碼並不代表是合適的代碼。 varnum=1; 是在當前域中聲明變數。如果在方法中聲明，則為局部變數（localvariable），如果是在全局域中聲明，則為全局 ...
  • 學習Web前端開發時有哪些技術點
    現在學前端的人是越來越多，學習質量也是參差不齊。過來人的身份告訴你，如果你還沒有下定決心花時間去學習Web前端，那也可以先找些視頻學習下，Web前端開發有哪些常見技術點!接下來，就看看Web前端開發有哪些常見技術點! 1、你有哪些性能優化的方法? (1)減少http請求次數：CSSSprites,J ...
  • JavaScript如何實現字元串拼接操作
    實際應用中，目標字元串的生成可能需要多個數據的拼接。 由於應用頻繁，幾乎是所有編程語言都必須掌握的操作，當然每種語言具有各自特點。 本文將通過代碼實例詳細介紹一下JavaScript如何實現字元串拼接操作。 一.使用加號()拼接: 加號不但可以實現算數運算，也可以實現字元串拼接操作。 代碼實例如下: ...
  • 監測頁面載入的幾個函數的區別
    1 .window.onload //表示頁麵包含圖片等文件在內的所有元素都載入完成。 2 document.ready //函數只需對 DOM 樹的等待，而無需對圖像或外部資源載入的等待，從而執行起來更快。 3 document.onreadystatechange //當頁面載入狀態改變的時候執 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類