node+express+mongoose快速搭建电影网站

来源:互联网 发布:遗传算法 机械设计应用 编辑:程序博客网 时间:2024/06/05 20:49

       本文主要是学习了Scott老师的建站攻略一的学习笔记。

 1.搭建环境

       使用node的npm工具进行安装前后端需要使用到的框架或类,搭建电影网站需要用到的框架如下:

   

          后端:(使用npm安装)

               Mongoose:对MongoDB进行快速建模的工具

               MongoDBNosql数据库

             Jade:客户端的模板引擎

             Moment.js:日期格式化

        前端:(npm安装BowerBower安装其他前端库)

                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中的文件拷贝进去。

 2.项目页面和功能分析


该项目的功能主要是:展示所有电影的主页index,点击主页中一部电影可以查看器详细内容detail,还有一个录入电影相关信息的界面admin,以及电影列表页list,可以对电影进行删除、修改等操作。

3.编写前端的页面

根据功能要求,使用jade的方式编写前端页面,主要是views中文件。includes中是pages中页面的公共部分内容,layout.jade是页面的布局。


4.后端数据模型的构建

定义项目中的模型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将其导出是使其外部可用

5.express框架的使用

创建server:

var express = require('express')
var path = require('path')

//设置端口,process全局变量
var port = process.env.PORT || 3000


//数据库连接类

var mongoose = require('mongoose')
var _ = require('underscore')
var Movie = require('./models/movie')


//连接数据库: 连接字符串格式为mongodb://主机/数据库名
mongoose.connect('mongodb://localhost/imooc')

//启动web服务器

var express = require('express')

var app = express()


//将实例赋给变量,配置视图
app.set('views','./views/pages')
//设置默认的模板引擎

app.set('view engine','jade')


//表单数据格式化

var bodyParser = require('body-parser')

app.use(bodyParser.urlencoded({extended:true}))


//设置资源路径
app.use(express.static(path.join(__dirname,'public')))
app.locals.moment = require('moment')
//监听端口
app.listen(port)


//编写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})
      }
    })
  }
})


6.项目启动运行      

进入根目录,运行 node app.js

在浏览中打开index页面:http://localhost:3000

整个项目的源码:code

0 0
原创粉丝点击