项目实战：构建一个Web应用（下篇）

在上篇文章中，我们已经完成了待办事项Web应用的后端服务器搭建和前端页面的基本框架。在本篇文章中，我们将继续完善前端页面，实现与后端服务器的交互。

目录

## 6. 优化前端

### 6.1 添加加载动画

### 6.2 错误处理

## 7. 部署应用

### 7.1 创建Heroku账户

### 7.2 准备应用

### 7.3 部署应用

## 8. 总结

---

## 6. 优化前端

为了使我们的Web应用更加易用，我们可以对前端代码进行一些优化。

### 6.1 添加加载动画

当我们向后端服务器发起请求时，为了提高用户体验，我们可以在页面中显示一个加载动画。首先，在`index.html`文件中添加一个加载动画容器：

<div class="mt-4">
    <h3 class="mb-3">Todo List</h3>
    <div class="text-center" id="loading">
        <div class="spinner-border text-primary" role="status">
            <span class="sr-only">Loading...</span>
        </div>
    </div>
    <ul class="list-group" id="todo-list">
        <!-- 在这里显示待