主页 > 其他 >

【koa】03-Koa第二阶段内容-路由管理和模板引擎（上篇）

其他
2025-09-08 23:36:01

阶段目标：

掌握Koa的高级功能，能够构建一个功能较为完整的Web应用。

学习内容：

路由管理：学习如何使用koa-router中间件来管理路由，实现不同路径的请求处理。

模板引擎：了解如何使用模板引擎（如ejs、pug）来渲染HTML页面。

静态文件服务：学习如何使用koa-static中间件来提供静态文件服务。

错误处理：掌握如何在Koa中处理错误，包括全局错误捕获和中间件中的错误处理。

数据库集成：学习如何在Koa中集成数据库（如MySQLB），并实现基本的CRUD操作。（用sequelize+mysql实现）

第二阶段分为上中下篇，本篇文章是上篇，介绍第1-2点内容，中篇介绍第3-4的内容，下篇介绍第5的内容：数据库集成。

一、路由管理

在Koa中，路由管理通常使用koa-router中间件来实现。koa-router是一个强大的路由管理工具，支持RESTful API和页面路由。

1、安装koa-router npm install koa-router 2、代码示范 const Koa = require('koa'); const Router = require('koa-router'); const bodyParser = require('koa-bodyparser'); // 导入koa-bodyparser const { name } = require('ejs'); const app = new Koa(); const router = new Router(); // 使用bodyParser中间件解析请求体 app.use(bodyParser()); // 定义路由 router.get('/', async (ctx) => { ctx.body = 'Welcome to the home page!'; }); router.get('/about', async (ctx) => { ctx.body = 'This is the about page.'; }); router.post('/submit', async (ctx) => { const data = ctx.request.body; // 获取请求体数据 console.log("获得请求体数据>>>>",data); // ctx.body = `Received data: ${JSON.stringify(data)}`; ctx.body = data; }); // 新增http方法 let obj={ name:'zhangsan', age:18 } router.put('/update', async (ctx) => { const data = ctx.request.body; console.log("获得请求体数据>>>>",data); // 比如将obj的name和age更新为请求体的name和age obj.name=data.name; obj.age=data.age ctx.body = obj; }); // 使用路由中间件 app.use(router.routes()).use(router.allowedMethods()); app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); 3、测试

3.1、访问初始化页面

3.2、访问about页面 3.3、用api工具测试post和put请求

测试post请求

点击发送后，在终端查看打印结果

测试put请求

比如这里我定义了一个obj对象，我在发送put请求的时候，将obj两个属性的值进行修改，然后返回给前端。

点击发送

注意：本篇暂时不介绍delete方法，后续介绍”数据库集成” 的时候会演示delete方法。

二、模板引擎

Koa支持多种模板引擎，如ejs、pug等。这里我们以ejs为例。

1、安装ejs和koa-ejs npm install ejs koa-ejs 2、代码示范 2.1、demo2.js const Koa = require('koa'); const ejs = require('koa-ejs'); const Router = require('koa-router'); const app = new Koa(); const router = new Router(); // 配置ejs模板引擎 ejs(app, { root: __dirname + '/views', // 模板文件夹路径 layout: false, // 是否使用布局文件 viewExt: 'html', // 模板文件扩展名 cache: false, // 是否缓存模板 debug: false // 是否开启调试模式 }); // 定义路由 router.get('/', async (ctx) => { await ctx.render('index', { title: 'Home Page' }); }); router.get('/about', async (ctx) => { await ctx.render('about', { title: 'About Page' }); }); // 使用路由中间件 app.use(router.routes()).use(router.allowedMethods()); app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); 2.2、在views文件夹中创建两个模板文件

PS:注意文件的目录以及位置

这里为了方便演示，就不涉及复杂的html代码

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <%= title %> </title> </head> <body> <h1>Welcome to the <%= title %> </h1> </body> </html> about.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> <%= title %> </title> </head> <body> <h1>This is the <%= title %> </h1> </body> </html> 3、测试

启动服务器 node demo2.js

注意：尽可能将不同代码示范写在不同文件下。

比如路由管理的代码示范，我就写在state2/demo1.js模版引擎的代码示范，我就写在state2/demo2.js模板引擎用到的view文件夹以及views/index.html和views/about.html。

知道自己的代码写在什么位置，启动服务器的时候就不会混淆。

访问http://localhost:3000/，渲染index.html模板，显示Welcome to the Home Page

访问http://localhost:3000/about，渲染about.html模板，显示This is the About Page

大家可以尝试给模板引擎加点html代码和css样式，展示效果就会更好看一点。

四、小结

这篇文章介绍了koa专栏第二阶段的“路由管理”和“模板引擎”，文章的代码示范就是起到一个“抛砖引玉”的作用，大家可以根据自己的需求进行补充修改。

接下来的中篇，我们即将介绍第二阶段的第3-4的内容，敬请期待吧~

关注我，及时了解最新文章消息。

标签：