使用引擎模版
1、使用html
目录结构:
| html
| views
index.html
todo.html
404.html
app.js
app.js:
const Koa = require('koa');
const fs = require('fs')
const app = new Koa();
/**
* 用Promise封装异步读取文件方法
* @param {string} page html文件名称
* @return {promise}
*/
function render( page ) {
return new Promise(( resolve, reject ) => {
let viewUrl = `./views/${page}`
fs.readFile(viewUrl, "binary", ( err, data ) => {
if ( err ) {
reject( err )
} else {
resolve( data )
}
})
})
}
/**
* 根据URL获取HTML内容
* @param {string} url koa2上下文的url,ctx.url
* @return {string} 获取HTML文件内容
*/
async function route( url ) {
let view = '404.html'
switch ( url ) {
case '/':
view = 'index.html'
break
case '/index':
view = 'index.html'
break
case '/todo':
view = 'todo.html'
break
case '/404':
view = '404.html'
break
default:
break
}
let html = await render( view )
return html
}
app.use( async ( ctx , next) => {
let url = ctx.request.url
let html = await route( url )
ctx.body = html
})
app.listen(3000,()=>{
console.log('服务器运行于:127.0.0.1:3000');
})
2、使用ejs引擎模版
安装ejs引擎
$ npm i ejs --save
目录结构:
| ejs
| views
index.ejs
app.js
app.js:
const Koa = require('koa');
const views = require('koa-views');
const app = new Koa();
app.use(views(__dirname + '/views', {
extension: 'ejs'
}))
app.use( async ( ctx ) => {
let title = 'hello koa2'
await ctx.render('index', {
title,
})
})
app.listen(3000, ()=>{
console.log('[demo] ejs is starting at port 3000')
})
index.ejs:
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
</head>
<body>
<h1><%= title %></h1>
<p>EJS Welcome to <%= title %></p>
</body>
</html>
3、 使用nunjucks引擎
koa-nunjucks-2 作为模板引擎。Nunjucks 是 Mozilla 开发的,纯 js 编写的模板引擎,既可以用在 Node 环境下,也可以运行在浏览器端。koa-nunjucks-2 是基于 Nunjucks 封装出来的第三方中间件,完美支持 Koa2。
安装 koa-nunjucks-2
$ npm i koa-nunjucks-2 --save
目录结构:
| nunjucks2
| views
layout.html
home.html
router.js
app.js
app.js:
const Koa = require('koa');
const path = require('path')
const bodyParser = require('koa-bodyparser');
const nunjucks = require('koa-nunjucks-2');
const app = new Koa();
const router = require('./router');
app.use(nunjucks({
ext: 'html',
path: path.join(__dirname, 'views'),// 指定视图目录
nunjucksConfig: {
trimBlocks: true // 开启转义 防Xss
}
}));
app.use(bodyParser());
app.use(router.routes(), router.allowedMethods());
app.listen(3000, () => {
console.log('server is running at http://localhost:3000')
})
router.js
const router = require('koa-router')();
router.get('/',async (ctx, next)=>{
let title = 'home';
await ctx.render('home',{
title
});
});
module.exports = router;
laout.html
<html>
<head>
{% block head %}
<link rel="stylesheet">
{% endblock %}
</head>
<body>
{% block header %}
<h1>this is header</h1>
{% endblock %}
{% block body %}
<h1>this is body</h1>
{% endblock %}
{% block footer %}
<h1>this is footer</h1>
{% endblock %}
{% block content %}
<script>
//this is place for javascript
</script>
{% endblock %}
</body>
</html>
home.html
{% extends 'layout.html' %}
{% block head %}
<link href="home.css">
{% endblock %}
{% block body %}
<h1>home 页面内容</h1>
{% endblock %}
{% block content %}
<script src="home.js"></script>
{% endblock%}
4、 使用jade引擎模版
安装 jade
$ npm i jade --save
目录结构:
| jade
| views
layout.jade
home.jade
router.js
app.js
app.js
const Koa = require('koa');
const views = require('koa-views');
const app = new Koa();
const router = require('./router');
app.use(views(__dirname + '/views', {
extension: 'jade'
}))
app.use(router.routes(), router.allowedMethods());
app.listen(3000, ()=>{
console.log('server is starting at port 3000')
})
router.js
const router = require('koa-router')();
router.get('/',async (ctx, next)=>{
let title = 'home';
await ctx.render('home',{
title
});
});
module.exports = router;
layout.jade:
doctype html
html(lang="zh-cn")
head
title= title
meta(charset="utf-8")
//IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。除非有强烈的特殊需求,否则最好是设置为 edge mode,从而通知 IE 采用其所支持的最新的模式。
meta(http-equiv="X-UA-Compatible",content="IE=Edge")
//- link(rel='stylesheet', href='/stylesheets/style.css')
//- script(src="/js/angular.min.js")
body
//利用block划分区域,便于被继承
block header
block content
block footer
home.jade
// 使用jade模板
extends layout
block header
h1 这是header
block content
p 这是content
block footer
p footer
部分资料参考地址:http://cnodejs.org/topic/58ac640e7872ea0864fedf90
项目地址:https://github.com/MisterZhouZhou/Koa2-learnDayByDay/tree/day1/koa2-learnday1