vvv3171071的博客

接口是 MyBatis-Plus 提供的一个拦截器接口，用于实现一些常用的 SQL 处理逻辑。例如某个组件运作在多系统的平台上，不同系统需要隔离，于是可以通过这个拦截器接口，给每一条要执行的sql末尾拼接一个的条件来实现不同系统只能查到对应系统ID的数据。而今天项目遇到的一个bug情景如下：所有的sql原本都要通过拦截器拼接这个校验系统ID的条件，但其中一条sql因为要查整个数据库中的数据是否有重复，所以就要去掉这个拼接的条件进而查询整个库表。

直入主题，工具类来！

Supplier 是 Java 8 引入的一个函数式接口，它属于 java.util.function 包。Supplier 接口表示一个不接受任何参数但返回某种类型结果值的函数。它定义了一个 get() 方法，该方法没有参数，但返回一个泛型 T 类型的值。在某些情况下，你可能希望只有在真正需要结果时才进行计算或生成值。使用 Supplier，你可以将计算或生成值的逻辑封装在 get() 方法中，并在需要时调用它。

那么问题产生的原因也找到了，是连接池创建的连接里，执行插入数据的sql语句没有提交，导致线程结束后直接将连接释放了，所以sleep期间在可视化工具上也看不到插入的数据。改为自动提交后就能看到了。所以我们将代码改成SqlSession session = sessionFactory.openSession(true)，让其在插入数据或者回滚删除数据时自动提交。显示表中有两行数据，该表也设置了主键和唯一索引。点进表里看却没有数据。

直接上干货：例如一个叫xxx的项目，yml文件里加上这段创一个Configuration类放表名和Mapper看到这聪明的你应该已经知道后续该怎么做了

练手项目中实现发表文章时检测文章是否带有敏感词，以及对所有敏感词的一键过滤功能。

看了好多相关的文章都没有完全贴合选用Vue3+nuxt+ts框架的，也不太靠谱，只好自己踩坑实现了首先去高德开放平台用自己的账号申请一个key，位置如下，申请好后保存好生成的key我们使用，一个高德地图2.0版本的vue3对应封装由于我们使用了nuxt框架，组件库内部使用的插件会使用部分特殊的对象，比如process、window。因此在使用时需要根据Nuxt要求处理加载顺序和对象的默认值处理。在根目录的utils文件夹下创建文件，根据自己项目的规范在其他目录创建也可以在nuxt配置文件。

demo写到这步已经可以用了，注意传参的String pattern是要带*号的，比如我想查user_info:1、user_info:2等等数据，则匹配user_info:前缀（redis的key最好用枚举类+定义常量），此时传参的pattern即为"Keys会引发Redis锁（数据过多一直查询处理），并且增加Redis的CPU占用。但此demo会有一个问题：没法移动cursor，也只能scan一次，并且容易导致redis链接报错。当需要扫描key，匹配出自己需要的key时，可以使用 scan 命令。

自从成为全栈后感觉思考问题和找bug的视野更广了，写代码也觉得越来越有趣，越来越顺畅。相信自己选择的路，即使它不一定对，只要努力让自己不后悔就好。祝大家学有所成，劳有所获，加油~

如果你的前端项目技术栈使用的是Vue3+nuxt+ts，并且老大让你集成一下那个传说中非常丝滑的TinyMCE富文本编辑器，那么恭喜你和我一样中大奖了。网上找了好久都没有找到同类型且靠谱的实现方案，于是就自己着手研究文档并踩着坑解决了。TinyMCE中文文档中文手册懒得看过程的直接跳到最下方复制组件源码后按自己项目微调即可。

在项目每次进行版本迭代的晚上，把开发功能完善的UAT代码上传到PRD，然后在生产环境上让测试和项目经理再仔仔细细测过一遍，确定该版本迭代ok了，没问题了才能下班。不同的公司或项目会启用的环境也有所不同，例如某公司某项目，个人在DEV环境开发，然后初版开发完成后前后端上传SIT进行联调，联调觉得没问题后上传UAT给测试或项目经理进行验收，测出BUG后继续重复前三轮操作。

也就是说Lombok与Spring针对这种首字母小写，第二个字母大写的对象的解析是不同的，而这也就自然而然影响到默认的Jackson的解析，导致返回给前端的属性名称不是我们预期中的名称，则前端判断取得的值为null，继而报错。JAVA类里定义成员变量使用首字母小写，第二个字母大写。

本次需求中UI提供的设计图的一个模块：开发页面过程中写该模块样式时还原出的效果：实现方法：在的里进行配置：2、tooltip的文本框：这部分没有特供的配置属性，直接用配合超文本的形式进行样式加工：这边值得一提的是CSS中的backdrop-filter这个属性，在案例中实现了一个模糊滤镜的效果该属性的各项配置效果具体可参考该文章：css的backdrop-filter未来有时间再好好研究下这个属性并将经验输出成文章分享给大家~THX！

