egg学习笔记第三十二天：将页面及静态资源整合到eggjs项目中
1、静态页面资源目录结构以下（一些登陆和权限静态页面和静态资源）javascript
2、将静态文件引入到egg项目当中：css
将Bootstrap，css，images，js文件夹放入eggjs项目的public>admin后台管理模板文件夹中：html
3、将静态代码中的index.html首页文件粘贴到view>admin>manager>index.html中java
静态资源路径所有添加 node
/public/admin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="aside">
<li>
<h4>管理员管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 管理员列表</a>
</li>
<li class="list-group-item">
<a href="/add">增长管理员</a>
</li>
</ul>
</li>
<li>
<h4>分类管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 商品分类列表</a>
</li>
<li class="list-group-item">
<a href="/add" >增长商品分类</a>
</li>
</ul>
</li>
<li>
<h4>商品管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 商品列表</a>
</li>
<li class="list-group-item">
<a href="/add">增长商品</a>
</li>
</ul>
</li>
<li>
<h4>轮播图管理</h4>
<ul>
<li class="list-group-item">
<a href="/">轮播图列表</a>
</li>
<li class="list-group-item">
<a href="/add">轮播图商品</a>
</li>
</ul>
</li>
</ul>
</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>
访问/admin/manager能够渲染当前index页面：jquery
访问/admin/manager/add能够渲染当前add页面，在view>admin下新建add页面：bootstrap
将老版本edit页面粘贴过来修改静态资源路径，在访问/admin/manager/add能够渲染当前add页面可得：安全
edit页面大体如上图页面所示。iphone
角色权限的模块划分大体以下图所示：ide
四：将头部header和侧边栏sidebar抽离成公共模块。
在view>admin新建public文件夹，而后新建page_header.html 和page_sidebar.html
五：将page_header文件中写入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></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>
6、将上面修改的页面头部替换为：
<%- include ../public/page_header.html%>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2">
<ul class="aside">
<li>
<h4>管理员管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 管理员列表</a>
</li>
<li class="list-group-item">
<a href="/add">增长管理员</a>
</li>
</ul>
</li>
<li>
<h4>分类管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 商品分类列表</a>
</li>
<li class="list-group-item">
<a href="/add" >增长商品分类</a>
</li>
</ul>
</li>
<li>
<h4>商品管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 商品列表</a>
</li>
<li class="list-group-item">
<a href="/add">增长商品</a>
</li>
</ul>
</li>
<li>
<h4>轮播图管理</h4>
<ul>
<li class="list-group-item">
<a href="/">轮播图列表</a>
</li>
<li class="list-group-item">
<a href="/add">轮播图商品</a>
</li>
</ul>
</li>
</ul>
</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>
7、侧边栏也基本如上图所示：page_sidebar.html
<div class="col-sm-2">
<ul class="aside">
<li>
<h4>管理员管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 管理员列表</a>
</li>
<li class="list-group-item">
<a href="/add">增长管理员</a>
</li>
</ul>
</li>
<li>
<h4>分类管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 商品分类列表</a>
</li>
<li class="list-group-item">
<a href="/add" >增长商品分类</a>
</li>
</ul>
</li>
<li>
<h4>商品管理</h4>
<ul>
<li class="list-group-item">
<a href="/"> 商品列表</a>
</li>
<li class="list-group-item">
<a href="/add">增长商品</a>
</li>
</ul>
</li>
<li>
<h4>轮播图管理</h4>
<ul>
<li class="list-group-item">
<a href="/">轮播图列表</a>
</li>
<li class="list-group-item">
<a href="/add">轮播图商品</a>
</li>
</ul>
</li>
</ul>
</div>
八：主页面修改成以下，访问页面无问题则抽离公共部分红功。
<%- include ../public/page_header.html%>
<div class="container-fluid">
<div class="row">
<%- include ../public/page_sidebar.html%>
<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>
九.将侧边栏改成符合业务场景的菜单文案：渲染成为以下所示
<div class="col-sm-2">
<ul class="aside">
<li>
<h4>管理员管理</h4>
<ul>
<li class="list-group-item">
<a href="/admin/manager">管理员列表</a>
</li>
<li class="list-group-item">
<a href="/admin/manager/add">增长管理员</a>
</li>
<li class="list-group-item">
<a href="/admin/manager/edit">编辑管理员</a>
</li>
</ul>
</li>
<li>
<h4>角色管理</h4>
<ul>
<li class="list-group-item">
<a href="/admin/role"> 角色列表</a>
</li>
<li class="list-group-item">
<a href="/admin/role/add" >新增角色</a>
</li>
<li class="list-group-item">
<a href="/admin/role/edit" >编辑角色</a>
</li>
</ul>
</li>
<li>
<h4>权限管理</h4>
<ul>
<li class="list-group-item">
<a href="/admin/auth">权限列表</a>
</li>
<li class="list-group-item">
<a href="/admin/auth/add">增长权限</a>
</li>
<li class="list-group-item">
<a href="/admin/auth/edit">编辑权限</a>
</li>
</ul>
</li>
</ul>
</div>
十.添加login页面，配置路由，配置login controller和render函数，修改静态资源路径，访问可得：
碎碎碎！！！！！！
相关文章
- 1. egg学习笔记第二十九天：eggjs中使用mongoose
- 2. egg学习笔记第十五天：eggjs定时任务
- 3. egg学习笔记第二十二天：eggjs中使用使用egg-mongo-native实现表关联
- 4. python学习笔记第十三天------------飞机大战项目（二）
- 5. egg学习笔记第二十七天：mongoose数据校验
- 6. egg学习笔记第十二天：eggjs结合简易项目实现路由分组以及按需加载中间件
- 7. egg学习笔记第十天：中间件
- 8. eggjs学习笔记第三十七天：eggjs后管类系统权限管理RBAC第二篇
- 9. Unity3D笔记第一天——资源、项目
- 10. 18.02.23，web学习第六十二天，mybatis第二天，整合spring
- 更多相关文章...
- • Docker 资源汇总 - Docker教程
- • XSL-FO 页面 - XSL-FO 教程
- • 使用阿里云OSS+CDN部署前端页面与加速静态资源
- • Tomcat学习笔记（史上最全tomcat学习笔记）
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
欢迎关注本站公众号,获取更多信息
相关文章
- 1. egg学习笔记第二十九天：eggjs中使用mongoose
- 2. egg学习笔记第十五天：eggjs定时任务
- 3. egg学习笔记第二十二天：eggjs中使用使用egg-mongo-native实现表关联
- 4. python学习笔记第十三天------------飞机大战项目（二）
- 5. egg学习笔记第二十七天：mongoose数据校验
- 6. egg学习笔记第十二天：eggjs结合简易项目实现路由分组以及按需加载中间件
- 7. egg学习笔记第十天：中间件
- 8. eggjs学习笔记第三十七天：eggjs后管类系统权限管理RBAC第二篇
- 9. Unity3D笔记第一天——资源、项目
- 10. 18.02.23，web学习第六十二天，mybatis第二天，整合spring