nodejs学习过程
来源:互联网 发布:java单点登录解决方案 编辑:程序博客网 时间:2024/06/10 17:58
# 模板引擎
## 什么是模板引擎
模板引擎(Template Engine)是一个从页面模板根据一定的规则生成 HTML的工具,既建立一个HTML模板,插入可执行的代码。PHP、ASP、JSP、Vm都是模板引擎。
## 为什么不直接用HTML
如果一个网站全部资源都要用静态的HTML来展现,那一个网站要成千上万的静态页面,关键还很不灵活。
因此用嵌入逻辑的模板来构建网站,降低了动态网站的开发门槛,在通过MVC模式消除逻辑和页面的耦合程度。
## 模板引擎与控制器
## 设置模板引擎
在app.js中,设置模板引擎和页面模板的位置。
## 什么是模板引擎
模板引擎(Template Engine)是一个从页面模板根据一定的规则生成 HTML的工具,既建立一个HTML模板,插入可执行的代码。PHP、ASP、JSP、Vm都是模板引擎。
## 为什么不直接用HTML
如果一个网站全部资源都要用静态的HTML来展现,那一个网站要成千上万的静态页面,关键还很不灵活。
因此用嵌入逻辑的模板来构建网站,降低了动态网站的开发门槛,在通过MVC模式消除逻辑和页面的耦合程度。
## 模板引擎与控制器
***图1-3 模板引擎在MVC中的位置***
## 设置模板引擎
在app.js中,设置模板引擎和页面模板的位置。
app.set('views', path.join(__dirname, 'views'));app.set('view engine', 'ejs');
```nodejs routes/index.js片段res.render('index', { title: 'Express' });```
res.render 的功能是调用模板引擎,并将其产生的页面直接返回给客户端。它接受两个参数,第一个是模板的名称,即 views 目录下的模板文件名,不包含文件的扩展名;第二个参数是传递给模板的数据,用于模板翻译。
```ejs index.ejs<h1><%= title %></h1>Welcome to <%= title %>```
上面代码其中有两处 <%= title %>,用于模板变量显示,它们在模板翻译时会被替换成 Express,因为 res.render 传递了 { title: 'Express' }。
## Ejs的标签
ejs 的标签系统非常简单,它只有以下3种标签:
<% code %>:JavaScript 代码。
<%= code %>:显示替换过 HTML 特殊字符的内容。
<%- code %>:显示原始 HTML 内容。
## Layout.ejs
之前已经提到过,Layout.ejs相当于Java的装饰模式,会自动替换<%- body %>、<%- title %>等部分的内容。
可以在app.js中通过以下代码关闭。
```nodejs app.js片段app.set('view options', {layout: false});```
Layout是默认的装饰页面,还可以通过如下代码指定装饰的页面。
```nodejs index.js片段function(req, res) {res.render('userlist', {title: '用户列表后台管理系统',layout: 'admin'});};```
这样就会自动套用admin.ejs来装饰了。
# 片段视图
片段视图 (partials),它就是一个页面的片段,通常是重复的内容,用于迭代显示。类似Jsp的 <c:foreach>来循环生成页面的方式。
Express3.x是某人不适用片段视图的,之前已经有说如何导入片段视图插件已经如何适用插件了,就不重复列举了。直接上个例子吧。
```nodejs app.js片段app.get('/userlist',routes.userlist);```
```nodejs routes/index.js片段exports.userlist = function(req, res) {res.render('list',{ title:'List', items:[1988,'David','birthday','HelloWorld']});};```
partial 是一个可以在视图中使用函数,它接受两个参数,第一个是片段视图的名称,第二个可以是一个对象或一个数组,如果是一个对象,那么片段视图中上下文变量引用的就是这个对象;如果是一个数组,那么其中每个元素依次被迭代应用到片段视图。片段视图中上下文变量名就是视图文件名,例如上面的'listitem'。
```ejs views/list.ejs[list]<%- partial('listitem', items) %>[/list]```
```ejs views/listitem.ejs[*]<%= listitem %>```
运行结果:
# 视图助手
上一章节的partial就是一种视图助手,视图助手分为两种:静态视图助手和动态视图助手。Partial属于静态视图助手。
静态视图助手可以是任何类型的对象,包括接受任意参数的函数,但访问到的对象必须是与用户请求无关的,而动态视图助手只能是一个函数,这个函数不能接受参数,但可以访问 req 和 res 对象。
Express3.x中,视图助手的使用发生了变化,我试验了挺久的,终于知道如何解决了。边看代码边解释吧。
```nodejs app.js……var util = require('util');var partials = require('express-partials');……// helpersapp.locals({inspect: function(obj) {return util.inspect(obj, true);}});// dynamicHelpersapp.use(function(req,res,next){res.locals.headers= req.headers;res.locals.dyvar = "This is a dynamic var!";next();});app.use(app.router);……app.get('/helper',routes.helper);……```
开始要先引入util模块,因为测试方法需要用到。
然后看备注可以看到helpers和dynamicHelpers在3.x中如何实现,特别要记住,一定要放在app.use(app.router);这句话之前,否则在locals里面设置的值是无效的。
然后就是添加路由规则模块的方法。
```nodejs routes/index.js片段exports.helper = function(req, res) {res.render('helper', {title: 'Helpers'});```
```ejs views/helper.ejs<%= locals.dyvar %><%=inspect(locals.headers)%> ```
注意:在页面中应用一定要记得要locals.headers
然后就可以运行看结果了。
阅读全文
0 0
- nodejs学习过程
- nodejs学习过程的问题
- NodeJs的学习一:centos中的安装过程
- nodejs学习过程中遇到的一些难点整理
- nodeJs学习过程之一个图片上传显示的例子
- nodejs学习
- NodeJS学习
- 学习nodejs
- nodeJs学习
- NodeJs学习
- nodejs 学习
- nodejs学习
- NodeJS 学习
- nodejs 学习
- nodejs学习
- nodeJs学习
- 学习nodejs
- NodeJS学习
- 工具类APP安全性极低,极易感染手机病毒! [APP安全报告第25期]
- [iOS 获取当前窗口导航控制器中栈顶viewController] 不普遍适用
- 1.4 数据处理与可视化
- 欢迎使用CSDN-markdown编辑器
- Linux定时任务Crontab命令详解
- nodejs学习过程
- Android复制粘贴详解
- Java日期格式转换
- springmvc与dubbo和zookeeper的配置关系
- 一个简单的复制文件的方法
- docker学习笔记之数据管理
- 勒索病毒WannaCry肆意攻击教育系统,几维安全再次对教育类APP进行全方位的安全评估! [APP安全报告第26期]
- Apache Beam是什么?
- 05 ffmpeg桌面图像h264编码并封装avi