- 博客(84)
- 收藏
- 关注
RSS订阅原创 js实现类似查看更多的功能
实现效果在处理错误信息提示时，如果信息太多，一次性展示的话，看着很乱，那有没有更好的展示方式呢？经过一番讨论，找到了类似于某乎上的这种效果，如下图：即能告诉用户后续还有信息，也没有一下子显示全部，给人感觉很累赘。该如何实现呢？实现思路根据上述需求，大概的想法如下：首先页面需要两个容器，这里简称div吧，一个div用来展示数据，一个div用来放按钮 展示数据的div默认高度固定，当内容超过高度时，隐藏（overflow-y:hidden） 按钮默认情况下需要展示，并且当..
2022-01-25 16:54:06
2089
原创 常用的git命令整理
撤销某次commitgit reset --soft HEAD^适用场景：commit代码的时候，一不小心忘记写message或者message写错了或者commit了不该提交的代码等。实现效果：仅仅是撤回commit操作，代码不会有任何变化一个更改，提交到多个分支上操作流程：先在某个分支上提交 本地代码切换到另外一个分支（将要提交的分支） 执行git命令（相当于在当前分支执行了commit操作） git cherry-pick xx(commit对应的hash码)
2022-01-25 11:39:08
511
原创 JS实现一键复制
需求 接口报错时，给出错误提示，并给用户提供一键复制错误参数的功能实现“使用textarea支持换行，使用input不支持换行”====》使用textarea 会保留原始信息的格式，否则，复制到的数据没有格式// 提供一键复制content的功能export function copy(content) { const text = document.createElement('textarea'); text.value = content; document..
2022-01-25 11:10:12
1014
原创 摩尔投票法
一、概念理解二、思路分析三、代码实现四、参考https://blog.csdn.net/qq_38208506/article/details/104841100
2021-10-11 11:04:05
498
原创 拖拽功能之水平拖动图片
1实现技术项目运行环境：ant pro 拖拽技术插件： react-sortable-hoc 实现拖拽功能 array-move 实现拖拽过程中数据处理两个重要的APIreact-sortable-hoc - npmimport { SortableContainer, SortableElement } from 'react-sortable-hoc'; re...
2021-09-23 16:49:26
759
原创 Ref is not a prop
看其他人使用ref 是，子组件有两个参数，props和ref，照猫画虎，自己也这么写，有一天突然想到一个问题，为啥要这么麻烦，直接通过props接收不久行了，于是试了下，没反应，控制台还报错了百度一番，原来ref 和key一样，是React内部的保留关键字，所以不能通过props来接收参考：小前端读源码 - React16.7.0(一) - 知乎https://stackoverflow.com/questions/38089895/react-ref-is-n...
2021-09-17 15:16:55
354
原创 防抖和节流简单理解
防抖：设置执行时间间隔周期，当事件被触发后，先执行一次，再设定的周期内事件如果再次被触发，则从当前触发的时间点往后推一个时间周期，直至在设定的时间周期内事件没有被再次出发时，则执行节流：事件被触发后，延迟一定的时间后再执行...
2021-06-07 11:36:38
128
2
原创 bizcharts图表下载
一、前端直接以图片方式下载到本地https://www.jianshu.com/p/df18dce77299二、前端将图片传递给后端，后端做一定处理后下载https://www.jianshu.com/p/52555efe0ed1
2021-02-22 16:39:26
298
2
原创 order by 、sum遇到MySQL和Oracle后
当order by对应字段值为null时，Oracle怎么处理的？当order by对应字段值为null时，Mysql又是怎么处理的？sum函数中，如果每个值都是null，结果是0还是null?https://www.jianshu.com/p/89690cae4211简单说下结论： sum函数中，如果每个值都是null,结果为null； order by对应字段值如果为null，MySQL中把其看作最小值处理，Oracle中则看作最大值处理； 处理思路：在SQL语句中
2021-01-13 15:59:18
299
原创 java 8 stream 常用方法
Java 8 Stream的常用方法小结本来都已经进入尾声了，结果时不时刷新消失，真的不想继续编辑了，辛苦了一下午的总结，莫名奇妙刷新了好几次，这一次到好，大部分都没有了，放弃了放弃了，以后不用CSDN了！
2020-12-15 17:20:20
140
原创 break和continue
break和continue有什么区别？这个问题，一直在学习，却从未真正记住，更别说用了。参考https://www.liaoxuefeng.com/wiki/1252599548343744/1259542531392800break：结束本层循环；continue：结束本次循环，继续下一次循环...
2020-12-14 15:02:31
107
原创 MyBatisSystemException-ibatis中的Param引入的异常
一、遇到问题 之前开发了个接口，根据参数type不同，返回不同的数据。 因为需求中已经明确type参数肯定不为空，于是在SQL对应的XML文件中直接写 where，没有加任何判断。 这次开发，又有新的需求，type可以为空，如果为空，则表示返回全部。 想想也不难，在原先的基础上改改就行，于是加入如下代码：where 1=1 <if test="type!=null and type!=''"> and DQL...
2020-12-09 10:57:29
188
原创 mac下配置maven环境变量遇到问题
1、如何配置maven环境变量？ 随便一搜，网上一大堆教程，但也不是每个都适合自己的电脑，尝试过几次，都以失败告终，好在今天终于找到个自己电脑可以运行的，参见：https://blog.csdn.net/junoohoome/article/details/107925108step1:打开mac终端，输入 vim.bash_profilestep2:输入“i”进入编辑模式step3:定义MAVEN_HOME和PATHMAVEN_HOME:是指maven的安装目...
2020-11-30 14:50:15
2056
2
原创 Oracle 给字段增加注释
听起来如此常见而又简单的需求，结果我百度半天，既然决定以后建表、修改表等数据库操作，不再用可视化操作，而是用SQL实现，所以，慢慢积累吧。Oracle给字段增加注释语法： comment on COLUMN 表名.字段名IS "具体注释"加粗标红部分属于固定写法；表名：Table名称；字段名；当前增加字段的名成举例： 为M_USER表中的gender字段增加注释comment on COLUMN M_USER.GENDER IS '性别，1:男，2:女'...
2020-11-26 17:03:45
1305
原创 Oracle中的函数（一）
1.写在前面 最近频繁使用到oracle,于是想着学习下Oracle中的函数，参考链接：https://www.imooc.com/video/81662.Oracle中的函数数值函数 字符函数 日期函数 转换函数2.1数值函数2.1.1四舍五入round(n,[m])省略m：0； m>0:小数点后m位 m<0:小数点前m位 SELECT ROUND(23.55),ROUND(23.55, 1),ROUND(23.55, -1) FROM dua...
2020-11-19 10:05:49
720
2
原创 Oracle中的函数（二）
一、写在前面二、Oracle中的函数1、分类 数值函数 字符函数 日期函数 转换函数 2、数值函数2.1四舍五入round(n,[m])省略m：0； m>0:小数点后m位 m<0:小数点前m位 SELECT ROUND(23.55),ROUND(23.55, 1),ROUND(23.55, -1) FROM dual 2.2取整向上取整： CEIL(n)向下取整：FLOOR(n)SELECT ROUN.
2020-11-18 17:35:58
151
原创 箱型图后端接口封装
一、参数传入统计的数据二、代码package com.wisedu.hawkeye.domain.util;import org.springframework.util.ObjectUtils;import java.math.BigDecimal;import java.math.RoundingMode;import java.util.Comparator;import java.util.List;import java.util.stream.Collectors;
2020-11-17 17:26:53
202
2
原创 Oracle中的case when以及decode
一、两种形式的case when形式一： case 列名 when 条件值1 then 符合条件1后的值 when 条件值2 then 符合条件2后的值 …… else 默认值 end eg: 如下，gender 值为1时，显示男，2显示女，否则显示其他SELECT id,NAME,CASE gender WHEN gender = '1' THEN '男...
2020-11-12 10:54:26
2079
原创 Array在原型prototype上定义方法及如何使用
一、如何定义 项目中，需要使用到Array的flat方法，结果有兼容问题，于是重写if (!Array.prototype.flat) { Array.prototype.flat = function(count) { console.log('flat-----------'); let c = count || 1; let len = this.length; let exe = []; if (this.length ...
2020-11-11 11:08:20
1089
原创 ### Cause: java.sql.SQLSyntaxErrorException: ORA-00903: 表名无效
第一次开发定时任务，很激动，开发完一运行，果然出现了好多问题，都是写结果一直报表名无效的问题……仔细检查了一遍又一遍，表名没错、字段没错、类型也没错，找来大佬帮忙看下，结果，没错呀……百度下吧！百度了，大部分都说的是可能是在SQL中多了个"；"之类，可我仔细检查了，并么有呀！后来debug下，发现在执行批量插入时，所有的数据都是空的，会不会是……经过验证，确实是因为批量插入时，数据为空会导致报报错：### Cause: java.sql.SQLSyntaxErrorException: OR
2020-11-05 11:23:22
3392
原创 java项目开发路上的小石子
进入后端工作有一段时间了，目前在做一些逻辑简单的接口开发，这次又增加了定时任务，既激动又担心自己搞砸了。也许从一开始就应该将自己遇到的问题记录下来的，奈何自己太担心自己出问题，总是想着以项目进度为重。 其实后端涉及到的技术也蛮多的，慢慢查漏补缺把。 一、SQL中的平均数表数据如下：1、求平均年龄 avgSELECT AVG(age) as avgAge from user2、求课程的平均分 SQL除法：ROUND(num1/num2,2...
2020-10-27 19:03:48
98
原创 MySQL之JOIN、LEFT JOIN 和RIGHT JOIN
一、区别JOIN：INNER JOIN的简写，相当于两张表的交集；LEFT JOIN：以左边表为“主表”，右边表为“副表”，即查询的结果：左边表中全部的数据=左右两边匹配上的数据（符合条件）+剩余左边的数据；RIGHT JOIN：以右边表为“主表”，左边表为“副表”，即查询的结果：右边表中全部的数据=左右两边匹配上的数据（符合条件）+剩余右边的数据二、参考https://segmentfault.com/a/1190000017369618...
2020-08-31 14:09:23
532
原创 MySQL+SpringBoot+React实现简单功能
一、前言 最近重拾丢弃了两年多的后端，以前做后端开发时，仅仅是在搭建好的框架中开发，记忆中，每当碰到修改配置之类的问题，自己就傻了眼儿了。所以，此次学习的目的是最基础的搭建项目框架（前端+后端），并将前后端打通。 后端：SpringBoot+MySQL；前端：React+umi+TypeScript二、具体实现2.1搭建后端 后端搭建，参考自http://blog.didispace.com/spring-boot-learning-1/，跟着教程走，很快...
2020-08-28 16:10:24
1130
原创 纯JS实现课表
一、需求描述如下图所示：实现一个课表，对应现实生活中对的课表：一门课一天内，可以对应多个节次。二、实现思路及代码 2.1实现思路： flex布局+position 分两步：1、先画出一个空课表；2、在正确的位置上显示课程名称2.2数据结构 数据中需要包含：课程名称（course）、对应周几(week)、对应的开始节次(startSection)、结束节次(endSection)，如下const data = [ ...
2020-08-25 14:28:33
4222
1
原创 JS单例模式实现一个定时器
一、需求 有个页面需要前端轮询接口，这种情况下肯定会考虑到定时器：进入页面时，开启定时器，切换路由时清理定时器，所以可以用dva中的subscriptions（https://dvajs.com/api/#reducers）来处理，但是，我们的需求是：根据接口中的某个字段判断是否要启动定时器，而这个接口和定时器执行的接口是同一个。此时，经过研究，决定使用单例模式创建一个定时器，这样既能保证定时器唯一，也能动态控制定时器（启动和清理）二、代码export default (funct...
2020-08-13 13:44:53
477
原创 webpack条件打包实践
1、前言 机缘巧合，和同事一起研究下，居然实现了webpack条件打包，兴奋之余，决定记录下来。但愿能描述得很清楚，最起码多年以后，自己还能看懂。 条件打包，一直都是听其名不见其人，每次聊到时，大家对其原理总能说出一大堆，但是，具体怎么实现？大家几乎统一的说法是，有点麻烦，有空可以研究下。 我是那种连原理都不怎么听得懂却还想着想要亲自试一下。于是，各种查资料，向同事问了几个最基础的问题，同事鼓励我研究研究，他也会和我一起看看的，于是，想着闲着也是闲...
2020-08-04 16:29:34
751
原创 npm script之传参
一、前言 最近和同事在研究怎么利用webpack实现在不修改任何代码的前提下动态打包。因为目前的项目里面放了n多个子模块，每次打包执行npm run build，结果就是打包了全部的代码，这样不仅打包后的文件特别大臃肿，而且也影响性能，于是才有了想要哪几个模块打包哪几个模块的想法，当然，为了后期的维护问题，当然不能是打包一次修改一次代码。 既然需求是不能修改代码，那我怎么知道你需要哪些模块呢？二、动态npm脚本 不能改代码，那就只能改脚本了，思路...
2020-08-04 10:33:09
7393
5
原创 React性能优化之useCallback、useMemo以及memo
一、前言 性能优化算是老生常谈的话题了，大家都在讲，大家也基本能说出几条优化方案，尤其是hooks出来后，经常可以脱口而出：使用hooks中的memo、useCallback、useMemo进行优化，但是具体怎么做呢？实际开发中大部分情况下依旧裸奔——啥都没用。 我算是比较幸运的，很久之前就有同事说子组件使用memo可以减少渲染，原理大概就是如果子组件的pros没有发生变化，则不会重新渲染子组件。听起来不错，用！但是对于useCallback和useMemo，实在是有些谜。...
2020-07-28 16:35:30
2315
2
原创 前端页面跳转参数加密工具类封装
一、可有可无的前言 从小，父母老师教导说做人要低调，事情要做了再说或者做了也不要说，于是慢慢的，就养成了沉默的性格，“不争，则万物不可与之争”，是我一直以来的座右铭。然而，等工作后才发现，一切并不是那么回事。 初入公司时，公司前端技术交流会上，我提出xx脚手架中的xxx层逻辑都一样，可以封装成一个方法，事实上我在上一家公司就是这么做的，感觉很方便。结果，很多前辈同事要么反对，要么说看个人。好吧！那我就自己默默的使用了。戏剧性的事情在后面，后来大佬按照我的思路又封装了一个...
2020-07-27 15:45:51
609
2
原创 Bizcharts之如何实现图例和颜色绑定
一、需求描述 图例是动态的，即筛选条件不同，最终显示的图例个数和顺序也不同，但图例的颜色固定。如下图： 二、实现思路
2020-07-21 15:01:55
2603
原创 Bizchart图表封装之基础折线箱型图（自定义图例、设置Slider）
一、基础折线箱形图的封装1、概念 基础折线箱型图=箱型图+折线图，在箱型图的基础上增加折线图，折线图一般用来表示平均数。2、封装说明 同之前的基础箱型图，本次封装包括：自定义图例、滚动条Sliderimport React from "react";import { Chart, Geom, Axis, Tooltip,} from "bizcharts";// @ts-ignoreimport Slider from 'bizc...
2020-07-13 15:07:09
605
原创 在git上创建项目（最简单上手）
一、前言 开发过程中，时常会自己写个小的demo，一直处于懒癌晚期，索性就在当前开发的项目中写了，等提交代码时，revert就好了，这样虽然很方便，但有很大的弊端：无法保存demo。后来，说服自己，另起一个自己的项目，平时学习或者预言某个功能时，都可以放在自己的项目中。时间久了，又发现了新的问题：和同事讨论某个问题时写了一些不需要的代码测试，讨论结束后，代码恢复比较麻烦，想到了自己经常用的revert，要是自己的项目也有git就好了。为啥不建立自己的git仓库呢？这样，恢复代码（revert）时...
2020-06-30 16:23:06
1394
原创 毕业三年
又到放假的最后一天（这次还是端午节），每当这个时候，总是有点无心工作，当然，也确实没啥事情可做了。然而，这个端午要加班，虽然不用来公司。 感觉三年是一个很敏感的词汇，第一次换工作时，前辈们都说，等你有了三年工作经验就好找工作了；和同学回忆往昔岁月时，也总会说，三年是一个坎儿。如今，三年也确实到了，不仅仅到了，在这个充满着悲伤的时间里还遇到了公司和自己学校合作，巧合的是自己在合作项目中，更让人不知道说啥的是因此我们项目组端午节要加班，嗯！我是17年7月底毕业（毕业证书上写的）...
2020-06-24 17:56:06
304
1
原创 Bizchart图表封装之分组箱型图（自定义图例、设置Slider）
一、分组箱型图的封装 先吐槽下官网分组箱形图的demo。 让人凌乱的数据结构 。第一次使用分组箱形图，差一点就被官网demo的数据结构吓退，在群里面问了好久，慢慢的才反应过来，官网的数据居然是最原始的数据——后端没有处理前的数据，也就是说没有计算什么中位数、四分位数之前的数据。好吧，我承认我的想象力不够。好在写过基础箱型图，在基础箱型图的基础上得出分组箱型图的数据机构应该是比基础的多一个字段而已。 哑口无言的tootip。看看官网的tooltip，你能看出...
2020-06-24 14:49:11
1070
2
原创 Bizchart图表封装之基础箱型图（自定义图例、设置Slider）
一、基础箱形图的封装 根据数据的类型，也可以将基础箱型图分为两种：①、"数组型"：即其每天item对应的数值为数组（[number,number,number,number,number]）, eg: const boxData=[ { x:'一月', boxValue:[0,1,4,7,9] },...]②“数字型”：即其每个item对应的数据是数字， eg: const data = [ ...
2020-06-22 11:37:02
737
原创 bizcharts图表封装之热力图（可设置Slider）
一、热力图-色块图组件封装 第一次热力图中的色块图时，差点被官网demo的数据格式吓退了。但是既然产品选择了，作为开发，只能尽最大努力来实现了。于是和同事讨论这个数据格式，照着官网处理后的数据格式，感觉每个数据都要给定具体的做标点才行，这！又一次觉得实现不了。好在没有放弃，继续做各种测试，最后恍然大悟，其实热力图的数据结构和普通的做柱状/折线图没啥区别。 时隔快一年了，当初做的项目现在已经进入了迭代的死循环。而再回头看看当初困扰自己的热力图，似乎还是有些陌生，再看看官网...
2020-06-19 16:40:54
682
原创 bizcharts图表封装之基础雷达图
一、基础雷达图的封装 从官网的demo发现，基础的雷达图有两种，一种是线，一种是面，两者区别仅仅是线的图中没有<Goem type="area"/>，不过此次封装还做了两种的。 基础雷达图-面import React from "react";import { Chart, Coord, Geom, Axis, Tooltip, Legend} from "bizcharts";interface IBasicRadarProps { ...
2020-06-19 14:04:21
559
原创 bizcharts图表封装之基础环图
一、基础饼图组件封装 说明： 建议接口（后端）直接返回每个item对应的value（不需要计算出百分比），此次封装也只是基于后端不处理百分比处理的import React from "react";import {Axis, Chart, Geom, Legend, Tooltip,Coord,Label} from "bizcharts";// @ts-ignoreimport DataSet from '@antv/data-set';interface...
2020-06-18 14:58:12
1012
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人