用ejs写网页模板

最新推荐文章于 2025-06-20 12:16:55 发布
原创 最新推荐文章于 2025-06-20 12:16:55 发布 · 1.1w 阅读 · 17 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#模板引擎 #ejs

今天试着用ejs模板引擎写一些页面，虽然ejs写页面与平时html写页面基本一样，但是为了方便，一些相似的页面我们可以直接用模板。

这里有两个页面，index和login页面，这两个页面的头部与脚部是一样的内容，只有中间不一样。所以用一个模板做好头部与脚部，中间部分引入就可以了。

layout.ejs

//layout.ejs   模板页面
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title><%=title%></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="/libs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/mystyle.css" rel="stylesheet">
</head>
<body>
    <%- include("./include/header.ejs") %>//引入头部部分
    <% var page ="./page/"+pagename+".ejs"%>//定义一个变量，用来动态引入
    <%- include(page)%> 
    <%- include("./include/footer.ejs") %>//引入脚部部分
</body>
</html>

header.ejs

//header.ejs  头部部分
<div class="container min-height">
    <nav class="navbar mynav navbar-default navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://xiaochenghua.iego.cn">HOME</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav dis-right">
                <li><a href="http://xiaochenghua.iego.cn">首页<span class="sr-only">(current)</span></a></li>
                <li><a id="myadmin" href="">管理</a></li>
            </ul>
        </div>
    </nav>

footer.ejs

//footer.ejs   脚部部分
<div class="container min-height">
    <nav class="navbar mynav navbar-default navbar-inverse">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="http://xiaochenghua.iego.cn">HOME</a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav dis-right">
                <li><a href="http://xiaochenghua.iego.cn">首页<span class="sr-only">(current)</span></a></li>
                <li><a id="myadmin" href="">管理</a></li>
            </ul>
        </div>
    </nav>

index.ejs 

//index.ejs    index页面内容

<div class="panel panel-info myDisplay text-center" >
    <div class="panel-heading"><h3>展示台</h3></div>
    <div class="panel-body">
        <h4>希望通过下面这个表格，你能够简单地认识我^.^</h4>
    </div>
    <div class="table-responsive">
        <table class="table">
            <tr>
                <td class="warning"><h3>姓名:肖承华</h3></td>
            </tr>
        </table>
        <table class="table .table-hover">
            <tr>
                <td class="active"><h4>出生年月：1996.01.09</h4></td>    
                <td class="success"><h4>专业：软件工程</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning"><h4>毕业院校：聊城大学东昌学院</h4></td>
                <td class="danger"><h4>学历：本科</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="danger" ><h4>联系电话：13734472101</h4></td>
                <td class="active"><h4>邮箱：1091214370@qq.com/</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td><a href="http://blog.youkuaiyun.com/qq_34149935/" target="_blank"><h4>博客</h4></a></td>
                <td class="info"><a href="https://github.com/1091214370" target="_blank"><h4>github</h4></a></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning">HTML/HTML5</td>
                <td>CSS/CSS3</td>
                <td class="info ">Javascript</td>
                <td class="success ">jquery</td>
                <td class="active ">bootstrap</td>
                <td class="danger ">node.js</td>
            </tr>
        </table>
        <table class="table">
            <tr><td><a href="http://119.29.199.85/ownweb" target="_blank"><h4>更多信息点这里</h4></a></td></tr>
        </table>
    </div>
</div>
<div class="well"></div>
<div class="page-header">
    <h1>网站作品 <small><a href="webdis.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/web1.png" alt="web1">
            <div class="caption">
                <h3>个人网站</h3>
                <p>主要使用bootstrap搭建的一款响应式网站。</p>
                <p><a href="http://119.29.199.85/webroot/" class="btn btn-primary" role="button" target="_blank">在线预览</a> <a href="https://github.com/1091214370/webroot" class="btn btn-default" role="button" target="_blank">GitHub源码</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>插件展示<small><a href="takein.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/js-img-run1.png" alt="js-img-run1">
            <div class="caption">
                <h3>JS图片轮播</h3>
                <p>通过js设置margin值，实现图片轮播。</p>
                <p><a href="http://119.29.199.85/js-imgrun01/tplb1.html" class="btn btn-primary" role="button" target="_blank">在线预览</a> <a href="https://github.com/1091214370/js-imgrun01" class="btn btn-default" role="button" target="_blank">GitHub源码</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>博客列表 <small><a href="">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="..." alt="...">  <!-- 1354x615 -->
            <div class="caption">
                <h3>敬请期待</h3>
                <p>建设好后台，开始上传，敬请期待。</p>
                <p><a href="#" class="btn btn-primary" role="button" target="_blank">查看</a></p>
            </div>
        </div>
    </div>

        </div>
    </div>
