第二次项目开发总结

时间:3月8日-6月8日

项目：萌问趣答 （负责网页商家版部分）

遇到的问题：

1. 因为组件嵌套过深，导致el-input组件无法实时更新渲染视图渲染出来的视图是上一次输入的内容。
   问题原因：因为数据层次太多，没有触发render函数进行自动更新，需要手动调用
   解决方法：使用@input事件调用$forceUpdate方法对组件进行强制更新。（也有说可以在data声明中添加默认值，但我自己试了一下并没有用）
   博客：el-input 组件无法实时更新数据
2. 在使用Element组件库的Tabs选项卡组件时，在切换时会导致ECHARTS生成的图表压缩在角落
   问题原因：是因为在进入下一个选项卡之前就已经渲染好了ECHARTS图表，但是是canvas的默认大小
   解决方法：通过使用Tabs组件的lazy属性，进行懒加载，让其在进入选项卡时再进行渲染
   博客：Element组件库中的Tabs组件在切换时会导致ECHARTS被压缩在角落
3. vue组件声明了变量时却说是undefined
   问题原因：在data定义的一个变量声明时赋值错误，导致data声明变量失败
   博客：vue data数据明明声明了获取时却是undeifned
4. 导出ECHARTS图表并生成word文档
   解决方法：在ECHARTS图表渲染完成后将其转为图片并获取链接，再转成base64编码的数据流，通过docxtemplater写入事先写好的word模板中
   博客：纯前端vue项目导出ECHARTS图表成word文档

学到的知识

1. 进一步对f12控制台的了解，学会使用debugger查看执行过程出错原因
2. js中的防抖和节流
3. 对404、500、502状态码的学习
4. 码云的基本使用
5. 对vue的巩固和加强和element组件库的使用

项目过程中存在的问题

1. 沟通的问题
   因为是疫情原因变成了线上开发，而且项目中的所有人之间并不熟悉。导致项目过程中产生了很多的沟通问题。因为有普通版和商家版两部分，所以这两部分在某些页面上会有重合的部分，美工改页面时通常只通知了一个前端，而另一位前端并不知道页面需要修改，所以就导致了在项目检查过程中两部分页面风格的不同。 还有前端与后端之间的沟通问题，接口参数不明确，时常修改。在改重合部分的接口时，并没有两位前端都通知到。导致一位前端在调试页面时数据渲染出错，浪费了时间与效率。还有网页版与小程序的之间的沟通问题。由于是在网页上创建问卷，在小程序上答问卷，然后在网页渲染答题数据图表。所以必要的沟通是必不可少的。但传给后端存储的数据并没有经过双方的商量确认，只是单方面确定。就会出现前端在获取后端的数据后无法使用或者需要二次处理的问题。
2. 没有需求文档和接口文档
   因为没有明确的需求文档，所以导致在做页面跳转和功能时需要花费更多的时间去了解这些东西。会有时功能实现后还需要修改的事情。而且页面跳转和功能是通过微信发消息说的，就会造成每个人的理解不同，实现出来的东西不能满足实际需求。
   而没有接口文档导致的问题是前端和后端需要经常性的修改请求参数和返回的数据字段与格式。有时还需要添加额外的接口。

总结

这次项目由于所有人员都是在读大学生，大家也都是第一次参与一个项目的开发。所以在项目过程中的确会存在许多的问题，这些遇到的问题和解决问题的方法也都会成为下一次项目中的经验。