- 博客(43)
- 资源 (21)
- 收藏
- 关注
RSS订阅
原创 Vue中大型项目的总结（纯原创）
Vue中后台项目的前端总结技术栈：样式：CSS 预处理器的选择:局部样式与全局样式:异步请求：--- 重点封装 Axios:跨域问题:Mock 数据：规则：路由：--- 重点布局三大类：权限验证:1.auth2.permissionsVuex:组件库:过滤器:指令：项目优化：--- 特重点1.体验优化：页面载入进度条：美化滚动条:静态资源加载页面(首次加载白屏)：移动端 100vh 问题：2.构建优化:1.包分析工具:webpack-bundle-analyzer2.开启 Gzip(后端配置支持你的 .gz
2021-06-09 16:22:15
8496
29
原创 JS数组API详解汇总
JS数组API汇总一、循环类1. arr.forEach() --- 遍历循环2. arr.map()---返回新数组,return什么就输出什么3. arr.every()---全部满足条件4. arr.some()---部分满足条件5. arr.filter()---条件过滤6.arr.reduce(callback,[initialValue])---汇总**6.1累加:****6.2简单用法:****6.3数组处理:****6.4将数组转化为对象:****6.5将二维数组转化为一维:****6.6
2021-05-14 16:45:21
19099
15
原创 速懂vue3.0新特性及vue2.0区别
欢迎点击: 个人官网博客2020年9月份beta版本出来后就一直追3.0，作为第一批吃螃蟹的人，这里把3.0的一些知识分享一下，良心之作。喜欢就收藏吧！TypeScript传送门目录从vue2.0到vue3.0必备知识一、简单介绍vue3.0二、常用Composition API1.setup(props,context)2.ref,reactivereactive改用toRefs配合使用ref获取元素3.watch,watchEffectwatch监听一个属性或对象watch监听多个属性watch
2021-05-11 17:26:57
8582
12
原创 函数防抖与函数节流详解
欢迎点击: 个人官网博客为了解决频繁触发DOM事件，项目中需要使用函数防抖或节流，我们来看看吧！1.函数防抖：对于连续的事件响应我们只需要执行一次回调就类似于在某个时间范围内，再次执行的话清除上一次执行效果图:应用场景：1.每次 resize/scroll 触发统计事件2.文本输入的验证，连续输入文字后发送 AJAX 请求进行验证，验证一次就好demo代码：<!DOCTYPE html><html lang="en"><head>
2021-04-06 15:55:55
11360
1
原创 解决js计算精度问题BigNumber.js
欢迎点击: 个人官网博客JavaScript存在计算的精度问题，所以直接计算就可能会导致各种各样的bug，像一些加减乘除的前端计算。为什么JavaScript会有精度问题？因为JavaScript中所有的数字（包括整数和小数）都只有一种类型–Number。它的实现遵循IEEE 754标准，使用64位固定长度来表示，也就是标准的double双精度浮点数。它的优点是可以归一化处理整数和小数，节省储存空间。而实际计算的时候会转换成二进制计算再转成十进制。进制转换之后会很长，舍去一部分，计算再转回来，就
2021-03-18 10:27:29
8257
3
原创 纯前端html导出pdf(jsPDF.js)-分页-不分页
欢迎点击: 个人官网博客基础效果图：demo源码使用html2canvas自动分页效果图：demo源码一、基础：1.先引入几个文件<script src="http://www.jq22.com/jquery/1.8.3/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"&g
2021-03-17 15:53:50
7598
原创 svg基础+微信公众号交互(一)
svg基础+公众号编辑欢迎点击: 个人官网博客.前言： svg是矢量图，像我们平时用到的png、jpg等都是位量图即为一个一个像素点堆起来的 。需要注意一点，svg 中子标签是不能带单位的，其写法像canvas。svg的优势：SVG 可被非常多的工具读取和修改(比如记事本)；SVG 与 JPEG 和 GIF 图像比起来，尺寸更小，且可压缩性更强；SVG 图像可在任何的分辨率下被高质量地打印；SVG 可在图像质量不下降的情况下被放大，也就是不会失真；SVG 图像中的文本是可选的，同时也是可
2020-12-17 10:00:35
4898
1
原创 Node.js(Express)的跨域，获取请求参数，存储/访问public文件，cookie，session，md5加密
Node.js(express框架),mongodb 基础操作 (附开源项目)欢迎点击: 个人官网博客.github源码： 多功能记账本 1.Express基础：跨域问题//设置跨域访问app.all("*",function(req,res,next){ //设置允许跨域的域名，*代表允许任意域名跨域 res.header("Access-Control-Allow-Origin","*"); //允许的header类型 res.header('Access-C
2020-12-04 17:03:21
3121
原创 小程序云开发详解(附开源云开发项目)
小程序云开发基本操作(附开源云开发项目)欢迎点击: 个人官网博客.github源码： 多功能记账本 云数据库基本操作（增删改查,链表）云开发极大的方便了前端开发者，是前端工程师的一个福音,没事就赶快学起来吧!注意：云数据库获取数据一次最多20条，如果要不受限制，则调用云函数进行操作 const db=wx.cloud.database() 连接云数据库 const teachers=db.collection('teachers') 拿到teachers表(模型)-------
2020-11-27 17:22:54
25837
12
原创 虚拟滚动实现(Vue)
欢迎点击: 个人官网博客.项目列表数据越来越多(上万条)，正常列表可以分页，但是像下拉框之类组件就不能分页。每次都要加载所有的(很慢)，性能不好的浏览器特别卡顿。虚拟滚动的技术完美解决。主要用于无法使用分页功能的长列表首屏加载速度慢问题，DOM加载过多“无用”元素。上效果图：核心：元素监听scroll事件计算可视化高度一次能装几个列表，然后从总数据中进行slice截取每一次滚动后根据scrollTop值获取一个可以整除itemH结果进行偏移上代码，可直接复制运行<!D
2021-06-22 10:11:30
10238
26
原创 CSS :root 声明全局变量,var()函数 (主题切换)
在定义主题或编写css公共样式的时候，我们都会声明很多通用的颜色、字号等。我们这里不使用less或sass，而是原生css变量来实现。并且:root 定义的样式可通过js改变从而达到改变主题等效果。如苹果官网中的一个效果:(滚轮)<style> //变量的声明 :root { --bcolor: black; --percentage: 0%; --fColor:var(--bgcol
2021-06-15 09:44:22
3997
原创 移动端预览PDF及转成图片保存
欢迎点击: 个人官网博客移动端预览PDF及转化为图片保存一、iframe标签预览pdf二、vue-pdf 预览pdf(可自行封装弹出等效果)1.下载依赖包2.1上下滑动式2.3分页式三、pdf.js(可预览可下载) 将pdf--->canvas--->图片由于微信中苹果限制，是无法保存下载pdf文件的，安卓可以（会自动跳转到系统自带浏览器下载）。但是为了让用户能保存pdf，就只有改需求将其转化为图片，图片在微信是不受限制可以保存的。一、iframe标签预览pdf<iframe
2021-06-02 16:14:36
5448
5
原创 js浅拷贝与深拷贝的区别和实现
欢迎点击: 个人官网博客浅拷贝，深拷贝，区别:1.浅拷贝就类似于简单的赋值，比如let a=1;b=a，这就实现了简单的浅拷贝，修改a的值，b也会跟着改变。2.深拷贝就是b单独开辟出来了一块内存空间，无论a怎么变，跟b都没有任何关系，b不会因a变而变。...
2021-03-25 09:42:35
2978
4
原创 js实现图片懒加载，图片预加载
欢迎点击: 个人官网博客预加载(进度)比如一些公众号h5宣传页面，受网速影响，页面加载素材的时间比较长，页面会出现短时间的错乱或者闪屏； 进入页面的时候把图片全加载一遍，就不会出现图片加载慢显示慢的情况效果图：<script> //页面所有img标签的集合 let img = document.getElementsByTagName("img"); function yuLoad() { let index = 0 for
2021-03-22 15:28:37
4541
原创 promise用法，及结合async，await详解
欢迎点击: 个人官网博客promise，及结合async，await详解1.promise基础promise 异步问题同步化解决方案，很多人说promise解决了回调地狱。我个人认为promise只是顺带解决回调地狱，不是解决回调地狱的最佳方案，因为promise要链式then方法，一旦多起来，又陷入了then地狱。真正解决回调地狱的是async，await,简洁明了(待会下面细讲)。promise 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、
2021-03-19 18:47:29
6882
原创 动态加载css，js，动态创建link标签,script标签
欢迎点击: 个人官网博客老规矩，先上效果图创建Link标签 //createLink('./css/phone.css') function createLink(cssURL) { let head = document.getElementsByTagName('head')[0] let linkTag = document.createElement('link') linkTag.id = 'dynamic
2021-03-17 17:55:46
969
1
原创 RSA加密jsencrypt.js
欢迎点击: 个人官网博客先上效果图(demo源码) <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script> <script src="http://passport.cnblogs.com/scripts/jsencrypt.min.js"></script>使用公钥加密数据，使用私钥解密数据（常用）使用jsencrypt对数据进行RSA公钥加密：var encr
2021-03-17 09:39:07
6215
原创 js常用插件(十五)之基于vue的城市选择插件cityChoice.js
js常用插件(十五)之基于vue的城市选择插件cityChoice.js欢迎点击: 个人官网博客效果图：cityChoice.jsAnimate.cssstyle.css(cityChoice.css)使用方法(非常简单)：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta nam
2021-03-09 16:28:42
1064
原创 js获取当前位置
搜狐api<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script><script type="text/javascript"> console.log(returnCitySN)</script>百度api获取<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&.
2021-03-09 15:35:56
3624
原创 Canvas画布(二)刮刮卡案例(刮奖)
欢迎点击: 个人官网博客先上效果图：(前方高能)案例代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head&
2021-03-02 11:22:37
951
原创 Canvas画布(一)基本用法
欢迎点击: 个人官网博客基本用法使用canvas元素，首先设置width和height属性，为其设置绘制区域的大小，或者js设置宽高，当用户的浏览器不支持canvas元素时会显示，用于友好地提示用户。<canvas id="canvas" width="400" height="300">抱歉，您的浏览器不支持canvas元素</canvas>1.获取绘图上下文，而取得上下文对象的引用，需要调用getContext()方法，并传入上下文参数"2d"，这样就能取得2D上下文对
2021-03-02 10:40:36
1724
原创 css粘性定位position:sticky
介绍：position:sticky可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。设置position:sticky同时给一个(top,bottom,right,left)之一即可使用条件：1、父元素不能overflow:hidden或者overflow:auto属性。2
2021-03-01 18:03:19
1851
1
原创 js常用插件(十四)之视差效果stellar.js
js常用插件(十四)之视差效果stellar.js欢迎点击: 个人官网博客jsignature.js
2021-02-25 10:28:31
997
原创 js常用插件(十三)之可拖动、调整大小的Vue栅格布局组件vue-grid-layout
js常用插件之可拖动、调整大小的Vue栅格布局组件–桌面布局vue-grid-layout欢迎点击: 个人官网博客老样子，先上效果图先下载npm install vue-grid-layout --save代码demo<template> <div class="board" style="width: 50%"> <div class="home"> <grid-layout :layout="layoutD
2021-02-22 16:43:27
2668
原创 js常用插件(十二)之手写签名jsignature.js
js常用插件之手写签名jsignature.js欢迎点击: 个人官网博客jsignature.js先上效果图:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.1/jquery.min.
2021-02-07 16:29:28
3649
原创 js常用插件(十一)之图片裁剪cropper.js
js常用插件(一)之移动端调试利器VConsole—教程链接js常用插件(二)之移动端手势利器hammer单双指操作—教程链接js常用插件(三)之html2canvas生成海报(jcanvas后续出)—教程链接js常用插件(四)之jsonExportExcel导出表格(后台系统必备)–教程链接js常用插件(五)之vue-clipboard2复制粘贴–教程链接js常用插件(六)之qrcode生成二维码–教程链接js常用插件(七)之conversion压缩图片(重点:不改变图片尺寸大小)–教程链接.
2021-02-07 15:21:10
1357
原创 js常用插件(十)之移动端-省市区多级联动mobileSelect.js
js常用插件之省市区多级联动mobileSelect.js欢迎点击: 个人官网博客mobileSelect.jsmobileSelect.css代码demo<!doctype html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>mobileSelect Demo</title> <meta name="renderer" c
2021-02-01 10:41:59
1506
原创 js常用插件(九)之移动端翻书效果turn.js
js常用插件之turn.js—modernizr翻书效果欢迎点击: 个人官网博客首先引入必要的三个文件 <link rel="stylesheet" href="./css/basic.css"> <script src="./js/modernizr.2.5.3.min.js"></script> <script src="./js/turn.js"></script>turn.jsmodernizr.2.5
2021-02-01 10:30:36
1868
1
原创 js常用插件(八)之移动端滑动插件swiper，BScroll
js常用插件之移动端滑动插件swiper，BScroll这两个插件作为移动端滑动事件的扛把子，强烈建议看官方文档，更详细BScroll案例<!DOCTYPE html><html><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0
2021-01-13 15:35:09
720
原创 js常用插件(七)之conversion压缩图片(不改变图片尺寸大小)
js常用插件之conversion压缩图片(重点：不改变尺寸大小)欢迎点击: 个人官网博客图片压缩只是他的一种功能,更多可以查看官方文档用法很简单：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &
2021-01-13 15:15:57
1742
原创 js常用插件(六)之qrcode生成二维码
js常用插件之qrcode生成二维码欢迎点击: 个人官网博客先引用cdn或自己下载下来<script src="https://cdn.bootcdn.net/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>具体使用方法也很简单<div id="qrcode"></div> qrcode() { document.getElementById('qrcode').in
2021-01-13 15:02:30
1108
原创 js常用插件(五)之vue-clipboard2复制粘贴
js常用插件之vue-clipboard2复制粘贴欢迎点击: 个人官网博客使用方法简单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title&g
2021-01-13 14:54:08
575
1
原创 js常用插件(四)之jsonExportExcel导出表格(后台系统必备)
js常用插件之jsonExportExcel导出表格(后台系统必备)欢迎点击: 个人官网博客代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document<
2021-01-13 14:27:39
1756
1
原创 js常用插件(三)之html2canvas生成海报
js常用插件之html2canvas生成海报欢迎点击: 个人官网博客移动端手势利器：先引用cdn或自己下载下来<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>使用方法: <body> <button onclick="createPoster()">生成海报</button&
2021-01-13 14:20:09
1381
原创 js常用插件(二)之移动端手势利器hammer单双指操作
js常用插件之hammer单双指操作欢迎点击: 个人官网博客移动端手势利器：先引用cdn或自己下载下来<script src="https://cdn.bootcdn.net/ajax/libs/hammer.js/2.0.8/hammer.js"></script>使用方法 //要操作的元素 var hammertime= new Hammer(document.getElementById('test')); //直接调用就可以 //比如写了pan就
2021-01-13 11:51:15
3311
1
原创 js常用插件(一)之移动端调试利器VConsole
js常用插件之VConsole欢迎点击: 个人官网博客移动端调试利器：具体使用方法也很简单<script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script><script type="text/javascript"> let vConsole = new VConsole();</script>网页中会出现vconsole调
2021-01-13 11:33:59
809
原创 mongodb的mongoose框架增删改查及链表（二）
在Node中mongoose增删改查及链表欢迎点击: 个人官网博客1.创建并连接mongodb数据库先npm 下载sequelize以及mysql2//playground为数据库名称const mongoose = require('mongoose');mongoose.connect('mongodb://localhost/playground', { useUnifiedTopology: true, useNewUrlParser: true })//连接数据库 .the
2020-12-18 10:22:14
487
原创 mongodb增删改查（一）
在Nodejs中mongodb增删改查欢迎点击: 个人官网博客1.增删改查，模糊查询使用的mongodb原生命令// use itying (数据库名) 切换到数据库// show dbs //查看数据库// show collections //查看数据库集合// db.user.drop() //删除集合// db.dropDatabase() //删除当前所在数据库db.user.insert({'name':'小明'}) //创建集合并插入数据db.user.fi
2020-12-18 10:08:16
281
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人