当前位置：首页 > news >正文

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

news 来源：原创 2025/5/15 9:25:21

阶段目标：

掌握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。

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