本文介绍了创建 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/router:Koa
的路由中间件。
koa-body:Koa
用来解析请求体的中间件,将之前的 koa-bodyparser
中间件和 koa-multer
中间件合二为一。
ejs:ejs
模板引擎。
koa-static:Koa
提供静态资源的中间件。
koa-views:Koa
的模板渲染中间件。
创建文件夹和文件
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="logo.jpg" alt="">
在浏览器中刷新页面,可得到最终结果:
完整代码可以去 我的Github 上查看
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。