- 博客(84)
- 收藏
- 关注
RSS订阅原创 jspdf & html2canvas 导出pdf（所见即所得）
jspdf & html2canvas 导出pdf（所见即所得）引入html2canvasimport html2canvas from "html2canvas";引入jsPDFimport jsPDF from "jspdf";分不同状况使用，如下：一、完全不分页const container = 要导出的div;// 将html转为canvashtml2canvas(container, { allowTaint: true, useCORS: true, //
2021-10-27 16:44:34
902
2
原创 linux磁盘爆满如何定位清除文件？
linux磁盘爆满如何定位清除文件？df -h 定位占大空间的目录进入对应的目录 cd /du -sh * 定位当前目录下占大空间的目录或文件找到对应的大文件，是一个日志文件，置空它 cat /dev/null > nohup.out最后再查看大文件置空后磁盘空间的占用率df -h。若发现占用率没有降下来，则是因为有进程调用中，则先查找到对应的进程lsof -n | grep deleted，然后杀死进程 kill -9 进程id，再df -h，就发现空间
2021-09-08 15:46:12
290
原创 php array_unique 踩坑
使用array_unique去重可能会导致数据转化为json格式，传给前端不是想要的数组格式。解决方法：在array_unique方法后通过array_values方法转化为数组array_values(array_unique(数组, SORT_REGULAR));
2021-07-01 21:41:18
451
原创 laravel添加sql监听
laravel添加sql监听添加listener文件php artisan make:listener QueryListener在listener文件中添加执行函数<?phpnamespace App\Listeners;use Illuminate\Database\Events\QueryExecuted;class QueryListener{ /** * Create the event listener. * * @re
2021-06-23 11:57:15
566
原创 vue 自定义指令 触底加载
vue 自定义指令 触底加载Vue.directive('infinite-scroll', { bind: function (el, binding) { const callback = binding.value; el.addEventListener('scroll', e => binding.def.scroll(e, callback)); }, scroll: function (e, callback) { const targetDom =
2021-06-10 15:09:54
279
原创 js实现颜色转换
js实现颜色转换一、hex转rgba const hex2Rgba = (bgColor, alpha = 1) => { let color = bgColor.slice(1); // 去掉'#'号 let rgba = [ parseInt("0x" + color.slice(0, 2)), parseInt("0x" + color.slice(2, 4)), parseInt("0x" + color.slice(4, 6)), alpha
2021-03-05 11:17:57
1839
原创 composer常见问题
composer 常见问题一、提示需要更新版本解决方式：更新到最新版本composer self-update二、PHP Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to allocate 134217736 bytes) in phar解决方式：将此次安装的内存限制改为无限memory_limit=-1php -d memory_limit=-1 /usr/bin/composer re
2021-03-03 10:12:42
110
原创 原生js监听dom元素大小变化
原生js监听dom元素大小变化参考ResizeObserver这里是引用ResizeObserver avoids infinite callback loops and cyclic dependencies that are often created when resizing via a callback function. It does this by only processing elements deeper in the DOM in subsequent frames. Imp
2021-03-03 10:11:00
765
原创 vue打包时删除console.log
vue打包时删除console.log一、使用插件uglifyjs-webpack-plugin在vue.config.js中添加对应的配置const UglifyJsPlugin = require("uglifyjs-webpack-plugin");module.exports = { configureWebpack: { plugins: [ new UglifyJsPlugin({ uglifyOptions: { compr
2021-03-03 10:07:29
204
原创 js 获取数组的深度
js 获取数组的深度通过递归的方法getDepth(arr, depth) { var flag = false; var temp = []; for (let i = 0; i < arr.length; i++) { if (arr[i].children instanceof Array) { // 判断是否是数组 for (let j = 0; j < arr[i].children.length; j++) { temp.push(
2021-01-15 17:11:29
2362
原创 nginx配置ssl证书
nginx配置ssl证书1. 申请一个ssl证书，把文件下载下来2. mac电脑用scp命令将文件上传到linux服务器上scp local_file remote_username@remote_ip:remote_folder 3. nginx配置(mac可用curl ipinfo.io/json命令行查看本机公网ip)server { listen 443 ssl; server_name 域名; ssl_certificate .crt文件位
2020-12-09 17:53:50
159
原创 mac os 安装nvm
系统环境macOS Catalina10.15.5 (19F101)安装方式打开终端（Terminal）进入当前用户的home目录cd ~创建.bash_profile文件touch .bash_profile输入安装nvm的命令curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash安装完成后，创建~/.zshrc并打开文件编辑vim ～/.zshrc
2020-08-25 19:09:56
184
原创 css实现缺角div
css实现缺角div<div class="block"></div>方法一：伪元素实现用伪元素画一个和背景色相同的三角形，然后绝对定位到需要遮挡的地方eg: .block{ width: 120px; height: 60px; background: yellow; position: relative; } .block::before{ position: absolute; right: 0;
2020-05-09 11:22:49
2105
原创 threejs实现全景图
threejs实现全景图方法一：使用立方体贴图原理：将全景图切分为6张小图，分别对应上立方体6个面的贴图，立方体的里表翻转一下，相机放置到立方体的中心，就可以浏览全景了。<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="vi...
2020-01-17 14:43:35
2254
原创 如何实现响应式图片
如何实现响应式图片一、js或服务端控制图片加载eg： js控制图片加载：function makeImageResponsive() { var width = document.body.getBoundingClientRect().width // 获取当前视口宽度 var img = document.getElementsByTagName('img')[0] // 获取需...
2020-01-03 11:17:42
792
转载 css选择器
css选择器一、基本选择器*选择所有元素。E选择对应标签的元素。.class选择对应类名的元素。#id选择对应id的元素。E F选择E元素内部所有F元素。E > F选择E元素的所有直接子元素中的F元素。E + F选择紧跟着E元素之后的相邻兄弟节点F元素。E ~ F选择跟着E元素之后的所有兄弟节点中的F元素。二、属性选择器...
2019-12-24 18:09:37
119
原创 解决inline-block中间缝隙
解决inline-block中间缝隙本质：inline-block中间缝隙的本质是html中存在的空白字符（inline-block标签之间的回车符）举例：li { display: inline-block; background-color: red;}<ul> <li><a href="#">登录</a></li&...
2019-12-20 16:10:22
347
原创 清除浮动
清除浮动清除浮动，预防高度塌陷。举例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <met...
2019-12-20 12:28:46
128
原创 web前端性能优化
web前端性能优化一、资源合并与压缩1.html压缩，可使用html-minifier2.css压缩，可使用clean-css无效代码删除删除注释css语义合并3.js压缩，可使用uglifyjs2无效字符的删除删除注释剔除注释代码予以的缩减和优化，更改变量名来简短变量名的长度二、图片优化1.不同场景选择不同格式的图片jpeg：有损压缩，压缩率高，不...
2019-12-18 12:15:08
170
原创 通过http header 设置缓存
通过http header 设置缓存以 nodejs 做服务器举例：// mime.js 按照文件后缀名来判断response的ContentTypeexports.types = { 'jpg': 'image/jpeg', 'json': 'application/json'}// config.js 匹配到有缓存策略的文件，设置缓存时间exports.Expires =...
2019-12-18 12:09:58
1075
原创 Service Worker的学习
Service Worker的学习限制：只有在https协议下 Service Worker 才能够被注册，本地调试可用localhost。一、注册service workerif (navigator.serviceWorker) { // 判断是否支持service worker // 注册service worker navigator.serviceWorker.regist...
2019-12-17 10:59:00
230
原创 indexedDB的学习
indexedDB的学习var myDB = { name:'testDB', version: '1', db:null}一、打开数据库使用indexedDB.open()方法打开数据库var request = window.indexedDB.open(myDB.name:数据库名称)error事件监听打开indexedDB失败。request.onerror ...
2019-12-16 16:08:44
205
原创 canvas实现文字水平垂直居中
canvas实现文字水平垂直居中eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &...
2019-12-02 16:55:03
1501
原创 Ubuntu下安装LAMP
#Ubuntu下安装LAMP一、安装apache服务器1.获取软件列表sudo apt-get updateDone 即完成2.安装apachesudo apt-get apache2 -y当看到Do you want to continue?[Y/n] 输入 y 继续当看到下面这段：恭喜你，安装成功了！3.查看是否安装成功查看apache版本apachec...
2019-11-18 14:45:53
288
原创 yarn 安装node-sass失败
yarn 安装node-sass失败node版本：6.12.3nvm版本：3.10.10yarn版本：1.3.2package.jsonyarn安装报错：解决方法yarn config set cache ~/.my-yarn-cache-dir
2019-10-10 10:34:04
774
原创 react-cropper实现头像裁剪
react-cropper实现头像裁剪1. 简单封装import React from 'react'import Cropper from 'react-cropper'import 'cropperjs/dist/cropper.css'class UserCropper extends React.Component { constructor(props) { su...
2019-10-08 18:22:53
994
原创 element.scroll方法不兼容edge
element.scroll方法不兼容edgeedge浏览器没有兼容element.scroll()，element.scrollTo()，element.scrollBy()这几种方法兼容方法：给element.scrollTop，element.scrollLeft赋值来实现上述方法。...
2019-09-24 15:22:23
1210
原创 nodejs实现获取微信公众号js-sdk开发配置
nodejs实现获取微信公众号js-sdk开发配置步骤：获取access_token（有效期7200秒）第一步拿到的access_token 采用http GET方式请求获得jsapi_ticket（有效期7200秒）生成签名:参与签名的字段包括noncestr（随机字符串）, 有效的jsapi_ticket, timestamp（时间戳）, url（当前网页的URL，不包含#及其后面部...
2019-08-29 10:36:20
592
原创 Linux系统安装node
Linux系统安装node使用wget下载node压缩包 # wget https://nodejs.org/dist/v10.16.0/node-v10.16.0-linux-x64.tar.gz解压# tar -zxvf node-v10.16.0-linux-x64.tar.gz 进入文件，获取文件位置# cd node-v10.16.0-linux-x64# ...
2019-08-29 10:35:08
138
转载 vue中解决html2canvas图片跨域问题
vue中解决html2canvas图片跨域问题html2canvas在截图的过程中，如果遇到html中有跨域地址的图片，即图片地址非本地，截图的时候将不会显示图片解决方法：html<div ref="imageDom"> <!-- 支持跨域的地址 --> <img :src="imgUrl+'?'+new Date().getTime()"...
2019-08-29 10:33:16
4835
1
转载 设置xampp访问phpmyadmin需要输入账号密码
发布时间：2019-06-26 17:12:22ps:由于xampp访问phpmyadmin默认是不需要密码的，所以我们访问的时候会直接进入到phpmyadmin操作界面。1.设置输入密码才能访问phpmyadmin，可按以下图示设置root的访问密码2.此时我们刷新页面后就会提示以下错误3.然后我们需要进入xampp安装目录下的phpMyAdmin目录，找到config.inc....
2019-08-29 10:31:51
652
1
原创 nvm管理node版本
nvm管理node版本（windows系统）发布时间：2019-06-25 16:04:58一、安装nvm进入github中nvm的版本库中nvm-noinstall.zip： 这个是绿色免安装版本，但是使用之前需要配置nvm-setup.zip：这是一个安装包，下载之后点击安装，无需配置就可以使用，方便。Source code(zip)：zip压缩的源码Sourc code(t...
2019-08-29 10:30:16
117
原创 vue读取xls或xlsx文件
vue读取xls或xlsx文件1.选择一款合适的xls插件，我选择的是xlsx安装：npm install xlsx2.template<template> <div> <input type="file" ref="upload" accept=".xls,.xlsx" @ch...
2019-08-29 10:29:09
5475
原创 前端post请求报400错误
前端post请求报400错误发布时间： 2019-06-05 18:28:54400的错误是由于发送请求参数没有成功原因：参数名称类型没有对上；或者参数格式不正确参数格式不正确，解决方法：格式化传递给后台的参数1.使用axios对于请求的参数：引入qsimport qs from 'qs'axios({ method: 'post', url: url, data:...
2019-08-29 10:27:28
17850
转载 更改wordpress的最大上传2M的限制
更改wordpress的最大上传2M的限制直接修改wordpress根目录下.htaccess文件添加以下的配置内容php_value upload_max_filesize 512Mphp_value post_max_size 512Mphp_value max_execution_time 6000ps:upload_max_filesize //默认上传文件大小，这个就是2...
2019-08-29 10:25:25
1223
原创 浏览器展示pdf文件，不用插件
浏览器展示pdf文件，不用插件发布时间： 2019-05-15 16:21:35 <object data="pdf的地址" type="application/pdf" width="100%" height="100%"> <iframe src="pdf的地址" width="100%" height="100%"> This brow...
2019-08-29 10:23:56
696
原创 vue拼接字符串
vue拼接字符串发布时间：2019-05-15 16:15:21直接上代码:<div class="swiper-slide" v-for="img in imgs"> <img :src="['xxx(需要拼接的字符串)'+img]" alt="" width="100%" height="auto" /></div>...
2019-08-29 10:21:28
1627
原创 xampp自定义错误页面
xampp自定义错误页面发布时间：2019-05-09 12:33:171.打开xampp安装路径下的httpd-multilang-errordoc.conf的文件（D:\software\xampp\apache\conf\extra\httpd-multilang-errordoc.conf）2.在此处修改http状态码对应的错误页面位置，或者找到错误页面直接修改ps:若是修改错误...
2019-08-29 10:20:11
457
原创 vscode 常用插件
发布时间：2019-05-07 18:32:55vscode 常用插件1.Bracket Pair Colorizer2.Turbo Console Log3.Prettier - Code formatter4.Live Server5.Live Sass Compiler6.indent-rainbow7.HTML CSS Support8.Code Spell Checker9.REST ...
2019-08-29 10:19:07
483
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人