</div>

login.ejs

//login.ejs     login页面

<div class="panel panel-info myDisplay text-center" >
    <div class="panel-heading"><h3>展示台</h3></div>
    <div class="panel-body">
        <h4>希望通过下面这个表格，你能够简单地认识我^.^</h4>
    </div>
    <div class="table-responsive">
        <table class="table">
            <tr>
                <td class="warning"><h3>姓名:肖承华</h3></td>
            </tr>
        </table>
        <table class="table .table-hover">
            <tr>
                <td class="active"><h4>出生年月：1996.01.09</h4></td>    
                <td class="success"><h4>专业：软件工程</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning"><h4>毕业院校：聊城大学东昌学院</h4></td>
                <td class="danger"><h4>学历：本科</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="danger" ><h4>联系电话：13734472101</h4></td>
                <td class="active"><h4>邮箱：1091214370@qq.com/</h4></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td><a href="http://blog.youkuaiyun.com/qq_34149935/" target="_blank"><h4>博客</h4></a></td>
                <td class="info"><a href="https://github.com/1091214370" target="_blank"><h4>github</h4></a></td>
            </tr>
        </table>
        <table class="table ">
            <tr>
                <td class="warning">HTML/HTML5</td>
                <td>CSS/CSS3</td>
                <td class="info ">Javascript</td>
                <td class="success ">jquery</td>
                <td class="active ">bootstrap</td>
                <td class="danger ">node.js</td>
            </tr>
        </table>
        <table class="table">
            <tr><td><a href="http://119.29.199.85/ownweb" target="_blank"><h4>更多信息点这里</h4></a></td></tr>
        </table>
    </div>
</div>
<div class="well"></div>
<div class="page-header">
    <h1>网站作品 <small><a href="webdis.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/web1.png" alt="web1">
            <div class="caption">
                <h3>个人网站</h3>
                <p>主要使用bootstrap搭建的一款响应式网站。</p>
                <p><a href="http://119.29.199.85/webroot/" class="btn btn-primary" role="button" target="_blank">在线预览</a> <a href="https://github.com/1091214370/webroot" class="btn btn-default" role="button" target="_blank">GitHub源码</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>插件展示<small><a href="takein.html" target="_blank">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="img/js-img-run1.png" alt="js-img-run1">
            <div class="caption">
                <h3>JS图片轮播</h3>
                <p>通过js设置margin值，实现图片轮播。</p>
                <p><a href="http://119.29.199.85/js-imgrun01/tplb1.html" class="btn btn-primary" role="button" target="_blank">在线预览</a> <a href="https://github.com/1091214370/js-imgrun01" class="btn btn-default" role="button" target="_blank">GitHub源码</a></p>
            </div>
        </div>
    </div>
</div>
<div class="page-header">
    <h1>博客列表 <small><a href="">更多>></a></small></h1>
</div>
<div class="row">
    <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
            <img src="..." alt="...">  <!-- 1354x615 -->
            <div class="caption">
                <h3>敬请期待</h3>
                <p>建设好后台，开始上传，敬请期待。</p>
                <p><a href="#" class="btn btn-primary" role="button" target="_blank">查看</a></p>
            </div>
        </div>
    </div>

        </div>
    </div>
</div>

app.js页面

//app.js  
//supervisor app.js 自动重启服务器
var express= require('express');
var path =require('path');
var _=require('underscore');
var mongoose=require('mongoose');
// var Movie=require('./models/mongodb');
var port =process.env.PORT||3000;
var bodyParser = require('body-parser'); 
var app =express();


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

