简介
实现一个模板嵌套的项目
- 头部分开共享
- 左边导航共享，
- 右边放router对应的内容
目录结构
创建项目
egg-init egg-xiaomi --type=simple
cnpm install
cnpm install egg-view-ejs --savecontroller/admin/manager
controller/admin/manager.js
'use strict';
const Controller = require('egg').Controller;
class ManagerController extends Controller {
async index() {
// this.ctx.body = '用户管理';
await this.ctx.render('admin/manager/index');
}
async add() {
// this.ctx.body = '用户增加';
await this.ctx.render('admin/manager/add');
}
async edit() {
// this.ctx.body = '用户编辑';
await this.ctx.render('admin/manager/edit');
}
}
module.exports = ManagerController;
router.js
'use strict';
/**
* @param {Egg.Application} app - egg application
*/
module.exports = app => {
const { router, controller } = app;
router.get('/', controller.home.index);
router.get('/admin/access', controller.admin.access.index);
router.get('/admin/access/add', controller.admin.access.add);
router.get('/admin/access/edit', controller.admin.access.edit);
router.get('/admin/manager', controller.admin.manager.index);
router.get('/admin/manager/add', controller.admin.manager.add);
router.get('/admin/manager/edit', controller.admin.manager.edit);
router.get('/admin/role', controller.admin.role.index);
router.get('/admin/role/add', controller.admin.role.add);
router.get('/admin/role/edit', controller.admin.role.edit);
};
view
view/admin/public/page_header.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>egg后台管理系统</title>
</head>
<body>
<!--The content below is only a placeholder and can be replaced.-->
<link rel="stylesheet" href="/public/admin/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/public/admin/css/basic.css">
<script type="text/javascript" src="/public/admin/bootstrap/js/jquery-1.10.1.js"></script>
<script type="text/javascript" src="/public/admin/js/base.js"></script>
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<img src="/public/admin/images/node.jpg" height="44px;" />
</div>
<div class="collapse navbar-collapse" id="example-navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a>欢迎您,admin</a>
</li>
<li><a href="#">安全退出</a>
</li>
</ul>
</div>
</div>
</nav>view/admin/public/page_asider.html
<%- include ../public/page_header.html %>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<%- include ../public/page_aside.html %>
</div>
<div class="col-sm-10">
<div class="panel panel-default">
<div class="panel-heading">
搜索
</div>
<div class="panel-body">
<form role="form" class="form-inline">
<div class="form-group">
<label for="name">名称</label>
<input type="text" class="form-control" id="name" placeholder="请输入名称">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">开始搜索</button>
</div>
</form>
</div>
</div>
<!--
列表展示
-->
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr class="th">
<th>编号</th>
<th>图标</th>
<th>名称</th>
<th>价格</th>
<th>邮费</th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>图标</td>
<td>背包1111111</td>
<td>20元</td>
<td>10元</td>
<td class="text-center">修改 删除</td>
</tr>
<tr>
<td>2</td>
<td>图标</td>
<td>thinpad笔记本电脑</td>
<td>20元</td>
<td>10元</td>
<td class="text-center">修改 删除</td>
</tr>
<tr>
<td>3</td>
<td>图标</td>
<td>iphone7</td>
<td>20元</td>
<td>10元</td>
<td class="text-center">修改 删除</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>config
config/congif.default.js
config.view = {
mapping: {
'.html': 'ejs',
'.nj': 'nunjucks'
},
};config/plugin.js
exports.ejs = {
enable: true,
package: 'egg-view-ejs',
};
exports.nunjucks = {
enable: true,
package: 'egg-view-nunjucks',
};
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。