view ---person.html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody>
{% for per in persons %}
<tr>
<td>{{per.id}}</td>
<td>{{per.name}}</td>
<td>{{per.age}}</td>
</tr>
{% endfor %}
</tbody>
</table>
<nav>
<ul class="pagination">
<li><a href="#">«</a></li>
<li><a href="/person?page=1">1</a></li>//路径 同router .get('/person')
<li><a href="/person?page=2">2</a></li>
<li><a href="#">»</a></li>
</ul>
</nav>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/jquery/dist/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
服务器部分
var config = {
port: 3000,
staticPath: './bower_components',
viewPath: './views'
}
var koa = require('koa');
var router = require('koa-router')();
var views = require('co-views');
var staticServe = require('koa-static');
var logger=require('koa-logger')
var render = views(config.viewPath, {
map: { 'html': 'swig' }
});
var app = koa();
router.get('/person', function*(){
var persons = [
{
id: 1,
name: 'aaa',
age: 18
},
{
id: 2,
name: 'vvv',
age: 18
},
{
id: 3,
name: 'ccc',
age: 18
},
{
id: 4,
name: 'iii',
age: 18
},
{
id: 5,
name: 'ppp',
age: 18
},
{
id: 6,
name: ';;;',
age: 18
},
]
var query = this.request.query;
var page = query.page;
var count = 3;
if(!page){
page=1;
}
persons = persons.slice( (page-1)*count, page*count);
var context = {
persons: persons
}
this.body = yield render('person.html', context);
});
app.use(logger())//查看加载的详细信息
app.use( staticServe(config.staticPath) );//找到设置的静态文件
app.use( router.routes() );
app.listen(config.port);
console.log( config.port );
