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

2022-02-14 15:54:31 浏览数 (1)

简介:

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

1. 项目后端搭建:

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

2. 项目前端搭建:

  • 使用jQuery和Bootsrap完成网站前端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版本运行正常

安装:

  • 安装mongodb(https://www.mongodb.org/downloads#production)完成相关配置;
  • 在当前项目目录中使用npm install命令安装相关模块(如果模块下载速度慢可考虑使用淘宝cnpm镜像进行下载);

运行与使用:

  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

项目结构:

代码语言：javascript复制
├── 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重构;
mongodb 云数据库MongoDB 数据库 sql javascript

0 人点赞