自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(76)
  • 资源 (5)
  • 收藏
  • 关注

原创 canvas截取多个视频的第一帧,第n秒画面

截取多个视频的第一帧、截取多个视频中第几秒的图像

2022-12-09 15:22:33 463

原创 vue项目中使用svg(自动导入+组件复用)

vue中通过svg-sprite-loader进行svg图标的资源解析,创建SvgIcon组件以做组件复用,避免每次都要import做图标的导入操作,实现资源的自动化导入

2022-10-29 20:37:56 488

原创 导出与导入(require,import,module.exports,exports,export,export default)

import和require进行模块的导入,export、export default;exports、module.exports;不同的导出方式对应的导入结果

2022-10-24 18:09:13 868

原创 图片和文字同行垂直居中、对齐问题

图片和文本垂直居中显示;消除图片下面的空隙;消除空白节点;

2022-09-20 20:38:26 1002 1

原创 页面滚动那些事儿(滚动条样式自定义,隐藏滚动条,scrollIntoView遇到头部fixed定位滚动被遮挡、vue-scrollto插件的应用)

隐藏滚动条、设置滚动条样式、通过ScrollIntoView、vue-scrollto来实现将对应的版块滚动至顶部的效果

2022-09-09 23:42:37 1269

原创 Vue2双向绑定,Object.defineProperty、Observe、Compile、Watcher、Dep各显神通,相辅相成

Vue2.x双向绑定原理:除Object.defineProperty()数据劫持,还有Compile模板解析、Watcher订阅者、Dep收集订阅者以便对订阅者们做同一更新处理,相辅相成以实现数据劫持、模板引用数据提取、模板引用数据对应值的更新等多方面功能...

2022-07-13 00:00:07 267 1

原创 前端登录时所做的token验证(路由守卫、请求拦截器、响应拦截器)

登录后的token校验,使用全局路由守卫beforeEach()先判断目标页面是否需要token身份校验,使用请求拦截器将token配置到请求对象上,借助响应拦截器提前处理token失效问题

2022-06-29 15:23:16 3330 2

原创 Javascript的同步与异步,异步的宏任务与微任务——事件循环

Javascript同步、异步(微任务与宏任务)、事件循环

2022-06-29 11:38:23 344 1

原创 vue-i18n国际化语言包工具

使用vue-i18n来进行页面的语言内容切换

2022-06-29 10:16:25 819

原创 flex/fixed上中下(移动端)

使用flex或fixed实现移动端顶部、内容、底部布局;别忘了html和body的高度!

2022-06-10 23:50:55 109

原创 浏览器组成、回流、重绘及性能优化

1、浏览器组成用户界面: 包括地址栏、后退/前进按钮、书签目录等,也就是除了用来显示所请求页面的主窗口之外的其他部分。浏览器引擎: 用来查询及操作渲染引擎的接口 。渲染引擎(浏览器内核):用来显示请求的内容,例如,如果请求内容为html,它负责解析html及css,并将解析后的结果显示出来 。网络:用来完成网络调用,例如http请求,它具有平台无关的接口,可以在不同平台上工作 。UI 后端:用来绘制类似组合选择框及对话框等基本组件,具有不特定于某个平台的通用接口,底层使用操作系...

2022-05-31 14:24:42 135

原创 【解决】微信小程序wx.getBackgroundAudioManager()写音频播放时,暂停后再播放又从头开始了

最近写小程序时涉及到音频播放,自然是少不了getBackgroundAudioManager(),也为用户提供方便,可以通过系统的暂停/播放来同步控制小程序的音频的暂停/播放。那么在使用的时候,我暂停了,调用了pause(),播放时我错在了直接给设置了歌曲的链接。核心点在:判断当前的歌曲链接是不是被暂停的歌曲的链接,不是原来的歌就重新赋予链接地址,否则也就是原来的歌,那就不赋予链接地址而是调用play()方法。...

2022-05-29 00:45:01 935

原创 for,for...in,for...of,forEach对于数组、对象、Set和Map

