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

## 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">
        <!-- 在这里显示待办事项 -->
    </ul>
</div>

接下来，在style.css文件中添加以下CSS样式：

#loading {
    display: none;
}

最后，在script.js文件中添加以下代码以显示和隐藏加载动画：

function showLoading() {
  $("#loading").show();
}

function hideLoading() {
  $("#loading").hide();
}

// 在发起请求前显示加载动画
showLoading();

// 在请求完成后隐藏加载动画
$.get("/api/todos", function (data) {
  // ...
  hideLoading();
});

// 在其他请求中也添加相应的显示和隐藏加载动画逻辑

### 6.2 错误处理

当我们的Web应用与后端服务器进行交互时，可能会发生错误（例如，网络问题、服务器错误等）。为了提高用户体验，我们应该处理这些错误并向用户显示相应的错误信息。首先，在index.html文件中添加一个错误消息容器：

<div class="mt-4">
    <h3 class="mb-3">Todo List</h3>
    <div class="alert alert-danger" role="alert" id="error-message" style="display: none;">
        An error occurred. Please try again.
    </div>
    <!-- 其他代码 -->
</div>

接下来，在script.js文件中添加以下代码以显示和隐藏错误消息：

function showError() {
  $("#error-message").show();
}

function hideError() {
  $("#error-message").hide();
}

// 在请求发生错误时显示错误消息
$.get("/api/todos", function (data) {
  // ...
}).fail(function () {
  showError();
});

// 在其他请求中也添加相应的错误处理逻辑

## 7. 部署应用

现在我们已经完成了Web应用的开发，下一步是将其部署到互联网上，以便其他人可以访问。在本节中，我们将介绍如何使用Heroku将应用部署到互联网上。

### 7.1 创建Heroku账户

首先，访问Heroku官网并注册一个免费账户。然后，安装Heroku CLI并通过命令行（终端）登录到Heroku：

heroku login

### 7.2 准备应用

在部署应用之前，我们需要对其进行一些修改以使其适应Heroku的环境。首先，在server.js文件中添加以下代码以使用Heroku提供的环境变量：

const PORT = process.env.PORT || 3000;

接下来，创建一个名为Procfile（没有文件扩展名）的文件，其中包含以下内容：

web: node server.js

最后，在项目根目录下创建一个名为.gitignore的文件，其中包含以下内容：

node_modules/

这将防止node_modules文件夹被推送到Heroku，从而减少部署时间并避免不必要的文件传输。

### 7.3 部署应用

现在我们准备好部署应用了。首先，在项目根目录下运行以下命令以初始化Git仓库：

git init

接下来，将所有文件添加到Git仓库并提交：

git add .
git commit -m "Initial commit"

然后，使用Heroku CLI创建一个新的Heroku应用：

heroku create

最后，将代码推送到Heroku：

git push heroku master

部署完成后，你将看到一个类似于以下的URL：

https://your-app-name.herokuapp.com/

访问此URL，你将看到已部署的待办事项Web应用。现在，你可以将此URL分享给其他人让他们访问你的应用了！

## 8. 总结

在本篇文章中，我们完成了待办事项Web应用的开发，并将其部署到了互联网上。我们优化了前端页面，增加了加载动画和错误处理，提高了用户体验。同时，我们通过Heroku将应用部署到了互联网上，使其他人也可以访问。

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