使用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
时间： 2024-08-08 18:51:53