nodejs 返回html页面--使用 ejs 模板

nodejs 返回html页面--使用 ejs 模板

nodejs 可以直接在返回中使用html标签,例如下面的格式,返回 hello world 将会使用 h1 字体。

app.get(‘/html‘,function(req,res){
  res.status(200).send(‘<h1>hello world</h1>‘);
});

"E" is for "effective." EJS is a simple templating language that lets you generate HTML markup with plain JavaScript.

安装ejs: npm install ejs 

例子一:

test_163:/home/exenode/jike # more ejslearn.js 
var express = require(‘express‘);

var app = express();

app.set(‘view engine‘,‘ejs‘);
app.set(‘views‘, __dirname + ‘/views‘);       //设置模板文件文件夹,__dirname为全局变量,表示网站根目录。把view目录下的文件设置成模板文件。

app.get(‘/‘,function(req,res){
  res.render(‘home.ejs‘,{name:‘zzz‘});    //向页面模板传递参数,可以传递字符串和对象。 并且把页面模板返回给客户端。以json的格式传给 模板页面。

});

app.listen(3002);
test_163:/home/exenode/jike # more views/home.ejs 
<html>
  <head>
    <title> new template </title>
  </head>
  <body>
    <p>Hello jikexueyuan</p>
    <p>Hi <%= name %></p>
  </body>
</html>

输出的html页面显示:

Hello jikexueyuan

Hi zzz

例子二:

test_163:/home/exenode/jike # more ejslearn.js 
var express = require(‘express‘);
var app = express();

app.set(‘view engine‘,‘ejs‘);
app.set(‘views‘, __dirname + ‘/views‘);

app.get(‘/‘,function(req,res){
  res.render(‘home.ejs‘,{name:‘zzz‘});
});

app.get(‘/request/:name‘,function(req,res){                                         //设置请求url中 request 后的字符串,保存到 name 这个变量中。
  // var locals = {name:‘westbrook‘,‘name‘:req.params[‘name‘]};       
  var locals = {name:req.params[‘name‘]}                                       // 把 req.params[‘name‘] 的值作为 字典locals 的 key name 的值。 
  res.render(‘home.ejs‘,locals);
});

app.listen(3002);
test_163:/home/exenode/jike # 
test_163:/home/exenode/jike # more views/home.ejs 
<html>
  <head>
    <title> new template </title>
  </head>
  <body>
    <p>Hello jikexueyuan</p>
    <p>Hi <%= name %></p>                             //获取name的值。
    <p>name:<%= name %></p>                        //获取name的值。

   </body>
</html>

结果:

在前台浏览器中访问: http://192.168.1.163:3002/request/test123  ,页面显示:

Hello jikexueyuan

Hi test123

my name is:test123

分类: 前端

时间: 2024-10-10 00:57:10

nodejs 返回html页面--使用 ejs 模板的相关文章

NodeJS - Express 3.0下ejs模板使用 partial展现 片段视图

如果你也在看Node.js开发指南,如果你也在一步一步实现 microBlog 项目!也许你会遇到本文提到的问题,如果你用的是Express 3.0 本书实例背景是 Express 2.0 而如今升级到 3.0后去掉了一些老的方法也更新了一些新的,所以变化还是蛮大的. 首先上一篇博客提到的一个问题: 如何用Express 3.0 生成一个 ejs 模板项目 前提是你已经下载了ejs包,如何下载,运行cmd 输入 npm install ejs -g 2.0 下的语法是:express -t ej

nodejs之egg框架整合ejs模板

config/plugin.js ejs: { enable: true, package: 'egg-view-ejs' } config/config.default.js config.view = { mapping: {'.html': 'ejs'} //左边写成.html后缀,会自动渲染.html文件 }; ejs应用 <% items.forEach(function(item){%> <li><div style="width: auto !impo

Nodejs WEB服务器 静态文件托管、 GET POST路由 EJS模板引擎(8)

1 Nodejs 静态文件托管 略 2. 路由 官方解释:路由(Routing)是由一个 URI(或者叫路径)和一个特定的 HTTP 方法(GET. POST 等)组成的, 涉及到应用如何响应客户端对某个网站节点的访问. 非官方解释:路由指的就是针对不同请求的 URL, 处理不同的业务逻辑.  3 路由静态文件提取 原 `services.js` 代码 // 引入模块 var http = require('http'); // fs 模块 var fs =require('fs'); // p

EJS模板引擎

一.什么是模板引擎? 是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,用于网站的模板引擎就会生成一个标准的HTML文档. 常用的模板引擎有ejs .jade.smarty等. 二.为什么需要模板引擎? 前端开发的时候,经常有根据后台返回的数据,然后根据此数据生成html,最后渲染到页面中.比如: var data = [ {name: "leaf1"}, {name: "leaf2"}, {name: "leaf3"}

【Node.js基础篇】(八)安装Express 3.2框架以及ejs模板

Html模板以及路由文件等服务器必备的功能虽然我们都可以自己实现,但在稳定性.可靠性.全面性方面肯定是有所遗漏的,所以,从今天起,Node的学习就进入了框架学习部分. 维基百科: 框架就是制定一套规范或者规则(思想),大家(程序员)在该规范或者规则(思想)下工作.或者说使用别人搭好的舞台来做编剧和表演. 第一个要学习的框架是在Node中被广泛应用的框架--Express. 安装Express 如果你使用的Node开发环境是WebStorm的话,在新建工程的时候可以直接选新建Node工程,它会给你

ejs模板中的四种表达式输出形式

在ejs模板中,通常会用下面四种方式在HTML中输出服务端的变量或表达式的值: 1. 直接在<%%>中写表达式或变量.这种情况通常只是用来进行表达式计算或给变量赋值,不会有任何输出,被称作无缓冲的代码. <% code %> 2. 在<%%>中通过=号输出变量或表达式的值.默认输出到页面中的内容会进行HTML转义.如<div>Hello</div>输出后会变成<div>Hello</div> <%= code %&g

ajax请求后台,返回json格式数据,模板!

添加一个用户的时候,需要找出公司下所有的部门,和相应部门下的角色,利用ajax请求,实现联动技术.将返回的json格式数据,添加到select标签下. <script type="text/javascript">        //加载出部门的信息            function loadGroup(){                            $.ajax({                    type:"post",  

nodejs渲染到页面的理解

一般逻辑都是: 打开页面,前端发请求到服务端,服务端返回数据到前端,前端根据数据生成DOM节点,然后append到DOM中. 如果是nodejs渲染到页面,我的理解是: 打开页面,服务端直接把数据查询出来,然后把数据整合成最终的DOM节点,再返回到前端,这时前端只需要append操作,省去其他操作. 减轻客户端的压力.

在express站点中使用ejs模板引擎

在express站点中使用ejs模板引擎 文/玄魂 目录 在express站点中使用ejs模板引擎    1 前言1 1.1         安装    1 1.2修改app.js  2 1.3创建测试页面2 前言 使用 vs创建的express站点,默认使用的是jade模板引擎,但是我不太喜欢这种方式,因为我觉得html本身的语义特性是我喜欢的,另外html本身也足够简洁,使用html自身做为模板语言更符合我的喜好,所以我选择ejs. 欢迎访问玄魂的博客 1.1        安装 在网站根目