沸点转正项目总结

本次是沸点工作室转正的项目

前端ui如下

沸点转正项目总结

沸点转正项目总结

沸点转正项目总结

沸点转正项目总结

本次项目使用的技术栈

  1. vue2.x
  2. vue-router
  3. axios
  4. Aplayer
  5. core-vedio-player
项目开发流程

首先拿到的是项目的功能需求
如图

沸点转正项目总结

明确了项目需求后,在项目正式开始前,前端应该与后端商定接口,并明确需要传输的值,
这一步是非常重要的,因为在项目开发过程中有些事情是前端可以处理,后端也可以进行处理,
例如对于跨域的处理,输入的限制等等
在与后端商定好基本接口后便可以开始界面的编写

如下是我们本次任务敲定的接口

沸点转正项目总结

由于转正项目并没有ui设计,所以我们需要在项目开始前对网站的layout做一下简单的规划,如图

沸点转正项目总结

完成页面的编写后便可以与后端对接口,在对接口中可能出现的状态码

  1. 200 这是接口正常的情况
  2. 400 这是post携带的数据与后端所需的不一致所致,请检查是否传值或是否有缺漏
  3. 404 这是后端找不到请求的接口时返回的状态,请检查接口是否书写正确
  4. 415 这是后端所需数据与post携带数据不一致导致的,如post的值为{name:"bluexx"},后端所需的值为name:"bluexx",这需要后端对于接受数据进行修改
  5. 500 server error 后端的接口出现故障
项目汇报中的问答

问:登录状态或者token是如何进行保存的

答:将token存入Vuex并通过localstorage进行数据持久化操作
具体实现如下:

state:{
token:localStorage.getItem('token') ? localStorage.getItem('token') : '';
}
mutations:{
settoken(state,data)
{
 state.token=data.token;
 localsorage.setitem('token',data.token);
}
}

如此学长由引入了一个问题:数据全部存在localstorage中,vuex还有什么意义?

答:首先我们要明确使用vuex的目的,使用vuex为的是存储全局的数据,可以在各个组件中调用,而localstorage是浏览器的功能,在原生html中我们也可以通过js使用localstorage,而vuex中的数据在浏览器关闭,或者网页刷新,网页关闭后都会消失,
我们便需要借助localstorage进行vuex中数据的持久化存储,因此二者并不矛盾,但是vuex中的数据并不都需要持久化保存,这就提到了一个东西,数据按需请求,后端应该按照需要给前端返回数据,而不应该把所有数据一次性传给前端,vuex中需要持久化存储的数据应该是耦合度高的,有两个以上组件进行使用的数据,对于例如价格之类的数据,需要实时更新的数据只需要在mounted中请求数据,便不需要本地存储
这里给大家推荐一个vuex的教程

问:如何实现播放器的操作?

答:为播放按钮绑定一个方法,给后端返回一个带着id的post请求,将后端返回的播放列表对vuex中的播放列表进行更新,播放器中只需要监控vuex中播放列表数据的变化,后操作播放器的行为即可

代码实现如下

//监测mlist的数据变化,并更新数据
watch: {
getMlist() {
  setTimeout(() => {
    this.$refs.aplayer.switch(0);
    this.$refs.aplayer.play();
  }, 10);
},
}
一些工程化开发的注意事项
  1. 对于重复使用的方法,数据可以使用mixin进行封装
  2. 对于axios要进行封装,应在项目中创建api文件夹存储全部的接口,避免在单个组件中使用axios请求
  3. 对于相似度极高的组件,可以使用prop进行组件通信,提高组件的复用率
  4. 应避免项目文件平铺,可以在路由管理的组件文件夹page中继续细分文件夹,如index,user等
  5. 使用Eslint或Prettier进行格式化,提高代码的可阅读性

如下图的情况都是应该避免的

沸点转正项目总结

沸点转正项目总结

如上几点可以极大的改善项目的可维护性,可便于他人review

感谢陈金,周扬杰,贺凡学长的帮助,才有了本文!!

项目的github地址为:点击这,以上的问题在代码中均能体现,因代码量过大懒得进行重构,欢迎review

bluexx

好好学习,天天向上

Responses

  1. hhhhh.

    🤙🤙🤙

    1. 组长真敷衍