疫情可视化平台项目

我会带着你远行 2024-03-26 19:50 12阅读 0赞

**目录**

技术路线

总结

这是学校组织的实训一做的Vue前端框架搭建的项目，项目时间\`2022-12-24~2023-1-6\`.

### 技术路线 ###

本次实训主要是体验企业级项目开发的全过程。首先我们先了解前端编程技术，熟悉Swagger-UI，掌握前后端分离开发模式。接着深入了解前端工程化，根据项目所需要接下来做项目需要的知识点，HTML5掌握块级元素，行内元素等基础标签、新增语义化标签的使用、表格、表单等标签的使用，CSS3中各种选择器的使用、文本样式、盒模型、页面布局，JavaScript中数组、对象、函数的概念及其应用，Vue2模板语法的使用等基础语法；掌握Vue-Router路由技术，控制页面之间的跳转与传值，掌握使用Axios发送网络请求，完成前后端数据交互；高德地图API简单介绍，配置注册和使用；HighCharts的配置和基本使用；项目框架搭建以及团队分工配置，使用Vue-CLI、Vue-Element-Admin搭建项目架构，集成项目需要的Vuex和Axios。重构疫情动态模块，将数据以不同的方式加以展示；重构实时疫情模块，使用Highcharts来以图形的形式动态的展示；重构数据统计模块，结合highcharts与百度地图进行全国疫情数据的展示；重构定点医院模块，完成定位结合高德地图API展示以及对应医院的地图展示；重构疫情管理模块，完成对医院的信息用表格加分页的显示，再新闻资讯模块如何使用富文本添加信息；各个模块结合swagger实现数据对接，每隔2天需要将项目中遇到的疑难问题进行汇报。项目讲解完毕，根据之前分好的小组，组员负责哪个模块，团队内各成员按照之前的分工进行功能的完善。Github账号注册、码云账号注册，小组合作体验团队项目合作过程。小组成员在组长处领取功能模块，准备开启项目开发。晚上额外学了服务器的搭建，如将后端的接口在服务器上跑起来，Git安装与使用等流程，掌握阿里云的云端部署机制，如何将项目部署到服务器上，将项目上线。

### 总结 ###

本次实训，是对自身能力和团队合作能力的进一步锻炼，提高了动手做项目的能力，体验企业级开发的流程，从中获得的诸多收获，是非常有意义的。本次实训虽然和往年的实训有点不一样，采用线上的形式教学，这也不影响我们学习专业技能的决心。自觉自律决定我们学到的知识点的多少，效率虽然低点，但14天学下来，还是可以学到很多专业技术的。

实训开始先学接下来做项目需要的知识点HTML5、CSS、JavaScript、Vue2、Vue-Router、HighCharts、Axios基础语法，晚上额外学了服务器的搭建，Git的使用，职业规划等，然后拿项目来讲解里面重要的模块，最后3天用来小组做自己的模块，每个小组成员负责自己的模块。我们小组写的是广西疫情可视化平台，这时共用同一个接口，本人负责的是定点医院管理，其它模块在课上跟着老师学了一遍，课后看了一遍回放，重新将模块的思路走了一遍，发现课上听懂的，一到实操就不知如何下手，只能跟着老师思路重新走，才能做到写模块时有思路。

写模块的时候只能参考老师的模块来写，后台封装好的接口信息和主要的功能逻辑没有其它的思路对其修改，只能参考老师的代码，跟着老师的思路来写一遍，注解也按照老师的和自己的理解写上去，方便日后回来看代码，提高可读性。老师课上都是用一些基础的组件来构造页面，定点医院管理模块主要有一个基础表格、分页和模态框组成。我对其额外添加了页面刷新时加载2秒表格才出现数据，写了一个方法让总时间为获取当前的时间加上传递的参数睡眠几秒，如果此时当前时间大于总时间，则退出循环，达到加载2秒的效果；加了个新增按钮、标题、搜索框，使用弹性布局加相对定位来实现3者间的分布，搜索框后端接口中有参数接收，只需要传递输入框的参数就可以实现关键字搜索医院信息；使用带斑马纹的表格，可以更容易区分出不同行的数据，使用多级表头来展现地址信息的层次关系，对操作中的修改和删除加了个图标，使其看起来更加美观；将分页组件的功能加的更完善，在模态框中通过深度选择器来样式穿透来修饰标题，然后内联样式改变输入框的宽度，还对必填输入框加了失去焦点就提示请输入，经纬度在外面的validate.js中封装了对浮点数的正则表达式验证，再对下方的取消和提交做了居中处理。基本是对样式的添加修改，后端接口都是用封装好的方法，直接调用传参，只需要知道如何正确的展示到组件上给用户观看即可。

此次企业级开发中时间上管理，教学的方式和质量，项目的背景，充分体现了专业化、制度化、标准化等特征。项目的模块也分配的比较均匀。相对简单点的模块给基础稍微弱的学生，有点难度的模块可以分配给基础稍好的学生，体现出项目的可行性、可实现性。开始分配成员时，遵循学生自愿原则，希望基础好的学生带着基础薄弱的学生做项目，这也是让组员间相互讨论，相互帮助，共同提升，体现出这次实训团队精神的魅力所在。实训的初衷是培养我们的职业道德，职业道德修养是一种自律行为，对于线上教学更能充分的体现出这一点，加强理论学习，勇于实践磨炼，增强情感体验，对于职业道德修养与教育实践活动相结合，按照道德的规范和要求，不断进行自我教育的和自我改造，才是培养职业道德修养的根本方法。在实训过程中，需要自觉与他人交流，不懂的就虚心的问能力强的同学，或者虚心的请教老师，将自己无法解决的问题，彻底理清解题思路。让我们充分的了解确立可行目标的重要性，只有目标确立了，所花的时间才是值得的，不然看是学习了一天，实际上漫无目的学习，效果都没有，不能是盲目的，无计划的，必须有着明确的目标作为指导，才能将技术学的精深。

这次实训对我总体来说很顺利的完成了，预期的效果也达到了，这些知识点以前自学过，此次实训相当于整体复习一遍，将基础用法掌握的更加牢固。不足之处就是线上教学，达不到团队间实时相互探讨问题的效果，有些组员互动性，积极性不高，提出的问题只有个别组员回答自己的见解，还有缺少学习的氛围感，在家或多或少有许多干扰因素，不能全心投入学习。

对于这次实训，想要将技术学的有深度，这14天是不够的，过后也要花时间来学习。这次企业级开发流程的体验，是自己做项目无法体验到的，意义非凡，该企业的教学方式清晰，内容全面，老师耐心的讲解，有回放和教学文档，方便课后复习，也是为了及时了解没掌握的知识点。最后，我要感谢学院组织的这次十分有意义的实训，使我们学到了很多，也领悟了很多。

~记录实训心得，方便日后回忆~

~原创，没有高端语音组织的感想，勿喷~