对于watch的使用大家都还是比较熟悉的，我们平时使用的比较多的就是watch一个变量，偶尔还是使用deep：true来监听对象，但是immediate的使用就相对比较少，之前有遇到过这个属性，而且也查找过资料，但是一直都是有点懵懵的，要深刻去理解他，我们还是主要是从它的作用，需要在那种情境下使用它。

@mouseenter与@mouseleave。适用于鼠标移入移出时该块整体元素只执行一次事件的场景，例如自行封装的多层级组件。

算是一个比较偏门的需求吧，具体UED给的设计图效果如下：看起来非常简单，但实际实现起来……也确实简单，就是步骤多一点~我们知道Echarts提供的markPoint标注最大值和最小值是会有一个水滴图案的：首先要做的就是隐藏这个水滴图案。但如果将markPoint.symbol设为’none’，会将label文本一同去除。所以思路应为将水滴图案的颜色置为透明。

无论是什么层级的组件之间互相调用，掌握好ref后都是万变不离其宗。来练练手吧。

选择初始时间后，第二个选择的时间前后不能超过初始时间的一个月。且此时下拉框变成禁用状态。选好起始时间和结束时间后，下拉框与所有禁止选用的日期限制全部放开，以供下一轮的正常选择。例如：点击7月15日后，在8月14日往后的日期全部禁止选中。7月15日前一个月的6月15日之前的日期也全部禁止选中。未选择时间时，最初选择时间不能超过今天。...

公司电脑最近因为某些原因重装了，那么常用的软件也需要重装，其中之一就是SourceTree。 安装过程中有一步是需要登录BITBUCKET，要知道很多公司的办公环境是不允许访问外网的，那么我们应该如何跳过这一步骤呢？ 百度搜到的结果几乎都只有第一步创建accounts.json文件，然而操作完后并不好使，重启软件依旧卡在登录界面。而我这边执行完第二步后终于能跳过登录BITBUCKET的界面并可以正常使用了，接下来就从头分享这一系列的操作经验

windows系统下的SourceTree在不使用SSH密钥的情况下连接远程仓库的方法。网上都是MAC的，我觉得必须自己站出来写一篇了

工作中遇到的一个需求完成过程：某页面导入数据超过50条会卡顿，然后产品经理让我限制成只允许导入50条以内的数据，否则报错。改完发版到正式环境后，用户觉得要把文档拆分成好几个太麻烦了，比如要导入300多条数据，就要把原excel文件拆成7个再一份一份导入，用户体验很差。于是这次迭代让我解除只允许导入50条的限制，想办法给导入加个进度条，让用户在等待的冗长时间里能感受到导入正在进行。但是问题来了，导入是调的后端接口，只有在开始执行时进入pending状态，然后一直pending到请求成功或失败后才会返回结

简单记录一下，如果未来再遇到相同情况就可以直接复制使用了THX

多用对象少判断 😃

vuex，虽说是一个可能即将要被淘汰的状态管理模式，但既然项目中遇到了，还是提出来记录一下开发思路，毕竟万变不离其宗~首先用户信息是从后端接口获取到的，我们将要调用的获取用户信息接口封装成方法放在api文件夹下的index.js或另开一个user.js文件，例如：然后我们来到vuex的store文件夹里，vuex的配置就不细说了，看官方文档或百度配置成自己习惯的方式即可，demo放出来仅供参考一下——在store文件夹下创建modules文件夹，分模块存放，新建我们的user.js文件用于存放用户权限信息

$confirm，你也不想让ElementUI蒙羞吧？那就听话，让我使使！

render-header就决定是你了

el-tree默认的focus样式颜色太浅，有时候电脑亮度低或者换个有色差的屏幕，根本看不出来哪一个节点被选中了。而且只有焦点在el-tree时才有颜色变化，鼠标在别的地方点一下就没了，这样会让用户忘记自己之前选的是哪个节点，很不方便。第一步：给el-tree组件标签加上属性highlight-current开启高亮加了这个属性，选中的节点的样式才会有highlight-current类，这样接下来才能改变选中的节点的样式。第二步：在css中修改高亮样式一个小tip：这里建议是给该页面文件最.