这些虽然是基础知识,但在做的时候使用vue语法涉及到条件渲染,然而用错了for in和for of致使渲染数据出错,又来夯实了下这个基础知识。我出的问题在于列表渲染时应该用键值(value),而我却拿的是键名(key),绝了。1、for of---遍历键值for of 语句遍历可迭代对象(包括数组、Set 和 Map 结构、arguments 对象、DOM NodeList 对象、字符串等)。拿数组来说:let arr = ['xi','bing','g'];for (let v o

2022-05-28 23:27:24 118

原创 getLocation小程序获取用户地理位置,逆地址解析(位置描述),将经纬度转为省市区的位置描述

在近期做得一个小程序里要展示当地天气情况,这也就意味着要获取当前位置信息,小程序这边需要getLocation来向用户发起弹窗申请授权获取位置信息。就像下面这样:不过呢,现在的getLocation()只能获取到用户当前位置的经度、纬度.......又让我回想起高一时那个地理我刚及格的成绩,咱得把经纬度再转成位置才行(因为我的后端是根据 省市区 来进行天气获取的,而不是经纬度,就像"北京市-北京市-海淀区"),也就是:逆地址解析查资料后发现要用【腾讯位置服务】,这个东西可以给我们提供上面的功能—

2022-05-22 12:26:44 1053

原创 uniapp-微信小程序-图片转base64

当前在做得小程序设计拍照识别,而服务器方需要前端提供图片的base64编码作为参数进行解析识别,一开始想着走原生JS的base64方法——借助canvas,当然我也试了,就在自己觉得没问题的时候,调试时终端报错了:ReferenceError: Image is not defined.我着实懵了,也就是说Image对象实例化在小程序这边是无效的,查资料后真的很打脸,虽然人家微信不给Image用,但是人家给提供了转base64的方法。咱直接用就行了,唉,要是早一点对目标问题进行查询,早点看文档也许不用走

2022-05-22 00:16:41 1337

原创 Js原生轮播图切出切面一段时间再回来,轮播动画混乱问题

这个问题是早前自己玩轮播图时遇到的,查了些资料,但大多都对不上我的问题,最后在知知乎乎那里看到了解释。解释是这样说的:页面切走,有的浏览器会正常走定时器,正常更新排版视图。有的则放慢定时器,停止排版视图更新,甚至有插电和不插电的笔记本是否进入节能模式,浏览器为了节能,其优化策略都会产生调整,比如定时器精度变化.。如果代码没考虑到这些问题,可能会出岔子,个人建议,你的动画体系要以帧为主要核心。而不是以时间,见过市面上大多数动画库都错误的把时间作为缓动核心...可以按照第一句解释来看,就出在浏览器对

2022-05-17 22:06:47 255

原创 【将Ajax的异步转为同步,获取Ajax的success内部的返回值】---Promise来助力

封装了个简单的ajax(get或post)---ajaxJar函数想着拿用户登录来测试下,结果一测试就没刹住车......在用户的注册功能中,对用户名的input绑定了onblur事件,当失去焦点时判断是否为空,如果不为空再到数据库中查询这个用户名是否已经被占用了;当最后点击提交按钮的时候再调用检查用户名是否被占用的方法,如果是则不予通过,否则通过并完成注册。/*B函数*/function findUsername(obj){ /*...是否为空的逻辑*/ /*不为空发起查询

2022-05-01 00:01:43 359

原创 Vue插槽的使用(匿名插槽、具名插槽、作用域插槽)以及ElementUI中table-column的slot-scope应用(scope.row、scope.$index、scope.column)

先说说插槽的使用:(才疏学浅,白话表述)可以把插槽理解为组件B中留下的一个坑,谁用这个坑谁就可以往里面填放东西,同时呢,谁也就要认组件B做儿子-----组件B也就成了这个来填坑的组件的子组件。插槽不单单是可以让父组件用它填充东西,也可以引用子组件的数据,而父组件用坑的时候也就可以用子组件传过来的数据。单个插槽(默认插槽、匿名插槽)子组件:(slotdemoson.vue)<template> <div> <h2>子组件<..

2022-02-17 23:53:11 4019 5

原创 Vue对ElementUI的组件按需引入时:报错Cannot find module:babel-preset-es2015

解决ElementUI在Vue项目中按需引入时关于babel-preset-es2015的报错:Error:Cannot find module:babel-preset-es2015Error:Plugin/Preset files are not allowed to export objects, only functions. In...

2022-01-13 17:02:17 2471 5

原创 Vue-初识(安装devtools浏览器调试工具、容器与vue实例、模板语法、事件绑定、条件渲染 、列表渲染)

下载安装配置Vue调试工具的教程放到这里喇:安装Vue-devtools浏览器调试工具容器与实例的关系:容器:简单的说就是Vue实例中el的属性值在页面结构中对应的标签实例:使用vue就要创建一个Vue实例用于管理页面、数据的渲染等功能容器与实例是一对一的关系,当一个容器 已经被一个Vue实例接管后,其他的实例再绑定这个容器对这个容器进行操作是没有作用的。(当然通常开发中就一个Vue实例,剩下的配合组件去使用)Vue指定容器的两种方式:方式1:通过实例el属性指定(el的属性值值通常

2021-11-08 13:24:41 582

原创 Git的.gitignore;Github的readme

Git工具可以管理本地仓库中的文件,但是有一些文件并不是想要git来管理。例如:我们项目中的node_modules中的文件,都是一些功能模块,而这些模块又不会有什么更改,有package.json文件存在,其他开发者根据package.json中记录的模块版本进行下载即可,也就不用将node_modules这个大东西推送至远程仓库了。那如何摆脱git的管理呢?在本地仓库根目录建立名为 .gitignore 的文件,将不用git管理的文件写在其中即可摆...

2021-10-11 10:52:41 114

原创 GitHub:SSH协议之免登陆推送

在使用Git将本地仓库推送到远程仓库Github中时,用HTTP协议地址进行推送时,需要验证账户信息(要求输入账号和密码,密码验证废弃后由token口令取代,虽然我们可以将token口令封存起来,但还是需要输入用户名)。 而Github提供的SSH协议就可以避免这个操作,我们可以在本地仓库上创建密钥,密钥分公钥和私钥,其中公钥存在于Github上,私钥存在于自己的电脑上。当推送本地仓库到远程仓库推送时,远程的公钥和本地的私钥就会进行配对,配对成功后才允许操作。对于不同的项目...

2021-10-11 10:28:24 166

原创 GitHub:push、clone、pull及多人协作

使用命令:git push 远程仓库地址 要推送的分支 来将本地仓库推送至远程仓库 例如推送主分支到远程仓库:git pushhttps://github.com/xibing-Geng/github-demo.git master但是远程仓库地址较长,每次输入命令需要每次复制粘贴很麻烦我们给这个远程仓库地址设置别名,以后用到这个远程仓库地址的时候,直接输入别名代替即可使用命令:git remote add 别名远程仓库地址 来给远程仓库地址添加别名...

2021-10-10 00:15:56 484 1

原创 GitHub:git push问题remote:Support for password authentication was removed on August 13,2021.

使用git push origin master向远程仓库推送时被告知:remote:Support for password authentication was removed on August 13,2021.Please use a personal access token instead.push的时候需要输入github的账户名和密码,而这里的大概意思就是密码验证在2021年8月13号被移除了,需要使用个人账户的token来取代密码验证。token其实就是一串字符,这串字符.

2021-10-09 22:05:22 564 1

原创 Git使用(工作流程、使用配置、命令操作、分支branch、临时缓存stash)

Git是一个可以供我们使用的软件,首先要对Git进行下载安装;在工作中,经常会出现一些情况(例如:某个功能开发错误,需要退回某个时候的编辑版本来重新开始开发,那这个时候可能会想到将之前的文件在开发前进行备份,而当文件过大时,单纯的对文件进行备份,就要占用一定的空间内存;鉴于此,使用Git,它可以保存文件的编辑记录[第n行增加了‘hello word’,第m行删除了‘hi’],当我们需要返回原来的编辑状态时,可以执行相关的命令,Git会根据它保存的文件修改记录来进行‘编辑退回’,也就返回了原来...

2021-10-03 19:58:52 129

原创 Ajax:获取服务端XML数据(responseXML、content-type)

XML:用于存储和传输数据,关注的是数据的内容HTML:用于展示数据,关注的是数据的外观平时使用response来获取服务端的响应数据;对于XML数据需要使用responseXML来获取。客户端获取到的responseXML有着和document类似的获取标签元素对象的方法从而可以从存在标签的响应数据中获取到被包裹在内的值<body> <!-- XML:用于存储和传输数据,关注数据的内容 HTML:用于展示数据,关注数据的外观 --> &lt.

2021-10-01 18:44:45 572

原创 Ajax基础:restful风格api

获取信息:get;删除信息:delete;修改信息:put;1、模拟获取用户信息(get+路由)<body> <script src="js/jquery-3.5.1.min.js"></script> <script> // 获取用户信息 setTimeout(() => { $.ajax({ type: 'get', .

2021-10-01 18:04:45 91

原创 jQuery中$get方法、$post方法的使用

get方法三个参数:请求地址,请求参数,和回调函数(用于处理服务端的响应数据)<body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#btn').on('click', function() { $.get('/bas.

2021-10-01 17:31:13 328

原创 Ajax基础:发送jsonp请求(jsonp、jsonCallback)

jsonp走的是get请求方式,也就是ajax的默认请求方式;ajax方法中也涵盖了jsonp请求,可以通过ajax方法来发送jsonp请求;<!--客户端代码--><body> <button id="btn">发送jsonp请求</button> <script src="js/jquery-3.5.1.min.js"></script> <script> $('#bt

2021-10-01 16:30:20 6276 1

原创 表单数据序列化之serialize()、serializeArray()方法的使用

serialize()可以对表单中的数据进行拼接可能之前有过这种情况:客户端将表单信息通过获取到表单项的值,再把这些值进行拼接,再将拼接好的字符串发送到服务端;现在可以使用serialize()来对表单信息进行自动拼接,serialize方法的出现使得可以不用获取每个表单项就可以拿到拼接好的字符串。注意:serialize()方法是对于表单而言的,该方法的调用者应该是某个表单对象测试serialize():<body> <form id="form">

2021-10-01 14:10:56 968

原创 Ajax基础:jQuery中封装的ajax方法的使用(重点:传递json类型数据-避免ajax方法对请求参数的默认格式转换)

ajax是一种经常用到的技术,而除了自行封装外,jQuery也对ajax进行了封装,所以被jQuery封装的ajax方法首先明确的是源于jQuery,自然要将jQuery的js文件引入<script src="js/jquery-3.5.1.min.js"></script>这里通过点击按钮后触发客户端ajax请求的发送<button id="btn">发送请求</button><script>// 为id为btn的按钮绑定

2021-10-01 11:59:06 480

原创 Ajax基础:携带cookie信息实现跨域登录功能(cookie的传递、express-session模块的使用)

注意事项: 1、携带cookie需要客户端的Ajax对象属性withCredentials值为true 2、携带cookie需要服务端配置头信息Access-Control-Allow-Credentials为true 3、携带cookie需要服务端的配置头信息Access-Control-Allow-Origin为具体域名,不是 *服务端3000客户端html代码:<body> <div id="container"...

2021-09-24 20:01:39 330

原创 Ajax基础:访问非同源数据(服务器解决方案、request第三方模块)

同源可以限制客户端的Ajax请求,但是不能限制服务器端所以,可以让客户端先向自己所属的服务器发送请求,自己的服务器再向另一个服务器发送请求端口3000的html代码:<body> <button id="btn">提交请求</button> <script src="js/ajax.js"></script> <script> var btn = document.getElemen

2021-09-24 11:24:16 83

原创 Ajax基础:CORS跨域

CORS,跨域资源共享,允许浏览器向服务器发送Ajax请求,克服Ajax只能同源使用的限制操作: 服务端配置响应头,客户端继续使用ajax,客户端不需要做出调整 1、允许哪些客户端访问我(*表示所有):res.header('Access-Control-Allow-Origin', '*') 2、允许客户端使用哪些请求方法访问我:res.header('Access-Control-A...

2021-09-24 10:25:39 237

原创 jsonp函数封装

封装jsonp函数需要考虑的因素:(涉及到传参->函数+请求参数,需要为封装的jsonp添加形参)function jsonp(options) {}1、script标签的创建 var script = document.createElement('script');2、请求地址中需要传递的参数、对参数进行拼接var params = '';// options中的data值为需要传递的请求参数,是要以key=value&key1=value1进行传递的,所以

2021-09-23 23:18:10 466

原创 jsonp非同源交互(点击触发)

当点击按钮btn1时,动态创建script标签,再将请求地址赋值给src属性,添加到页面中得以执行script存在onload事件,当src地址请求脚本执行完毕就会触发,so可以“过河拆桥”继续测试不同端口的请求访问3000端口下的客户端文件代码:(注意:这次的fn2可以预留了参数data的,留给服务器传送)<body> <button id="btn1">点我发送请求1</button> <script>

2021-09-23 11:22:47 47

原创 jsonp处理非同源

Ajax可以在不刷新页面的情况下向服务器端发送,由于同源限制,不能进行非同源的请求发送什么是非同源:不同的协议、不同的域名、不同的端口,任何一个不同都属于非同源可以使用jsonp来解决非同源的请求发送原理: 将非同源的请求地址写在script标签的src属性中,而src是不受同源限制的作为src的属性,虽然是字符串类型,但是由于写在了script中,还是会被当作脚本去执行继而实现非同源的请求访问举例1:(在3000端口下的静态文件中写入script去访问...

2021-09-23 10:27:35 42

原创 FormData()二进制文件上传+进度条(组件结构源于Bootstrap)

注意引用bootstrap组件时除了粘贴结构,还要引入样式css文件、jQuery文件和bootstrap脚本文件因为bootstrap是基于jQuery的,所以注意顺序。客户端 16ajax.html 代码:(外链部分)<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css"><script src="js/jquery-3.5.1.min.js"></script><scri..

2021-09-21 23:51:31 184

原创 FormData()对象的使用方法

有了FormData(),可以帮助操作form表单。FormData对象可以直接通过send传递。无需获取表单控件的值,也无需拼接表单控件的name和其对应的值。页面结构:<!-- 无需action属性和method属性,因为做的是ajax请求,可以在ajax中去设置 --><form id="form1"> <input type="text" name="username"> <input type="text"

2021-09-21 21:25:01 1728

原创 Ajax基础:省市区三级联动(Ajax+template-web)

省市区三级联动注意事项:1、【市】要根据【省】的变化而变化,【区】要根据【市】的变化而变化2、select-option的下拉框,借助onchange事件,当改变选中内容时触发3、当选完省市区后,如果重新更改【省】,【市】应重新赋值,【区】应该清空不然就会造成残留的【市】【区】,不匹配【省】信息的数据同框出现的尴尬!客户端 14ajax.html 代码:(结构部分--省去了option选项,是因为option要用在模板中)<div id="container">..

2021-09-21 17:57:40 266

jquery.cycle.all.js插件资源的完整版本及mini版本

jquery.cycle.all.js插件资源的完整非压缩版本以及mini压缩版本

2022-12-01

Vue.js devtools(Vue3开发者工具插件)

Vue3的开发者工具,添加在浏览器的插件中,可以方便我们查看Vue数据

2022-01-21

template-web.zip

用于前端页面的模板引擎工具template-web

2021-09-20

教孩子学编程 PYTHON语言版.zip

青少年Python入门学习

2021-09-12

屏幕录像机(oCam)单机文件特别版

单机版的屏幕录像软件(录屏指导、录屏答辩、音频录制皆可)

2021-06-26

Notepad++7.5.7-64位安装包.zip

Notepad++可以读取编辑多种类型的文件,免费软件,可以免费使用,自带中文,支持众多计算机程序语言: C,C++,Java,pascal,C#,XML,SQL,Ada,HTML,PHP,ASP, AutoIt, 汇编, DOS等。不错的文档编辑器。

2019-08-03

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除