nodejs中学习jade中2

来源:转载

在学习了两天的nodejs,练习的时候用的express,可以快速的搭建出web项目,以下为在index.js模拟了一些数据,然后用路由可以前台访问,把/routes/index.js相当于php的controlle层,然后把数据渲染到index.jade模板中 以下为index.js数据
exports.index = function(req, res){
//如果有多个值,只在一次渲染,不能像smarty多次assign
res.render('index', {
title: '微电影网站',
time_str :new Date(). toString(),
movies:[{
title: '速度与激情7',
poster:"/images/jj.jpeg",
id:1,
source:"http://v.youku.com/v_show/id_XODg0NjUzMTIw.html",
},{
title: '速度与激情7',
id:2,
poster:"/images/jj.jpeg",
source:"http://v.youku.com/v_show/id_XODg0NjUzMTIw.html",
},{
title: '速度与激情7',
id:2,
poster:"/images/jj.jpeg",
source:"http://v.youku.com/v_show/id_XODg0NjUzMTIw.html",
},{
title: '速度与激情7',
id:2,
poster:"/images/jj.jpeg",
source:"http://v.youku.com/v_show/id_XODg0NjUzMTIw.html",
},]});
}; 然后在jade中获取到movies变量,在模板中显示,并利用bootstrap添加注册和登录 //index.jade
extends layout
block content
include menu.jade
div(style='padding-top:60px;')
div.container.well
h2 推荐电影
.row
each item in movies
.col-md-3
p
a(href="/movies/view?id=#{item.id}")
img(src="#{item.poster}")
h3
a(href="/movies/view?id=#{item.id}") #{item.title}
.navbar.navbar-default.navbar-fixed-bottom
.container
.navbar-header
a.navbar-brand(href="/") 电影迷
p.navbar-text.navbar-right
button.btn.btn-default(type="button" data-toggle="modal" data-target="#regModal") 注册
button.btn.btn-success(type="button" data-toggle="modal" data-target="#logModal") 登录
#regModal.modal.fade(role="dialog" aria-hidden="true")
.modal-content
form(name="reg-form" method="POST" action="/users/reg")
.modal-header 用户注册
.modal-body
.form-group
label(for="username") 用户名
input#username.form-control(name="user[username]" type="text" placeholder="请添写用户名")
.form-group
label(for="password") 密码
input#password.form-control(name="user[password]" type="password" placeholder="请添写密码")
.modal-footer
button.btn.btn-default(type="button" data-dismiss="modal")关闭
button.btn.btn-success(type="submit")注册
#logModal.modal.fade(role="dialog" aria-hidden="true")
.modal-content
form(id="log_form", name="log_form", method="post", action="")
.modal-header 用户登录
.modal-body
.form-group
label(for="username") 用户名
input#username.form-control(name="username" type="text" placeholder="请添写用户名")
.form-group
label(for="password") 密码
input#password.form-control(name="password" type="password" placeholder="请添写密码")
.modal-footer
button.btn.btn-default(type="button" data-dismiss="modal")关闭
button.btn.btn-success(type="submit")登录 layout.jade
doctype html
html
head
title= title
meta(http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1")
meta(http-equiv="X-UA-Compatible" content="IE=9")
meta(name="viewport" content="width=device-width, initial-scale=1")
link(rel='stylesheet', href='/stylesheets/style.css')
//-引入bootstrap样式
link(rel='stylesheet', href='/bootstrap/css/bootstrap.min.css')
//-模拟弹出对话框样式
link(rel='stylesheet', href='/jsunit/css/bootstrap-modal-bs3patch.css')
//-模拟弹出对话框样式
link(rel='stylesheet', href='/jsunit/css/bootstrap-modal.css')
body
block contentscript(src="/javascript/js/jquery-1.10.2.min.js")
//if lt IE 9
script(src="/bootstrap/js/html5shiv.min.js")
script(src="/bootstrap/js/respond.min.js")
script(src="/bootstrap/js/bootstrap.min.js")
script(src="/jsunit/js/bootstrap-modalmanager.js")
script(src="/jsunit/js/bootstrap-modal.js")
script(src="/jsunit/js/modal.manager.plugin1.0.js")
//-弹窗底层js类
script(src="/jsunit/js/jshow.utils.js")
script(src="/js/function.js") //menu.jade
div.navbar.navbar-inverse.navbar-fixed-top
div.container
div.collapse.navbar-collapse.bs-navbar-collapse
ul.nav.navbar-nav
li.active
a(href="/") 首页
li
a(href="/movies") 微电影 这是学习的一些,详细的jade的使用方法可以查看
http://www.webipcode.com/archives/240

分享给朋友:
您可能感兴趣的文章:
随机阅读: