优秀开发者刘洋作品:全栈项目 Twilight 暮光网

《暮光网》是一个电影门户网,这个项目非常适合用来进行前后端全栈技术研究,因此通过前端(Vue)后端(node)流行框架开发全栈项目,最后让开发的项目真实上线,整个全栈开发过程 妙味刘洋 皆亲手打造,以此掌握网站开发从前端到后端以及开发与上线的全部技术细节;

项目名称:《全栈项目 Twilight 暮光网》

线上地址:http://project.microbu.com/180520/movie/
前端源码:github.com/last-whisper/TwilightFrontEnd_BC_201806
后端源码:github.com/last-whisper/TwilightBackEnd_BC_201806

项目技术栈:

node
express
mongodb
mongoose
multer
session
vue
vue-cli
vuex
vue-router
axios
moment.js

项目功能:

会员登陆注册,
会员后台管理,
会员积分,
网站后台管理,
评论点赞,
收藏,
网站数据录入,
多媒体文件上传,
多媒体文件在线播放,
站内模糊搜索

数据表:

advertisements:广告数据表,
bannerlists:轮播图数据表,
comments:评论数据表,
directors:导演数据表,
mainmenulists:主导航数据表,
moviecategorylists:电影分类数据表,
movies:电影数据表,
news:新闻数据表,
newscategorylists:新闻栏目数据表,
ranks:排行榜数据表,
searchlists:搜索分类数据表,

后端接口分发:

  1. /admin:网站后台管理接口
  2. /userpic:会员上传头像
  3. /usernickname:会员修改昵称
  4. /useraddtag:会员添加感兴趣的影片分类
  5. /userremovetag:会员删除感兴趣的影片分类
  6. /addmovie:添加影片数据
  7. /addnews:添加新闻数据
  8. /changemainmenu:编辑主导航数据
  9. /addrank:编辑排行榜榜单数据
  10. /removerank:删除排行榜数据
  11. /setadv:上传广告位图片
  12. /addbanner:编辑主banner图数据
  13. /newslist:获取新闻分类列表数据
  14. /moviecategorylist:获取影片分类数据
  15. /user:用户登陆注册登出接口
  16. /login:用户登陆
  17. /loginout:用户安全退出
  18. /register/username:用户注册用户名是否重复先行验证(注册时,用户名边输入边验证)
  19. /register:用户注册
  20. /rank:获取根据指定规则排列的数据
  21. /movieshotlist:根据影片的期待人数获取正在上映的影片(热映影片数据)
  22. /totalprice:根据票房从大到小获取影片数据
  23. /totalprice-show:根据票房从大到小获取影片数据,影片范围:正在上映的影片
  24. /totalprice-year:根据票房从大到小获取影片数据,影片范围:今年上映的影片
  25. /api:网站数据获取接口
  26. /userallinfo:获取用户全部信息
  27. /mainmenulist:获取主导航信息
  28. /searchlist:获取搜索分类信息
  29. /searchdata:管理员后台模糊搜索影片或导演数据信息
  30. /mainsearch:网站影片、排行榜、新闻数据模糊搜索
  31. /ranklist:获取排行榜列表信息
  32. (更多接口请查看完整文档github.com/last-whisper/TwilightBackEnd_BC_201806)

前端路由:

  1. / 首页
  2. /news/:category?' 一级新闻页
  3. /newsdetail/:newstype/:id 新闻详情页
  4. /newslist/:category 二级新闻页
  5. /movienewslist/:id 影片新闻页
  6. /discovery 影片发现页
  7. /guide 观影指南页
  8. /rankdetail/:id 排行榜详情页
  9. /movie/:id 电影详情页
  10. /moviepic 电影图片预览页
  11. /trailer 电影预告片播放页
  12. /community 社区页
  13. /search 搜索结果页
  14. /register 注册页
  15. /user/:id 会员后台管理页
  16. /mtimetop 暮光TOP100排行页
  17. /mtimeshop 商城页(未开发)
  18. /admin 网站后台管理首页
  19. /admin/addmovie 网站后台管理影片信息录入页
  20. /admin/addnews 网站后台管理新闻录入页
  21. /admin/addrank 网站后台排行榜录入页
  22. /admin/addad 网站后台广告位编辑页
  23. /admin/addbanner 网站后台轮播添加页
  24. (更多内容请查看完整文档github.com/last-whisper/TwilightFrontEnd_BC_201806)

线上地址:http://project.microbu.com/180520/movie/


首页

会员登录


影片详情

网站管理员后台

