Koa框架基础

# 一、Koa 框架概述

Koa是一个基于Node的Web服务器开发框架，可以通过Koa更加便捷开发Web服务器。

# 二、安装Koa

初始化项目:新建一个空目录，执行npm init；初始化完成后，安装Koa：npm install --save koa。

# 三、创建服务器

通过引入koa并创建服务器：

const Koa = require('koa'); //引入koa构造函数
const app = new Koa(); //创建应用
app.listen(3000, () => {
    console.log('server is listening');
}); //设置监听端口

1
2
3
4
5

引入的Koa是一个构造函数，通过new 关键字可以创建一个koa应用app，并通过app的listen方法设置监听端口，便完成了一个简易的koa服务器。

此外，可以通过app的use方法设置响应的内容：

//  引入一个中间件，中间件即是一个函数（在请求之后和响应之前执行）
app.use(async(ctx) => {
    ctx.body = 'Hello koa!'; //设置响应内容
})

1
2
3
4

但是这样，不管在浏览器后面加上什么路径，响应的内容都是Hello koa!，因此就引出了路由的概念，在请求不同路径时返回不同的资源。

# 四、路由

在上面的内容的基础上，引入路由。

首先下载koa-router：npm i --save koa-router; 然后通过require引入并执行: const router = require('koa-router')(); 接下来设置不同路径下响应内容，也就是路由,示例为使用get请求来获取资源；

router.get('/', async(ctx) => {
    ctx.body = `<h1>标题</h1>
    <p>这是koa的router建立的</p>
    <img src='' />
    `;
});
router.get('/video', async(ctx) => {
    ctx.body = 'video page';
})

1
2
3
4
5
6
7
8
9

响应体内容可以返回html标签内容，浏览器会自动解析并生成对应页面。

现在服务器还差最后一步配置完成：用过use方法引入router：app.use(router.routes());。

现在服务器可以根据不同路径返回对应的资源内容；不过现在还存在一个问题：服务器端如果要返回图片资源，img标签中src的这类静态资源应该放在哪里呢，如果客户端直接可以请求服务器拿到资源，这对于服务器来说是不安全的，毕竟服务器中有很多重要的数据是不允许用户访问的；因此需要对需要返回客户端的静态资源进行配置。

# 五、设置静态文件目录

首先下载koa-static：npm i --save koa-static；然后引入：const static = require('koa-static'); 通过static来配置静态文件目录，也是通过app.use()来引入： app.use(static(__dirname + '/public')),其中__dirname在node中可以直接获取当前目录的绝对路径；然后再设置响应体引入静态资源时，根目录则是public文件夹，可以通过以下代码验证：

router.get('/', async(ctx) => {
    ctx.body = `<h1>标题</h1>
    <p>这是koa的router建立的</p>
    <img src='/img/logo.png' />
    `;
});

1
2
3
4
5
6

访问首页路由时，便可以请求到静态的logo资源，并且他在服务器配置的静态目录public的文件夹中。

# 六、练习

创建一个基于Koa的服务器，运行在80端口之上，满足：

访问http://127.0.0.1，显示文字欢迎来首页；
访问http://127.0.0.1/doc，显示有标题段落和图片的网页内容；
访问http://127.0.0.1/doc 页面中的标题和段落字体为蓝色，通过外部样式引入。

首先是Project/server.js:

const Koa = require('koa');
const router = require('koa-router')();
const static = require('koa-static')

const app = new Koa();

app.use(static(__dirname + '/public'))

router.get('/', async(ctx) => {
    ctx.body = `
    <h1>首页，欢迎！</h1>
    `
});
router.get('/doc', async(ctx) => {
    ctx.body = `
    <html>
    <link rel="stylesheet" href="/css/index.css">
    <h1>DOc</h1>
    <p>文档页面</p>
    <img src='/img/logo.png' />
    </html>
    `
})

app.use(router.routes());

app.listen('80', () => {
    console.log('server is listening on 80');
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

Project/public/img下自行添加logo.png文件；

同时在Project/public下新建css文件夹，并新建index.css文件，即引入的外部静态文件，便可达到改变样式啦：

h1,
p {
    color: blue;
}

1
2
3
4

编辑

上次更新: 2022/04/01, 21:54:01

← Node基础 Nunjucks模板入门→