GitPlanet

Cheap and reliable Node.js hosting starts at $3/month, and $1/month static HTML hosting

Created with love in Canada, visit hostnodejs.com today

Feel like to post an Ad? Learn Details
All Projects → wclimb → Vue Video

wclimb / Vue Video

vue + vue-router + vuex + (fetch->axios)

Labels

vuewebpacknodesassvuexvue-routeraxiosfetch

Projects that are alternatives of or similar to Vue Video

Vue Music Player
🎵Vue.js写一个音乐播放器+📖One(一个).A music player + One by Vue.js
Stars: ✭ 729 (+190.44%)
Mutual labels:  webpack, axios, vuex, sass, vue-router
Vue Cnode
🔥Vue.js打造一个开源的CNode社区。CNode by Vue.js
Stars: ✭ 249 (-0.8%)
Mutual labels:  webpack, axios, vuex, sass, vue-router
Vue Spa
vue-spa ： vue + vue-router + axios + vuex + vux 快速成型移动端项目，直接使用。欢迎star
Stars: ✭ 46 (-81.67%)
Mutual labels:  webpack, axios, vuex, sass, vue-router
Vue Cnode
🚀 基于vue3 function-based 构建cnode社区
Stars: ✭ 192 (-23.51%)
Mutual labels:  webpack, axios, vuex, vue-router
Putongoj Fe
The front end of the Putong Online Judge -- An online judge with nothing special
Stars: ✭ 74 (-70.52%)
Mutual labels:  webpack, axios, vuex, vue-router
Egg Vue Webpack Boilerplate
Egg Vue Server Side Render (SSR) / Client Side Render (CSR)
Stars: ✭ 1,302 (+418.73%)
Mutual labels:  webpack, axios, vuex, vue-router
Vue Spa Project
vue.js + vuex + vue-router + fetch + element-ui + es6 + webpack + mock 纯前端SPA项目开发实践
Stars: ✭ 118 (-52.99%)
Mutual labels:  webpack, fetch, vuex, vue-router
Vuedemo sell eleme
ele by vue2.x 🐧
Stars: ✭ 1,349 (+437.45%)
Mutual labels:  webpack, axios, vuex, vue-router
Vue Shop
VUE移动小商城
Stars: ✭ 148 (-41.04%)
Mutual labels:  webpack, axios, vuex, vue-router
Vue Todos
vue最新实战项目教程，从零开始，一步一个脚印,循序渐进。跟着我一起学习vue吧！
Stars: ✭ 1,659 (+560.96%)
Mutual labels:  webpack, axios, vuex, vue-router
Echat
基于Vue的点对点聊天项目
Stars: ✭ 130 (-48.21%)
Mutual labels:  axios, vuex, sass, vue-router
Laravue
Admin dashboard for enterprise Laravel applications built by VueJS and Element UI https://laravue.dev
Stars: ✭ 1,964 (+682.47%)
Mutual labels:  webpack, axios, vuex, vue-router
Manhuaren
vue2.0全家桶，仿漫画人官网（移动端）
Stars: ✭ 18 (-92.83%)
Mutual labels:  webpack, vuex, sass, vue-router
Xyy Vue
🎨基于vue+vue-router+vuex+axios+webpack开发的个人Demo《Qu约》
Stars: ✭ 1,316 (+424.3%)
Mutual labels:  webpack, axios, vuex, vue-router
Vue2 Study
vue 的webpack配置,按需加载,element-ui,vuex
Stars: ✭ 16 (-93.63%)
Mutual labels:  webpack, axios, vuex, vue-router
Vue2 Elm
基于 vue2 + vuex 构建一个具有 45 个页面的大型单页面应用
Stars: ✭ 37,325 (+14770.52%)
Mutual labels:  webpack, vuex, sass, vue-router
Vue Project
基于vue-cli构建的财务后台管理系统(vue2+vuex+axios+vue-router+element-ui+echarts+websocket+vue-i18n)
Stars: ✭ 301 (+19.92%)
Mutual labels:  webpack, axios, vuex, vue-router
Vue Admin Webapp
this is a admin project
Stars: ✭ 673 (+168.13%)
Mutual labels:  webpack, axios, vuex, vue-router
Todolist Frontend Vuejs
Front-end application for Todolist Web application built with Laravel and Vue.js
Stars: ✭ 120 (-52.19%)
Mutual labels:  webpack, axios, vuex, vue-router
Vue Cli Multi Page
基于vue-cli模板的多页面多路由项目，一个PC端页面入口，一个移动端页面入口，且有各自的路由， vue+webpack+vue-router+vuex+mock+axios
Stars: ✭ 145 (-42.23%)
Mutual labels:  webpack, axios, vuex, vue-router
View All Similar Projects ➔

写在前面（有问题可以加qq群:725165362）

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

前端项目地址 https://github.com/wclimb/vue-video  
前端预览 http://video.wclimb.site

后端项目地址 https://github.com/wclimb/video-admin
后台管理 http://vue.wclimb.site

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

react版现在已经完成

react版项目地址 https://github.com/wclimb/react-video
react版预览 http://react.wclimb.site

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

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

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

运行

git clone https://github.com/wclimb/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和评论的内容会在个人中心显示

综上：

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

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

前端线上地址

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

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

预览：vue-video

手机扫描图下二维码预览

后端线上地址

技术栈：Node + Koa2 + Mysql 预览：video-admin GitHub: 管理后台

前端演示

主页

登录页

个人中心页

详情页

后台演示

有问题欢迎反馈

在使用中有任何问题，欢迎反馈给我，可以用以下联系方式跟我交流

  • 邮件(875246904#qq.com, 把#换成@)
  • QQ: 875246904

目录结构

|-- 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                     // 项目及工具的依赖配置文件
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].