EJS模板引擎

最新推荐文章于 2023-10-14 01:54:25 发布

李不烦

最新推荐文章于 2023-10-14 01:54:25 发布

阅读量155

点赞数

分类专栏： vue JavaScript

本文链接：https://blog.csdn.net/LWYYYYYY/article/details/98447733

版权

JavaScript 同时被 2 个专栏收录

67 篇文章 1 订阅

订阅专栏

vue

7 篇文章 0 订阅

订阅专栏

模板简单理解就是含有变量的网页，
模板都是由Node在服务器中进行渲染的，服务器会将模板中的变量进行替换，然后再发送给服务器，
这样的好处就是，网页不再是固定不变的，而是由服务器动态生成的。

ejs模板引擎
		1.下载安装ejs
			npm i ejs --save
		2.设置模板引擎
			app.set("属性名","属性值")
			app.set("view engine" , "ejs");
		3.设置模板的目录
			app.set("views" , "views")
		4.创建模板
			- 在views目录下创建ejs文件
		5.渲染模板
			- 通过response来对模板进行渲染

EJS语法：

<%= %> EJS表达式，可以将服务器传递过来变量直接在页面中输出
        会自动对变量中的符号进行转义

<%- %> EJS表达式，可以将服务器传递过来变量直接在页面中输出
        不会自动对变量进行转义，有什么内容就直接输出

<% %> EJS脚本片段，可以将js代码直接执行
    - 在一个页面中脚本片段可以编写多个，但是多个脚本片段之间必须确保结构完整

举例

var express = require("express");
var app = express();

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

app.get("/helloEJS" , function (req , res) {

	//res.render() 用来渲染模板，并将渲染后的结果发送给客户端
	//render()中可以接收一个对象作为第二个参数，对象中的所有属性将会作为变量传递进EJS模板
	res.render("hello.ejs" , {username:"孙悟空" , age:18});
});

app.get("/list" , function (req , res) {

	//从数据库中加载一组学生的数据，模拟一组数据
	var stuArr = [
		{
			name:"孙悟空",
			age:18,
			gender:"男",
			address:"火锅山"
		},{
			name:"猪八戒",
			age:28,
			gender:"男",
			address:"高老庄"
		},{
			name:"沙和尚",
			age:38,
			gender:"男",
			address:"流沙河"
		},{
			name:"唐僧",
			age:16,
			gender:"男",
			address:"女儿国"
		},{
			name:"白骨精",
			age:16,
			gender:"女",
			address:"白骨洞"
		},{
			name:"蜘蛛精",
			age:14,
			gender:"女",
			address:"盘丝洞"
		}

	];

	//渲染页面，并将学生的列表传递给EJS
	res.render("list.ejs",{stuArr:stuArr})


});

app.listen(3000 ,function () {
	console.log("OK");
});

hello.ejs文件：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是我的第一个EJS模板</title>

</head>
<body>

<!--EJS表达式-->
<%=username %> -- <%=age %>

</body>
</html>

访问http://localhost:3000/helloEJS 页面渲染后效果：

还可以直接写js:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是我的第一个EJS模板</title>

</head>
<body>

<%
    var str = "<span>hello</span>";
%>

<%=str %>

<br>

<%-str %>

<hr>

<!--EJS表达式-->
<%=username %> -- <%=age %>

<!--EJS脚本，脚本中可以直接编写js代码，这些代码将会在页面渲染执行-->
<%
    //console.log(str);
%>

<h1>HELLO EJS</h1>


<hr>

<% age = 16;%>

<%
    if(age > 17){
%>

<h3>你已经成年了~~~</h3>

<%
    }
%>

<%for(var i=0 ; i<10 ; i++){%>

<h3>今天天气真不错~~~</h3>

<%}%>



</body>
</html>

渲染后的页面：

list.ejs页面：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>



<h3>学生列表</h3>
<table border="1" width="60%">
    <tr>
        <td>姓名</td>
        <td>年龄</td>
        <td>性别</td>
        <td>住址</td>
        <td>操作</td>
    </tr>

    <%
        for(var i=0 ; i<stuArr.length ; i++){
    %>

    <tr>
        <td><%=stuArr[i].name%></td>
        <td><%=stuArr[i].age%></td>
        <td><%=stuArr[i].gender%></td>
        <td><%=stuArr[i].address%></td>
        <td>
            <a href="javascript:;">删除</a>
            <a href="javascript:;">修改</a>
        </td>
    </tr>


    <%
        }
    %>

</table>

</body>
</html>

访问http://localhost:3000/list 渲染后的页面效果：

李不烦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
EJS模板引擎

模板简单理解就是含有变量的网页，模板都是由Node在服务器中进行渲染的，服务器会将模板中的变量进行替换，然后再发送给服务器，这样的好处就是，网页不再是固定不变的，而是由服务器动态生成的。ejs模板引擎 1.下载安装ejs npm i ejs --save 2.设置模板引擎 app.set("属性名","属性值") app.set("view engi...
复制链接

扫一扫

专栏目录