Fork me on GitHub

koa学习-项目搭建-1

koa项目的环境搭建

按照一般node项目的搭建方式即可

新建一个git仓库,然后将仓库拉到本地,对本地仓库进行npm的初始化,配置好一些package.json的相关配置。然后就可以开始了。

首先先简单的起一个koa的服务.

安装koa相关的依赖:

1
npm install koa@latest -S --registry=https://registry.npm.taobao.org

如果安装较慢,可以使用淘宝源来进行安装。

package.json里面配置一下项目的启动脚本:

1
2
3
"scripts": {
"start":"node server/index.js"
},

然后新建一个server的文件,里面放一个index.js的文件就可以开始写代码了
里面先写上一点简单的启动代码:

1
2
3
4
5
6
7
const Koa = require('koa');
const app = new Koa();
app.use(async (ctx,next) => {
ctx.body = '电影首页'
})
app.listen(4455)

这样使用node index.js就可以跑起来我们的koa服务了。

搭建模板引擎

接下来我们来为koa项目构建一个模板引擎,在server文件夹下面新建一个tpl文件夹,里面放上normal.js,然后在normal.js文件里面写入:
里面先暂时使用原生的方式来进行书写,以后会切换到react或者vue框架中去。

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
module.exports = `
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width,initial-scale=1">
<title> Koa Server HTML</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class = "container" >
<div class = "row">
<div class = "col-md-8">
<h1>Hi,zoomdong</h1>
<p>This is fireairforce</p>
</div>
<div class="col-md-4">
<p>测试静态 HTML 页面</p>
</div>
</div>
</div>
</body>
</html>
`

然后在tpl文件夹里面加一个index.js来作为入口文件,将里面的一些文件分别导出出去。

1
2
3
4
5
const normalTpl = require('./normal');
module.exports = {
normal: normalTpl
}

然后在主入口文件里面设置一波引入就可以了,同时要记得返回的方式:

1
2
3
4
5
6
7
8
9
10
11
12
const Koa = require('koa');
const app = new Koa();
const { normal } = require('./tpl')
app.use(async (ctx,next) => {
// 设置渲染的返回头
ctx.type = 'text/html;charset = utf-8';
ctx.body = normal;
})
app.listen(4455);

然后运行一波之后,打开对应的端口号所对应的的地址,就可以看到页面了。

使用动态模板引擎渲染

我们之前使用自己手写的模板可能会引发一系列的bug,于是在nodejs社区里面会涌现出很多的动态模板,比如tj大神的ejs等等。

这里我们就使用一个动态模板引擎来进行渲染:
可以参考tj的ejs的例子来写。

在tpl目录下面新建一个ejs.js的文件,然后在index.js里面记得导出一下,讲模板改成类似于ejs的形式。

ejs.js(里面的you 和 me 是ejs里面特有的变量书写方式):

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
module.exports = `
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width,initial-scale=1">
<title> Koa Server HTML</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class = "container" >
<div class = "row">
<div class = "col-md-8">
<h1>Hi,<%= you %></h1>
<p>This is <%= me %></p>
</div>
<div class="col-md-4">
<p>测试静态 HTML 页面</p>
</div>
</div>
</div>
</body>
</html>
`

然后导出之后我们在主入口文件下对其进行一个调用(这里就使用ejs的动态渲染方式来进行变量的传递):
index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Koa = require('koa');
const ejs = require('ejs');
const app = new Koa();
const { htmlTpl,ejsTpl } = require('./tpl');
app.use(async (ctx,next) => {
// 设置渲染的返回头
ctx.type = 'text/html;charset = utf-8';
ctx.body = ejs.render(ejsTpl,{
you:'zoomdong',
me:'fireairforce'
});
})
app.listen(4456);

这个地方采用了ejs,当然我们也可以使用pug来进行一个渲染。在tpl文件夹下面新建一个pug.js的文件

pug相较于传统的html有很多方面的优势,在里面能通过缩进来控制代码的结构,然后里面也不用写标签,pug.js的代码是这样的:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
module.exports = `
doctype html
html
head
meta(charset="utf-8")
meta(name=viewpoint,content="width=device-width,initial-scale=1")
title Koa Server Pug
link(href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet")
script(src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js")
script(src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js")
body
.container
.row
.col-md-8
h1 Hi #{you}
p This is #{me}
.col-md-4
p 测试动态 Pug 模板引擎
`;

由于pug是利用缩进来进行骨架结构的渲染的,因而我们一定要注意缩进(比如这里使用了模板字符串,要记得讲整段代码贴到最左边去,否则会引起缩进报错)。注意一下就好,不懂的可以去github上搜索pug进行一波查询.

集成模板引擎到koa

在上面一节里面我们使用了外部的模板引擎(例如ejs和pug)来实现一个html的动态模板,这里为了简单一点我们可以直接使用koa里面自带的中间件来进行模板引擎的引入。

我这里使用的是koa-views这个中间件。

然后我们根据这个中间件的使用文档来对其进行引入,新建一个叫做views的文件夹,里面放上一个文件名为index.pug的模板渲染文件(直接把之前那段拷过来即可)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
doctype html
html
head
meta(charset="utf-8")
meta(name=viewpoint,content="width=device-width,initial-scale=1")
title Koa Server Pug
link(href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet")
script(src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js")
script(src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js")
body
.container
.row
.col-md-8
h1 Hi #{you}
p This is #{me}
.col-md-4
p 测试动态 Pug 模板引擎

然后在主入口文件index.js里面使用上这个叫做koa-views的文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const Koa = require('koa');
// const ejs = require('ejs');
// const pug = require('pug');
// const { htmlTpl,ejsTpl,pugTpl } = require('./tpl');
const app = new Koa();
const views = require('koa-views');
const { resolve } = require('path');
app.use(views(resolve(__dirname, './views'), {
extension: 'pug'
}))
app.use(async (ctx, next) => {
await ctx.render('index', {
you: 'zoomdong',
me: 'fireairforce'
})
})
app.listen(4456);

选择pug的很大一个原因是因为他能够支持这个模板引擎的支持。

完成了上面之后,我们就相当于将项目的框架已经搭建完成了。

-------------本文结束感谢您的阅读-------------