前言
在现代 Web 开发中，前端作为用户接口的入口，扮演了越来越重要的角色。而随着前后端分离的趋势，前端项目也越来越庞大、复杂，需要借助于一些工具、框架来提高开发效率和代码质量。Koa2 是一个现代化的 Node.js Web 框架，它使用了 ES6 的语法并拥抱异步操作，可以帮助我们更好地管理和组织前端项目。
本文将带领您实现一个简单的 TODO 应用，探究 Koa2 的基本使用和相关技术，希望能够为您的前端开发提供一些指导和启示。
技术概述
在本篇文章中，我们将使用以下技术来完成 TODO 应用的搭建：
- Koa2：一个基于 Node.js 平台的 Web 应用框架，可以帮助我们快速构建 Web 应用程序。
- Router：官方推荐的路由中间件，可以帮助我们管理用户请求并返回相应的数据。
- Pug：一种模板引擎，可以帮助我们更方便地生成 HTML 页面。
- MongoDB：一种 NoSQL 数据库，可以帮助我们存储和管理数据。
通过运用上述技术，我们将实现一个支持增删改查的 TODO 应用。
准备工作
在本节中，我们将创建一个新的 Node.js 项目，并添加必要的依赖项。
首先，打开命令行工具，输入以下命令来创建项目：
mkdir todo_app cd todo_app npm init
然后我们添加 Koa2、Router、Pug 和 MongoDB 依赖项：
npm install koa koa-router pug koa-bodyparser koa-static mongoose --save
其中，koa-bodyparser 和 koa-static 中间件用于解析请求体和提供静态文件服务。
接下来，我们需要创建一个名为 index.js 的文件，并在其中引入必要的模块：
-- -------------------- ---- ------- ----- --- - --------------- ----- ------ - ---------------------- ----- ---------- - -------------------------- ----- ----- - ---------------------- ----- -------- - -------------------- ----- --- - --- ------ ----- ------ - --- --------- ----- ---- - ---------------- -- ----- ---------------------- -- ----- ----------------------- - ------------ -- -------- ------------------------- -- ------- ------------------------------------------------- -- -- -------
我们还需要在工程中添加一个名为 public 的文件夹，用于存放静态文件（如样式表、脚本、图像等）。
现在，我们已经准备好了开发环境，可以开始编写业务代码了。
编写业务代码
在本节中，我们将实现一个支持增删改查的 TODO 应用，并将数据存储到 MongoDB 数据库中。
定义模型
我们首先需要定义 Todo 数据模型，以便后面的增删改查操作能够正确地读写数据。
在 index.js 文件中添加以下代码：
// 定义数据模型
const TodoSchema = mongoose.Schema({
title: String,
completed: { type: Boolean, default: false }
});
const TodoModel = mongoose.model('Todo', TodoSchema);通过 mongoose.Schema 方法来定义 Todo 数据模型，包括 title 和 completed 两个属性。在 mongoose.model 方法中，我们把定义好的数据模型转成一个 TodoModel 类，可以通过这个类进行增删改查操作。
添加路由（C：创建数据）
指定路由路径 /todo/create 并创建 Todo 任务：
router.post('/todo/create', async (ctx, next) => {
const todo = new TodoModel({
title: ctx.request.body.title
});
await todo.save();
ctx.redirect('/');
});在上面的代码中，我们定义了一个 /todo/create 的 POST 请求路由，可以通过 Postman 或其他工具来测试。
由于我们在前面引入了 koa-bodyparser 中间件，因此可以通过 ctx.request.body 来访问 POST 请求中提交的数据。我们根据请求中的数据创建一个新的 Todo 任务，并通过 await todo.save() 方法将任务保存到数据库中。
最后，我们通过 ctx.redirect('/') 方法跳转到主页。
添加路由（R：读取数据）
接下来，我们需要获取 Todo 任务列表并展示到页面上。
在 index.js 文件中添加以下代码：
// 获取所有任务
router.get('/', async (ctx) => {
const todos = await TodoModel.find().sort({ _id: -1 }).exec();
ctx.type = 'text/html';
ctx.body = pug.renderFile(__dirname + '/views/index.pug', { todos });
});在上面的代码中，我们定义了一个 GET 请求路由 /，通过 TodoModel.find() 方法来获取所有的 Todo 任务，再根据 sort 方法（以 _id 降序排序）来保证最新的任务排在最前。然后，我们使用 Pug 模板引擎将获取到的任务渲染成 HTML 页面，并将其作为响应体发送给客户端。
添加路由（U：更新数据）
我们不仅能够创建 Todo 任务，还可以更新它们的状态。
在 index.js 文件中添加以下代码：
// 更新任务状态
router.post('/todo/update/:id', async (ctx, next) => {
const query = { _id: ctx.params.id };
const update = { completed: true };
await TodoModel.findOneAndUpdate(query, update).exec();
ctx.redirect('/');
});在上面的代码中，我们定义了一个 /todo/update/:id 的 POST 请求路由，其中 :id 表示一个动态参数。我们可以通过 ctx.params.id 访问该动态参数，在元数据中定义的属性名为 _id，表示查询条件。同时，我们指定 $set 操作符来设置 completed 属性为 true，表示将任务状态从未完成变成已完成。
最后，我们通过 await TodoModel.findOneAndUpdate(query, update).exec() 语句将对应的任务状态更新到数据库，并通过 ctx.redirect('/') 方法跳转到主页。
添加路由（D：删除数据）
最后，我们需要实现对 Todo 任务的删除操作。
在 index.js 文件中添加以下代码：
// 删除任务
router.post('/todo/delete/:id', async (ctx, next) => {
const query = { _id: ctx.params.id };
await TodoModel.findOneAndRemove(query).exec();
ctx.redirect('/');
});在上面的代码中，我们定义了一个 /todo/delete/:id 的 POST 请求路由，和更新操作类似，我们也需要根据 _id 来删除对应的 Todo 任务。使用 await TodoModel.findOneAndRemove(query) 语句将任务从数据库中删除，并通过 ctx.redirect('/') 方法跳转到主页。
总结
到此，我们已经完成了一个简单的 TODO 应用，通过运用 Koa2、Router、Pug 和 MongoDB 等技术，实现了对数据的增删改查操作。相信通过本文的学习，您已经掌握了基本的 Koa2 开发技能，并能够在实际项目中运用它来提高工作效率和代码质量。
完整的源码可以在我的 Github 上查看: https://github.com/Joeyonng/todo-app。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64eac593f6b2d6eab358f32d