jade模板简单使用及页面之间嵌套关系

html-css068

jade模板简单使用及页面之间嵌套关系,第1张

Jade既然是模板引擎,页面中有公用的部分肯定是要封装成一个模板,在其他页面需要使用的时候直接调用就好。调用的时候有两种方法:

一    使用include引入模板,模板中的css,js可以正常加载,但是如果想在当前页面再引入css,js文件页面就会报错,目前还不知道怎么解决

    demo01.jade

  head.jade

footer.jade

demo01.jade生成的html

二是用extends引入模板

  index页面

      page6.jade

下面是生成的html页面

这样引入既可以把相同的css和js写到一个模板里面多次使用,同时也可以在引用模板的index.jade页面再引入单个的css和js,并可以直接写内部样式和js逻辑。值得注意的是,模板page06.jade中引入的js要放到block append scripts上面,如果放到下面渲染出来的页面公用js会在又引入的js文件下面(就会出现你虽然引入jquery了,但是你index.jade模板中使用$依然报错)。

另外,index.jade页面的block append scripts(这个scripts是个名字,随便命名),是模板中引入的js放到index.jade页面引入js的前面,还有一种block prepend scripts的写法,模板中引入的js放到index.jade页面引入的js后面(不推荐使用)。

温馨提示:jade语法对缩进要求非常严格,所以父级和子级的缩进是两个字符,缩进有问题会报错吆

叠加方式如下。

