当前位置： 首页 > news >正文

测试平台开发vue组件化重构前端代码

news 2026/2/9 12:29:37

基于 springboot+vue 的测试平台开发

继续更新（人在魔都 T_T）。

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

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

一、为什么重构

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

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

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

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

二、如何拆分

这部分主要有 2 个部分。

1. 补充对应知识

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

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

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

  • vue 生命周期
  • vue 组件基础知识
  • 组件间通信技术
  • vuex

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

2. 合理拆分

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

举例说明一下，看图。

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

  • 红色框作为一个最外层组件，里面包含了其他组件。
  • 3个绿色框又对应着3个子组件。
  • 而在请求参数部分，我又进一步的拆分了子组件（黄色框）。

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

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

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

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

三、关于项目

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

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

​现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：485187702【暗号：csdn11】

最后感谢每一个认真阅读我文章的人，看着粉丝一路的上涨和关注，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走！ 希望能帮助到你！【100%无套路免费领取】

相关文章：

测试平台开发vue组件化重构前端代码

基于 springbootvue 的测试平台开发 继续更新（人在魔都 T_T）。 这期其实并不是一个详细的开发过程记录，主要还是针对本次前端重构来聊聊几个关注点。 目前重构的总进度在80%，重构完的页面没什么变化，再回顾一下。 一…...

编程日记 2024/1/10 19:51:05

龍运当头--html做一个中国火龙祝大家龙年大吉

🐉效果展示 🐉HTML展示 <body> <!-- partial:index.partial.html --> <svg><defs><g id=...

编程日记 2024/1/10 19:49:02

Dockerfile语法和简单镜像构建

Dockerfile是一个用于定义Docker镜像的文本文件&#xff0c;包含了一系列的指令和参数&#xff0c;用于指示Docker在构建镜像时应该执行哪些操作&#xff0c;例如基于哪个基础镜像、复制哪些文件到镜像中、运行哪些命令等。 Dockerfile文件的内容主要有几个部分组成&#xff0c…...

编程日记 2024/1/10 19:46:00

uniapp使用wxml-to-canvas开发小程序保存canvas图片

微信小程序官方解决方案&#xff1a;wxml-to-canvas 使用wxml-to-canvas要知道一些前提条件 1、只能画view&#xff0c;text&#xff0c;image 2、每个元素必须要设置宽高 3、默认是flex布局&#xff0c;可以通过flexDirection: "column"来改变排列方式 4、文字 必…...

编程日记 2024/1/10 19:44:59

关于数据库切换的麻烦

背景介绍 现项目使用了两个数据源&#xff0c;分别为A、B&#xff0c;两个数据库的数据结构并不相同&#xff0c;数据库A是用来做查询一些基本信息的&#xff0c;数据库B是用来保留业务操作数据的。后端是在mapper层用DS注解来区分哪些地方用数据库A&#xff0c;而哪些地方用数…...

编程日记 2024/1/10 19:37:51

Qt/QML编程学习之心得：Linux下读写文件File（24）

在Linux嵌入式系统中，经常会使用Qt来读写一个文件，判断一个文件是否存在，具体如何实现呢？ 首先，要使用linux系统中相关的头文件： #include <unistd.h> #include <stdio.h> #include <stdlib.h> 其次，判断路径是否存在， if(!dir.exists()){mkdir(…...

编程日记 2024/1/10 19:34:48

【Vue2+3入门到实战】（22）VUE3之组合式API - setup、reactive和ref函数、computed、watch、生命周期函数详细讲解

目录 一、组合式API - setup选项1. setup选项的写法和执行时机2. setup中写代码的特点3. <script setup>语法糖 二、组合式API - reactive和ref函数1. reactive2. ref3. reactive 对比 ref 三、组合式API - computed四、组合式API - watch1. 侦听单个数据2. 侦听多个数据…...

编程日记 2024/1/10 19:31:45

如何在互联网上找到你想要的数据？

互联网时代&#xff0c;信息爆炸&#xff0c;怎么在网上查到到自己想要的信息已经变难了。毕竟经常搜索的内容前几页都是广告。 那么如何在大量的广告和垃圾信息中获取到自己想要的信息呢? 首先&#xff0c;明确自己的需求&#xff0c;比如你想找哪个方面的数据&#xff0c;…...

编程日记 2024/1/10 19:30:44

揭秘淘宝商品详情API如何助力电商创新发展

淘宝商品详情API是淘宝开放平台提供的一种数据接口服务&#xff0c;能够获取到淘宝网商品详情的各种信息&#xff0c;包括商品标题、价格、销量、评价等。通过淘宝商品详情API&#xff0c;开发者可以轻松地获取到这些数据&#xff0c;并利用这些数据进行商业分析和应用开发。 …...

编程日记 2024/1/10 19:29:43

vue element plus Space 间距

虽然我们拥有 Divider 组件&#xff0c;但很多时候我们需要不是一个被 Divider 组件 分割开的页面结构&#xff0c;因此我们会重复的使用很多的 Divider 组件&#xff0c;这在我们的开发效率上造成了一定的困扰。 间距组件就是为了解决这种困扰应运而生的。 基础用法# 最基础…...

编程日记 2024/1/10 19:28:42

【驱动序列】C#获取电脑硬件之CPU信息，以及它都有那些品牌

欢迎来到《小5讲堂》&#xff0c;大家好&#xff0c;我是全栈小5。 这是是《驱动序列》文章&#xff0c;每篇文章将以博主理解的角度展开讲解&#xff0c; 特别是针对知识点的概念进行叙说&#xff0c;大部分文章将会对这些概念进行实际例子验证&#xff0c;以此达到加深对知识…...

