Ejs模板引擎

Ejs模板引擎简介

  1. Ejs模板引擎官网:

  2. 和大多数web后端语言一样,express同样为node提供了一套模板语法,它基于node,使用方便.

  • 拥有以下特性:
  • 快速编译与绘制输出
  • 简洁的模板标签：<% %>
  • 自定义分割符（例如：用 替换 <% %>）
  • 引入模板片段
  • 同时支持服务器端和浏览器 JS 环境
  • JavaScript 中间结果静态缓存
  • 模板静态缓存
  • 兼容 Express 视图系统

Ejs安装

1
2
3
4
5
6
7
8

sudo cnpm install -g express-generator #需要全局安装express-generator

express --view=ejs #按照ejs引擎初始化文件树结构,记得以前版本是express -e

npm install #安装依赖

SET DEBUG=check-quotation-tool:* & npm start #运行,调试模式

实例

1
2
3
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

简易用法

如果你只是新建了一个js文件来使用那你需要告诉web应用服务器你用的是哪种引擎:

1
app.set('view engine','ejs');

如果你想引入样式文件或者脚本文件,那你要提前设置静态目录: 

1
2
3
4
5
6
app.use(express.static(__dirname + '/public')); //设置静态文件目录
// OR
app.use(express.static(path.join(__dirname, 'public'))); //和上面是一样的
//运用path模块的join方法效果和前面是等价的，注意这里要引入path模块。
//现在!你可以加载 public目录下的文件了.

约定俗成,我们一般将模板文件放进views文件夹,公共文件如样式和脚本文件放进public,当然,如果你是通过express -e --ejs方式来创建文件树结构,那么你不需要担心这些.

导航的实现

实现导航部分,即公共模板,创建文件夹common之后创建nav.ejs,
只能有一个根标签,引入<% include ../common/nav.ejs %>

在ejs模板引擎中使用html

app.js

1
2
3
var ejs = require('ejs');
app.engine('html',ejs.__express);
app.set('view engine', 'html');

::: tip
此时你的项目兼容了ejs后缀和html后缀模板 ,
如果想使用ejs文件作为模板可以带上.ejs后缀 .
:::

更改ejs模板引擎的默认端口号

  1. 项目根目录新建ServerConf.js

  2. 添加如下代码

    1
    2
    3
    4
    5
    6
    var ServerConf= {
        ApiHost: "" //后台链接api
        ,ServicePort:8090

    };
    module.exports=ServerConf;

  3. 在app.js中添加代码:

    1
    2
    3
    4
    5
    var ServerConf=require("./ServerConf");

    //...

    process.env.PORT=ServerConf.ServicePort;

在路由中通过if判断加载不同的页面内容

1
2
3
4
5
6
<% if(include_page && include_page=='news_edit_page'){  %>
    <%- include("includes/news_edit_page.html") %>
<% }else if(include_page && include_page==`news_show_page`){  %>
    <%- include("includes/news_show_page.html") %>
<% }else{ %>
    <% } %>

路由中操纵数据库一般用Promise

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
new Promise((resolve,reject)=>{
    let sql = ``;
    query(sql,(err,result)=>{
        if(err){
            console.log(err);
        }else{
            resolve( JSON.parse( JSON.stringify(result) ) );
        }
    });
}).then((result)=>{
    console.log(result);
    res.render(`backstage/xx`, {
        title: ``,
    });
});