Node.js —— 学习笔记之 ejs 框架

ejs是一套简单的模板语言，可以利用ejs实现前端后端交互，仅仅用简单javascript代码即可生成HTML页面。

可以作为快速开发使用。一般用来和express一起用。

参考链接：https://www.npmjs.com/package/ejs

安装

npm install ejs --save;
//--save可以自动加入package.json里
//其他平台使用可以直接读取一起安装

介绍

在html文本里用 <% ... %>即可

官方文档涉及到多种格式

image

通过查阅资料总结出了他们的区别：

<% .. %> ：用于控制流，即直接使用JavaScript语言

<%= .. %> ：用于转义输出值，即在后端定义的变量，可以再前端显示输出

<%- .. %> ：向模板输出没有转义的值。

<%# .. %>：注释标签，不执行。

<%% ：输出'<%'。

-%>：用于换行移除模式。

具体咋使用？？

我先创建一个ejs文件(与html一模一样，后缀不同而已)

index.ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>接下来我要用ejs渲染后端数据到前端</p>
    <h1><%= myName %></h1>
</body>
</html>

app.js

//创建Express模块
var express = require('express');
var app=express();

//创建ejs模块
var ejs = require('ejs');

//设置ejs模板引擎
app.set("view engine", "ejs");

var Name='海哥';

//express框架
app.get('/',function(req,res){
    res.render('index',{
        myName:Name
        //可以看出myName是前端的
        //Name赋值给myName
    });
});

app.listen(3003);

image

这里 app.js 调用的变量name，通过ejs的<%= myName %>实现替换。

这里用到了express的render方法；

得看一下官方文档。

render()用于渲染 HTML 视图

`app.render(view, [locals], callback)`

view 就是模板的文件名

callback 用来处理返回的渲染后的字符串

locals 可以为其模板传入变量值

更复杂的可以

index.ejs

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <p>接下来我要用ejs渲染后端数据到前端</p>
    <h4>升级版：循环渲染？</h4>
    <ul>
        <% for(var i=0;i<names.length;i++) {%>
        <li><%= names[i] %></li>
        <% } %>
    </ul>
    <h4>总共有 <%= names.length %> 个学生</h4>
</body>
</html>

app.js

//创建ejs模块
var ejs = require('ejs');

//创建Express模块
var express = require('express');
var app=express();

app.set("view engine", "ejs");

var names=['张三','李四','王五'];

app.get('/',function(req,res){
    res.render('index',{
        names:names
    });
});

app.listen(3003);

image

那如果我需要加入css样式呢？如果我写一个css文件，我又该如何引用呢？

express框架下使用

**app.js **(加多这一句)

app.use(express.static('public'));

将css文件放入public文件中，在ejs文件读取css即可

（默认会搜索public目录下的文件）

global.css(先简单试一下)

li {
    color:red;
}

index.ejs(加多一句而已)

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="global.css">
</head>
<body>
    <p>接下来我要用ejs渲染后端数据到前端</p>
    <h4>升级版：循环渲染？</h4>
    <ul>
        <% for(var i=0;i<names.length;i++) {%>
        <li><%= names[i] %></li>
        <% } %>
    </ul>
    <h4>总共有 <%= names.length %> 个学生</h4>
</body>
</html>

看看效果

image

这样子的话，那我们就可以在views目录下建立多个ejs文件，每个文件代表不同的模块，而public目录下可以放css、javascript、image等等。这样整个工程不会显得乱。而app.js代表控制服务器端。

在实现了前端后端数据的交互后，前一篇文章是实现后端与数据库的交互，下一篇文章应该是实现前端与数据库的交互。

最后编辑于：2018.10.15 22:21:35