本文主要是学习了Scott老师的建站攻略一的学习笔记。
使用node的npm工具进行安装前后端需要使用到的框架或类,搭建电影网站需要用到的框架如下:
后端:(使用npm安装)
Mongoose:对MongoDB进行快速建模的工具
MongoDB:Nosql数据库
Jade:客户端的模板引擎
Moment.js:日期格式化
前端:(npm安装Bower,Bower安装其他前端库)
jQuery类库
Bootstrap框架
具体操作:首先进入到新建项目的根目录下,然后利用npm进行安装npm install express //后台框架会使用
npm install body-parser //新版的express没有自带,用于解析客户端请求的body中的内容,内部使用JSON编码处理,url编码处理以及对于文件的上传处理.
npm install jade //模板引擎的使用
npm install underscore //Underscore封装了常用的JavaScript对象操作方法,用于提高开发效率
npm install moment //时间格式化处理类
npm install mongoose
npm install bower -g
bower install bootstrap
为了方便项目中资源文件,我们在根目录下新建一个文件夹public,在public中新建一个libs文件夹,将bwer_components中的文件拷贝进去。
该项目的功能主要是:展示所有电影的主页index,点击主页中一部电影可以查看器详细内容detail,还有一个录入电影相关信息的界面admin,以及电影列表页list,可以对电影进行删除、修改等操作。
根据功能要求,使用jade的方式编写前端页面,主要是views中文件。includes中是pages中页面的公共部分内容,layout.jade是页面的布局。
定义项目中的模型movie,这里定义了一个Schema:MovieSchem,在定义Schema时,还可以设一些默认值、验证什么的,但这里先忽略。
var mongoose = require('mongoose')
//骨架模版
var MovieSchema = new mongoose.Schema({
doctor:String,
title:String,
language:String,
country:String,
year:Number,
summary:String,
flash:String,
poster:String,
meta:{
createAt:{
type:Date,
default:Date.now()
},
updateAt:{
type:Date,
default:Date.now()
}
}
})
var Movie = mongoose.model('Movie',MovieSchema) //这一句中,第一个参数相当重要,它是给MovieSchema这个schema,定义了一个名字Movie
module.exports = Movie //使用module.exports将其导出是使其外部可用
创建server:
var express = require('express')//数据库连接类
var mongoose = require('mongoose')//启动web服务器
var express = require('express')
app.set('view engine','jade')
//表单数据格式化
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({extended:true}))
//编写url路由
/主页面index page的路由
app.get('/',function(req,res){
Movie.fetch(function(err,movies){
if (err) {
console.log(err)
}
res.render('index',{
title:'immoc 首页',
movies:movies
})
})
})
//详情页面detail的路由
app.get('/movie/:id',function(req,res){
var id = req.params.id
Movie.findById(id,function(err,movie){
res.render('detail',{
title:'immoc '+movie.title,
movie:movie
})
})
})
//admin页面admin page的路由
app.get('/admin/movie',function(req,res){
res.render('admin',{
title:'immoc 后台录入页面' ,
movie:{
title:'',
doctor:'',
country:'',
year:'',
poster:'',
flash:'',
summary:'',
language:''
}
})
})
//admin update movie
app.get('/admin/updat:id',function(req,res){
var id = req.params.id
if (id) {
Movie.findById(id,function(err,movie){
res.render('admin',{
title:'immoc 后台更新页',
movie:movie
})
})
}
})
//admin post movie
app.post('/admin/movie/new',function(req,res){
var movieObj = req.body.movie
var id = req.body.movie._id
var _movie
if (id !== 'undefined') {
Movie.findById(id,function(err,movie){
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)
})
}
})
//list页面list page的路由
app.get('/admin/list',function(req,res){
Movie.fetch(function(err,movies){
if (err) {
console.log(err)
}
res.render('list',{
title:'immoc 列表页',
movies:movies
})
})
})
//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.json({success:1})
}
})
}
})
进入根目录,运行 node app.js
在浏览中打开index页面:http://localhost:3000
整个项目的源码:code