写在前面

由于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的视图模板引擎的建立的更多相关文章

  1. 【转】在Express项目中使用Handlebars模板引擎

    原文:http://fraserxu.me/2013/09/12/Using-Handlebarsjs-with-Expressjs/ 最近在用Expressjs做一个项目,前后端都用它来完成.自己之 ...

  2. Express开发实例(2) —— Jade模板引擎

    前一篇通过helloworld,简单介绍了Express中的开发,本篇继续深入的学习express的模板. 关于Jade的用法,网上有很多,本篇参考:Jade语法 安装相关模块 在实验代码前,应该先安 ...

  3. 后台模板引擎ejs与前台模板引擎artTemplate的简单介绍

    动态网页是指前端页面当中的数据内容来源于后台数据库,前端的html代码会随着后台数据的变化而变化,是动态生成的.制作动态网页有两种方式,一种方式是在后台拿到前端的html模板,利用后台模板引擎(如ej ...

  4. Express 中配置使用 art-template模板引擎

    art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...

  5. 视图模板引擎——Vue【双向绑定】原理剖析

    首先我们来了解一下MVC.MVP.MVMM这三大架构模式在前端角度上的理解. MVC分别是 Model(模型).View(视图).Controller(控制器)三个模块.View(视图层)最主要完成前 ...

  6. express中ejs模板引擎

    1.在 app.js 中通过以下两个语句设置了 引擎类型 和页面模板的位置: app.set('views', __dirname + '/views'); app.set('view engine' ...

  7. 前端笔记之NodeJS(三)Express&ejs模板引擎&请求识别

    一.Express框架 1.1基本使用 创建http服务器特别麻烦,express框架解决了这个的问题. Express在node界的地位,就相当于jQuery在DOM界的地位.jQuery的核心就是 ...

  8. express搭建web服务器、路由、get、post请求、multer上传文件、EJS模板引擎的使用

    express官网 postman工具下载地址  multer的npm文档地址 express模板引擎怎么使用  地址:http://www.expressjs.com.cn/guide/using- ...

  9. Express全系列教程之(十一):渲染ejs模板引擎

    一.简介 相比于jade模板引擎,ejs对原HTML语言就未作出结构上的改变,只不过在其交互数据方面做出了些许修改,相比于jade更加简单易用.因此其学习成本是很低的.您也可参考ejs官网:https ...

随机推荐

  1. day6 函数

    1.关键字参数     给实参对应的形参   调用函数时 设置关键字参数,形参=实参,把实参固定给那个形参 2.元组的可变(不定长参数)的使用      可变参数可以接收任意数量的普通的形参,并且组包 ...

  2. 校内测试:T1秋末的落叶(命题人gxl)官方题解

    秋末的落叶 题解 传送门:https://www.luogu.com.cn/problem/U121886 Part 1:疏通题意 首先,我们从题意和样例解释中很容易提取到以下信息: \(1.\)本题 ...

  3. 洛谷P1057 传球游戏 完美错觉(完美错解)

    //作者:pb2 博客:https://www.luogu.com.cn/blog/pb2/ 或 http://www.cnblogs.com/p2blog //博客新闻1:"WPS开机自启 ...

  4. 初学Linux (Linux_note)

    根目录:/ /root: 存放root用户相关文件 /home: 存放不同用户的相关文件 /bin: 存放常用命令的目录 /sbin: 要具有一定权限才可以使用的命令 /mnt: 默认挂载光驱和软驱的 ...

  5. MongoDB联表查询

    表A: id name --------------------------- 1 Tom 2 Roger 3 Mars 4 Brent 表B: id result ----------------- ...

  6. zookeeper简单实现注册与发现以及其他基本操作

    添加依赖 <dependency> <groupId>org.apache.zookeeper</groupId> <artifactId>zookee ...

  7. 牛客网PAT练兵场-人口普查

    题目地址:https://www.nowcoder.com/pat/6/problem/4054 题解:结构体排序即可 /** * Copyright(c) * All rights reserved ...

  8. jQuery 事件操作

    入口函数 使用$(document).ready(()=>{})作为jQuery入口函数,与window.onload(()=>{})类似,但它不会等待图片等外部资源的加载完毕,而是在HT ...

  9. Java 接口 抽象类 抽象方法

    abstract class elehousekeeping { //抽象家用电器类 abstract void opermode(); //抽象方法} class TV extends elehou ...

  10. 从零开始的SpringBoot项目 ( 七 ) 统一返回结果集Result 和 异常处理

    import java.io.Serializable; import lombok.Data; import org.springframework.http.HttpStatus; @Data p ...