jade嵌套的使用jade是express自带的模板引擎jade文件可以嵌套使用,include引用外部jade文件,extends引用jade模板例如有一个主jade文件layout.jade,引用top.jade和footer.jade这两个如下设计1:layout.jadedoctypehtmhtmlheadtitlebloglink(rel='stylesheet',href='/stylesheets/style.css'bodydiv#m_divincludetopblockcontent_maiincludefooter2top.jaddiv#topdiv#menuulfooter.jaddiv#footerdiv#footer_infofooter主要是红色部分include:用来引用外部jade文件block:标识当引用layout是显示的部分4:index.jade文件,引用layout.jade文件通extendslayout引用,类似于asp.netmasterxtendslayoublockcontent_maindiv#m_lefdiv#m_left_lodiv#logfieldset#login_fmlegend登录labelinput(type="text",id="username",name="username"style="width:150px,border:1px#ccccffsolid,")brbrlabeinput(type="password",id="pwd",name="pwd"style="width:150px,border:1px#ccccffsolid,")bbutton(id="loginBtn",name="loginBtn",οnclick="loginClick()")登录模板引用完成。

一、Express框架

前面的章节已经介绍过了,可以使用npm来安装node.js模块。具体操作请参照以前写的nodejs概论。

Express是一个nodejs的web开源框架,用于快速的搭建web项目。其主要集成了web的http服务器的创建、静态文本管理、服务器URL地址请求处理、get和post请求处理分发、session处理等功能。

使用方法,在cmd中打开你所想创建web项目的路径。然后输入

Express appname

即可创建一个名为appname的web项目。控制台打印结果

在cmd中进入appname文件夹输入

node appname.js

返回结果如下图,表示安装成功!

在项目开发中经常会出现这样的问题

此错误表示没有安装相关模块,解决办法是在cmd上打开项目文件夹,输入

npm install express

安装成功后会在本文件路径下生成一个node_modules,里面包含了Express框架代码。

其他模块也可用类似的方法进行安装,安装后的路径同样是在node_modules下。

二、jade模块

jade是一款高性能、简洁易懂的模板引擎。可通过jade来编写html文件。

jade类似一个用于快速编写html的语言,其编写后的文件后缀为.jade。

以下为文件的内容

在cmd中输入,压缩的过的可以通过加-P来不压缩,如果每次更改模版都要打命令行一次很麻烦是不是,我们可以通过加上jade -P -w jade.jade  加上一个-w来开启监视模式,每次更改模版,html文件都会自动编译咯

生成后的html文件如下:

在jada文件中是可以使用for循环和if判断语句的,可以让你体会类似JSP的<%%>和php的<php></php>在网页上输出数据的快感。

三、forever模块

nodejs作为http服务器,需要确保服务顺利进行,要注意一下两点:

1.后台服务运行,监控运行日志,以及http运行日志;

2.确保项目的正常安全运行,Node.js的启动命令node,很大程度无法满足运行需求;

Node.js的forever模块在第二点就可以起到很大的作用,同时其拥有监控文件更改、自动重启等功能。

forever模块的使用方法有两种:1.在命令行中使用

forever -l forever.log -o out.log -e err.log app.js

-l forever.log -o out.log -e err.log分别指定了forever的运行日志,脚本流水日志,脚本运行错误日志,启动后将在本文件夹下产生out.log、err.log文件。

2.在编码中require forever模块使用。

四、Socket.IO模块

Socket.IO模块主要功能是将WebSocket协议应用到所有浏览器。主要用于实时的长连接多求情项目中。

例如:在线联网游戏,实时聊天、实时股票查看、二维码扫描登录等。

安装方法仍然是在cmd在中输入npm install socket.io

如何使用Socket.IO来创建一个项目。

需要分别实现服务端和客户端的逻辑:

先创建一个服务端的node.js脚本index_server.js

var app = require('http').createServer(handler)//创建服务器app

, io = require('socket.io').listen(app)//引用socket.io模块监听app

, fs = require('fs')//引用文件处理模块

app.listen(80)//指定app监听的端口,第二个参数127.0.0.1可省略

function handler (req, res) {

fs.readFile(__dirname + '/index.html',   function (err, data) {     if (err) {

res.writeHead(500)      return res.end('Error loading index.html')

}

res.writeHead(200)

res.end(data)

})

}

io.sockets.on('connection', function (socket) {

socket.emit('news', { hello: 'world' })

socket.on('my other event', function (data) {

console.log(data)

})

})

其中,socket.emit()为Socket发送消息的函数,第一个参数表示发送消息的key值,第二个参数为发送消息的内容,也就是发送的数据。

Socket。on()为Socket接收消息的函数,第一个参数为接收消息的可以值,第二个参数为回调函数,其中回调函数携带的参数为接收消息所发送的数据。

接下来web前端如何使用JavaScrit 来连接Socket服务器。

新建一个index_client.html

<script type="text/javascript" src="socket.js"></script>

<script type="text/javascript">   var socket = io.connect('http://localhost')//创建本地sock连接

socket.on('news',function (data) {//Socket接收news消息时执行回调函数        console.log(data)

socket.emit('my other event',{my:'data'})

})</script>

<script type="text/javascript" src="socket.js"></script>加载已经安装好的Socket.io的本地JavaScrit文件。

var socket = io.connect('http://localhost')因为端口为80,所有这里可以不端口号

socket.on('news',function (data){}//客户端接收news消息成功后,发送my other event消息到服务端,发送的消息内容为json对象{my:'data'}

接下来只需要运行服务端的index_server.js文件来启动socket服务

效果:在浏览器输入http://127.0.0.1按F12调出浏览器的控制台console即可看见打印出了一个object对象。

执行完毕后可能会报错:catnot find module socket.io,说明你的socket.IO没有安装,或已经安装并配置为全局,但你的安装路径并没有配置到在path中,所有无法引用。

你可以选择配置path,或者安装到项目内。这里建议安装到你的项目目录下,而不是简单粗暴的配置为全局。先卸载npm uninstall socket.io 进入指定目录后安装node index_server.js

socket.io详细请参阅    http://cnodejs.org/topic/50a1fcc7637ffa4155b5a264

五、request模块

request模块为开发者提供了一种简单访问HTTP请求的方法。request还支持HTTPS的访问方法。

安装:

npm install requset

request模块基本上覆盖了所有的HTTP请求方式如GET,POST,HEAD,DEL等。但其最基本的两个方法是request.get()和request.post().

get和post的区别

get:

1.使用get向服务器发出和接收的请求会附在url之后。类似:http://www.baidu.com?id=1221&name=5555这个url中传递了两个参数,一个为id,一个为name。

2.get请求不能超过1024个字节。

post没有限制,也不会附在url上。

接下来做一个简单的实例

get实例:

首先新建一个服务器app_get.js

var http= require("http")

http.createServer(function(req,res){

res.writeHead(200,{'content-Type':'text/plain'})

res.end('Hello world\n'+req.method)

}).listen(1337,"127.0.0.1")

再建一个发送求情的request_get.js文件

var request=require('request')

request.get("http://127.0.0.1:1337",function(error,response,result){

console.log(result)

})

在CMD中运行app_get.js,运行成功后,再打开一个cmd(之前的cmd不要关闭),执行request_get.js文件。

执行后的结果如下

hello world

GET

可以看出,通过request.get方法访问

http://127.0.0.1:1337 返回的结果就是res.end()的参数

post实例:

和上面一样,先新建服务器app_post.js

var http= require("http"),

querystring=require('querystring')

http.createServer(function(req,res){    var postData=""   //开始异步接收客户端post的数据

req.addListener("data",function (postDataChunk) {

postData += postDataChunk

})   //异步post数据接收完毕后执行匿名回调函数

req.addListener("end",function(){        var postStr=JSON.stringify(querystring.parse(postData))

res.writeHead(200,{'content-Type':'text/plain'})

res.end(postStr+'\n'+req.method)

})

}).listen(1400,"127.0.0.1")

然后再新建一个request_post.js

var request=require("request")

request.post('http://127.0.0.1:1400',{form:{'name':'ermu','book':'node.js'}},function (error,response,result) {

console.log(result)

})

像上面一样在cmd中执行后显示的结果如下:

D:\nodejs\src\request>node request_post.js

{"name":"ermu","book":"node.js"}

POST

request post提交了一个json对象{"name":"ermu","book":"node.js"}而服务器接通过获取该POST数据,然后返回客户端,同时将http请求方式也响应到客户端。

request post参数可以有两种传递方式。

其中,第一种是将url和form表单的数据作为json参数在request post传递。举例如下:

request.post('url':'http://127.0.0.1:1400',form:{'name':'ermu','book':'node.js'}},function (error,response,result) {

console.log(result)

})

另一种是将url和form作为两个参数,上面的实例就是使用这种方法。

六、  Formidable模块

该模块的目的是为了解决文件上传。

在原生的node.js模块中,提供了获取post数据的方法,但是并没有直接获取上传文件。