【测试平台开发】十八、vue组件化重构前端代码

简介: 【测试平台开发】十八、vue组件化重构前端代码

基于 springboot+vue 的测试平台开发继续更新(人在魔都 T_T)。


这期其实并不是一个详细的开发过程记录,主要还是针对本次前端重构来聊聊几个关注点。


目前重构的总进度在80%,重构完的页面没什么变化,再回顾一下。


1268169-20220417152231976-978695825.gif


一、为什么重构


目前项目的功能开发重点还是在接口管理这一大块,内容多,任务重,可当我着手准备继续开发新功能的时候发现了个重大的问题。


我之前接口相关的功能都写在一个vue文件里,看了下代码行数已然近800,现在查看之前代码和改动就已经非常的不方便的,这后面功能还多了,继续写下去估计自己都要扔了。


所以重构前端代码优先提上了日程。


怎么重构,那当然还是利用vue的组件化特性来进行拆分。已当前的完成度来看,从当初的 1 个文件(红色框的),拆分了现在的 10 文件(其他的)。


1268169-20220417152828635-1662041917.png


二、如何拆分


这部分主要有 2 个部分。


1. 补充对应知识


这不是废话么?因为之前对相关知识储备比较少,所以一开始也不知道如何下手,于是找起来。网上有很多博客、视频等免费学习资源,大家很容易就可以搜到。


我起初也是想针对性的补充下vue组件相关性高的知识点,后来看着看着,不知不觉几乎把 vue 系统化的肝了一遍,虽然花费了不少时间,但是收获也很多,之前许多一知半解的问题都知道为啥了。


这里罗列一些重要的知识点,仅供参考:


  • vue 生命周期


  • vue 组件基础知识


  • 组件间通信技术


  • vuex


其中比较花费精力的就是后面2个了。因为组件拆分势必就会有多个组件协作,那么父子、兄弟、任意组件之间的数据传递和操作就需要这些技术来解决。


2. 合理拆分


合理拆分其实并没有一个严格意义的要求,对我来说重点是2个:代码结构更清晰、复用代码。


举例说明一下,看图。


1268169-20220417155304153-1583121926.png


图中是接口定义的编辑页面,本来都是在一个文件里的一大坨,经过拆分之后:


  • 红色框作为一个最外层组件,里面包含了其他组件。


  • 3个绿色框又对应着3个子组件。


  • 而在请求参数部分,我又进一步的拆分了子组件(黄色框)。


后续如果有新增或者其他改动,代码结构一目了然,很容易进行维护。


而在实战中遵循了这么一个组件化编码的流程


  1. 先拆分出静态组件,按不同功能拆分,命名合理,如果你的拆分觉得不好取名字,大概率拆的不合理。
  2. 再实现动态组件,看下这个组件是一个在用还是会重复使用,决定好数据要存放的位置。
  3. 最后实现交互,可以从绑定事件开始。


一步步来,中间也踩了不少坑,毕竟将知识的简单demo应用到项目实战中,还是要花点精力去琢磨的。


三、关于项目


这个项目后续还是会继续更新下去,只是时间并不固定。作为练手项目,前后端的开发都可以得到一定的锻炼。


不过近期因为工作上用到 react,所以现在优先在肝这方面的知识,有兴趣的小伙伴也可以去了解下 react、antd pro 等。


源码已经更新到了github,有兴趣的童鞋可以公众号后台回复【测试平台】获取地址以及文章系列合集,也可以后台回复添加我,互相交流。

相关文章
|
21天前
|
数据采集 机器学习/深度学习 大数据
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
这篇文章详细介绍了C3D架构在行为检测领域的应用,包括训练和测试步骤,使用UCF101数据集进行演示。
28 1
行为检测代码(一):超详细介绍C3D架构训练+测试步骤
|
23天前
|
机器学习/深度学习 人工智能 监控
提升软件质量的关键路径:高效测试策略与实践在软件开发的宇宙中,每一行代码都如同星辰般璀璨,而将这些星辰编织成星系的过程,则依赖于严谨而高效的测试策略。本文将引领读者探索软件测试的奥秘,揭示如何通过精心设计的测试方案,不仅提升软件的性能与稳定性,还能加速产品上市的步伐,最终实现质量与效率的双重飞跃。
在软件工程的浩瀚星海中,测试不仅是发现缺陷的放大镜,更是保障软件质量的坚固防线。本文旨在探讨一种高效且创新的软件测试策略框架,它融合了传统方法的精髓与现代技术的突破,旨在为软件开发团队提供一套系统化、可执行性强的测试指引。我们将从测试规划的起点出发,沿着测试设计、执行、反馈再到持续优化的轨迹,逐步展开论述。每一步都强调实用性与前瞻性相结合,确保测试活动能够紧跟软件开发的步伐,及时适应变化,有效应对各种挑战。
|
22天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。
【10月更文挑战第7天】随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 来检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这两个工具,可以确保代码风格一致,提升团队协作效率和代码质量。
179 2
|
22天前
|
前端开发 JavaScript 开发者
前端开发中的组件化设计与性能优化
【10月更文挑战第7天】前端开发中的组件化设计与性能优化
31 0
|
18天前
|
JavaScript 前端开发 API
Vue.js:现代前端开发的强大框架
【10月更文挑战第11天】Vue.js:现代前端开发的强大框架
62 41
|
2天前
|
JavaScript 测试技术 API
Jest进阶:测试 Vue 组件
Jest进阶:测试 Vue 组件
|
4天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍了如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码,包括安装插件、配置 ESLint 和 Prettier 以及 VSCode 设置的具体步骤。通过这些工具,可以显著提升编码效率和代码质量。
55 4
|
2天前
|
JavaScript 前端开发 开发者
如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码
随着前端开发技术的快速发展,代码规范和格式化工具变得尤为重要。本文介绍如何在 Visual Studio Code (VSCode) 中使用 ESLint 和 Prettier 检查代码规范并自动格式化 Vue.js 代码。通过安装和配置这些工具,可以确保代码风格一致,提高代码质量和可读性。
10 1
|
15天前
|
人工智能 监控 测试技术
云应用开发平台测试
云应用开发平台测试
31 2
|
17天前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习:求和案例_纯vue版代码
12 1