Skip to content
🎬Express+MongoDB+Jade仿写豆瓣(电影、音乐)🎵
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
doubanDatabase/douban
public
route
test/user
.gitignore
.jshintrc
README.md
app.js
ecosystem.json
gulpfile.js
package.json

README.md

基于NodeJs+MongoDB+jQuery搭建的豆瓣电影音乐网站

项目预览地址

简介:

本项目电影和音乐首页交互代码是由jQuery完成

1. 项目后端搭建:

  • 使用NodeJs的express框架完成电影网站后端搭建;
  • 使用mongodb完成数据存储,通过mongoose模块完成对mongodb数据的构建;
  • 使用jade模板引擎完成页面创建渲染;
  • 使用Moment.js格式化电影存储时间;

2. 项目前端搭建:

  • 使用jQueryBootsrap完成网站前端JS脚本和样式处理;
  • 使用Sass完成电影和音乐首页样式的编写;
  • 使用validate.js完成对账号登录注册的判断;
  • 使用jQuery lazyload插件对首页图片的延迟加载;
  • 使用fullpage.js完成电影宣传页面制作;
  • 前后端的数据请求交互通过Ajax完成;

3. 本地开发环境搭建:

  • 使用gulp集成jshint对JS语法检查,Sass文件编译、压缩等功能,使用mocha完成用户注册存储等步骤的简单单元测试,以及服务器的自动重启等功能。

4. 网站整体功能:

网站正常访问无需管理原权限,以下网站数据的添加及删除功能需要登录默认管理员账号(账号:1234 密码:1234)。

具体功能可查看网站动态效果演示,gif图片有点大请耐心等待。

  • 豆瓣电影和音乐相同的展示页面;
  • 具有用户注册登录及管理;
  • 电影音乐详情页面添加及删除评论;
  • 电影音乐及电影院信息录入和搜索;
  • 电影及音乐分类添加及删除;
  • 电影及音乐图片海报自定义上传;
  • 列表分页处理;
  • 访客统计;

项目整体效果

电影首页 音乐首页
电影详情

动态效果演示

动态效果演示

运行环境及Node版本:

目前在Mac下的node 4.2.x版本运行正常

安装:

运行与使用:

  1. 启动数据库mongod,如果出现错误尝试输入sudo mongod来完成启动
  2. 项目目录下的doubanDatabase是可供选择导入的数据库信息,可通过命令mongorestore -h host -d dataName --dir=path 来导入该文件夹信息到数据库中,其中-h是连接地址,如127.0.0.1 -d是将要创建数据库的名称,如douban(注意:项目中链接的数据库名称是douban,如果-d后创建的数据库名称叫douban2,则需要将app.js文件dbUrl = 'mongodb://127.0.0.1/douban中的douban改成douban2),--dir=后为该doubanDatabase所在路径,具体可通过mongorestore --help查看
  3. 使用命令行工具在该项目目录下使用gulp运行程序,默认是使用3001端口,若端口已占用可在主目录app.js文件中将3001端口换成未占用的端口,当命令行工具看到:Movie started on; port:3001时在游览器中输入localhost:3001即可看到项目电影主页;
  4. doubanDatabase中存储了默认的管理员账号:1234 密码:1234 权限为50,只有当权限大于10才可以访问后台控制页面,可通过修改数据库中users中role值完成用户权限控制。

项目页面:

当使用管理员账号登录时(默认账号密码均是1234)可在顶部搜索栏下显示各后台控制页面的链接,方便页面切换。

豆瓣电影首页: localhost:3001/

豆瓣音乐: localhost:3001/musicIndex

用户后台页:

  • 用户注册页面: localhost:3001/signup
  • 用户登陆页面: localhost:3001/signin
  • 用户详情列表页: localhost:3001/admin/user/list

电影后台页:

  • 详情页:localhost:3001/movie/:id
  • 后台录入页:localhost:3001/admin/movie/new
  • 列表页:localhost:3001/admin/movie/list
  • 分类录入页:localhost:3001/admin/movie/movieCategory/new
  • 分类页:localhost:3001/admin/movie/movieCategory/list
  • 电影院录入页:localhost:3001/admin/movie/programme/new
  • 电影院列表页:localhost:3001/admin/movie/city/list

音乐后台页:

  • 详情页:localhost:3001/music/:id
  • 后台录入页:localhost:3001/admin/music/new
  • 列表页:localhost:3001/admin/music/list
  • 分类录入页:localhost:3001/admin/music/musicCategory/new
  • 分类页:localhost:3001/admin/music/musicCategory/new
  • 热门榜单列表页:localhost:3001/admin/music/programme/list

项目结构:

├── app.js            项目入口文件
├── app               Node后端MVC文件目录
│   ├── controllers   控制器目录
│   │   ├── movie     电影页面控制器目录
│   │   ├── music     音乐页面控制器目录
│   │   └── user      用户列表控制器目录
│   ├── models        模型目录
│   │   ├── movie
│   │   ├── music
│   │   └── user
│   ├── schemas       模式目录
│   │   ├── movie
│   │   ├── music
│   │   └── user
│   └── views         视图文件目录
│       ├── includes
│       └── pages
├── doubanDatabase    供参考的数据库数据
│   └── douban
├── node_modules      node模块目录
├── public            静态文件目录
│   ├── images        图片目录
│   │   ├── includes  公共图片目录
│   │   ├── movie
│   │   ├── music
│   │   └── user
│   ├── libs          经过gulp处理后文件所在目录
│   │   ├── css
│   │   ├── images
│   │   └── scripts
│   ├── sass          样式目录
│   │   ├── include
│   │   ├── movie
│   │   └── music
│   ├── scripts       JS脚本目录
│   │   └── js
│   └── upload        用户自定义上传图片存储目录
│       ├── movie
│       └── music
├── route             路由目录
│   └── router.js
├── test              测试文件目录
│   └── user
│       └── user.js
├── README.md
├── gulpfile.js       gulp文件
└── package.json

后期完善TODO:

  1. 完善网站功能;
  2. 优化项目代码;
  3. 爬虫定期爬取最新电影音乐;
  4. Vue重构;
You can’t perform that action at this time.