- 博客(43)
- 收藏
- 关注
RSS订阅原创 写一个简单的仿3d图片轮播
旨在提供一种思路，我这里给了四个item，宽度也是在css写死的。要作为组件使用的话，各个item的宽度都是需要使用js计算的，好了，废话不多说直接上代码，上面都有注释<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <me
2022-04-21 23:43:58
435
原创 ubuntu20.04使用dev-sidecar找不到安装证书
火狐、chrome等浏览器不走系统证书，火狐、谷歌浏览器必须在浏览器上安装证书然后死活找不到证书，搜索了整个目录也没有。原来是我的显示隐藏文件没打开，打开后dev-sidecar.ca.crt就出来了...
2022-04-18 18:56:09
1168
原创 记录vue-element-admin由Cannot read properties of null (reading ‘pickAlgorithm‘)开始的一系列问题
尝试排查：1.清除缓存npm cache clear --force之后再重新安装依赖npm install（仍然未解决）2.更换包管理器重试，更换yarn install，问题依旧3.更换pnpm，pnpm install 下载包后pnpm run dev又出现下面问题，Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'遍历C:\hiberfil.sys的时候资源繁忙
2022-04-06 20:26:33
3711
2
原创 img转换操作（base64、canvas、blob、file对象）
用这三个方法应该就差不多了：// 根据地址（src）获取图片,生成img对象（标签）function getImg(src) { return new Promise((resolve, reject) => { const img = new Image() img.src = src // 源图片允许跨域，否则canvas转base64时，toDataURL会报错 img.setAttribute('crossOrigin', 'anonymous')
2021-12-17 17:42:48
4793
1
原创 elementUI消息提示全局配置
代码很简单，直接看应该能懂：// 全局message配置（取配置项）Vue.prototype.$message = function(msg){ ElementUI.Message(msg)}const messageArr = ['success', 'warning', 'info', 'error']// 这里是我的配置项，如果你不用开放配置权限，忽略这里let str = getSpecStr("messageConfig")let config = /^{(.*)}$/.t
2021-09-22 18:10:17
1466
原创 使用sortablejs拖拽列表排序
sortablejs版本 ^1.14.0，框架：vue，UI：elementimport Sortable from "sortablejs" // 引入开始使用：// 我的接口，请求表格数据fetchData(){ getUser().then(res => { this.list = res.data.data; this.total = res.data.count; this.$nextTick(() => { // 表格渲染完成，调用拖拽排序
2021-09-13 15:49:56
701
原创 elementUI 表格滚动条样式修改（获取类名）
elementUI 中 el-table 滚动条的class是.el-table__body-wrapper::-webkit-scrollbar其中可以细致到左中右三段滚动条，那么在上面再加上这个类左：is-scrolling-left 中：is-scrolling-middle 右： is-scrolling-right这个需要写到style标签中，不能加作用域才能生效，然后为了不影响其他组件，在前面加个我当前组件父级的类my-class也不要加预编译，我加上lang=scss 后出现了其他页面
2021-09-09 15:35:26
1804
原创 CSS元素Q弹动画效果
.my-div:hover { animation: elasticity 1s linear; } /* Q弹动画关键帧 */ @keyframes elasticity { 0% { transform: matrix3d(0.92, 0, 0, 0, 0, 0.92, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 3.4% { transform: matrix3d(0.938, 0, 0, 0, 0, 0.9..
2021-06-18 11:14:07
575
原创 JS使用MediaRecorder录制视频demo
<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv
2021-05-31 17:29:13
2922
原创 常用JS工具函数（深拷贝、数组转树等等）
// 深拷贝 function deepClone(arr) { if (arr && typeof arr === 'object') { const target = arr.constructor === Array ? [] : {} Object.keys(arr).forEach(key => { if (arr[key].constructor && typeof arr[key] === 'obje..
2021-05-12 21:37:29
252
原创 vue-router:Navigation cancelled from “/“ to “/“ with a new navigation
只需要把路由的mode: 'history'，改成mode: 'hash'或者直接注释就行了
2021-03-20 21:18:15
899
1
原创 原生ajax+原生js上传下载文件
不用说话，直接看代码，直接copy也行<!doctype html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> &l
2020-12-10 16:50:26
692
原创 axios拦截重复请求
不多BB直接上代码import axios from 'axios';/* 初始化axios实例 */const service = axios.create({ baseURL: process.env.VUE_APP_BASEURL, headers: {'Content-Type': 'application/json'}, timeout: 10 * 1000, withCredentials: true})需要注意的点，请看注释/* 拦截重复请求 */
2020-12-04 10:50:47
544
原创 函数的防抖和节流
虽然简单，还是记录一下<!-- 函数防抖 如果事件触发太快（时间间隔小于我们规定的时间），则不会执行业务代码--> function fn1() { let dom=document.body; let time; dom.addEventListener('mousemove',()=>{ clearTimeout(time); time=setTimeout(()=>{ console.log('send aj
2020-10-29 14:59:11
120
2
原创 正则匹配相邻n个重复字符
正则匹配相邻n个重复字符//var reg = /([0-9a-zA-Z])\1{n-1}/;var reg = /([0-9a-zA-Z])\1{2}/;reg.test('2333');//true
2020-09-15 17:09:58
2105
原创 前端导出Excel和下载后端Excel以及前端处理Excel
前端导出Execl工具：npm i file-saver xlsx方法：listToExcel(){ //table_to_book方法传入表格dom对象 let wb = Xlsx.utils.table_to_book(document.querySelector("#table")); let wbout = Xlsx.write(wb, { bookType: "xlsx", bookSST: true,
2020-08-27 11:47:10
1110
1
原创 ElementUI selection保存勾选状态和结果
之前做过这个保存勾选状态的东西，不过是使用@selection-change，@select-all，@select三个事件，取到各事件产生的值，然后去重，再使用toggleRowSelection方法反显勾选项，非常麻烦。现在就简单多了，直接上代码。 <el-table :data="tableData" border @selection-change="handleSelectionChange" style="width: 100%" .
2020-08-06 10:00:30
4485
5
原创 js中值转换为数字,保留任意位数小数
本来以为是个很小的点，没想到还是踩坑了1.先看一下Number()方法中，各类型参数的返回值：Number(''); //0Number(null); //0Number(undefined); //NaNNumber(0); //0Number(0.0); //0Number(1.) //1Number('zhangsan') //NaN2.看了上面的结果，再要判断一个值是不是数字就简单了不过还要注意一下chrome内核浏览器 0==’’ 的问题if(!!0){
2020-07-09 17:18:39
1034
原创 nginx配置反向代理路径问题
用nginx上了个前端项目，踩了路径的坑，记录一下：server { listen 2077; server_name localhost; location / { root html; index index.html index.htm; } # 例如：你前端的请求路径是这样的 /api/v1/getData # ^~/api/ 匹配以‘
2020-07-03 13:02:26
4205
1
原创 类似液体loading效果
直接上代码，有注释index.html<!doctype html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0
2020-05-21 11:58:14
213
翻译 grid布局
直接上代码index.html:<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./index.css"> <ti
2020-05-21 09:56:30
163
原创 chrome内核浏览器中，css设置字体大小为12px以下
chrome内核的浏览器为了用户体验（大概），是不允许小于12px字体出现的但是有时候业务需要（比如设置彩蛋之类），必须要10px，5px大小的字体，我们该怎么办呢？解决方法：虽然字体最小就是12px没法改变，但是我们可以对包裹文字的标签整体缩放啊，比如这样：下面是效果，可以看到整个盒子缩小为原来的50%，这样也算是解决问题了。但是审查元素可以发现，实际上font-size还是原来的16px，如果你非要让font-size变成8px，那还是找找别的方法吧。...
2020-05-12 20:33:52
499
原创 vue移动端、PC自适应（配置postcss-px2rem）
现在配置postcss-px2rem移动端适配的方法大致有几种：不管用那种方法配置，首先拉取依赖npm lib-flexible postcss-px2rem，或者npm lib-flexible postcss-pxtorem，两种配置的依赖是不一样的，要注意。这里没加–save是因为npm拉包默认就给你加到package.json的依赖里去了然后以下配置方法任选一种使用1.在postcss.config.js中配置（postcss-pxtorem）module.exports = {
2020-05-11 15:36:28
20948
2
转载 css的绝对居中
第一种： 伸缩盒子，要定义在父类display: flex;justify-content: center; //水平居中align-items: center;//垂直居中注意：不能加margin，否则无效，padding（是否能加？）第二种：不知道盒子长宽：（比较好）top、right、bottom、left全为0， margin: auto;//垂直水平居中：positio...
2020-04-24 11:45:10
316
原创 优雅的解决css高度塌陷问题
给父元素加上after伪类：.box:after { content:''; display: block; clear:both; }例如：<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name=...
2020-04-24 11:11:31
181
原创 win10下mongoDB4.0安装、配置
今天在安装mongodb4.0时搜到好几个教程，但照着操作之后都多少遇到些坑，所以写了这篇文章，希望能帮助后面的人少踩坑1.安装mongodb4.0：我这里安装的是社区版https://www.mongodb.com/download-center/community安装很简单：①要改路径，开始时就选custom ②遇到 install mongodb compass时不要打钩，其他...
2020-01-07 15:30:08
474
原创 JS正则匹配正整数或小数
//匹配 正整数 0 或 小数（小数点后无限位，不以0结尾） var reg1=/^([1-9][0-9]+|0)(\.([0-9]+)?[1-9])?$/g; // true console.log(reg1.test('100.001')); //匹配 正整数 0 或 小数（小数点后2位，不以0结尾） var reg2=/^([1-9][0-9]+|0...
2019-12-27 14:47:37
8226
1
原创 前端form表单快速取值
<form action="" name="myform"> <input type='radio' name='myradio' value='0'>男 <input type='radio' name='myradio' value='1'>女</form>可以用myform.myradio.value直接取到单选按钮的值...
2019-12-13 09:28:39
446
原创 前端跨页面传值的几种方式
1.url传值 这个就不说了获取location.href之后打断也好，截取也好2.cookie存储 引入jq的js库cookie.js，之后$.cookie(key)存， $.cookie(key,value)取 即可，设置时间、删除cookie等等自己看一下文档3.h5的web存储，localStorage和sessionStorage两个存储对象；区别：localStorage生命周期...
2019-12-12 17:47:06
1371
1
原创 webpack 4.x，整理笔记
1.先安装node命令：官网下载后傻瓜式安装即可安装完成后在任意控制台执行： node -v，出现版本号说明安装成功，接着执行npm -v也会出现版本号2.初始化项目在项目根目录执行命令npm init -y初始化项目，会在根目录出现package.json文件，顺便把在根目录加上dist和src两个文件夹3.安装webpack我们一般局部安装来避免各个项目webpack版本冲突np...
2019-09-20 14:56:08
223
原创 超图 webgl 地图初始化及绘制点线面
1.初始化地图 //初始化viewer部件 var viewer = new Cesium.Viewer('cesiumContainer'); var imageryLayers = viewer.imageryLayers; //利用服务url创建SuperMapImageryProvider实例 var provider_w...
2019-09-11 16:12:58
2084
4
原创 html页面转成word文档
<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Title</title> <script src="../lib/jquery3.4.0.js"></script> <...
2019-08-02 13:29:08
12571
原创 html 播放本地视频（获取磁盘文件url）
html:<input id="v_file" type="file" onChange="play()"/><video id="video" controls="controls" width="640px" height="480"> 你的浏览器貌似不支持video 元素 %>_<% <source src="" type="vi...
2019-08-01 21:50:12
11488
原创 ajax方法封装
//公共请求函数function TrackAjaxString(url, data, type, successCallBack, isCache, beforeSendCallBack, completeCallBack) { var token = CookieUtil.getCookie(COOKIE_TOKEN_NAME); if (isEmpty(token)) {...
2019-08-01 13:24:44
187
原创 使用ssm框架的测试单元
1.数据层测试Mybatis相关的配置@RunWith(SpringJUnit4ClassRunner.class)@ContextConfiguration({ "classpath:spring/spring-dao.xml" })public class SeckillDaoTest { // 注入Dao实现类依赖 @Resource private SeckillDao s...
2019-05-27 10:33:01
242
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人