Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

vue + vue-router + vuex + (fetch->axios)
https://github.com/wunci/vue-video

axios fetch node sass vue vue-router vuex webpack

Last synced: 6 days ago
JSON representation

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

Host: GitHub
URL: https://github.com/wunci/vue-video
Owner: wunci
Created: 2017-09-03T08:50:13.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2023-01-28T08:41:15.000Z (almost 2 years ago)
Last Synced: 2024-12-09T20:54:15.854Z (14 days ago)
Topics: axios, fetch, node, sass, vue, vue-router, vuex, webpack
Language: Vue
Homepage: http://video.wclimb.site
Size: 4.17 MB
Stars: 262
Watchers: 12
Forks: 97
Open Issues: 2
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# 写在前面

该项目有两个版本，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. 注册登录登出 + 验证码密码检测，如果用户不存在则自动创建
* 2. 检测是否登录，如果没有登录则不允许评论和评价
* 3. 可以上传影片到后台，进行前台展示
* 4. 评分功能，初始化评分可以自由设置，如果没有人like则默认显示原始评分，如果有则计算当前vide的评分
* 5. 修改用户名，检测用户名是否跟其他人重复
* 6. 上传头像，默认没有头像
* 7. 评论功能，评论之后可以在个人中心展示，并且可以删除
* 8. 搜索功能，可以搜索存在的影片，如果没有则显示无结果
* 9. 自己喜欢的video和评论的内容会在个人中心显示

综上：

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

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

## 前端线上地址

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

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

## 后端线上地址

技术栈：`Node` + `Koa2` + `Mysql`
GitHub: [管理后台](https://github.com/wunci/video-admin)

## 目录结构

```