网站环境：使用express框架、bootstrap样式、jade模板、mongoose数据库
npm insatll express -g npm insatll jada -g npm insatll mongoose -g
1、创建express工程：myMovie
进入工程执行npm install，npm start 后 访问很正常，可以往下继续了
2、创建路由，打通入口
初拟可能浏览的入口================
网站跟目录：localhost:3000/
某个电影详情页：localhost:3000/movie/1
后台电影添加页：localhost:3000/admin/add
后台列表页：localhost:3000/admin/list
根据所需修改app.js
var express = require("express"); var app=express(); //访问网站跟目录：localhost:3000/ app.get("/",function(req,res){ res.send("网站首页"); }); //localhost:3000/movie/1 app.get("/movie/:id",function(req,res){ res.send("电影详情"); }); //localhost:3000/admin/add app.get("/admin/add",function(req,res){ res.send("后台电影添加页"); }); //localhost:3000/admin/list app.get("/admin/list",function(req,res){ res.send("后台电影列表"); }); app.listen(3030,function(){ console.log("请访问http://localhost:3030"); });
3、jade准备视图
index.jade主页、add.jade后台添加页、detail.jade(电影详情)、list.jade(后台电影列表)的准备，为了便于观察，放入基本的信息，用于关联jade视图
app.js
var express = require("express"); var app=express(); var path = require('path'); //设置模板引擎 app.set("view engine",'jade'); app.set('views','./views/pages'); //设置静态资源 app.use(express.static(path.join(__dirname, './public'))); //访问网站跟目录：localhost:3000/ app.get("/",function(req,res){ res.render('index.jade',{ title:'网站首页', movies:{} }); }); //localhost:3000/movie/1 app.get("/movie/:id",function(req,res){ res.render('detail.jade',{ title:'电影详情', movie:{} }) }); //localhost:3000/admin/add app.get("/admin/add",function(req,res){ res.render('control.jade',{ title:'后台电影添加页', movie:{} }); }); //localhost:3000/admin/list app.get("/admin/list",function(req,res){ res.render('list.jade',{ title:'后台电影列表', movies:{} }); }); app.listen(3000,function(){ console.log("请访问http://localhost:3000"); });
layout.jade
doctype html html head meta(charset="utf-8") title #{title} include ./includes/link.jade body include ./includes/header.jade block content
header.jade
.container .row .page-header h1 #{title}
index.jade、control.jade、detail.jade、list.jade
extends ../layout.jade block content
4、jade数据伪造
app.js
var express = require("express"); var app=express(); var path = require('path'); //设置模板引擎 app.set("view engine",'jade'); app.set('views','./views/pages'); //设置静态资源 app.use(express.static(path.join(__dirname, './public'))); //访问网站跟目录：localhost:3000/ app.get("/",function(req,res){ res.render('index.jade',{ title:'网站首页', movies:[ { _id:1, title:"海绵宝宝3D", poster: 'http://img31.mtime.cn/mg/2015/11/17/094620.70277104_170X256X4.jpg' }, { _id:2, title:"星际迷航3", poster:'http://img31.mtime.cn/mg/2016/09/01/143653.31713698_170X256X4.jpg' }, { _id:3, title:"惊天绑架团", poster:'http://img31.mtime.cn/mg/2016/07/12/091819.79722823_170X256X4.jpg' }, { _id:4, title:"爱宠大机密", poster:'http://img31.mtime.cn/mg/2016/06/21/093149.12209704_170X256X4.jpg' }, {_id:5, title:"冰川时代4", poster:'http://img31.mtime.cn/mt/2012/07/19/131845.38602455_170X256X4.jpg' } ] }); }); //localhost:3000/movie/1 app.get("/movie/:id",function(req,res){ res.render('detail.jade',{ title:'电影详情', movie:{ title:'海绵宝宝3D', director:'保罗·蒂比特', country:'美国', language:'英语', year:2016, poster:'http://img31.mtime.cn/mg/2015/11/17/094620.70277104_170X256X4.jpg', summary:'安东尼奥·班德拉斯饰演的大反派海盗杰克现身，他找到了一本神奇的宝书，可是想要获得完全的力量，一定要找到书中的最后一页。经过调查，这宝贵的最后一页，正存在海绵宝宝的家里。', flash:'#' } }) }); //localhost:3000/admin/add app.get("/admin/add",function(req,res){ res.render('control.jade',{ title:'后台电影添加页', movie:{ title:'', director:'', country:'', language:'', year:'', poster:'', summary:'', flash:'' } }); }); //localhost:3000/admin/list app.get("/admin/list",function(req,res){ res.render('list.jade',{ title:'后台电影列表', movies:[ { _id:1, title:'海绵宝宝3D', director:'保罗·蒂比特' } ] }); }); app.listen(3000,function(){ console.log("请访问http://localhost:3000"); });
index.jade
extends ../layout.jade block content .container .row each item in movies .col-md-2 .thumbnall a(href="/movie/#{item._id}") img(src="#{item.poster}",alt="#{item.title}") .caption h3 #{item.title} p: a.btn.btn-primary(href="/movie/#{item._id}") 查看详情
detail.jade
extends ../layout.jade block content .container .row .col-md-7 video(src="#{movie.flash}",autoplay="true",width="720",height="400") .col-md-5 dl.dl-horizontal dt 电影名字 dd=movie.title dt 导演 dd=movie.director dt 国家 dd=movie.country dt 上映年份 dd=movie.year dt 简介 dd=movie.summary
list.jade
extends ../layout.jade block content .container .row table.table.table-hover.table-bordered thead tr th 电影名字 th 导演 th 查看 th 更新 th 删除 tbody each item in movies tr td #{item.title} td #{item.director} td: a(target="_blank",href="../movie/#{item._id}") 查看 td: a(target="_blank",href="../movie/update/#{item._id}") 修改 td a.btn.btn-danger.del(type="button",href="/admin/delete?id=#{item._id}") 删除
control.jade
extends ../layout.jade block content .container .row form.form-horizontal(method="post",action="/admin/movie/do") //电影名字 .form-group label.col-sm-2.control-label(for="inputTitle") 电影名字： .col-sm-10 input#inputTitle.form-control(type="text",name="movie[title]",value="#{movie.title}") //导演 .form-group label.col-sm-2.control-label(for="inputTitle") 导演： .col-sm-10 input#inputDirector.form-control(type="text",name="movie[director]",value="#{movie.director}") //国家 .form-group label.col-sm-2.control-label(for="inputCountry") 国家： .col-sm-10 input#inputCountry.col-sm-10.form-control(type="text",name="movie[country]",value="#{movie.country}") //语言 .form-group label.col-sm-2.control-label(for="inputLanguage") 语言： .col-sm-10 input#inputLanguage.col-sm-10.form-control(type="text",name="movie[language]",value="#{movie.language}") //上映年份 .form-group label.col-sm-2.control-label(for="inputYear") 上映年份： .col-sm-10 input#inputYear.col-sm-10.form-control(type="text",name="movie[year]",value="#{movie.year}") //简介 .form-group label.col-sm-2.control-label(for="inputSummary") 简介： .col-sm-10 input#inputSummary.col-sm-10.form-control(type="text",name="movie[summary]",value="#{movie.summary}") .form-group .col-sm-2 .col-sm-10 input.btn.btn-default(type="submit",name="submit")
各页效果预览
目前，静态页面已经准备完毕，接着将接入mongodb