Skip to content

wunci/vue-video

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

83 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

写在前面

该项目有两个版本,vue和react

前端项目地址 https://github.com/wunci/vue-video  

后端项目地址 https://github.com/wunci/video-admin

API接口地址 https://github.com/wunci/video-admin/blob/master/API.md (未更新,接口现在重写过)

react版现在已经完成

react版项目地址 https://github.com/wunci/react-video

技术栈(Vue2.js + Node.js 全栈项目)

由于页面不是很多,vuex用的不多,关键掌握怎么实现就好了

vue2 + vuex + vue-router + webpack + fetch/axios + sass + flex + svg + 阿里字体图标

运行

git clone https://github.com/wunci/vue-video.git

cd vue-video

npm install  建议使用淘宝镜像(https://npm.taobao.org/) =>  cnpm i

npm run dev (运行项目)

npm run build (打包项目)

ps: 如果打包之后文件运行不了,请打包之前把路由的 mode:'history'注释掉,该功能去掉了url中丑陋的 # 号

功能

    1. 注册登录登出 + 验证码 密码检测,如果用户不存在则自动创建
    1. 检测是否登录,如果没有登录则不允许评论和评价
    1. 可以上传影片到后台,进行前台展示
    1. 评分功能,初始化评分可以自由设置,如果没有人like则默认显示原始评分,如果有则计算当前vide的评分
    1. 修改用户名,检测用户名是否跟其他人重复
    1. 上传头像,默认没有头像
    1. 评论功能,评论之后可以在个人中心展示,并且可以删除
    1. 搜索功能,可以搜索存在的影片,如果没有则显示无结果
    1. 自己喜欢的video和评论的内容会在个人中心显示

综上:

  • 注册
  • 登录
  • 登出
  • 验证码
  • 详情页
  • 分类
  • 分类影视列表
  • 修改用户名
  • 上传头像
  • 评论
  • 删除评论(可以左滑评论删除)
  • 搜索
  • 个人中心数据

如果觉得对你有帮助还望关注一下,有问题可以及时提哟,觉得不错的话star一下也是可以的哟

前端线上地址

项目是手机端的,请使用谷歌浏览器手机预览模式

首页默认一种类别只显示10个,可以查看更多显示全部

后端线上地址

技术栈:Node + Koa2 + Mysql GitHub: 管理后台

目录结构

|-- build                            // webpack配置文件
|-- config                           // 项目打包路径
|-- src                              // 源码目录
|   |-- assets                       // 图片文件
|   |-- base                   		 // 移动端适配
|   |-- components                   // 组件
|   |-- data                         // 接口
|   |-- router						 // 路由配置
|   |-- store                        // 状态管理
|   |-- style                        // 样式
|    	App.vue                      // 页面入口文件
|    	main.js                      // 程序入口文件
|-- static                           // 静态资源
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 代码编写规格
|-- .gitignore                       // git忽略的文件
|-- .postcssrc.js                    // post-loader的插件配置文件
|-- index.html                       // 入口html文件
|-- package.json                     // 项目及工具的依赖配置文件