【原创】基于NodeJS Express框架开发的一个VIP视频网站项目及源码分享

项目名称:视频网站项目

开发语言:HTML,CSS(前端),JavaScript,NODEJS(expres)(后台)css

数据库:MySQLhtml

开发环境:Win7,Webstorm前端

上线部署环境:Linux服务器node

 在线演示站点:http://vip.52tech.tech git

Github源码:https://github.com/xiugangzhang/vip.github.iogithub

 



咱们先来看一下最终的效果:
用户主页的搭建:ajax

  • 实现了主页轮播图的显示和切换,用户能够从数据库中自由配置和切换轮播图的显示
  • 实现了主页电影列表的显示:从数据库文件读取电影和电视剧列表信息并在前台显示




  • 用户登陆和注册页面的搭建:
  • 实现了用户的登陆和注册功能
  • 用户注册和登陆验证码提示功能(这部分建议使用谷歌或者火狐浏览器测试,由于使用的是svg格式的图片,对于低版本的浏览器或者IE浏览器,可能会出现验证码不能正常显示的问题)


电影播放页面的搭建sql

  • 对于其余页面的任意能够展示电影列表的页面,用户能够直接点击列表,直接进入播放页面
  • 播放页面电影详细信息的展示
  • 对于加载速度较慢的视频,用户能够自由切换播放接口进行加速
  • 弹幕功能(特点功能):相似于B站等其余视频网站的弹幕功能,用户在登陆以后能够实如今线发言
  • 用户能够在相应的播放页面查看其余用户已经发表的评论,同时也能够在登陆以后自由发表评论
  • 电影收藏和取消功能




电影搜索功能(特点功能)数据库

  • 实现了根据视频播放地址和视频名称全网视频的搜索和播放功能
  • 实现了正在热映,即将上映和TOP250的电影列表的展现
  • 这部分因为目前网站也没有提供一些搜索的接口,这里使用的是正则方式进行解析的思路实现了搜索功能




用户中心的管理npm

  • 对于已经注册的用户,实现用户基本信息的修改
  • 用户密码的修改
  • 用户评论记录的查看
  • 用户收藏电影的查看和播放
  • 用户登陆日志的查看






程序安装方法步骤:

  • 确保电脑已经安装了NodeJS环境,运行版本尽可能保持最新(V8以上吧),而后下载此安装包后解压到你的系统任意盘符下面的目录;
  • 在当前解压文件夹的主目录(包含package.json的那个文件夹)运行命令:npm install, 系统就会自动安装该程序的依赖包;
  • 登陆你的网站数据库管理界面(PHPAdmin),若是是在本地测试的话,就使用Navicat等MYSQL数据库链接工具链接数据库,链接完成以后建立数据库名为video,设置数据库登陆名root, 登陆密码为123456。若是须要配置其余用户名或者密码,请进入到modes/db.js文件下面,修改代码11行/12行的位置,user和password改成你本身的用户名个密码就行;
  • 数据库环境配置完成以后,打开解压文件夹里面的video.sql数据库脚本文件,进入Navicat等数据库管理工具,运行执行脚本文件,脚本执行成功以后就会在已经建立好的数据库下面建立程序运行所须要的数据表文件;
  • 在以上的步骤都执行完成且正确的状况下,就能够在程序主目录下面(有app.js的那个目录),先打开app.js文件,而后找到代码:server.listen(8080, ‘192.168.1.101’, function () {}),修改成你本身的主机相应的IP地址和端口号,而后执行命令,node app.js,在以上的配置都没出错的状况下,这里就会正常启动程序了,而后进入浏览器,输入IP地址和端口号,就会进入到程序的主页了。
  • 初次进入到网站首页后,因为数据库中没有数据的缘由,首页或者其余页面可能会出现变形格式不正常等其余问题,你们能够向数据库中添加一些测试数据,而后再测试一下。这里也能够直接添加我这里提供的一些测试数据,参见相关文件夹下面的video.sql 文件(直接导入数据表结构),若是是须要导入内容文件,这里也提供了另一个SQL文件(包含部份内容的数据表movies.sql和tvs.sql),直接使用数据库管理工具,导入SQL文件数据到数据库便可完成数据的导入。





其余说明

  • 页面总体的风格模仿了Discuz等论坛网站的布局
  • 网站首页的轮播图效果模仿了优酷、爱奇艺、腾讯视频等主流视频网站的轮播图效果
  • 电影底部的的友情连接,使用了大部分网站的分栏布局,用户能够添加本身的QQ群以及微信公众号方便增长本身网站的人气
  • 主要列表的分页功能,对于一些内容显示较多的不能再一页显示完整的页面,使用了ajax无刷新分页对数据进行多条展现,提升了用户的体验
  • 目前主流浏览器中也作了相应测试,建议你们使用谷歌或者火狐浏览器,效果可能会更好
  • 总的来讲吧,本身就是一个对前端技术有着较高热情的小白吧,没事的时候喜欢瞎折腾,对一些有意思的技术平时也比较喜欢研究一下吧。所以就在这股热情的鼓励下,怀着满腔热血,写下了这个VIP视频网站项目程序。由于发现有些东西一旦落下来,后面就也没有太多的激情去继续完善这个程序了,就把这个程序贡献给开源社区吧,供你们学习交流使用,在这里也但愿你们可以多多支持。
  • 最后,也请你们尊重原创,转载请注明出处。此外,因为时间缘由以及我的能力有限等其余缘由,目前程序中可能也会存在一些潜在的bug,对于程序中的一些技术细节或者其余问题,也欢迎你们多多交流,也欢迎你们提出来,后面也能够抽时间继续维护这个项目,若是能够的话后面你们能够继续维护吧。有什么问题或者建议也欢迎你们在下面留言。
  • 最后,也但愿你们可以多多支持,毕竟码代码也是不容易的,大家的支持和评分起码也是我前进的动力,谢谢你们支持。




下面的是你们下载程序解压后的一个目录结构吧,下面简单对这个目录结构作个说明:


controllers: 控制层,只要的核心业务逻辑代码
data:数据抓取层,用于从爱奇艺网站抓取视频数据存储到数据库,并在前端显示,其中的db.js就是数据库的相关配置文件
models:数据库表结构映射文件(用于把数据库的关系数据模型转换为对象模型)
utils:工具包
views:视图文件(网站项目的全部html文件,这里的格式是xtpl,主要是为了对数据进行动态展现,便于后期进行数据渲染)
www:网站的全部静态资源文件,包括html,css,js等文件
app.js: 程序的入口文件
config.js :  程序的主要配置文件,用于配置文件上传目录等参数
router.js:程序的路由配置
*.sql:这几个都是一些抓取的数据信息,用于向数据库中插入数据使用

在线演示站点:http://vip.52tech.tech

Github源码:https://github.com/xiugangzhang/vip.github.io

相关文章
相关标签/搜索