从0开始创建Koa2的工程示例(附带超详细解释)

微信扫一扫,分享到朋友圈

从0开始创建Koa2的工程示例(附带超详细解释)

本文用来创建 Koa2 最基本的工程示例,该示例是创建 Koa 项目的基础,我的其他文章用也用到了该示例来进行初始化。

首先在控制台输入 npm init -y 初始化项目。

安装依赖项

"dependencies": {
"@koa/router": "^9.0.1",
"ejs": "^3.1.3",
"koa": "^2.12.0",
"koa-body": "^4.1.3",
"koa-static": "^5.0.0",
"koa-views": "^6.2.3"
}

@koa/routerKoa 的路由中间件

koa-bodyKoa 用来解析请求体的中间件,将之前的 koa-bodyparser 中间件和 koa-multer 中间件合二为一。

ejsejs 模板引擎。

koa-staticKoa 提供静态资源的中间件。

koa-viewsKoa 的模板渲染中间件。

创建文件夹和文件

static 文件夹存放图片、插件等静态资源,这里我放了一个图片。

views 文件夹存放模板。

server.js 是服务端的主要代码。

编写前端代码

打开 index.html ,并创建页面,写入简单内容:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1><%- title %></h1>
</body>
</html>

这里在 html 文件中使用了 ejs 模板的语法,为什么可以这么用后面有详细的解释。

编写服务端代码

首先引入必要的中间件:

const koa = require('koa');
const app = new koa();
const koaBody = require('koa-body');
const router = require('@koa/router')();
const views = require('koa-views');
const static = require('koa-static');

其中第四行是创建了一个 koa-router 实例,相当于:

const Router = require('@koa/router');
const router = new Router();

使用 koa-views 中间件:

app.use(views(__dirname + '/views', { map: { html: 'ejs' } }));

第一个参数的意思说在根目录下的 views 文件夹中存放模板文件,后面的配置项是每一个以 .html 结尾的文件都用 ejs 模板引擎进行渲染,这也解释了为什么在 html 文件中可以使用 ejs 语法。

使用 koa-body 中间件和 koa-static 中间件:

app.use(koaBody());
app.use(static(path.join(__dirname, '/static')));

这里设置了静态文件存储的位置。

创建一个路由:

router.get('/', ctx =>
ctx.render('index', { title: 'hello world' }));

这个路由用来处理 get 请求,当 url/ 时使用模板 index ,并设置该模板的 title 变量为 'hello world'

app
.use(router.routes())
.use(router.allowedMethods());

routes 可以让 router 替你接管 url 和处理函数之间的映射,而不需要你关心真实的访问路径如何。

allowedMethods 当所有路由中间件执行完成之后,若 ctx.status 为空或者404的时候,丰富 response 对象的 header 头。

将程序监听 8080 端口:

app.listen(8080, () => {
console.log('server is running at port 8080');
});

这时在控制台中输入 node server.js ,控制台会输出 server is running at port 8080 。这时在浏览器地址栏输入 http://localhost:8080/ ,可以看到 hello world

引入静态资源

前面使用了 koa-static 并定义了静态资源路径,所以这里直接把static文件夹当做根目录就可以,在 index.html 文件中引入logo.png:

<img src="https://www.tuicool.com/articles/beIbuyb/logo.jpg">

在浏览器中刷新页面,可得到最终结果:

在镜像管理中我们可以做哪些

上一篇

国剧黑马还差一口气

下一篇

你也可能喜欢

从0开始创建Koa2的工程示例(附带超详细解释)

长按储存图像,分享给朋友