使用nunjucks代替原来的ejs,因为这个更强大,是node中主流的模板引擎
nunjucks官网
配置使用 nunjucks 模板引擎
nunjucks 模板引擎没有对模板文件名的后缀名做特定限制
如果文件名是 a.html 则渲染的时候就需要传递 a.html
如果文件名是 b.nujs 则传递 b.nujs
import express from 'express' import config from './config' import nunjucks from 'nunjucks' const app = express() import router from './router' nunjucks.configure(config.viewPath, { autoescape: true, express: app }) app.use(router) app.listen(3000, () => { console.log('server is running at port 3000...') })
config.js
import { join } from 'path' export default { viewPath: join(__dirname, '../views'), node_modules_path: join(__dirname, '../node_modules'), public_path: join(__dirname, '../public') }
处理路由
import express from 'express' // 创建一个路由容器,将所有的路由中间件挂载给路由容器 const router = express.Router() router.get('/', (req, res, next) => { res.render('index.html') }) // 通过 export default 暴露的接口成员不能定义的同时直接暴露 // 最好先定义,再暴露 // export default 可以直接暴露字面量 {} 123 export default router
以上是配置引擎模板,模板语法如下:
模板语法
{% extends "layout.html" %}
表示继承layout.html这个文件,可以使用公公的部分,然后自己加入特殊的部分,比如这里的布局页面就是公共的
{% block style %} {% endblock %}
这个代表,萝卜填坑,一个落不一个坑,一个个文件写这个,另一个文件记性填,也可以只引入不填,不过没有什么效果
{% include "header.html" %}
这个表示引入文件代替这个位置
这里header和sidebar都是布局中公共的部分
具体看下面的代码吧!!!
index.html
{% extends "layout.html" %} {% block style %} {% endblock %} {% block body %} <!-- 其它页面自已调整吧 --> <div class="container-fluid"> <!-- 个人资料 --> <div class="body teacher-profile"> <div class="profile"> <div class="row survey"> <div class="col-md-3"> <div class="cell money"> <i class="fa fa-money"></i> <span>我的收入</span> <h5>¥11.11</h5> </div> </div> <div class="col-md-3"> <div class="cell th"> <i class="fa fa-th"></i> <span>课程数量</span> <h5>12</h5> </div> </div> <div class="col-md-3"> <div class="cell user"> <i class="fa fa-user"></i> <span>用户数量</span> <h5>236</h5> </div> </div> <div class="col-md-3"> <div class="cell eye"> <i class="fa fa-eye"></i> <span>浏览量</span> <h5>22435</h5> </div> </div> </div> <div class="chart"> <div id="main" style="width: 600px;height:400px;"></div> </div> </div> </div> </div> {% endblock %} {% block script %} <script src="node_modules/echarts/dist/echarts.js"></script> <script> // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 指定图表的配置项和数据 var option = { title: { text: 'ECharts 入门示例' }, tooltip: {}, legend: { data: ['销量'] }, xAxis: { data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"] }, yAxis: {}, series: [{ name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] }] }; // 使用刚指定的配置项和数据显示图表。 myChart.setOption(option); </script> {% endblock %}
layout.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>学IT - 后台管理系统</title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css"> <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.css"> <link rel="stylesheet" href="node_modules/nprogress/nprogress.css"> <link rel="stylesheet" href="public/less/index.css"> {% block style %} {% endblock %} </head> <body> {% include "header.html" %} <!-- 主体 --> <div class="main"> {% include "sidebar.html" %} {% block body %} {% endblock %} </div> <script src="node_modules/jquery/dist/jquery.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script> <script src="node_modules/nprogress/nprogress.js"></script> <script src="public/js/common.js"></script> {% block script %} {% endblock %} </body> </html>
header.html
<!-- 头部 --> <div class="header"> <nav class="navbar navbar-custom"> <div class="navbar-header"> <a href="javascript:;" class="navbar-brand"> <i class="fa fa-navicon"></i> </a> </div> <ul class="nav navbar-nav navbar-right"> <li> <a href="javascript:;"> <i class="fa fa-bell"></i> <span class="badge">8</span> </a> </li> <li> <a href="./settings.html"> <i class="fa fa-user"></i> 个人中心 </a> </li> <li> <a href="javascript:;"> <i class="fa fa-sign-out"></i> 退出 </a> </li> <li> <a href="javascript:;"> <i class="fa fa-tasks"></i> </a> </li> </ul> </nav> </div>
sidebar.html
<!-- 侧边栏 --> <div class="aside"> <!-- 个人资料 --> <div class="profile"> <!-- 头像 --> <div class="avatar img-circle"> <img src="public/uploads/avatar.jpg"> </div> <h4>布头儿</h4> </div> <!-- 导航菜单 --> <div class="navs"> <ul class="list-unstyled"> <li> <a href="./index.html" class="active"> <i class="fa fa-home"></i> 仪表盘 </a> </li> <li> <a href="./user_list.html"> <i class="fa fa-bell"></i> 用户管理 </a> </li> <li> <a href="./teacher_list.html"> <i class="fa fa-bell"></i> 讲师管理 </a> </li> <li> <a href="javascript:;"> <i class="fa fa-cog"></i> 课程管理 <i class="arrow fa fa-angle-right"></i> </a> <ul class="list-unstyled"> <li> <a href="./course_add.html"> 课程添加 </a> </li> <li> <a href="./course_list.html"> 课程列表 </a> </li> <li> <a href="./course_category.html"> 课程分类 </a> </li> <li> <a href="./course_topic.html"> 课程专题 </a> </li> </ul> </li> <li> <a href="./advert_list.html"> <i class="fa fa-bell"></i> 广告管理 </a> </li> <li> <a href="javascript:;"> <i class="fa fa-cog"></i> 系统设置 <i class="arrow fa fa-angle-right"></i> </a> <ul class="list-unstyled"> <li> <a href="javascript:;"> 网站设置 </a> </li> <li> <a href="javascript:;"> 权限管理 </a> </li> </ul> </li> </ul> </div> </div>
来源:https://www.cnblogs.com/ygjzs/p/12232120.html