app.use(bodyParser.json() );// 格式化表单提交
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static('./public',{
    maxAge:'0',//no cache
    etag:true
}));
app.locals.moment=require('moment');
app.listen(port);

console.log('server start on port'+port);

app.get("/",function(req,res){//index页面
    res.render('layout',{title:'我的首页',pagename:"index"});//传入参数index，表示在模板页面引入index.ejs文件
});
app.get("/login",function(req,res){//login页面
    res.render('layout',{title:'登录页面',pagename:"login"});//传入参数login，表示在模板页面引入login.ejs文件
});

最终效果
index
index
login
login

这样，相同布局的页面，只需要单独写不同的部分，然后在app.js里面传入文件名pagename:"文件名"，就可以得到一个新的页面。

【ejs落地方案】官网用ejs做其实也很简单---ejs 静态页面
Shaoyouiqng的博客
11-17 1075
最近在做官网，首先想到用这个EJS，有句话怎么说的，万物都可以ejs，是吧！ 1、ejs特点： 快速编译和渲染 简单的模板标签 自定义标记分隔符 支持文本包含 支持浏览器端和服务器端 模板静态缓存 支持express视图系统 2、ejs常用标签： 写ejs基本上都要用 <% %>包起来，这是语言规则 <% %> 流程控制标签 ，for循环，if else等 <%= %> 输出内容标签 text文本内容，像v-text的能力 <%- %>输出.
EJS 中文文档
weixin_34029949的博客
01-11 981
译者：飞龙 来源：ejs 嵌入式 JavaScript 模板 安装 $ npm install ejs 特性 <% %> 用于控制流 <%= %> 用于转义的输出 <%- %> 用于非转义的输出 -%> 结束标签用于换行移除模式 带有<%_ _%>的控制流使用空白字符移除模式 自...
Node.js和Express框架结合EJS实现模拟登录Demo项目
最新发布
weixin_42405592的博客
06-20 833
Node.js 是一个非常流行的开源服务器端 JavaScript 运行环境，它允许开发者使用 JavaScript 来编写各种服务器端应用。Node.js 基于 Chrome V8 引擎，并采用事件驱动、非阻塞 I/O 模型，使其轻量又高效，非常适合运行在分布式设备的远程服务端。Express中间件是函数，它可以访问请求对象（req）、响应对象（res）以及应用程序的请求-响应周期中的下一个中间件函数。中间件函数可以执行以下任务：执行任何代码。对请求和响应对象进行更改。
VUE -- ejs模板的书写
weixin_34072637的博客
10-19 958
1、EJS是一个简单高效的模板语言，通过数据和模板，可以生成HTML标记文本。可以说EJS是一个JavaScript库，EJS可以同时运行在客户端和服务器端，客户端安装直接引入文件即可，服务器端用npm包安装 2、EJS的特点： 快速编译和渲染 简单的模板标签 自定义标记分隔符 支持文本包含 支持浏览器端和服务器端 模板静态缓存 支持express视图系统 3、EJS成员...
Node.js 手册查询-5-Ejs 方法
weixin_34072857的博客
11-23 121
express 中使用 //设置模板目录 app.set('views', path.join(__dirname, 'views')); //设置模板引擎 app.set('view engine', 'html'); //设置引擎后缀. index.html 中的内容可以是 ejs 代码 app.engine('.html', require('ejs').__e...
ejs母版页让你的node.js应用开发更快更有效
weixin_33770878的博客
12-17 193
原文地址:ejs母版页引子:母版页之方便之处相信做过web开发的都不用说太多,可以重复利用资源,维护方便,开发起来你只需关注当前页变动的东西,固定不变的全部放到母版页,可以理解为前人栽树后人乘凉,省时,省力,省心.下面围绕2点简单说下.一.node.js开发,基于ejs引擎的母版页二.前提环境 ,如何使用及示例介绍就像上面的这个图,如果你的业务说覆盖的页面只有中间是变化的,...
详解在express站点中使用ejs模板引擎
01-02
使用 vs创建的express站点，默认使用的是jade模板引擎，但是我不太喜欢这种方式，因为我觉得html本身的语义特性是我喜欢的，另外html本身也足够简洁，使用html自身做为模板语言更符合我的喜好，所以我选择ejs。...
ejs v9 javascript模板系统
10-28
EJS模板系统特别提到瀑布流布局的流行，这种布局方式在图像展示网站上非常流行。瀑布流通过灵活地展示图片，提高了图片浏览的用户体验。在瀑布流布局中使用EJS模板，可以有效地管理和展示数据，比如图片列表、评论、...
node.js中EJS 模板快速入门教程
10-19
EJS模板引擎是构建动态网页的理想选择，尤其是在使用Express框架时。通过EJS可以轻松地将数据与HTML模板结合，从而生成动态的Web页面。 首先，要开始使用EJS，需要先通过npm安装EJS。安装命令如下： ``` npm ...
node-ejs:使用 EJS 进行模板
06-07
在 Node.js 中，可以使用 EJS 模板引擎的 `render` 方法来渲染模板。首先，我们需要引入 EJS 模块，然后提供模板文件的路径和数据对象： ```javascript const ejs = require('ejs'); const fs = require('fs'); ...
koa2使用ejs和nunjucks作为模板引擎的使用
10-17
和EJS一样，使用`ctx.render()`方法渲染Nunjucks模板。 ```javascript router.get('/view', async (ctx) => { var food = { 'ketchup': '5 tbsp', 'mustard': '1 tbsp', 'pickle': '0 tbsp' }; await ctx....
利用Express和ejs编写简单页面
diaolanbeng0962的博客
05-06 174
1、创建临时文件夹ejsdemo $ mkdir ejsdemo　 2、进入ejsdemo 初始化项目 $ npm init 3、安装express　　 $ npm install express --save //表示写到项目运行依赖的依赖模块中 $ npm install express --save-dev //...
ejs模板
weixin_48879122的博客
09-05 1246
简述ejs的基础语法
node express ejs搭建一个简单的"页面"
Wang1996332的博客
11-11 256
1.建立工程文件夹my_ejs. 2.首先利用npm install express和npm install ejs 下载这两个家伙.至于要不要设置成全局的,看习惯,我习惯性的下载到本项目中的文件夹中...
nodejs和ejs生成html页面,nodejs 返回html页面--使用 ejs 模板
weixin_39778150的博客
06-04 570
nodejs 可以直接在返回中使用html标签，例如下面的格式，返回 hello world 将会使用 h1 字体。app.get('/html',function(req,res){res.status(200).send('hello world');});"E" is for "effective." EJS is a simple templating language that lets...
Express中EJS模板
yangyang的专栏
07-02 1173
1.先看一个简单的例子 // index.js文件 var express = require('express'); var router = express.Router(); /* GET home page. */ router.get('/', function(req, res, next) { res.render('index', { title: 'Express' });...
Express中的EJS模板引擎：深入解析、高级用法与代码示例
软考鸭
08-31 1830
在Web开发中，模板引擎是一个不可或缺的工具，它允许开发者将HTML模板与JavaScript代码分离，使得页面的渲染更加灵活和高效。EJS是一个简单而强大的模板引擎，它允许开发者将JavaScript代码嵌入到HTML模板中，从而实现了页面的动态渲染。当Express应用接收到一个请求并需要渲染一个页面时，它会查找对应的EJS模板文件，执行其中的JavaScript代码，并将结果插入到HTML中，最终生成完整的HTML页面发送给客户端。变量的值插入到模板中，最终生成完整的HTML页面发送给客户端。
Express中的Ejs模板传值问题
weixin_30776545的博客
01-06 491
在Ejs模板传值过程中，route下的变量值通过res.sender()中的变量参数传给views， 这时在views中若该变量在javascript代码中使用，可直接使用该变量，不必使用<% 变量 %>这种形式。 例如代码如下： <% for(var j = 1+index*10;j <= index*10+10;j++){ if(j > Array...
掌握EJS：模板引擎使用与实例解析
EJS（Embedded JavaScript templates）是一种模板引擎，用于生成HTML页面...通过这些实例的演示，EJS的使用会变得非常直观和简单，开发者能够快速掌握如何在自己的Node.js项目中使用EJS模板引擎来创建动态网页内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值