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

目录
  • 基于 springboot+vue 的测试平台开发
    • 一、为什么重构
    • 二、如何拆分
      • 1. 补充对应知识
      • 2. 合理拆分
    • 三、关于项目

基于 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 等。

前端：

https://github.com/wessonlan/bloomtest-web

后端

https://github.com/wessonlan/bloomtest-backend

以上就是测试平台开发vue组件化重构前端代码的详细内容，更多关于vue组件化重构的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • 深入理解Vue.js轻量高效的前端组件化方案

    Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. Vue.js 是我在2014年2月开源的一个前端开发库,通过简洁的 API 提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在 GitHub上已经有5000+的star.本文将从各方面对Vue.js做一个深入的介绍. 开发初衷

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • 使用vue重构资讯页面的实例代码解析

    从我接手到将这个页面代码重构前,一直都还是使用angular1的代码去做的,需求来了也是用angular去实现:作为一个憧憬新技术的前端,怎么忍受得了现在还在使用这么有历史感的框架,所以,以前就一直在酝酿着如何将angular重构成vue. 代码结构设计 这个资讯项目代码整体都是使用angular.js来去实现的,而此次想重构的资讯详情页面只是其中的一个页面,所以新建了一个文件夹 /newApp .作为以后新技术的文件夹,以后使用vue技术的都放在这个文件夹下,区别于原先文件夹 /app . 在

  • Map.vue基于百度地图组件重构笔记分享

    Map.vue是为iview组件开发的一个基于百度地图的组件,实现了点是否在框内的判断,画多边形覆盖物,添加自定义富文本标记物等功能. 第一步:重构自定义的富文本对象,设置为全局对象. 原代码的富文本对象是声明在addResource这个方法里面的,代码结构非常复杂,在beforeCreate这个钩子函数里面申明为全局的,就可以多次复用,不需要重复声明来了, 否则,每调用一次paintPolygon方法,都要重新声明一次,非常麻烦,效率太低下. 原代码是在父组件中处理好这个富文本对象需要的数据,

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

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

    目录 基于 springboot+vue 的测试平台开发 一.为什么重构 二.如何拆分 1. 补充对应知识 2. 合理拆分 三.关于项目 基于 springboot+vue 的测试平台开发 继续更新(人在魔都 T_T). 这期其实并不是一个详细的开发过程记录,主要还是针对本次前端重构来聊聊几个关注点. 目前重构的总进度在80%,重构完的页面没什么变化,再回顾一下. 一.为什么重构 目前项目的功能开发重点还是在接口管理这一大块,内容多,任务重,可当我着手准备继续开发新功能的时候发现了个重大的问题.

  • springboot vue测试平台开发调通前后端环境实现登录

    springboot vue测试平台开发调通前后端环境实现登录

    目录 基于 springboot+vue的测试平台开发 一.前端环境搭建 快速安装 二.后端环境搭建 创建应用 配置 application.properties 三.实现登录 1. mysql 建表 2. 后端-实现 /login 接口 3. 前端-修改代码实现登录 4. 解决跨域 5. 后端-实现 /useInfo 接口 6. 后端-实现 /logout 接口 四.小结 基于 springboot+vue的测试平台开发 一.前端环境搭建 在前端框架vue-element-admin这个项目中

  • Vue组件化开发思考

    Vue组件化开发思考

    一般说到组件,我首先想到的是弹窗,其他就大脑空白了. 因为觉得这个是在项目中最常用的功能,提取出来方便复用的才是组件- 然而我才发现这个想法是有问题的. 我发觉可能从意识上把Vue的组件和UI库的组件(弹窗之类的)混淆了... 缘起于最近的一个表单开发,页面上有2个是联动菜单的选项. 首先想到的是,这个样式和选择地址的那个联动菜单,完全一样哈- (废话,同一个项目 当然要保持ui风格的相同啊!) 不过差别在于 我这个是 一个1级 一个2级, 地址那个是4级的. 然后我就想着把那个地址的组件引进来

  • Vue组件化开发之通用型弹出框的实现

    本文主要分享关于组件化开发的理解,让刚入门的小伙伴少走一些弯路,提高开发效率,作者本人也是新手,如有不当之处,请大佬指出,感谢. 相信很多刚入门的小伙伴,经常会写很多重复的代码,而这些代码一般情况下也都是大同小异,在这种情况下,如何让开发和学习变得更加高效,组件化的思想就显得尤为重要.这里通过设计一个简单的弹出框,给小伙伴们分享组件化的应用. 组件&组件化 组件化是对某些可以进行复用的功能进行封装的标准化工作.组件一般会内含自身的内部UI元素.样式和JS逻辑代码,它可以很方便的在应用的任何地方进

  • Vue组件化开发的必备技能之组件递归

    Vue组件化开发的必备技能之组件递归

    目录 前言 效果展示 渲染完整数据 效果如下 获取节点数据 效果如下 动态展开收起 效果如下 完整代码 效果如下 总结 前言 不知道大家有没遇到过这样的场景:渲染列表数据的时候,列表的子项还是列表.如果层级少尚且可以用几个for循环搞定,但是层级多或者层级不确定就有点无从下手了. 其实这就是树形结构数据,像常见的组织架构图,文件夹目录,导航菜单等都属于这种结构.很多组件库都带有树形组件,但往往样式不是我们想要的,改起来也非常的费劲.那么,如何自己渲染这些数据呢?答案就是——组件递归! 效果展示

  • 基于Vue组件化的日期联动选择器功能的实现代码

    基于Vue组件化的日期联动选择器功能的实现代码

    我们的社区前端工程用的是element组件库,后台管理系统用的是iview,组件库都很棒,但是日期.时间选择器没有那种" 年份 - 月份 -天数 " 联动选择的组件.虽然两个组件库给出的相关组件也很棒,但是有时候确实不是太好用,不太明白为什么很多组件库都抛弃了日期联动选择.因此考虑自己动手做一个. 将时间戳转换成日期格式 // timestamp 为时间戳 new Date(timestamp) //获取到时间标砖对象,如:Sun Sep 02 2018 00:00:00 GMT+08

  • Vue组件化常用方法之组件传值与通信

    相关知识点 父组件传值到子组件 子组件传值到父组件 兄弟组件之间传值 祖代和后代之间传值 任意两个组件之间传值 父组件传值到子组件 父组件传值到子组件基本方法有三个,分别为: 属性 props 引用 $refs 子元素 $children 日常开发中,我们用到 props 和 $refs 频率比较多,$children 相对较少些(我就没怎么使用过~). 属性 props 在父组件中添加属性,在子组件中接收使用,例如: 父组件: <HelloWorld msg="Welcome to Yo

  • Vue 组件化基本使用详情

    Vue 组件化基本使用详情

    目录 1.什么叫做组件化 2.基本使用 前言: 有时候有一组html结构的代码,并且这个上面可能还绑定了事件.然后这段代码可能有多个地方都被使用到了,如果都是拷贝来拷贝去,很多代码都是重复的,包括事件部分的代码都是重复的.那么这时候我们就可以把这些代码封装成一个组件,以后在使用的时候就跟使用普通的html元素一样,拿过来用就可以了. 1.什么叫做组件化 vue.js 有两大法宝,一个是数据驱动,另一个就是组件化,那么问题来了,什么叫做组件化,为什么要组件化?接下来我就针对这两个问题一一解答,所谓

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • Vue组件化(ref,props, mixin,.插件)详解

    Vue组件化(ref,props, mixin,.插件)详解

    目录 1.ref属性 2.props配置项 props总结 3.mixin混入 3.1.局部混入 3.2.全局混入 mixin混入总结 4.插件 插件总结 1.ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc) 使用方式: 打标识:<h1 ref="xxx">.....</h1>或 <School ref="xxx"></Schoo

随机推荐