项目作者: asdwsx1234

项目描述 :
基于Vue.js的模仿抖音的Web App
高级语言: TSQL
项目地址: git://github.com/asdwsx1234/vue-douyin.git


低仿抖音短视频


临近毕业,选了《微视频社交网站的开发》这个题作为毕业设计,然后就照着抖音打算用自己自学的知识(前端方向)来实现一遍。该项目基本使用JavaScript(ES6/7)开发,混入了Python写的爬虫来爬取梨视频的短视频来丰满自己的数据库。

注:本项目仅供学习交流使用,切勿用于商业用途,如有侵犯第三方版权问题及时联系我

前端技术栈

  • Axios
  • Vue2
  • Vuex
  • Vue Router
  • Vue CLI 3
  • Vue-socket.io
  • Stylus

    后端技术栈

  • koa2
  • sequelize
  • ioredis
  • socket.io

项目运行

使用Docker:

自学docker时用这个项目做了实践,不用本地装数据库啥的,(仅效果预览)推荐使用这种方法!!!

  1. 首先安装docker, 如果安装过就不需要了。
  2. (方案1)自己构建镜像,需要等待一段时间。终端在该项目目录下运行 docker image build -t vue-douyin .

    (方案2)直接从dockerhub拉取镜像,需要等待一段时间。终端运行docker pull asdwsx1234/vue-douyin

  3. (方案1)然后运行 docker container run --rm -p 3000:3000 -it vue-douyin 运行该容器。

    (方案2)然后运行 docker container run --rm -p 3000:3000 -it asdwsx1234/vue-douyin 运行该容器。

    端口必须是3000啊,否则请求的地址会错!

  4. 浏览器访问http://127.0.0.1:3000或者http://127.0.0.1:3000/admin

在本机部署的方法:

注意:node 需要 6.0 以上版本

  1. git clone https://github.com/asdwsx1234/vue-douyin.git
  2. cd vue-douyin
  3. npm install
  4. 启动redis数据库和mysql数据库
  5. redis数据库配置文件为./server/redis.js
  6. mysql数据库配置文件为./server/config.js
  7. node ./server/init-db.js (初始化数据库生成表结构) -- 空表
  8. 或者将./server/utils/backup.sql还原到你自己的数据库下
  9. node ./server/app.js (启动服务器)
  10. npm run serve (前端项目)

前后端都在一个项目里(感觉不是很合理),所以必须先启动后端相关的服务器。

说明

如果对您有帮助,您可以点右上角 “Star” 支持一下 谢谢! :grin:

效果演示

服务器2020.03.03到期,到时候就预览不了啦,不续了。

查看demo请戳这里(请用chrome手机模式预览)

移动端扫描下方二维码

目标功能

  • 登录、注册
  • 密码找回
  • 修改个人资料
  • 个人信息浏览(已发布、点赞的视频)
  • 上传头像
  • 发送邮件验证
  • 视频浏览
  • 关注与粉丝
  • 视频点赞、评论点赞
  • 视频评论、回复评论
  • 评论@用户
  • 关注动态浏览
  • 好友(互相关注)间私信
  • 发布动态
  • 搜索视频,用户(根据视频描述,根据昵称或id)
  • 私信、被关注、被评论、被@、被点赞、关注人发布动态的消息提醒
  • 删除评论
  • 删除视频
  • 分享
  • 后台管理

总结

不定时补充,就当写毕业论文了 :grin:

1、项目断断续续大概写了3个月,重要的功能基本已经完成,而且对vue的MVVM框架有了进一步的理解(数据和视图的分离,解耦,以数据驱动视图,只关心数据变化,DOM操作被封装),也更熟悉了vue的使用。

2、会话管理是用的koa-session2插件,通过session和cookie结合来管理会话。用户登录成功之后可以用户信息存入session中。koa-session2会将sessionId写入cookie,再把session对象写入redis,键值为sessionId,这样只要cookie没有过期,客户端的每次请求就会携带这个sessionId,在服务端就可以从redis中获取登录信息,当然也可以用作会话拦截。注销的时候只需要将ctx.session置为空对象,这样cookie就会被清掉了。

前端

部分截图

登录页

注册页

取回密码页

主页

动态页


消息页

粉丝消息页

赞消息页

@我的消息页

评论消息页


个人资料页



修改个人资料页

搜索视频页

搜索用户页

发布动态页

粉丝列表页

关注列表页

联系人页

私聊页

目录结构

  1. .
  2. ├── public
  3. ├── server (服务器在这里)
  4. ├── controllers (各个类别的controller)
  5. ├── models (sequelize模型)
  6. ├── static
  7. ├── assets
  8. ├── avatar (静态资源头像)
  9. ├── css
  10. ├── fonts
  11. ├── img
  12. ├── js
  13. ├── videoCover (静态资源视频封面)
  14. └── videoPath (静态资源视频)
  15. └── utils (服务器util)
  16. ├── src (前端项目在这里)
  17. ├── base (基础组件)
  18. ├── common
  19. ├── fonts (iconfont)
  20. ├── js (util/config)
  21. └── stylus
  22. ├── components (逻辑组件)
  23. ├── store (vuex)
  24. └── views (页面)

License

MIT