本文檔根據(jù)慕課網(wǎng)視頻學(xué)習(xí)所總結(jié)
主題：
1.1.png
開發(fā)框架介紹
1.2.png
開發(fā)框架介紹對應(yīng)上圖
1.3.png
項(xiàng)目開發(fā)流程
1.4.png
原型圖-首頁犯犁、詳情頁
1.5.png
后臺錄入頁
1.6.png
第二章：項(xiàng)目前后端流程打通
2.1、Node入口文件分析和目錄初始化
2.1.png
2.2.png
2.3.png
2.4.png
2.2达皿、創(chuàng)建四個jade視圖及入口文件中處理
- 創(chuàng)建一個項(xiàng)目目錄imooc
- 根目錄下創(chuàng)建app.js與views目錄
終端打開項(xiàng)目并輸入命令：
npm init
npm install express jade moment mongoose
- 新建app.js,編寫入口文件：
#app.js
var express =require('express')//加載express這個模塊
var port = process.env.PORT || 3000//設(shè)置端口：process是全局變量
var app = express()//啟動一個web服務(wù)器
app.set('views','./views')//設(shè)置視圖的根目錄
app.set('view engine','jade')//設(shè)置默認(rèn)的模板引擎
app.listen(port)//監(jiān)聽端口
console.log('imooc started on port ' + port)//打印一條日志，控制臺查看服務(wù)是否能成功啟動
//添加路由
//index page
app.get('/index',function(req,res){//瀏覽器中訪問頁面是以get方法提交提交的，參數(shù)一位匹配規(guī)則帖池，參數(shù)二為回調(diào)方法
res.render('index',{
title:'imooc 首頁'
})
})
//detail page
app.get('/movie/:id',function(req,res){
res.render('detail',{
title:'detail 詳情頁'
})
})
//list page
app.get('/list',function(req,res){
res.render('list',{
title:'imooc 列表頁'
})
})
//admin page
app.get('/admin/movie',function(req,res){
res.render('admin',{
title:'imooc 后臺錄入頁'
})
})
項(xiàng)目結(jié)構(gòu)為：
2.2.1.png
doctype
html
head
meta(chaset="utf-8")
title #{title}
body
h1 #{title}
#將以上代碼直接copy在四個jade文件中且注意變換格式
#@將該項(xiàng)目在終端下打開并輸入 node app.js寞钥，檢測是否正確啟動（也可以PORT=40000 node app.js 啟動）
#在瀏覽器的輸入地址：localhost:3000/index,localhost:3000/list慌申，localhost:3000/admin/movie,localhost:3000/admin/01查看是否正確啟動。
2.3理郑、偽造模板數(shù)據(jù)跑通前后端交互流程
2.3.1.png
修改目錄結(jié)構(gòu)-運(yùn)用jade語法可以繼承的優(yōu)點(diǎn)以及公共區(qū)塊的調(diào)用
在views中新建includes文件夾以及pages文件夾以及l(fā)ayout.jade布局文件蹄溉，將原先views中的四個文件移動至pages文件中，在includes文件中新建head.jade文件與header.jade文件
layout.jade(copy代碼時請將注釋去掉您炉，有可能報錯)
doctype
html
head
meta(chaset="utf-8")
title #{title}
include ./includes/head //- 將公用樣式抽象成一個區(qū)塊
body
include ./includes/header //-網(wǎng)站標(biāo)題或者logo
block content //-每個頁面中的內(nèi)容
在編寫head.jade以及header.jade文件前柒爵，我們首先安裝bower，然后通過bower安裝bootstrap
npm install bower -g
bower install bootstrap@3.3.7//如果不加@3.3.7會安裝最新的赚爵，導(dǎo)致頁面會出現(xiàn)一些顯示問題棉胀。
head.jade (寫入引入的公共樣式)
link(href="/bootstrap/dist/css/bootstrap.min.css", rel="stylesheet")
script(src="/jquery/dist/jquery.min.js")
script(src="/bootstrap/dist/js/bootstrap.min.js")
header.jade
.container
.row
.page-header
h1 #{title}
h3 六個周
改變pages中四個文件內(nèi)容為：
extends ../layout
安裝成功后的項(xiàng)目結(jié)構(gòu)是這樣的：
2.3.2.png
此時，我們再次終端輸入命令
node app查看是否可以正確訪問注意app.js中訪問文件的路徑修改
如果依然訪問成功冀膝，我們繼續(xù)下一步操作膏蚓。
我們開始進(jìn)行index.jade(首頁)的文件編碼:。
extends ../layout
block content
.container
.row
each item in movies
.col-md-2
.thumbnai
a(href="/movie/#{item._id}")
img(src="#{item/poster}",alt="#{item.title}")
.caption
h3 #{title}
p: a.btn.btn-primary(href="/movie/#{item._id}",role="button")
觀看預(yù)告片
detail.jade（詳情頁）文件：
extends ../layout
block content
.container
.row
.col-md-7
img(src="#{movie.poster}",alt="#{movie.title}",height="720")
.col-md-5
dl.horizontal
dt 電影名字
dd= movie.title
dt 導(dǎo)演
dd= movie.doctor
dt 國家
dd= movie.country
dt 語言
dd = movie.language
dt 上映年份
dd= movie.year
dt 簡介
dd = movie.summary
admin.jade（后臺錄入頁）文件：
extends ../layout
block content
.container
.row
form.form-horizontal(method="post",action="/admin/movie/new")
.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="inputDoctor") 電影導(dǎo)演
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[doctor]",value="#{movie.doctor}")
.form-group
label.col-sm-2.control-label(for="inputCountry") 國家
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[country]",value="#{movie.country}")
.form-group
label.col-sm-2.control-label(for="inputLanguage") 語種
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[language]",value="#{movie.language}")
.form-group
label.col-sm-2.control-label(for="inputPoster") 海報地址
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[poster]",value="#{movie.poster}")
.form-group
label.col-sm-2.control-label(for="inputFlash") 片源地址
.col-sm-10
input#inputTitle.form-control(type="text",name="movie[flash]",value="#{movie.flash}")
.form-group
label.col-sm-2.control-label(for="inputSummary") 電影簡介
.col-sm-10
textarea#inputSummary.form-control(type="text", name="movie[summary]", value="#{movie.summary}")
.form-group
.col-sm-offset-2.col-sm-10
button.btn.btn-default(type="submit") 錄入
list.jade（列表頁）文件：
extends ../layout
block content
.container
.row
table.table.table-hover.table-bordered
thead
tr
th 電影名字
th 導(dǎo)演
th 國家
th 上映年份
//-th 錄入時間
th 查看
th 更新
th 刪除
tbody
each item in movies
tr(class="item-id-#{item._id}")
td #{item.title}
td #{item.doctor}
td #{item.country}
td #{item.year}
//-td #{moment(item.meta.createAt).format('MM/DD/YYYY')}
td :a(target="_blank",href="../movie/#{item._id}") 查看
td :a(target="_blank",href="../admin/update/#{item._id}") 修改
td
button.btn.btn-danger.del(type="button",data_id="#{item._id}") 刪除
偽造的靜態(tài)數(shù)據(jù)：app.js
var express = require('express')//加載express這個模塊
var app = express()
var path =require('path')
var port = process.env.PORT || 3000//設(shè)置端口：process是全局變量
app.set('views','./views/pages') //設(shè)置視圖的根目錄
app.set('view engine','jade')//設(shè)置默認(rèn)的模板引擎
var bodyParser = require('body-parser')
app.use(bodyParser.json())
app.use(express.static(path.join(__dirname,'bower_components')))
app.listen(port)//監(jiān)聽端口
console.log('六個周 started on port ' + port)//打印一條日志畸写，控制臺查看服務(wù)是否能成功啟動
//添加路由
//index page
app.get('/index',function(req,res){//瀏覽器中訪問頁面是以get方法提交提交的驮瞧，參數(shù)一位匹配 規(guī)則，參數(shù)二為回調(diào)方法
res.render('index',{
title:'六個周 首頁',
movies:[{
title:'Node.js指南',
_id:1,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:2,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:3,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:4,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:5,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:6,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:7,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:8,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:9,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},{
title:'Node.js指南',
_id:10,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg'
},]
})
})
//detail page
app.get('/movie/:id',function(req,res){
res.render('detail',{
title:'detail 詳情頁',
movie:{
doctor:'六個周',
counter:'China',
title:'人生緣編程',
year:2019,
poster:'http://img4.imgtn.bdimg.com/it/u=1178625225,3686148785&fm=26&gp=0.jpg',
language:'漢語',
flash:'https://www.六個周.com/video/1226',
summary:'1.枯芬，生命太短暫论笔，不要去做一些根本沒有人想要的東西∏——Ash Maurya狂魔。2，如果你交給某人一個程序淫痰，你將折磨他一整天最楷；如果你教某人如何編寫程序，你將折磨他一輩子∽阉铮——David Leinweber烈评。3，軟件設(shè)計有兩種方式：一種方式是犯建，使軟件過于簡單讲冠，明顯沒有缺陷；另一種方式是适瓦，使軟件過于復(fù)雜竿开，沒有明顯的缺陷〔Ｎ酰——C.A.R. Hoare否彩。4，軟件開發(fā)往往是這樣：最開始的 90% 代碼占用了開始的 90% 的開發(fā)時間嗦随；剩下 10% 代碼同樣需要 90% 的開發(fā)時間胳搞。——Tom Cargill'
}
})
})
//admin page
app.get('/admin/movie',function(req,res){
res.render('admin',{
title:'六個周 后臺錄入頁',
movie:{
title:'',
doctor:'',
country:'',
year:'',
poster:'',
flash:'',
summary:'',
language:''
}
})
})
//list page
app.get('/admin/list',function(req,res){
res.render('list',{
title:'六個周 列表頁',
movies:[
{
title:'Node.js指南',
_id:1,
doctor:'六個周',
country:'China',
year:2019,
language:'漢語',
flash:'http://www.reibang.com/u/5842abb77bd1',
summary:'1.称杨，生命太短暫，不要去做一些根本沒有人想要的東西筷转」迷——Ash Maurya。2呜舒，如果你交給某人一個程序锭汛，你將折磨他一整天；如果你教某人如何編寫程序袭蝗，你將折磨他一輩子唤殴。——David Leinweber到腥。3朵逝，軟件設(shè)計有兩種方式：一種方式是，使軟件過于簡單乡范，明顯沒有缺陷配名；另一種方式是，使軟件過于復(fù)雜晋辆，沒有明顯的缺陷渠脉。——C.A.R. Hoare瓶佳。4芋膘，軟件開發(fā)往往是這樣：最開始的 90% 代碼占用了開始的 90% 的開發(fā)時間；剩下 10% 代碼同樣需要 90% 的開發(fā)時間∥螅——Tom Cargill'
}
]
})
})
然后臂拓，容易出錯的地方是bootstrap版本的安裝導(dǎo)致的頁面樣式以及jade的代碼縮進(jìn)，經(jīng)過一番調(diào)整后潜腻，啟動'node app埃儿，效果圖如下：
2.3.1.png
2.3.2.png
2.3.3.png
2.3.4.png
然后，至此先將代碼提交至git于碼云融涣。
碼云地址：https://gitee.com/ShaoBingYouTiao/movies
第三章：項(xiàng)目數(shù)據(jù)庫實(shí)現(xiàn)
3.1童番、mongodb模式類型設(shè)計及編碼以及數(shù)據(jù)庫交互代碼
3.1.1.png
3.1.2.png
3.1.3.png
3.1.4.png
3.1.5.png
3.1.6.png
3.1.7.png
3.1.8.png
在項(xiàng)目根目錄下新建文件夾schemas（模式聲明）、models（模型）威鹿、controllers剃斧。
分別在schemas中和models中添加movie.js文件，代碼如下：
schemas-movie.js
var mongoose =require('mongoose')
var MovieSchema =new mongoose.Schema({
doctor:String,
title:String,
language:String,
country:String,
summary:String,
flash:String,
poster:String,
year:Number,
meta:{
createaAt:{
type:Date,
default:Date.now()
},
updataAt:{
type:Date,
default:Date.now()
}
}
})
MovieSchema.pre('save',function(next){
if(this.isNew){
this.meta.createaAt = this.meta.updataAt =Date.now()
}else{
this.meta.updataAt =Date.now()
}
next()
})
MovieSchema.statics = {
fetch:function(cb){
return this
.find({})
.sort('meta.updateAt')
.exec(cb)
},
fingdById:function(id,cb){
return this
.findOne({_id:id})
.exec(cb)
}
}
module.exports =MovieSchema
models-movie.js
var mongoose =require('mongoose')
var MovieSchema = require('../schemas/movie')
var Movie = mongoose.model('Movie',MovieSchema)
module.exports = Movie
模式和模型代碼編寫結(jié)束忽你，進(jìn)入下一章節(jié)幼东。
3.2、編寫數(shù)據(jù)庫交互代碼
進(jìn)入app.js文件科雳，添加代碼
需要在終端中安裝underscore模塊：npm install underscore
var mongoose = require('mongoose')
mongoose.connect('mongodb://localhost/imooc')
var Movie =require('./models/movie')
var _ =require('underscore')
#將app.js中的所有靜態(tài)數(shù)據(jù)注釋掉
index路由與list路由中添加 Movie.fetch()方法
detail路由中添加 Movie.findById()方法
admin路由中在路由外添加一個方法：app.post()
// admin post movie
app.post('/admin/movie/new',function(req,res){
var id =req.body.movie._id
var movieObj =req.body.movie
var _movie
if(id!== 'undefined'){
Movie.findById(id,function(err,mmovie){
if(err){
console.log(err)
}
_movie =_.extend(movie,movieObj)
_movie.save(function(err,movie){
if(err){
console.log(err)
}
res.redirect('./movie/'+movie.id)
})
})
}else{
_movie = new Movie({
doctor:movieObj.doctor,
title:movieObj.title,
country:movieObj.country,
language:movieObj.language,
year:movieObj.year,
poster:movieObj.poster,
summary:movieObj.summary,
flash:movieObj.flash
})
_movie.save(function(err,movie){
if (err) {
console.log(err)
}
res.redirect('/movie/'+movie._id)
})
}
})
還差一個在列表頁點(diǎn)擊更新的時候重新回到后臺錄入頁根蟹，將表單中數(shù)據(jù)重新初始化到表單中，于是添加一個路由
//admin update
app.get('/admin/update/:id',function(req,res){
var id =req.params.id
if(id){
Movie.findById(id,function(err,movie){
res.render('admin',{
title:'六個周 后臺更新頁',
movie: movie
})
})
}
})
最后還需要在admin錄入頁（admin.jade）添加一個隱藏的表單域糟秘，存儲電影ID简逮，用于更新
input(type="hidden",name="movie[_id]",value="#{movie._id}")
然后我們開始進(jìn)行測試：
- 打開終端輸入
mongodnode app
后臺電影錄入頁：http://localhost:3000/admin/movie
addMovie.png
點(diǎn)擊錄入后跳轉(zhuǎn)至添加項(xiàng)的詳情頁：
detail.png
電影首頁：
localhost:3000/index
index
后臺列表頁：
localhost:3000/admin/list
list.png
4.1刪除功能及項(xiàng)目生成配置文件
刪除功能這里我們需要使用jQuery，通過異步請求進(jìn)行刪除尿赚。
在此之前散庶，我們需要改變項(xiàng)目結(jié)構(gòu)，將bower_components中內(nèi)容放在新建的一個public文件中凌净。--這里我們需要用的bower的一個特性（可以指定將bower下載的東西放在哪個目錄下）悲龟。
- 項(xiàng)目根目錄下新建public文件夾
- 項(xiàng)目根目錄下新建 .bowerrc文件,在本文件下寫入如下代碼：
{
"directory": "public/libs"
}- 刪除bower_components文件夾
- 終端中重新安裝bootstrap:
bower install bootstrap@3.3.7- 同時修改head.jade的bootstrap引入路徑，添加/libs
- 最好修改app.js中的bower_components改為public冰寻。至此须教，可以再次輸入各個路徑進(jìn)行測試 。
測試成功沒有問題斩芭，我們繼續(xù)添加刪除的功能没卸，在public文件下新建文件js,js中新建admin.js，編寫代碼：
$(function(){
$(".del").click(function(e){
var target = $(e.target)
var id =target.data('id')
var tr =$('.item-id-'+id)
$.ajax({
type:"DELETE",
url:'/admin/list?id='+id
})
.done(function(results){
if(results.success ===1){
if(tr.length>0){
tr.remove()
}
}
})
})
})
在list.jade中添加代碼
script(src="/js/admin.js")
在app.js中添加刪除路由：
//list delete movie
app.delete('/admin/list',function(req,res){
var id= req.query.id
if(id){
Movie.remove({_id: id},function(err,movie){
if(err){
console.log(err)
}else{
res.send({success:1})
}
})
}
})
然后將修改的代碼文件上傳至碼云：https://gitee.com/ShaoBingYouTiao/movies
總結(jié)：至此建站攻略一期完畢秒旋，本項(xiàng)目對于很多不熟悉jade的同學(xué)來說约计，可能會對寫jade代碼處有所抵觸，但是如果你按著我上面的思路一點(diǎn)一點(diǎn)寫出來的話還是很有收獲的迁筛。本項(xiàng)目中的代碼給出很可能~很可能的存在一兩個單詞的拼寫錯誤導(dǎo)致你在運(yùn)行項(xiàng)目的時候出現(xiàn)問題煤蚌，這個時候你要細(xì)細(xì)查看原因耕挨，我已經(jīng)盡可能的將正確代碼貼上，如有問題尉桩，歡迎留言筒占，我會在看到時及時回復(fù)。
關(guān)于本項(xiàng)目的升級蜘犁、二期學(xué)習(xí)與文檔整理我會盡快更新翰苫，先將地址貼上：
二期學(xué)習(xí)視頻慕課網(wǎng)地址：https://www.imooc.com/learn/197
二期學(xué)習(xí)簡書文檔整理地址：http://www.reibang.com/p/a9192427597a
如有疑問請?zhí)砑游业奈⑿盘枺?8231133236。歡迎交流这橙！
更多內(nèi)容奏窑，請訪問的我的個人博客：https://www.liugezhou.online.
您也可以關(guān)注我的個人公眾號：【Dangerous Wakaka】
wechatDangerous.jpg
