Express下ejs的视图模板引擎的建立
写在前面
由于Express升级到4.0,将ejs的用法忽略,改为用户自定义形式,所以要引入库index.js作为引擎,来支持ejs的模板引擎(点击下载)。
首先是建立一个名字叫nodeitem,引擎为ejs的express模板
$ express -e nodeitem
$ cd nodeitem
自动安装所指定的依赖
$ npm install
$ ls

把index.js文件上传到expand_modules/ejs里面去,上传文件可安装lrzsz

$ tree expand_modules/

$ vim app.js
因为我使用的的express3,我的app.js不是入口文件,退出vim
$ cat package.json

我的入口文件是 ./bin/www,想要修改也不难,只需要在app.js文件里添加如下代码即可
app.set("port",process.env.PORT || 3000);
http.createServer(app).listen(app.get("port"),function (){
console.log("this is"+app.get("port"));
})
$ node app.js
建立模板
$ vim app.js
//引入引擎
var engine = require("./expand_modules/ejs/index.js");
//改变中间量及参数
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.set("port",process.env.PORT || 2000);
app.use(favicon());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded());
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(app.router);
//在app中调用engine函数改造引擎,模板引擎在显示层的名字叫layout.ejs
app.engine("ejs",engine);
app.locals._layoutFile="layout";
//路由控制w
app.get('/', routes.index);
app.get("/abc",routes.abc);
app.get("/u/:user",routes.user);
app.get("/post",routes.post)
app.get("/reg",routes.reg);
app.get("/doReg",routes.doReg);
app.get("/login",routes.login);
app.get("/doLogin",routes.doLogin);
app.get("/logout",routes.logout);
app.get('/users', users.list);
路由选择
$ cd routes && vim index.js

查看显示层
$ cd views && ls

$ vim layout.js
ejs文件类似于html文件,只需要在html文件的<body>标签里面加入自己设置的模板元素即可。下面是一个例子,最关键的是要在<body>标签里面加入<%-body%> 为了显示原始HTML内容

$ vim login.ejs

只需要把你想要添加到layout模板里面的html文件的<body>标签内容写入ejs文件即可 模板layout中<%-body%> 会自动解析为html,并予以显示。上面文件只是一个例子。
写在最后
ejs引擎书写方式特别像html,但是他有一个缺点就是不支持模板继承,想要模板继承可以使用jada引擎。要想知道两者更加详细的区别,这是飞机票。
Express下ejs的视图模板引擎的建立的更多相关文章
- 【转】在Express项目中使用Handlebars模板引擎
原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...
- Express开发实例(2) —— Jade模板引擎
前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...
- 后台模板引擎ejs与前台模板引擎artTemplate的简单介绍
动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...
- Express 中配置使用 art-template模板引擎
art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...
- 视图模板引擎——Vue【双向绑定】原理剖析
首先我们来了解一下MVC.MVP.MVMM这三大架构模式在前端角度上的理解. MVC分别是 Model(模型).View(视图).Controller(控制器)三个模块.View(视图层)最主要完成前 ...
- express中ejs模板引擎
1.在 app.js 中通过以下两个语句设置了 引擎类型 和页面模板的位置: app.set('views', __dirname + '/views'); app.set('view engine' ...
- 前端笔记之NodeJS(三)Express&ejs模板引擎&请求识别
一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...
- express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用
express官网 postman工具下载地址 multer的npm文档地址 express模板引擎怎么使用 地址:http://www.expressjs.com.cn/guide/using- ...
- Express全系列教程之(十一):渲染ejs模板引擎
一.简介 相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用.因此其学习成本是很低的.您也可参考ejs官网:https ...
随机推荐
- day6 函数
1.关键字参数 给实参对应的形参 调用函数时 设置关键字参数,形参=实参,把实参固定给那个形参 2.元组的可变(不定长参数)的使用 可变参数可以接收任意数量的普通的形参,并且组包 ...
- 校内测试:T1秋末的落叶(命题人gxl)官方题解
秋末的落叶 题解 传送门:https://www.luogu.com.cn/problem/U121886 Part 1:疏通题意 首先,我们从题意和样例解释中很容易提取到以下信息: \(1.\)本题 ...
- 洛谷P1057 传球游戏 完美错觉(完美错解)
//作者:pb2 博客:https://www.luogu.com.cn/blog/pb2/ 或 http://www.cnblogs.com/p2blog //博客新闻1:"WPS开机自启 ...
- 初学Linux (Linux_note)
根目录:/ /root: 存放root用户相关文件 /home: 存放不同用户的相关文件 /bin: 存放常用命令的目录 /sbin: 要具有一定权限才可以使用的命令 /mnt: 默认挂载光驱和软驱的 ...
- MongoDB联表查询
表A: id name --------------------------- 1 Tom 2 Roger 3 Mars 4 Brent 表B: id result ----------------- ...
- zookeeper简单实现注册与发现以及其他基本操作
添加依赖 <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId>zookee ...
- 牛客网PAT练兵场-人口普查
题目地址:https://www.nowcoder.com/pat/6/problem/4054 题解:结构体排序即可 /** * Copyright(c) * All rights reserved ...
- jQuery 事件操作
入口函数 使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...
- Java 接口 抽象类 抽象方法
abstract class elehousekeeping { //抽象家用电器类 abstract void opermode(); //抽象方法} class TV extends elehou ...
- 从零开始的SpringBoot项目 ( 七 ) 统一返回结果集Result 和 异常处理
import java.io.Serializable; import lombok.Data; import org.springframework.http.HttpStatus; @Data p ...