熙翎-CSDN博客

原创 momentjs插件用法

【代码】momentjs插件用法。

2023-07-26 10:34:20 259

原创 elment中走马灯与满屏图片实现

el-carousel-item 与 el-image结合用法

2023-01-12 10:51:10 1016

原创 ubuntu1604配置python2.7.18

ubuntu1604 配置python2.7.18

2022-02-22 11:31:08 910

js图片压缩实现原理具体实现实现原理1、通过canvas进行处理2、图片宽高等比缩放，当前缩放比例为0.53、图片质量压缩，当前质量为0.94、得到新的base64位图片，转换为Blob的文件流具体实现/** * * 图片等比压缩 * @param {*} file 原文件流 * @param {*} M 超过几M进行压缩,默认超过1M才进行等比压缩 * @param {*} Fn 回调方法 */function compressImg(file,Fn,M=1){ if

2021-09-09 17:38:36 1253

原创 svg图标

目前采用了目前比较流行的阿里巴巴矢量图标库中的svg图标普通用法1、具体操作:下载—复制SVG代码2、新建一个svg后缀的文件3、处理细节去掉不必要的属性，需保留以下属性// 一般保留宽高属性，若需自定义去除即可；若需要有颜色区别，还需保留颜色color属性；<svg width="128" height="128" xmlns="http://XXX"><path d="XXXX"/></svg>4、在使用的地方加上以下代码，期中test就是svg图

2021-08-18 14:07:58 298

原创简易富文本编辑器

简易富文本编辑器textbus下载依赖包引入相关代码wangeditor引入依赖包引入基础代码菜单栏和内容区分离上传图片带标题预览以下都是vue项目，若是需要比较复杂的功能，比较推荐使用textbus；若是类似今日头条，偏简约风格，比较推荐使用wangeditor轻量级；textbus功能多，可自定义按钮，自定义插件，各种功能齐全，但是操作比较复杂，相关地址，如下下载依赖包npm install @textbus/textbus引入相关代码以下为基本方法template<templ

2021-08-17 15:52:30 1265

原创滑块验证码

1、原生代码原理快速拖动到尾部，相应滑块也跟着变动；拖拽时未到底部，滑块自动收缩至初始位置；兼容性支持移动端、PC端；html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>滑动</title> <link rel="stylesheet" href="css/drag.css" > <script src

2021-07-09 17:11:48 229

原创 js正则表达式收藏

js正则特殊正则密码1、同时存在大小写、数字，长度大于六位2、同时存在大小写、数字，或者包含特殊字符（._~!@#$^&*），禁止空格，长度大于六位特殊正则密码1、同时存在大小写、数字，长度大于六位/^(?=.\d)(?=.[a-z])(?=.*[A-Z])[a-zA-Z\d]{7,100}$/2、同时存在大小写、数字，或者包含特殊字符（._~!@#$^&*），禁止空格，长度大于六位/^(?!.\s)(?=.\d)(?=.[a-z])(?=.[A-Z])[a-zA-Z\d |a-

2021-07-05 11:55:04 68

原创 redis入门（linux）

下载架包路径：/opt/module/一、redis安装路径：cp redis.conf /usr/local/redis/etc注：将 redis.conf 复制到/usr/local/redis/etc路径下mv mkreleasehdr.sh redis-benchmark redis-check-aof redis-check-rdb redis-cli redis-server /usr/local/redis/bin注：将文件复制到/usr/local/redis/bin路径下

2021-04-22 15:41:10 81

原创 sql优化

1、应尽量避免在 where 子句中使用!=或<>操作符，否则将引擎放弃使用索引而进行全表扫描。2、最左前缀匹配原则。mysql会一直向右匹配直到遇到范围查询(>、<、between、like)就停止匹配。所以要尽量把“=”条件放在前面，把这些条件放在最后。3、当取出的数据超过全表数据的20%时，不会使用索引。4、尽量将or 转换为 union all。5、很多时候用 exists 代替 in 是一个好的选择。用not exists代替not in。6、不要写一些没有意

2021-04-22 15:33:37 75

原创 this与作用域的理论及应用

一、this关键字面向对象语言中 this 表示当前对象的一个引用。但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。重点：谁调用这个函数或方法,this关键字就指向谁。• 在方法中，this 表示该方法所属的对象。• 如果单独使用，this 表示全局对象。• 在函数中，this 表示全局对象。• 在函数中，在严格模式下，this 上是未定义的(undefined)。• 在事件中，this 表示接收事件的元素。• 类似 call() 和 apply()

2021-04-19 10:03:09 372

原创发布npm包

一、html+CSS1、标题元素h1~h62、段落元素没有任何语义、仅作为设置样式使⽤p、span元素3、pre元素预格式化⽂本元素，字符画元素空⽩折叠源代码中连续的空⽩字符(空格、换⾏、制表(tab缩进))会被折叠成⼀个空格4、a标签超链接、锚点（比如目录）5、路径根据资源的类型判断，⼀般站外资源⽤绝对路径，站内资源⽤相对路径绝对路径：书写格式协议名://主机名:端⼝名/路径https://www.baidu.com/中⽂会被编码成Unicode格式file://

2021-04-16 18:02:47 59

原创分离第三方类库 DllPlugin 和 DllReferencePlugin

分离第三方类库 DllPlugin 和 DllReferencePlugin

2021-03-04 23:31:35 752 2

原创 vue-awesome-swiper兼容ie9

vue-awesome-swiper兼容ie9采用swiper采用SuperSlide采用vue-awesome-swiper采用swiper目前只支持2.6.7，3版本以上暂不支持，否则样式会出现问题；缺点：但是在2.XX的版本中，只能单独分页轮播，无左右分页轮播，支持ie9及以上官网地址：示例：采用SuperSlide目前支持ie8以及以上，有分页轮播，缺点：灵活性没有swiper专业官网地址：示例：采用vue-awesome-swiper目前支持ie10及以上官网地址：示例

2021-02-27 15:56:38 603

原创 vue优化总结

vue优化总结一、vue页面优化二、webpack优化一、vue页面优化1、路由懒加载component: () => import('@/views/')2、组件懒加载 const name=()=>import('@/XX.vue');3、图片懒加载//1.CDN引用vue-lazyload<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>//2.main

2021-02-20 19:03:47 383 2

原创 vue引入骨架屏

骨架屏骨架屏骨架屏骨架屏，英文 Skeleton screen ，是指在页面开始渲染之前的白屏时间内，先让用户看到即将要展现页面的“骨架”，页面渲染完成之后再将它替换掉，起到一个从白屏 → 渲染完成过程中的过渡作用，它可以有效减少用户的感知时间，让用户“感觉上”认为打开页面比较快（相比较于完整的白屏时间）。本文采用的是开源插件vue-skeleton-webpack-plugin骨架屏分本文所实现的骨架屏是基于 Vue-cli 2.x 搭建的css分离项目，，根据的不同路由，显示不同的骨架屏，

2020-10-13 19:24:39 469

原创 node环境部署vue项目

node环境部署vue项目1、使用express模块2、手动创建入口文件app.js3、已经托管到dist文件夹下了,你需要将你打包的dist文件放入根目录4、跨域相关配置本项目解决前后台分离，跨域问题前提概要：之前是单独将vue打包之后的dist包存于nginx，但是目前需要部署到node环境中注意：前端项目为vue项目打包之后的dist包项目环境：tomcat+node+gbase目录结构（只需要dist包和app.js即可）：1、使用express模块需要下载node_modules包

2020-10-13 18:55:42 1934

原创安装image-webpack-loader 后启动项目报错

error in .c/assets/img/t2.pngModule build failed: Error: ‘D:\eclipse-workspace\NVSI.Client\WebRoot\WEB-INF\subsite\node_modules\pngquant-bin\vendor\pngquant.exe’ ڲ ⲿ Ҳ ǿеĳļat notFoundError (D:\eclipse-workspace\NVSI.Client\WebRoot\WEB-INF

2020-09-21 15:29:11 6063 3

原创 vue中组件之间相互通信

1、父组件调用子组件（1）采用$ref（只会在组件渲染完成之后生效，并且不是响应式的）：//父组件<star :row="1" :starOn="starOn" ref="showNum" :starOff="starOff"></star> //templatemethods:{ getdata(){//当前方法必须是在页面渲染之后调用 if(result.albp0026)this.$refs.showNum.getShowRa

2020-06-20 12:00:53 199

原创 vue入门

1、vue_cli脚手架vue脚手架，开发环境。最新的为vue_cli4，稳定版本为vue_cli2.9.6（大部分企业目前使用）注：可快速搭建大型单页应用，提供官方的命令行工具。//安装命令： npm install -g @vue/cli //-g 全局安装版本：vue_cli4//安装命令(带版本号)： npm install @vue/cli@版本号//检测vue_cli：vue -V//卸载npm uninstall @vue/

2020-06-15 13:36:28 95

原创 js中的锚点

1、第一种方法：如果让页面平滑滚动到一个id为box的元素处，速度为1秒，如下：$('html, body').animate({scrollTop: $('#box').offset().top}, 1000)；2、第二种方法：让页面直接快速滚动到一个id为box的元素处，如下$('html, body').animate({scrollTop: $('#box').offset().top})；3、第三种方法： <div onclick="tz()">点击到锚点</d

2020-05-26 12:42:43 2466

原创 SuperSlide轮播图在同一个页面多次切换出现图片缓存

如图：解决方案：每次点击类型时，将前一个的slide对象销毁。注：必须是3.0版的superslide插件，没有的话，可以找作者要具体如下：//当前页面定义var slidesText ='';//轮播对象var slidesRun =true;//默认设置第一次加载轮播数为true,后面的次数为falseif(slidesRun){//第一次加载 slidesRun=false; }else{//后面的加载 slidesText[0].destroy(); //销毁前面的

2020-05-25 12:21:18 498

原创去除vue中相关警告语

去除vue中相关警告语1.SweetAlert2插件警告：SweetAlert2: “setDefaults” & “resetDefaults” methods are deprecated in favor of “mixin” method and will be removed in the next major release. For new projects, use “mixin”. For past projects already using “setDefaults”, su

2020-05-23 15:49:27 771 1

qq_42853570的博客

原创 momentjs插件用法

原创 vue3按钮拖拽

原创 js文件图片视频下载

原创 elment中走马灯与满屏图片实现

原创监听浏览器窗口切换

原创 flutter项目打包填坑