编程日记 2024/1/10 19:27:41

目标检测-One Stage-YOLO v3

文章目录 前言一、YOLO v3的网络结构和流程二、YOLO v3的创新点总结 前言 根据前文目标检测-One Stage-YOLOv2可以看出YOLOv2的速度和精度都有相当程度的提升&#xff0c;但是精度仍较低&#xff0c;YOLO v3基于一些先进的结构和思想对YOLO v2做了一些改进。 提示&#xff1a;…...

编程日记 2024/1/10 19:26:40

安泰ATA-4014高压功率放大器在传感器脉冲涡流检测中的应用

传感器在工程领域起着至关重要的作用&#xff0c;能够实时获取各种物理量的信息。而功率放大器作为传感器信号处理的重要组成部分&#xff0c;广泛应用于各种测量和控制系统中。本文将探讨功率放大器在这一领域的重要性和作用。 首先&#xff0c;了解传感器脉冲涡流检测的基本原…...

编程日记 2024/1/10 19:24:39

Axure全面指南：正确打开并高效使用的步骤！

AxureRP是目前流行的设计精美的用户界面和交互软件。AxureRP根据其应用领域提供了一组丰富的UI控制。作为Axure的国内替代品&#xff0c;即时设计可以在线协作&#xff0c;浏览器可以在无需下载客户端的情况下打开和使用。如果以前使用Axure&#xff0c;很容易切换到即时设计。…...

编程日记 2024/1/10 19:23:37

ts axios 指定返回值类型，返回数据类型不确定该怎么办 typescript

ts axios 指定返回值类型&#xff0c;返回数据类型不确定该怎么办 typescript 转到 ts 以来&#xff0c;一直有个问题困扰着我&#xff0c;就是每次用 axios 获取数据时&#xff0c;返回值 res 的类型都不能确定&#xff0c;这就导致编辑器一直提示我&#xff1a; 原因 原因是…...

编程日记 2024/1/10 19:21:36

判断是否是json字符串

一、在isJson.js文件里创建一个isJson类并抛出 /*** isJson 类用于判断一个字符串是否为有效的 JSON 字符串。* class isJson* param {string} str - 要判断的字符串。* returns {boolean} 如果字符串是有效的 JSON 字符串&#xff0c;则返回 true&#xff1b;否则返回 false。…...

编程日记 2024/1/10 19:20:35

SpringBoot集成Minio（接上文）

如果启动项目出现下面错误&#xff0c;把minio的版本更换为低版本的&#xff0c;我最初用的是8.5.7版本的出现下面错误&#xff0c;后面一直调低版本发现8.2.2&#xff0c;8.3.0都是可以的。&#xff08;因为我需要用8.5.7的版本所以调了别的依赖的版本&#xff0c;大家可以根据…...

编程日记 2024/1/10 19:16:31

更新 torchtext 造成的torch版本不匹配的问题

更新 torchtext 造成的torch版本不匹配的问题 - pip 原来的版本配置 cuda11.6 torch-GPU 1.13.1 如果直接pip update torchtext 会卸载原来的torch然后默认安装CPU版本&#xff0c;很烦。网上的各种方法都是推荐conda.但是我一直都是pip。因此考虑pip 的解决办法。 解决办…...

编程日记 2024/1/10 19:13:28

flutter资源

开发者平台 腾讯云 https://cloud.tencent.com/developer/article/1902681 掘金 stackoverflow 个人博主 Magic旭 https://www.jianshu.com/u/f9b0b77d6038 J船长 https://juejin.cn/user/1820446987136903/posts 老孟 http://www.laomengit.com/flutter/widgets/Theme.html#t…...

编程日记 2024/1/10 19:12:27

C++经典程序

C有许多经典的程序示例&#xff0c;以下是其中一些简单但常见的例子&#xff0c;以帮助你更好地了解C语言的基本概念。 1. **Hello World程序:** cpp #include <iostream> int main() { std::cout << "Hello, World!" << std…...

编程日记 2024/1/10 19:08:24

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

编程新知 2025/8/16 3:55:30

React 第五十五节 Router 中 useAsyncError的使用详解

前言 useAsyncError 是 React Router v6.4 引入的一个钩子&#xff0c;用于处理异步操作&#xff08;如数据加载&#xff09;中的错误。下面我将详细解释其用途并提供代码示例。 一、useAsyncError 用途 处理异步错误&#xff1a;捕获在 loader 或 action 中发生的异步错误替…...

编程新知 2025/11/25 10:36:53

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

编程新知 2025/12/14 22:33:06

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

编程新知 2026/2/8 3:03:01

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

可以使用Sqliteviz这个网站免费编写sql语句&#xff0c;它能够让用户直接在浏览器内练习SQL的语法&#xff0c;不需要安装任何软件。 链接如下&#xff1a; sqliteviz 注意&#xff1a; 在转写SQL语法时&#xff0c;关键字之间有一个特定的顺序&#xff0c;这个顺序会影响到…...

编程新知 2026/2/5 4:36:53

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

编程新知 2026/1/26 2:48:53

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

编程新知 2026/1/23 11:58:06

Linux离线（zip方式）安装docker

目录 基础信息操作系统信息docker信息 安装实例安装步骤示例 遇到的问题问题1&#xff1a;修改默认工作路径启动失败问题2 找不到对应组 基础信息 操作系统信息 OS版本&#xff1a;CentOS 7 64位 内核版本&#xff1a;3.10.0 相关命令&#xff1a; uname -rcat /etc/os-rele…...

编程新知 2025/11/23 23:50:53

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

编程新知 2026/1/26 13:35:42