返回

构建Web应用实践指南（下）：前端与后端交互实战指南

前端

在第一部分中，我们搭好了待办事项Web应用的基础框架，包括后端服务器搭建和前端页面的基本结构。在这篇续作中，我们将深入探索前端与后端的交互，让我们的Web应用真正活跃起来。

交互式前端的搭建

我们的前端页面将使用HTML、CSS和JavaScript来打造，而Vue.js框架将负责处理与后端的交互。首先，让我们在<body>中创建必要的<div>容器来容纳我们的应用：

<body>
  <div id="app">
    <div v-if="loading">加载中...</div>
    <div v-else>
      <!-- 待办事项列表和表单 -->
    </div>
  </div>
</body>

Vue.js状态管理

为了跟踪待办事项列表和用户输入，我们将使用Vue.js的状态管理系统：

const app = new Vue({
  data() {
    return {
      loading: true,
      tasks: [],
      newTask: ''
    };
  },

与后端的交互

接下来，我们使用Vue.js的axios库与后端进行交互。在mounted()生命周期钩子中，我们将获取待办事项列表：

mounted() {
  this.getTasks();
},

methods: {
  getTasks() {
    axios.get('/api/tasks')
      .then(response => {
        this.tasks = response.data;
        this.loading = false;
      });
  },

创建新待办事项

当用户输入新待办事项并单击“添加”按钮时，我们将触发以下函数：

addTask() {
  if (!this.newTask) return;

  axios.post('/api/tasks', { task: this.newTask })
    .then(() => {
      this.getTasks();
      this.newTask = '';
    });
  },

删除待办事项

当用户点击待办事项旁边的“删除”按钮时，我们将触发以下函数：

deleteTask(id) {
  axios.delete(`/api/tasks/${id}`)
    .then(() => {
      this.getTasks();
    });
  },

完善用户体验

最后，为了提升用户体验，我们添加一些收尾工作：

  • 使用Vuex来管理应用状态
  • 使用CSS模块化来保持代码简洁
  • 整合ESLint和Prettier来提高代码质量

结语

通过这篇文章，我们完成了待办事项Web应用的开发。这是一个很好的例子，展示了前端和后端的无缝交互，也体现了Vue.js在构建交互式Web应用时的强大功能。现在，您可以尽情打造自己的Web应用，将您的想法变为现实！