Git Product home page Git Product logo

vue-video's Introduction

写在前面

该项目有两个版本,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                     // 项目及工具的依赖配置文件

vue-video's People

Contributors

geekblue avatar wunci avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-video's Issues

在weex项目中如何使用?

组件import报错

in ./node_modules/_vue-video@0.1.7@vue-video/video.vue

Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <style>
| .__cov-video-container {
| position: relative;

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.