项目中的难点和解决方案

  • 开发环境中的跨域配置与跨域提交cookie的配置

    • 解决方法:使用cors跨域,在跨域提交cookie的情况中,cors配置”Access-Control-Allow-Origin”不能为 “*”,必须为一个指定的域名;
      其次,为了使AXIOS跨域请求带上COOKIE需要进行如下设置:axios.defaults.withCredentials=true
  • 后端上传多媒体文件如何命名,如何避免重复命名

    • 解决方法:引入crypto,使用md5+hex对文件进行命名
      crypto.createHmac(‘md5’,Math.random().toString() ).update(Date.now().toString()).digest(‘hex’)
  • Mongoose中关联查询populate的具体使用方法

    • 解决方法:查询了很多文档,没有得到我所使用的场景的解决方案,我所需要解决的是:
      1、当查询到了关联的数据表的数据后,如果对该数据表返回的数据进行相关处理,如排序,限制条数等
      解决:首先,在使用populate的那个模块一定要引入关联数据表,populate()中的参数可以定义多个关联字段,其他参数可以对该字段对应的数据表进行附加条件查询,字段筛选,排序条数限制等操作
      2、如果查询关联的数据表中关联的数据表的数据
      解决:链式调用populate()
  • Mongoose模糊查找

    • 解决方法:高级匹配符$regex与$or等的配合使用,需要注意一切搜索场合中合并数据的重复数据现象,需要进行筛选
  • 日期格式的处理以及日期时间段内数据的检索,日期的对比等问题

    • 解决方法:使用moment日期处理类库,可以将ISO日期转成你想要的UTC日期格式,可以对两个日期进行先后顺序的比较,配合高级匹配符$gt,$lt,$and等可以筛选指定日期范围内的数据,使用moment().subtract()可以设置一个从此刻起,多少天以前的一个具体时间点,moment().add()获取一个此刻起多少天以后的一个时间点,灵活使用这些丰富的接口可以在很多场景需求游刃有余
  • vuex store切割后,state,getters,actions的参数的含义及如何访问全局状态

    • 解决方法:因为暮光网组件较多,所有状态集中在一起会使得状态对象非常拥挤,可读性差,所以尝试拆分状态树。
      耐着性子熟读vuex文档,多读几遍,写小demo测试测试
  • 功能组件的封装

    • 解决方法:特别是多场景适用的功能组件,封装起来不是那么顺畅,有一个图片上传的组件,支持多图和单图上传两种模式并且可预览上传的图片,需要支持撤回选择,过滤重复选择的图片以及上传文件个数限制
      1)首先需要设计好布局,不同的模式布局不同,
      2)然后设计好默认数据的属性,当进行不同的操作或不同的功能需要实现的时候应该修改哪个默认数据的属性要规划好
      3)还需要考虑到怎么向父组件emit事件能够降低或消除组件间的耦合
      4)如果组件有在同一模块下复用的情况,还需要注意refs和id的差异化设置
  • 上传图片和视频的本地预览

    • 解决方法:封一个获取上传文件的本地路径的函数,使用canvas截取视频的第一帧作为视频的预览图

总结:

  • 1.前端开发的时候遇到的困难相对较少,把握好组件之间的数据流向,把握好vuex的状态以及状态更新的规则,剩下的就是获取数据和渲染数据了,省略了大部分的DOM操作确实是为前端开发节省了不少开发时间;

  • 2.组件的嵌套,在什么地方发起请求(如组件中?父组件中?还是vuex中),各个生命周期函数使用的场合可以进一步加深理解和做出更合理的规划,做到开发中思绪行云流水最好;

  • 3.研究了平时少用的filters,状态切割和VUEX的辅助函数,对路由也进行了模块化开发,开发过程中使用了也试用过各种生僻钩子函数,取得了较深的理解;

  • 4.数据结构设计上反反复复修改了很多次,也算是一种经历吧,前期的数据结构的设计关系着后期的数据获取及渲染的可行性和便利性;

  • 5.对于生僻技术的探索很成功,完全解决了项目需求的技术难点;

  • 6.与前端配合验证登陆注册这一块的场景考虑的很周全,如重复登陆同一账号,登陆状态下继续登陆另一账号以及未登录状态下前往不同的路由后端是否需要做登陆验证以拦截路由等场景;

  • 7.对于数据库和数据结构设计的研究需要深入下去;

  • 8.主要研究成果有多媒体文件的上传与命名,mongoose对数据库操作的综合性使用,数据结构设计的初窥;


线上地址:http://project.microbu.com/180520/movie/


面对如此优秀的开发者,我们想对优秀的公司说:

在招人不易的今天,找一位 技术基础扎实 踏实肯干 前后端全栈人才是非常困难的,刘洋 目前正在进行求职准备,各位公司爱才惜才的 HR 们,千万记得下手要快,好人才别轻易错过!

  • 姓名:刘洋
  • 手机:16670106971
  • 邮箱:100139506#qq.com(请将#换成@)

以上就是 妙味刘洋 的作品介绍。
小伙伴们,换作是你,你会通过什么类型的作品来检测自己所学呢?


进群方式:关注公众号,发送 “vip进群” 关键字,联系我们加入 VIP 微信学习群

妙味网友
请登录后留言,请登录注册
 
 
 
 
 
联系我们

点我咨询QQ客服

010-57269690

在线微信客服
客服1
客服在线时间

工作日:9:30~18:00

周六:10:00~17:00

妙味公众号