前提：时间选择器绑定的值类型取Date，当选择时间发生改变时，执行paramsChange方法，在该方法开头验证所选时间是否正确，若正确则进行接口请求，反之弹出错误提示信息。时间显示维度为日时，正常查询显示如下：若所选时间范围超过30天，则弹出错误提示信息：方法一：用时间戳验证时间范围 paramsChange(row) { this.params = { ...this.params, ...row, // 因为时间维度选的是

在工作中遇到的一些项目上有意思、实用性强、复用性广的开发思路

看了各个帖子的描述，还是未能参透$在vue中所想发挥的本意，将一些一知半解的理解摘抄下来，顺带附上自己常见的用法，以加深理解和记忆。摘抄这些只是Vue的命名规则，为了区分普通变量属性，避免我们自己声明或者添加自定义属性导致覆盖$event 是 vue 提供的传递实践的参数。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。$是在vue中所有实例中都可用的一个简单约定，这样做会避免和已被定义的数据，方法，计算属性产生冲突。另一个好问题

文章转自：思否链接项目中用到的地方：vue.config.js里的chainWebpack：前言在项目开发中我们难免碰到需要对webpack配置更改的情况，今天就主要来讲一下在vue.config.js中对一些配置的更改，简单介绍一下loader的使用；用configureWebpack简单的配置；用chainWebpack做高级配置；包括对loader的添加，修改；以及插件的配置1、首先简单介绍一下webpack中loader的简单使用：loader：是webpack用来预处理模块.

0到100之间最多允许包含2位小数多用于百分数场景：^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/^([0-9]{1,2}$)|(^[0-9]{1,2}\.[0-9]{1,2}$)|100$/.test(value)测试结果：0，1，99，100 true0.11，10.00，99.99 true-1，0.111，100.00 false好家伙，现在优快云字数少还被提示影响文章质量和创作推广了？那再放一段最近做的一个导入功能中判断百分

业务场景：渲染一个这样框框的数据，html代码如下：其中meters数组是有初始数据的，而statusData初始是个空对象：在该情况下，页面DOM肯定是在我请求到statusData数据之前就已渲染完成了，而在我拿到statusData后，页面上的数据也未产生变化。statusData内容：楼主首先想到的是用$set代替直接赋值，然而马上发现了问题：我statusData原本就是个空数组，没有初始属性，要怎么用$set呢？那就得在使用$set前给对象一个默认值，在data里给statu

promise解决异步

今天在项目中遇到一个异步问题，出现原因如下：我在getEnergeHouseDanhao这个函数中加入了一个请求，该函数是获取某机器单耗，但要请求四次分别去获取年单耗、月单耗、日单耗、小时单耗然而执行后因为请求是异步的，此时打印datas拿不到在请求中push进去的数组，在设置定时器才能拿到数组。然而我们无法确定接口的相应时间，用定时器解决显然是存在很大风险的。那么该如何解决类似的问题呢？可以使用promise.all解决异步。首先简单且通俗易懂地介绍一下promise.all是什么，具体

2021.12.24字符串转数字：若字符串内容都是数字，可以使用强制转换方法Number()；若字符串内有除数字外的字符，用该方法会返回NaN。若字符串内容有数字+字母，可以使用parseInt或parseFloat，例如：var s = '234string';　　　parseInt(s);　//234　　　parseFloat(s); //234.0...

本篇文章比较浅显，主要写给想要快速直接上手数据可视化带Echarts图表项目的新人们。1、实例化图表：setOption(Object option)Object类型的参数 option，表示图表数据结构 ，形如：var option = { title: { text: "我的第一个ECharts图表示例" }, tooltip: {

①. 首先介绍一下window.onresize，这个方法可以监听窗口变化。将window.onresize写在mounted中，在窗口变化时就会执行它的内容。如： mounted() { window.onresize = () => { console.log("窗口发生变化时会打印该条"); }; },②. 接下来，只要在window.onresize中写入重新绘制echarts的逻辑就OK了echarts自带resize这个API，即.

这篇是深摸面试题的第一期，该系列主要是博主在干完手头上的工作or页面写完而数据接口还没给or项目稳定没需求时摸鱼看面试题，把一些较为简单的面试题深入渗透并且综合整理而开的专栏。因为主要是给自己未来复习用的，就不会花太多功夫排版了哈~1、首先说说浅拷贝与深拷贝的区别作者：Mike丶https://www.cnblogs.com/mikeCao/p/8710837.html深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。假设B复制了A，修改A的时候，看B是否发生变化：

普通的vue项目使用this.$router.go(-1)就能同时实现后退+刷新了。但是在vue-element-admin或其他复杂的项目中（尤其是后台管理系统），有独特的路由跳转配置，比如在vue-element-admin中使用this.$router.go(-1)，原页面的数据并不会刷新，因为配置了快捷导航(标签栏导航)该方案运用了 keep-alive 和 router-view 的结合，所以跳转路由后原页面的数据仍然存活。解决方案：①、首先，找到页面恢复初始化数据的方法，我采用的是以