- 博客(30)
- 收藏
- 关注
RSS订阅原创 webpack5中css兼容性处理
» 场景webpack5 通过 postcss 来处理 css 兼容性问题webpack版本：“webpack”: “^5.52.1”,“webpack-cli”: “^4.8.0”» 步骤1.安装 postcss 插件npm i postcss postcss-loader postcss-preset-env -D插件版本：“postcss”: “^8.3.7”,“postcss-loader”: “^6.1.1”,“postcss-preset-env”: “^6.7.
2021-11-02 22:40:56
643
原创 svg写一个好看的时钟
» 介绍浏览大佬的博客主页时，发现一个款好看、个性的svg时钟，动手实现一下，效果如下：预览地址：https://hq88l.csb.app/博客地址：https://www.cnblogs.com/a-cat/» 实现1.表盘» 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>svg环形进度条</titl
2021-10-31 12:46:52
546
原创 宝塔安装mongodb连接并添加用户权限
» 背景在云服务器宝塔面板安装mongodb数据库后，连接有些问题，特此记录一下。» 步骤1.宝塔安装mongodb软件商店搜索mongodb安装即可2.修改mongodb配置bindIp 由127.0.0.1改为0.0.0.0，放开ip限制authorization 默认disabled，如需要权限验证改为enabled3.宝塔放开 27017 端口4.服务器放开 27017 端口5.验证浏览器打开 http://公网ip:27017，出现下图表示安装成功了6.无密码连接
2021-10-11 18:18:43
2637
1
原创 canvas画一个渐变色的环形进度环
» 介绍之前用canvas画了一个环形进度条，想要实现从0到100颜色渐变效果，现有的线性渐变和径向渐变都无法满足，找到一种思路，经供参考，先看效果：预览地址：https://codesandbox.io/s/charming-herschel-b3mk0» 原理原理也很简单：把圆环分成n份，计算初始颜色到终止颜色中间n份颜色的值，每一份圆环一个颜色，从而达到渐变效果。» 代码<!DOCTYPE html><html lang="en"><head>
2021-09-30 17:34:08
2503
1
原创 canvas画一个环形进度条
» 介绍用canvas画一个环形进度条，效果如下：预览地址：https://codesandbox.io/s/nice-murdock-ux93p» 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>canvas环形进度条</title> <style> body {
2021-09-30 16:01:14
1510
2
原创 svg画一个环形进度条
» 介绍在做数据可视化图表时一般会使用 百度echarts 或者 蚂蚁AntV 等成熟的工具库，但如果要自己动手画一个好像有点蒙，本文将简单介绍下如果用svg画一个环形进度条，效果如下：1.WebSockethtml5提供的全双工通讯的协议，浏览器和服务器之间建立一条不受限的双向通信的通道，双向数据传输，需要服务端支持。使用方法可参考：nodejs搭建websocket服务实现多页面通信// 数组去重const unique = (arr)=>{- return Array.fr
2021-09-30 14:50:15
1096
原创 浏览器窗口通信的多种方式
» 介绍WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。用 nodejs 简单的搭建 websocket 服务实现多页面通信，效果如下：» nodejs搭建websocket服务新建文件夹 websocket执行 npm init -y 初始化项目执行 npm i ws 安装 ws 依赖新建 server.js 文件执行 node server.js 启动服
2021-09-22 16:54:05
1734
原创 nodejs搭建websocket服务实现多页面通信
» 介绍WebSocket 是 HTML5 提供的一种在单个 TCP 连接上进行全双工通讯的协议，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。用 nodejs 简单的搭建 websocket 服务实现多页面通信，效果如下：» nodejs搭建websocket服务新建文件夹 websocket执行 npm init -y 初始化项目执行 npm i ws 安装 ws 依赖新建 server.js 文件执行 node server.js 启动
2021-09-18 18:18:28
1231
原创 Element表格拖拽排序
» 介绍使用 SortableJS 插件实现表格拖拽排序功能。SortableJS 基于原生html5拖放API，支持触屏和大部分浏览器。效果图：1.安装npm install sortablejs --save2.引入import Sortable from 'sortablejs'3.表格设置 row-key 和 ref<el-table :data="tableList" border row-key="id" ref="dragTable">4.初始化 m
2021-09-17 11:26:22
669
原创 webpack5打包图片资源
场景：在做webpack5打包图片资源时，发现图片无法显示，各种报错，特此记录一下。插件版本：“webpack”: “^5.52.1”,“webpack-cli”: “^4.8.0”1.针对 css 中引入的资源方法一：使用 url-loader 处理图片资源，添加 type: ‘javascript/auto’ 使得webpack5中能够支持旧版语法。需要下载插件：npm i url-loader file-loader -Dwebpack.config.js 中配置：{
2021-09-11 18:48:02
1425
3
原创 mac vscode终端执行全局安装命令报错没有权限EACCESS:permission denied，symlink
报错：原因：当前用户没有对全局仓库（文件夹）的权限，赋予权限即可。sudo chown -R [user] [path]
2021-09-09 23:02:12
1238
原创 Element表格设置fixed后popover弹出窗图表无法显示
场景：element表格点击操作列，弹出窗显示图表信息。分析：echarts图表一般定义一个div，然后通过id初始化，渲染图表数据。我们可以通过一个currentId元素控制dom的唯一。 //dom <el-table-column label="操作"> <template slot-scope="scope"> <el-popover placement="left" :width="
2021-07-13 18:32:26
1190
原创 Vue滚动到指定位置的多种方式
需求：当容器有滚动条时，有时需要将指定的内容自动滚动到可视区域。方法一：锚点锚点通过在元素上设置id，然后用a标签的href="#id"属性跳转到指定位置。也可以通过js中 window.location.hash= ‘#id’ 或 window.location.href = ‘#id’ 来跳转。 //dom <a href="#li50">跳到50</a> <ul class="ul" id="ul"> <li v-for
2021-07-13 11:37:39
42168
5
原创 Element上传组件监听fileList导致图片闪烁
学习目标：提示：这里可以添加学习目标例如：一周掌握 Java 入门知识学习内容：提示：这里可以添加要学的内容例如：1、 搭建 Java 开发环境2、 掌握 Java 基本语法3、 掌握条件语句4、 掌握循环语句学习时间：提示：这里可以添加计划学习的时间例如：1、 周一至周五晚上 7 点—晚上9点2、 周六上午 9 点-上午 11 点3、 周日下午 3 点-下午 6 点学习产出：提示：这里统计学习计划的总量例如：1、 技术笔记 2 遍2、CSDN 技术博客 3 篇
2021-07-12 18:05:49
1428
原创 Element日期选择器带快捷选项切换日期类型
需求：如图，日期选择器弹出框快捷选项切换日期类型，高亮显示。思路：两种类型的日期弹窗点击快捷选项切换显示，通过ref控制弹出关闭handleClose()和聚焦显示focus()。实现代码：dom： <el-form-item label="日期："> <el-date-picker key="date" ref="date" size="mini" v-model="time" @focus="focus" v-if="timeType=='d
2021-07-12 14:13:27
1208
原创 Echarts点击x轴获取x轴数据
需求：如图所示，点击echart图表的x轴线或者x轴坐标，获取x轴的数据，高亮显示x轴坐标。关键代码： //设置x轴坐标可以点击 xAxis: [{ triggerEvent: true, axisLabel: { color: function (value, index) { return value == time ? '#21aced' : '#fff'; }, clickable: true, }, }],
2021-07-12 11:19:12
5672
原创 IconFont使用介绍
IconFont使用介绍前言一、iconfont的优势二、使用步骤1.单个使用2.添加到项目，vue项目引入3.项目使用4.项目追加图标5.上传自定义图标总结前言之前项目对图标的需求不大，基本使用框架自带的图标或FontAwesome能满足日常需求，也有用到了IconFont的但一直没认真去看，决心了解下如何添加、引用。一、iconfont的优势总结几点：图标海量项目管理，多人协同兼容低版本浏览器按需下载，自由搭配线上模式…其他对比：1、IconFont和FontAwesome的
2021-04-01 16:53:23
564
原创 jojs最新版去水印(v2.1.37)
背景：最近项目中需要用到gojs画流程图，引入后发现左上角有默认水印。版本：2.1.37百度了半天基本上都是搜索 7eba17a4ca3b1a8346 替换a.ax = d[u.Da("7eba17a4ca3b1a8346")][u.Da("78a118b7")](d, u.wl, 4, 4);//替换成a.ax = function(){return true;}but…没搜到…应该是官网做了相应的改动。解决：方法一：降低版本，再按网上方法查找替换。方法二：找到如下代码块替换：a
2021-03-31 15:35:03
434
原创 Echarts反转x轴（图表显示在y轴左侧）
描述：设计给出的设计稿有一个图表需要横着向左显示，跟另一个图表对应。设计图如下：效果图：分析：查阅echarts官方文档好像并没有相关的参数设置，但是设置负数会显示在负x轴，再用formatter转成正数显示即可。option = { title: { text: '世界人口总量', subtext: '数据来自网络' }, tooltip: { trigger: 'axis',
2021-03-26 11:13:33
4718
原创 js中sort()字母排序和自定义多列排序
面试题有两个数组data和sorts如下：根据sorts对data排序var data = [{ a: 1, b: 'a' }, { a: 2, b: 'c' }, { a: 2, b: 'b' }]var sorts = [{ key: 'a', order: 'desc' }, { key: 'b', order: 'asc' }]正确结果如下：解决针对此题我们可以这么去做var data = [{ a: 1, b: 'a' }, { a: 2, b: 'c' }, { a: 2, b
2021-03-07 00:18:26
2582
原创 js数组转成树
面试题解决方法/** * 1.先根据parent_ind分组，没有parent_ind的也会生成key为undefined的一组，将作为第一层 * 2.定义formatTree方法，参数为分好的组和一个父pid,如果组中没有pid则放反回{} * 3.找到的组后再次循环，并把name作为父pid去递归查找子节点 */let insustry_list = [{ "parent_ind": "女装", "name": "连衣裙" }, { "name": "女装" }, { "parent_i
2021-03-06 23:52:25
651
原创 java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConverter
问题描述：项目启动或运行时报错：java.lang.NoClassDefFoundError: javax/xml/bind/DatatypeConvertersjdk版本：jdk-15原因： java SE 9.0后移除了jaxb的jar包解决：方法一：降低项目jdk版本到1.8file>Project Structure中替换到低版本，没有的话需要下载新增一个方法二：引入相应的jar包即可 <!-- jaxb --> <dep
2021-02-26 13:49:17
261
原创 window下安装MongoDB
背景：最近想在云服务器上装一个mongodb，配置时遇到一些问题，无法启动，无法连接，绑定IP无效等问题，特此记录一下。1.安装下载地址：https://www.mongodb.com/try/download/community下载完成后解压放到指定盘符，比如：C:\mongodb2.配置现在mongodb文件夹下创建data文件夹，再在data下创建db和log文件夹以管理员身份运行cmd，进入bin文件夹cd c:\mongodb\bin启动注册：mongod --
2021-02-23 17:54:18
971
原创 BigDecimal先乘后除设置精度无效+RoundingMode参数说明
问题描述：BigDecimal做除法时需要设置精度，不然会报错；今天需要算一个百分比，直接分子乘以100再除以分母，发现所设的四舍五入失效。eg：BigDecimal x = BigDecimal.valueOf(3);BigDecimal y = BigDecimal.valueOf(2);BigDecimal z = BigDecimal.valueOf(4);//四舍五入失效System.out.println(y.multiply(BigDecimal.valueOf(100).div
2020-12-21 18:15:40
2438
1
原创 org.apache.poi.hssf.usermodel.HSSFDateUtil已过期
项目场景：最近项目使用poi读取excel时，发现包HSSFDateUtil已过期，异常如下图，强迫症想换掉。当前poi版本poi-4.1.2.jar（发现老版本poi-3.12.jar没有异常警告）解决方案：HSSFDateUtil更换成DateUtil引入的包换成import org.apache.poi.ss.usermodel.DateUtil;官网介绍：http://poi.apache.org/apidocs/dev/org/apache/poi/hssf/usermod
2020-10-19 23:32:20
10181
1
原创 Springboot项目jdk升级11后遇到的一些问题（javax.jws.WebService报错）
项目场景：该项目之前使用cxf整合过webservice，现在项目需要把jdk由1.8升级到11，记录遇到的一些问题。升级就是pom文件中java版本指定到11 <properties> <java.version>11</java.version> <maven-jar-plugin.version>3.1.1</maven-jar-plugin.version> </properties> <parent
2020-10-15 21:02:27
7676
1
原创 鼠标点击展示心形或文字效果
前言浏览大佬博客时经常看到鼠标点击有个心形或者有个提示文字的展示效果，在自己的网站上也整一下。心形效果：文字提示效果:心形js如下（转自https://blog.csdn.net/qq_37103514/article/details/82981598）!function(e, t, a) { function r() { for (var e = 0; e < s.length; e++) s[e].alpha <= 0 ? (t.body.remove
2020-10-12 23:10:14
635
2
原创 MongoDB使用查询总结
查询工具：Robo 3T。下载地址：https://robomongo.org/1.基本查询//基本查询一条记录db.qtfm__album_info.findOne()//多条件查询(相当于where)db.qtfm_album_info.find({"name":"七里香","author":"周杰伦"})//只返回主键和指定得文档键值对db.qtfm_album_info.find({},{"name":1,"author":1})//指定不返回得键值对(0、1为boolea
2020-09-16 17:38:58
2087
原创 Error creating bean with name ‘endpoint‘ defined in class path resource [.../CxfConfig.class]
Spring boot项目整合webservice后，引入阿里云短信包，项目启动报错。问题描述：最近一个老项目发送短信的接口需要由网易换成阿里云的，本来其它项目引入都没什么问题，但这个项目之前使用cxf整合过webservice，导入阿里的jar包后，项目启动报错Error creating bean with name ‘endpoint’ defined in class path resource [ct/edu/lms/web/server/config/CxfConfig.class]:.
2020-09-08 00:08:23
4397
原创 vue使用js-audio-recorder实现录音功能
vue使用js-audio-recorder实现录音功能前言1.安装2.引用3.页面4.方法5.播放总结前言最近项目中需要实现一个录音上传功能，用于考试、作业中，学生可以上传朗读课文的录音，安排。效果图1.安装npm i js-audio-recorder2.引用import Recorder from 'js-audio-recorder'this.recorder = new Recorder()3.页面 <!-- 录音上传 --> <Moda
2020-09-02 00:16:58
16496
52
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人