开发DEBUG记录
跳动的世界线
这个作者很懒,什么都没留下…
展开
-
VueQuill 富文本 快速上手开发全记录——附axios小坑 需手动重写axios以支持formdata对象
【代码】VueQuill 富文本 快速上手开发全记录。原创 2023-03-30 17:09:12 · 319 阅读 · 1 评论 -
Vant 弹出列表多选 输入框下拉选择 (可直接复制使用)
项目要做移动端,部分功能迁移过程中发现,VantUI组件库不支持原Element组件库的部分功能,例如el-select 可以做到输入的同时下拉选择 下拉多选。故需要手动改写,分享记录下代码。原创 2023-02-20 13:43:41 · 8305 阅读 · 1 评论 -
实时监控窗口分辨率实现网页等比例缩放
【代码】实时监控窗口分辨率实现网页等比例缩放。原创 2022-12-15 14:00:41 · 865 阅读 · 0 评论 -
VUE项目添加全局滚动条记录功能
思路:在离开某个路由时 保存当前页面的滚动条高度 再次访问时将滚动条高度重新赋值方式1:尝试使用VueRouter的scrollBehavior()方法调试时发现 在进入无滚动条页面返回有记录值的有滚动条页面时会出现问题。且该方法执行在页面渲染之前,弃用换其他方法。方式2:全局混入activated生命周期VueX:Main.jsAPP.vue或其他根组件原创 2022-12-07 14:04:27 · 405 阅读 · 0 评论 -
按钮抖动动画效果
按钮抖动效果原创 2022-09-29 17:56:09 · 626 阅读 · 0 评论 -
vue $set 方法的理解与使用
日常开发中,因需求需要为拿到的后台接口数据添加部分属性以适配前端组件。直接给对象添加属性(类似:let obj={};obj.prop='prop')后,发现并不能触发响应更新。后来看文档发现要通过this.$set 函数动态添加才可用://错误:obj.check = false//正确:this.$set(obj,'check', false)受 ES5 的限制,Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter,所以属原创 2021-12-20 10:59:13 · 553 阅读 · 0 评论 -
富文本Ueditor
官方Wiki中文文档配置项手册各路大神添加链接描述VUE项目引入使用步骤总结(VUE使用模式):1、下载压缩包官方仓库2、解压到项目static目录中3、项目控制台输入npm i vue-ueditor-wrap4、以以下代码为案例即可使用<template> <div class='race-content'> <vue-ueditor-wrap v-model="write.msg" :config="myCo原创 2021-11-25 15:41:51 · 749 阅读 · 0 评论 -
VUE键盘监听 可复用
mounted (){ // 键盘监听 let _this = this; document.onkeydown = function(e) { let key = window.event.keyCode; if (key== 13) { _this.audioOn(!_this.clickShow); }.原创 2021-11-10 14:18:47 · 877 阅读 · 0 评论 -
Element UI 多选搜索实现拼音匹配
转载,感谢原博主,自己也做个记录。确实好用,增加了对拼音的匹配需要使用 js 拼音库 CnChar ,这个库主要就是做汉字转拼音和汉字笔画数的。使用 npm i cnchar 就可以安装使用啦,详细的使用 CnChar 文档里有介绍。-过滤方法使用 CnChar 提供的 .spell方法可以获取拼音数组。代码:import cnchar from "cnchar"———————————————————————————————————————————— mounted() {转载 2021-11-08 11:12:33 · 210 阅读 · 0 评论 -
项目理解 + phpstudy
产品线需要新的开发环境phpstudy鼓捣了一番的同时也加深了对前端项目的理解之前只是机械的 装node 在vscode中敲命令 跑项目 并不太明白为什么这么做。实际上,对于webpack打包好的vue项目,无论是Node,或是有php环境(例如phpstudy,只需解析域名到index.html)。其实对于VUE项目来讲都一样,在哪里都能跑以来。就像vscode也只是一个集成开发环境,在内部运行Git,npm命令也和在命令行中没有本质区别,都能跑起来运行。只是Vscode作为集成开发环境原创 2021-11-02 16:16:48 · 134 阅读 · 0 评论 -
Vue实现锚点滚动 可复用
参数selector是目标DOM的ID值selectorNow是根据ID取得的真实DOM节点,内容如下图goAnchor(selector) { let selectorNow = this.$refs.wordcard[selector].$el; debugger selectorNow.scrollIntoView({ behavior: "smooth", // 平滑过渡 block: "start" // 上边框与视窗顶部.原创 2021-11-01 14:26:07 · 299 阅读 · 0 评论 -
keep-alive
keep-alive 听过看过但很少用 以至于该用到的时候给忘了在用户切换同一个模块的路由页面时 需要保存用户的查询状态…而我写了一堆VUEX和逻辑判断。但稍微看一眼或是用过keep-alive就不一样了。需要学须的还很多,中级之路还很漫长:1、熟练度:功能点(反选 下载 播放等) 经验 静态页面(flex css)开发效率 逻辑完整性 BUG率 模块设计效率上限:2、技术上不断学习查漏补缺(项目搭建 webpack scss 目录架构) vue源码 其他框架与技术选型经验原创 2021-11-01 10:03:20 · 127 阅读 · 0 评论 -
element 饿了么 表格多选与反选
element官方是支持全选的 但不支持反选操作官方文档开发需求是:多条数据用户选中部分行进行多行数据的同时处理操作后,要反选,对当前表格已选中部分的其他所有数据进行另一种操作。实际开发中本以为很简单,但还是因为不够熟悉element表格导致踩坑浪费了不少时间。故将此次开发成果总结下来: <el-table :data="tableData" ref="multipleTable原创 2021-10-25 09:47:06 · 996 阅读 · 0 评论 -
nvm NPM版本回退 附GITHUB打开太慢解决方法
修改hosts文件#Windows 系统的 host 文件位置 C:\Windows\System32\drivers\etc192.30.253.112 Build software better, together192.30.253.113 Build software better, together151.101.185.194 github.global.ssl.fastly.net151.101.13.194 github.global.ssl.fastly.net151.1原创 2021-10-14 14:01:37 · 263 阅读 · 0 评论 -
音频视频测试地址与简单编写
视频测试地址:3秒https://www.w3school.com.cn/i/movie.ogg10秒https://www.runoob.com/try/demo_source/mov_bbb.mp410秒https://www.runoob.com/try/demo_source/movie.mp41分钟http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp446秒http://vjs.zencdn.net/v/oceans.mp452秒http:/原创 2021-10-14 10:33:46 · 634 阅读 · 0 评论 -
VUE路由导航,(路由拦截 登录、权限、跳转限制)。VUE生命周期:beforeRouteLeave
需求:用户编辑后,若池中有数据,则在离开页面时提示保存。由于一个页面不单会有返回,还会有其他各个页面的导航,导致单把逻辑写在返回按钮中无法实现需求。路由导航可以做到:官方文档参考router.beforeEach((to, from, next) => { console.log(to); // 即将要进入路由的对象 console.log(from); // 当前导航要离开的路由对象 console.log(next); // 调用next该方法,才能进入下一个路由 ne原创 2021-10-12 13:50:55 · 704 阅读 · 0 评论 -
VUE中利用setTimeout写循环播放效果
产品的需求:一个音频对象数组,用户点击播放,从第一个开始每个播放一次循环,点击停止时停止循环播放。不多废话直接上代码 // 从选中单词开始循环播放音频 查询store值 为0从1开始 循环中定时调用子组件方法 audioOn(flag){ // 播放与停止播放按钮切换显示的控制器 可忽略 this.clickShow = !this.clickShow // 这里利用vuex来记录当前数组中播放到了哪原创 2021-10-09 15:51:23 · 792 阅读 · 0 评论 -
text/x-jquery-tmpl学习与使用
新的项目需求 前台用这个非常多。之前没接触过只能现学现卖了。jQuery tmpl 讲解jQuery .tmpl() 用法text/x-jquery-tmpl原创 2021-03-23 16:55:40 · 580 阅读 · 0 评论 -
帆软数据集带参SQL 也就是 JS引号嵌套问题
在使用帆软数据集时发生错误排查后发现问题来自:${if(len(DATA) == 0,"",“and DATE_PRC = '” + DATA + “’”)}改为${if(len(DATA) == 0,"","and DATE_PRC = " + DATA + " ")}差别是DATA是否被引号包裹 是否变为字符串在数据库中 该列对应的数据类型不是字符串 所以不需要引号再次包裹转为字符串 参数本身的数字串就符合SQL规则了...原创 2021-03-23 10:57:45 · 801 阅读 · 0 评论 -
SQL生成0到10000的整数
CAST(FLOOR(RAND()*10000) as INT)RAND()生成0-1的浮点数FLOOR()向下取整CAST (expression AS data_type)将某种数据类型的表达式显式转换为另一种数据类型as INT数据类型变为INT原创 2021-03-15 14:56:36 · 1602 阅读 · 0 评论 -
DB2与MYSQL groupby后对其他字段的拼接处理而非求和
2021/3/3更新:新需求:需要对如下数据在SQL阶段就进行处理,具体为根据PRODUCE_TIME分组 使其每一个时间对应单独一条数据尝试行转列:(sum(case when 条件 then 展示的数据 else 展示的数据 end) 列名失败。搜索发现函数group_concat但项目环境库是DB2不支持使用继续搜索得到DB2对应的函数LISTAGG实现效果:后面只需要根据需求在前或后台利用逗号处理为数组就好...原创 2021-03-03 11:16:36 · 1610 阅读 · 0 评论 -
JS 文件上传 下载文件 批量下载
理解无论是上传还是下载,对前端来说,都是对数据流进行操作。常见情况包括:1、前端使用 input type=‘file’ 标签进行文件读取 获取到file对象这种类型的数据流,将其传给接口2、前端使用html2canvas等插件进行截图,拿到的是生成后保存在内存中base64编码的二进制数据流, 此时需要根据接口的要求转成对应格式的数据在上传保存。3.后台返回文件地址 前端访问地址进行文件下载大部分情况下文件上传后台要求的都是formData对象的格式文件上传案例 data原创 2021-03-02 14:15:14 · 751 阅读 · 0 评论 -
开发环境 经验总结
不常遇到 导致接新项目换环境时总有那种:这个问题遇到过但就是想不起来怎么解决的所以要总结记录下,且举一反三:2020/2/24:宁波项目新环境调试问题1. 项目导入后先转换为maven项目不要直接跑 手动configure转换为Maven项目,手动操作保证连接上本地仓库 。2. project选项卡clean重新生成选定项目。3. 项目根目录右键properties或ALT+ENTER 调出 properties选项卡 可重新配置tomcat服务器、maven本地仓等信息。也可在java bu原创 2021-02-24 14:11:26 · 228 阅读 · 0 评论 -
JAVA获取各个指定时间的方法 以当天零点与前一天零点为例
JAVA获取各个指定时间的方法 以当天零点与前一天零点为例涉及日期格式类SimpleDateFormat、日历类Calendar、时间类Date的组合使用: SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Calendar calendar = Calendar.getInstance();//日历对象 calendar.setTime(new Date());//当天时间赋给日历原创 2021-02-19 10:22:47 · 940 阅读 · 0 评论 -
项目开发完成的技术总结 && JS执行效率探究
本次开发基本完成但过程中有一点让我及其在意,就是JS的执行效率。在改变了某个地方之后快了100倍 以下探究具体原因可能原因1:利用JSON+数组结构存储数据的行列(时间与数目)不同方式导致的数组个数不同 使得耗费巨量时间:方式1测试以下代码()console.time('time'); var json={}; for(var j=0;j<DEFECT_CNAME.length;j++){//把缺陷名按顺序放入JSON中 为对应DEFECT_CNAME以便循环输出 js原创 2021-02-08 16:32:32 · 187 阅读 · 0 评论 -
Echarts 循环实现动态加载series数据项
var json={};for(var i=0;i<list.length;i++){//遍历查询结果list集if(list[i][mapPojo.PRODUCE_TIME.pos].substr(0,timecount)==PRODUCE_TIME[j]){//相同时间跨度的不同区域数据处理 缺陷个数和面积for(var X=0;X<DEFECT_CNAME.length;X++){if(DEFECT_CNAME[X]==list[i][mapPojo.DEFECT_CNAME.p原创 2021-02-07 12:25:41 · 1462 阅读 · 0 评论 -
JS JavaScript的时间跨度判断
var day = (new Date($("#inqu_status-0-PRODUCE_TIMEEnd").val().replace(/-/g,"\/"))-new Date($("#inqu_status-0-PRODUCE_TIME").val().replace(/-/g,"\/")))/(86400000);var month = ($("#inqu_status-0-PRODUCE_TIMEEnd").val().replace(/-/g,"").replace(/:/g,"").rep原创 2021-02-07 10:20:59 · 644 阅读 · 0 评论 -
JS使用parseFloat会产生精度问题
页面测试提交回来的bug之一:悬浮框欸内面积数值不显示异常前台做数据处理的代码:循环找出数据项后统计 count = json[DEFECT_CNAME[X]][j][2]; count+=parseFloat(list[i].DEFECT_AREA); json[DEFECT_CNAME[X]][j][2]=count;测试发现…这样算确实会精度异常解决方法如下:count = json[DEFECT_CNAME[X]][j][2];count=Math.floor(原创 2021-02-05 16:47:52 · 418 阅读 · 0 评论 -
JAVA与JS统计程序执行时间
long startTime = System.currentTimeMillis(); //测试程序用时 /*被测试程序 */ long endTime = System.currentTimeMillis(); //获取结束时间 System.out.println("程序运行时间:" + (endTime - startTime) + "ms");执行效果: console.time('time'); /*被测试程序 */ console.tim..原创 2021-02-05 13:23:15 · 111 阅读 · 0 评论 -
双Group by 条件对表进行分组实现与理解 以及SQL的一些底层理解总结(索引、关系数据库、SQL执行顺序)
对如下所示表进行双分组查询需求:根据时间分组求不同时间组内部 不同缺陷名称的缺陷个数与面积之和 两个group by原SQL:SELECT PRODUCE_TIME, DEFECT_COUNT, DEFECT_AREA, DEFECT_CNAMEFROM BGTAMAQA.T_ADS_FACT_HR_DEFECT_STATISTICSWHERE 1=1AND DEFECT_CNAME NOT IN ('NULL','',' ')AND转载 2021-02-05 10:37:24 · 1466 阅读 · 0 评论 -
Echarts开发 自定义悬浮窗格式option.tooltip.formatter 动态数据项数据处理series JSON配合二维数组处理数据等
继续上篇开发任务 需用到echarts图,但是由于数据项过多,遇到悬浮框显示问题被遮住 需要改为表格样式且多项数据展示先上一天开发下来的总结:echarts官方文档.先看文档理解 再找案例 效率更高。一开始无法实现 自己在option外用JSON将数组装为二维数组想需要时取出来就好了。 var json={}; for(var j=0;j<DEFECT_CNAME.length;j++){//把缺陷名按顺序放入JSON中 为对应DEFECT_CNAME以便循环输出 jso原创 2021-02-04 16:27:16 · 1242 阅读 · 0 评论 -
JS二维数组的使用
继上篇的项目开发 大量数据操作,后台太麻烦 前台太慢…陷入泥沼寻求解决方法中…JSON配合二维数组使用(比一维数组慢十倍)var DEFECT_CNAME= {…(这个数组放着echarts数据项 这里省略)…};var json={};for(var j=0;j<DEFECT_CNAME.length;j++){//把缺陷名按顺序放入JSON中 为对应DEFECT_CNAME以便循环输出json[DEFECT_CNAME[j]]=new Array();//放入数组for (var原创 2021-02-03 17:03:31 · 349 阅读 · 0 评论 -
JAVA与JS执行效率谁更高?
开发积累了一定经验后,发现很多数据处理都既可以在后台用JAVA处理,也可以用前台的JS处理。数据量大的时候不禁好奇:执行效率哪个更快?什么情况下用JAVA/JS更好呢?具体的区别来讲:(一)java是面bai对对象的编程javascript是一种可以嵌入Web页面中的基于对象dao和事件驱动的解释性语言,用来向页面添加交互效果,使页面动态化。(二)java是需要进行预编译的,javascript不需要预编译,在程序的运行过程中逐行进行解释,由浏览器解释执行。(三)java定义变量需要定义数据原创 2021-02-02 16:46:32 · 4130 阅读 · 1 评论 -
BigDecimal报错 日常写BUG之引错报系列
继上篇博客 仍然是对大量表数据进行处理解决了数据类型问题后仍然报错,百思不得其解仔细查看后发现问题所在:测试数据类型时只注意两个字段皆为BigDecimal但忽略了包不同。修改为同一个包的BigDecimal后,再次测试确认:代码顺利通过…(我是真滴菜 各种细心一些就可以避免的低级错误)...原创 2021-02-02 16:28:46 · 193 阅读 · 0 评论 -
java.lang.ClassCastException: java.math.BigDecimal cannot be cast to java.lang.Double
继上篇博客 仍然是对大量表数据进行处理时JVM抛出异常:java.lang.ClassCastException: java.math.BigDecimal cannot be cast to java.lang.Double下意识以为自己又写错了拆装箱、或是记错了包装类。仔细查看报错信息后发现数据库字段的数据类型与预期不一样。保险起见验证了下该表对应字段数据类型: private static String getType(Object a) { return a.getCl原创 2021-02-02 15:56:21 · 653 阅读 · 0 评论 -
list组合map处理数据 list对象的内部属性发生改变时 map中的value随着改变
2021-01-31 15:27:40 ERROR [http-nio-8080-exec-4] c.b.i.c.w.c.DispatchServiceController - ep.0011,原因NullPointerException: $$$java.lang.NullPointerException原创 2021-02-02 12:28:04 · 911 阅读 · 0 评论 -
JAVA判断两参数的时间跨度 是否达到年/月/天 JAVA Calendar类的使用
项目遇到需求针对图表在用户查询时间跨度过大时,图表过于拥挤而做出优化:要根据用户查询时间段改变echarts显示时的X轴值查询时间段达到年时X轴对应显示每月值;查询时间段达到月时X轴对应显示每天值;查询时间段达到天时X轴对应显示每小时值;查询时间段达不到天时X轴显示默认时间字段;需要写逻辑来判断查询的时间跨度,逻辑如下:public int getYear(Date TIME,Date TIMEEnd) {// 调用方法前判断日期是否为空 判断查询时间跨度是否达到年(12-N月)原创 2021-01-29 15:46:36 · 1110 阅读 · 0 评论 -
echarts悬浮框展示不全
开发过程中遇到echarts悬浮框展示不全的问题:可以看到由于数据项比较多,tooltip悬浮窗一部分被遮挡住了,可通过设置悬浮窗tooltip属性的formatter属性自定义显示格式,或是修改trigger来改变显示方式。修改trigger来改变显示方式:将trigger属性axis改为item修改后效果如下:只显示对应点的数值了。formatter属性自定义显示格式:参考代码如下:tooltip : { trigger: 'axis', formatter: fun原创 2021-01-27 15:58:04 · 1432 阅读 · 0 评论 -
echarts X轴数据项溢出、展示不全
项目开发时,x轴显示不下,并且还会有文字溢出显示不全:解决方案如下:修改JS源码后效果:原创 2021-01-27 15:16:24 · 919 阅读 · 0 评论 -
IBatis中 $与#的区别与注意事项
IBatis中 $与#的区别与注意事项<isNotEmpty prepend=" AND " property="TAPPING_MARKS"> TAPPING_MARK IN (#TAPPING_MARKS#) </isNotEmpty>#包裹的值 在打印的SQL语句中会自动包裹上引号作为字符串的值:TAPPING_MARK IN ('AN0691D2')$包裹的值 在打印的SQL语句中会保持原样不自动包裹单引号TAPPING_MARK IN (AN069原创 2021-01-22 12:04:31 · 150 阅读 · 0 评论