## 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官网](https://www.heroku.com/)并注册一个免费账户。然后，安装[Heroku CLI](https://devcenter.heroku.com/articles/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将应用部署到了互联网上，使其他人也可以访问。
