项目名称:视频网站项目

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

数据库:MySQL

开发环境:Win7,Webstorm

上线部署环境:Linux服务器

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

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

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

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

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


电影播放页面的搭建

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

电影搜索功能(特色功能)

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

用户中心的管理

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

程序安装方法步骤:

  • 确保电脑已经安装了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

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

  1. 基于 React + NodeJS + Express + MongoDB 开发的一个社区系统

    还可以, 功能挺全的, 可以作为react开发入门项目 链接 线上站点: 源码地址:

  2. 推荐一个ASP.NET网站内容管理系统源码

    许多人都有各自的兴趣,如打球.踢毽子.看书.看电视.玩游戏等等....我近来迷上了猜灯谜,于是业余做了一个在线猜灯谜的网站:何问起谜语. 先出个谜语让你猜猜:不可缺一点(打一字).可以在线猜:http ...

  3. 基于Spring Boot框架开发的一个Mock

    背景:在项目后端接口开发还未完成,我们无法进行自动化接口用例的调试,希望与开发同步完成接口自动化用例的编写及调试,待项目转测后,可以直接跑自动化用例,提高测试效率. 选用的maven + Spring ...

  4. 一个android参考网站,工具+源码

    Android多渠道打包工具  https://github.com/wubo/apptools Android官方培训课程中文版(v0.9.4)  http://hukai.me/android-t ...

  5. Android开发之自己定义TabHost文字及背景(源码分享)

    使用TabHost 能够在一个屏幕间进行不同版面的切换,而系统自带的tabhost界面较为朴素,我们应该怎样进行自己定义改动优化呢 MainActivity的源码 package com.dream. ...

  6. 【VIP视频网站项目三】项目框架搭建、项目路由配置、数据库表结构设计

    一.项目路由的设计 目前项目代码已经全部开源:项目地址:https://github.com/xiugangzhang/vip.github.io 视频网站前台页面路由设计 路由 请求方法 模板 作用 ...

  7. express框架开发案例

    express是基于Node.js平台的web应用开发框架,用express框架开发web项目可以直接构建整个项目框架并且将前端页面跟后台贯穿起来,用起来还是灵活的:最近刚开始学习,写篇博客总结下,涉 ...

  8. 基于Typecho CMS框架开发大中型应用

    基于Typecho CMS框架开发大中型应用 大中型应用暂且定义为:大于等于3个数据表的应用!汗吧! Typecho原本是一款博客系统,其框架体系有别于市面上一般意义MVC框架,主体代码以自创的Wid ...

  9. NodeJS+Express+MySQL开发小记(2):服务器部署

    http://borninsummer.com/2015/06/17/notes-on-developing-nodejs-webapp/ NodeJS+Express+MySQL开发小记(1)里讲过 ...

随机推荐

  1. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  2. 改善java程序的151个建议--数组和集合

    60.性能考虑,数组是首选,在基本类型处理方面.数组还是占优势的,并且集合类的底层也都是通过数组实现.建议在性能要求较高的场景中使用数组替代集合. 61.假设有必要.使用变长数组:我们能够通过对数组扩 ...

  3. LeetCode 939. Minimum Area Rectangle (最小面积矩形)

    题目标签:HashMap 题目给了我们一组 xy 上的点坐标,让我们找出 能组成矩形里最小面积的那个. 首先遍历所有的点,把x 坐标当作key 存入map, 把重复的y坐标 组成set,当作value ...

  4. LeetCode 237. Delete Node in a Linked List (在链表中删除一个点)

    Write a function to delete a node (except the tail) in a singly linked list, given only access to th ...

  5. BZOJ 2338 HNOI2011 数矩形 计算几何

    题目大意:给定n个点,求一个最大的矩形,该矩形的四个顶点在给定的点上 找矩形的方法是记录全部线段 若两条线段长度相等且中点重合 这两条线段就能够成为矩形的对角线 于是我们找到全部n*(n-1)/2条线 ...

  6. 【转】Android进阶2之 阴影制作(Shadow)

    阴影制作:包括各种形状(矩形,圆形等等),以及文字等等都能设置阴影. 阴影制作是什么原理呢? 其实很简单,你需要设置阴影的东西被看作一个主层.然后在主层下面画一个阴影层. 阴影制作涉及到一个重要函数: ...

  7. YTU 2776: 小壮的习惯

    2776: 小壮的习惯 时间限制: 1 Sec  内存限制: 128 MB 提交: 206  解决: 40 题目描述 小壮是一个英语初学者,一天,逗比的小壮看英语书,被其中的句子吸引了.他有个习惯,他 ...

  8. 【转载】HashMap实现原理浅析

    HashMap和Hashtable的区别 两者最主要的区别在于Hashtable是线程安全,而HashMap则非线程安全Hashtable的实现方法里面都添加了synchronized关键字来确保线程 ...

  9. flux,redux,vuex状态集管理工具之间的区别

    一:redux和flux的区别 1)redux是flux中的一个实现 2))在redux中我们只能定义一个store,在flux中我们可以定义多个 3)在redux中,store和dispatch都放 ...

  10. codevs1574广义斐波那契数列

    1574 广义斐波那契数列  时间限制: 1 s  空间限制: 256000 KB  题目等级 : 钻石 Diamond     题目描述 Description 广义的斐波那契数列是指形如an=p* ...