随笔分类 - 业务相关
项目中遇到难点的解决方法
springboot配置统一返回结果类
摘要：目录结构： Result类： package com.xxxx.common.result; import lombok.Data; @Data public class Result<T> { //状态码 private Integer code; //信息 private String mess
阅读全文
JS判断对象是否发生变化，常用于监听页面表单是否修改并给出保存提示
摘要：本文主要封装方法，实现用户离开表单编辑页面时弹出提示框，若表单数据发生变化，则提示用户是否保存当前页面的信息，如图： 封装方法： 1 /** 2 * 比较俩个对象之间的差异，项目中多处用到监听表单数据是否改动，故封装此方法 3 * 如果数据改动，则返回新旧对象记录改动字段的新旧值 4 * 5 * b
阅读全文
el-cascader组件根据最后一级向上找到父级并设置默认值
摘要：vue + elementUI项目中，el-cascader级联选择器使用频率非常高，一些基本使用方法可以参考elementUI官方文档，本文主要研究当接口只返回最后一级id时，如何向上找出所有父级数据，并设置组件el-cascader的默认值！ 准备测试数据：方位、省、市区级联选择。 var li
阅读全文
前端性能优化之控制请求并发数
摘要：在我们平时开发中，经常会遇到页面数据初始化时，频繁调同一个接口的情况。比如echarts项目中，一个页面可能会有几十张图表，如果一个接口返回所有图表数据的话，会造成用户过长的等待时间，再者过多图表同时渲染，也会给页面增加压力，造成卡顿的现象。 我们通常会让每个图表单独调一个接口，入参不同，这样更有利
阅读全文
js俩个大数之和
摘要：js中，对整数范围是有限制的，超过安全范围会发生精度丢失，无法正常计算，常见的解决方案就是转成字符串处理，代码如下： // 俩个大数相加 var a = '9998995523412341234123412441123412342', b = '000224533213412342314234142
阅读全文
SharedWorker实现多标签页联动计时器
摘要：web workers对于每个前端开发者并不陌生，在mdn中的定义：Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用XMLHttpRequest执行 I/O (尽管responseXML和channel属性总是为空)。一旦
阅读全文
vue+element表单校验封装
摘要：vue+element ui技术栈的小伙伴们，在平时项目里，特别是OA项目，会大量用到表单以及表单校验。经常会处理一些必填项，对它们是否有值的判断显得有些繁琐和臃肿，本文将封装方法，解决该问题。 最近业务中频繁增加必填项，之前的常规做法就是在提交、修改或者其他操作之前，判断必填项是否填写，做个拦截：
阅读全文
vue自定义指令防抖和节流
摘要：函数防抖和节流在平时业务中经常会用到，一般都是调用已经封装好的方法，下面介绍一种新的思路：vue自定义指令！ 下面这段代码以防抖为例，el-input标签直接写上v-debounce,传入arg参数：search和expression表达式：‘input’,1000。 seach为需要防抖的函数，'
阅读全文
vue项目实现文件下载进度条
摘要：平时业务中下载文件方式常见的有俩种： 第一种，直接访问服务器的文件地址，自动下载文件； 第二种 ，服务器返回blob文件流，再对文件流进行处理和下载。 一般小文件适用于第一种下载方案，不占用过多服务器资源，而对于体积庞大的文件，常常使用文件流的方式进行传输，如图： 文件流传输成功后通过代码可以立即发
阅读全文
正则处理手机号码格式
摘要：正则生成形如xxx xxxx xxxx格式的手机号码（中间数字自动追加空格）： 监听输入事件，对输入的值用正则处理： 1.过滤输入的字符，去掉非数字 var a = '13177wsdrfs778888sdfasdf999asdfasdfasdf9' a.replace(/\D+/g, '') //
阅读全文
vue2在css中使用js变量
摘要：本篇将实现vue2在css中使用js变量。 下图是el-tab组件，由上面的tab头和下面的内容区构成，当内容区过长的时候，外层固定高度的盒子会出现滚动条（设置了overflow: auto;），tab头部会向上滚动而消失： 滚动前： 滚动后： 现在的需求是，tab头部需要固定在最上方，不随滚动条滚
阅读全文
js树形数据结构的扁平化
摘要：前面我们封装了一维数组(具备树形结构相关属性)处理成树形结构的方法:https://www.cnblogs.com/coder--wang/p/15013664.html 接下来我们来一波反向操作，封装一个可以将树形结构的数据扁平化的方法。这种场景在业务中还是很常见的，比如一个级联选择器，有时候你需
阅读全文
element ui table表头动态筛选条件
摘要：本文主要实现：根据el-table表格数据自动生成表头筛选条件的方法，可根据表格数据动态调整。 el-table表格的表头增加筛选功能，大家平时都是怎么实现的呢？先看看官方文档的例子： 1 <template> 2 <el-button @click="resetDateFilter">清除日期过滤
阅读全文
前端js重组树形结构数据方法封装
摘要：不知道大家平时工作中，有没有遇到这样一种情况：后端接口返回的数据，全都是一维的数组，都是平铺直叙式的数据，业务需求却要你实现树形结构的功能。那么，针对这种情况该怎么办呢？是跟后台好好沟通一下呢，还是沟通一下呢 :） 下面我将封装一种重组树形结构数据的方法，希望能够给大家带来一点帮助！ 1 /** 2
阅读全文
vue实现menu菜单懒加载
摘要：本文将在vue+element ui项目中简单实现menu菜单的懒加载。 最近接到这样的需求：菜单的选项不要固定的，而是下一级菜单选项需要根据上级菜单调接口来获取。what? 这不就是懒加载吗？翻了一遍element ui文档，并没有找到menu菜单的懒加载，于是乎就自己手写一个啦。 首先最外层，子
阅读全文
