- 博客(86)
- 资源 (5)
- 收藏
- 关注
RSS订阅原创 解锁webpack：处理跨域devserver、摇树treeshaking、图片压缩sharp
本篇文章介绍了开发环境下，如何通过配置devserver来实现跨域请求；如何实现treeshaking以及相关的usedExports、sideEffects配置的作用；如何使用image-minimizer-webpack-plugin搭配sharp完成图片的压缩。
2025-05-26 14:21:53
1157
原创 解锁webpack：对html、css、js及图片资源的抽离打包处理
本文会讲解webpack中的基本配置以及如何通过style-loader、css-loader、mini-css-extract-plugin对css文件进行解析抽离打包处理；如何通过html-loader、html-webpack-plugin对html文件进行处理；如何通过postcss-loader给css样式添加浏览器前缀；以及如何使用asset/resource对背景图、图片进行按目录打包。
2025-04-23 12:02:38
1015
原创 解锁浏览器内置API，助力跨标签/跨页面数据通信
介绍如何使用BroadcastChannel、Service Worker、postMessage、Storage实现跨标签页/跨页面的数据传递
2025-03-01 18:10:13
909
原创 解锁Web数据存储：浏览器数据库 IndexedDB
IndexedDB 是一种在浏览器端用于存储大量结构化数据的强大 API，为现代 Web 应用提供了可靠的本地存储解决方案，本文将来简述基于IndexedDB数据库的增删改查操作。
2025-01-19 13:10:08
1386
原创 报红：找不到名称ref ts(2304)、‘ref‘ is not defined. eslint(no-undef)
设置完自动导入之后，组件中报错报红：找不到名称ref ts(2304)、'ref' is not defined. eslint(no-undef)
2024-07-24 16:27:19
2596
3
原创 自动导入unplugin-auto-import+unplugin-vue-components
Vite项目配置自动导入工具unplugin-auto-import和unplugin-vue-components
2024-07-24 15:26:31
1365
原创 微信小程序中路由跳转的方式有哪些？区别？
微信小程序路由跳转方式：navigateTo、redirectTo、navigateBack、switchTab、reLanch。
2024-04-26 11:27:23
2231
原创 vue权限按钮的实现
在做信息后台管理或涉及到不同权限的用户可以操作不同的功能时，常常会用到权限按钮，本文介绍了三种权限按钮的实现方法，v-if搭配函数、组件+插槽、自定义指令。
2023-07-24 20:44:42
4255
原创 怎么把网页变成灰色？怎么让头像或某一部分不变灰色？filter/backdrop-filter/mix-blend-mode/svg/grayscale(1)
在国家公祭日，我们哀悼沉思，势要勿忘国耻振兴中华；这些时段很多网站都会积极呼应，给与自己的网页设置成灰色；那给网页设置成灰色是经过怎样的设置来实现的呢？filter？backdrop-filter？mix-blend-mode? svg？grayscale(1)？
2023-02-04 14:36:36
1980
1
原创 vue项目中使用svg（自动导入+组件复用）
vue中通过svg-sprite-loader进行svg图标的资源解析，创建SvgIcon组件以做组件复用，避免每次都要import做图标的导入操作，实现资源的自动化导入
2022-10-29 20:37:56
2346
原创 导出与导入(require，import，module.exports，exports，export，export default)
import和require进行模块的导入，export、export default；exports、module.exports；不同的导出方式对应的导入结果
2022-10-24 18:09:13
2753
原创 页面滚动那些事儿（滚动条样式自定义，隐藏滚动条，scrollIntoView遇到头部fixed定位滚动被遮挡、vue-scrollto插件的应用）
隐藏滚动条、设置滚动条样式、通过ScrollIntoView、vue-scrollto来实现将对应的版块滚动至顶部的效果
2022-09-09 23:42:37
4099
原创 Vue2双向绑定，Object.defineProperty、Observe、Compile、Watcher、Dep各显神通，相辅相成
Vue2.x双向绑定原理：除Object.defineProperty()数据劫持，还有Compile模板解析、Watcher订阅者、Dep收集订阅者以便对订阅者们做同一更新处理，相辅相成以实现数据劫持、模板引用数据提取、模板引用数据对应值的更新等多方面功能...
2022-07-13 00:00:07
1140
2
原创 前端登录时所做的token验证（路由守卫、请求拦截器、响应拦截器）
登录后的token校验，使用全局路由守卫beforeEach()先判断目标页面是否需要token身份校验，使用请求拦截器将token配置到请求对象上，借助响应拦截器提前处理token失效问题
2022-06-29 15:23:16
8568
2
原创 浏览器组成、回流、重绘及性能优化
1、浏览器组成用户界面： 包括地址栏、后退/前进按钮、书签目录等，也就是除了用来显示所请求页面的主窗口之外的其他部分。浏览器引擎： 用来查询及操作渲染引擎的接口 。渲染引擎（浏览器内核）：用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来 。网络：用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作 。UI 后端：用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系...
2022-05-31 14:24:42
373
原创 【解决】微信小程序wx.getBackgroundAudioManager()写音频播放时，暂停后再播放又从头开始了
最近写小程序时涉及到音频播放，自然是少不了getBackgroundAudioManager()，也为用户提供方便，可以通过系统的暂停/播放来同步控制小程序的音频的暂停/播放。那么在使用的时候，我暂停了，调用了pause()，播放时我错在了直接给设置了歌曲的链接。核心点在：判断当前的歌曲链接是不是被暂停的歌曲的链接，不是原来的歌就重新赋予链接地址，否则也就是原来的歌，那就不赋予链接地址而是调用play()方法。...
2022-05-29 00:45:01
2703
原创 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
354
原创 getLocation小程序获取用户地理位置，逆地址解析（位置描述），将经纬度转为省市区的位置描述
在近期做得一个小程序里要展示当地天气情况，这也就意味着要获取当前位置信息，小程序这边需要getLocation来向用户发起弹窗申请授权获取位置信息。就像下面这样：不过呢，现在的getLocation()只能获取到用户当前位置的经度、纬度.......又让我回想起高一时那个地理我刚及格的成绩，咱得把经纬度再转成位置才行（因为我的后端是根据 省市区 来进行天气获取的，而不是经纬度，就像"北京市-北京市-海淀区"），也就是：逆地址解析查资料后发现要用【腾讯位置服务】，这个东西可以给我们提供上面的功能—
2022-05-22 12:26:44
6532
原创 uniapp-微信小程序-图片转base64
当前在做得小程序设计拍照识别，而服务器方需要前端提供图片的base64编码作为参数进行解析识别，一开始想着走原生JS的base64方法——借助canvas，当然我也试了，就在自己觉得没问题的时候，调试时终端报错了：ReferenceError: Image is not defined.我着实懵了，也就是说Image对象实例化在小程序这边是无效的，查资料后真的很打脸，虽然人家微信不给Image用，但是人家给提供了转base64的方法。咱直接用就行了，唉，要是早一点对目标问题进行查询，早点看文档也许不用走
2022-05-22 00:16:41
4354
原创 Js原生轮播图切出切面一段时间再回来，轮播动画混乱问题
这个问题是早前自己玩轮播图时遇到的，查了些资料，但大多都对不上我的问题，最后在知知乎乎那里看到了解释。解释是这样说的：页面切走，有的浏览器会正常走定时器，正常更新排版视图。有的则放慢定时器，停止排版视图更新，甚至有插电和不插电的笔记本是否进入节能模式，浏览器为了节能，其优化策略都会产生调整，比如定时器精度变化.。如果代码没考虑到这些问题，可能会出岔子，个人建议，你的动画体系要以帧为主要核心。而不是以时间，见过市面上大多数动画库都错误的把时间作为缓动核心...可以按照第一句解释来看，就出在浏览器对
2022-05-17 22:06:47
745
原创 【将Ajax的异步转为同步，获取Ajax的success内部的返回值】---Promise来助力
封装了个简单的ajax（get或post）---ajaxJar函数想着拿用户登录来测试下，结果一测试就没刹住车......在用户的注册功能中，对用户名的input绑定了onblur事件，当失去焦点时判断是否为空，如果不为空再到数据库中查询这个用户名是否已经被占用了；当最后点击提交按钮的时候再调用检查用户名是否被占用的方法，如果是则不予通过，否则通过并完成注册。/*B函数*/function findUsername(obj){ /*...是否为空的逻辑*/ /*不为空发起查询
2022-05-01 00:01:43
834
原创 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
8865
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
3562
5
原创 Vue-初识（安装devtools浏览器调试工具、容器与vue实例、模板语法、事件绑定、条件渲染 、列表渲染）
下载安装配置Vue调试工具的教程放到这里喇：安装Vue-devtools浏览器调试工具容器与实例的关系：容器：简单的说就是Vue实例中el的属性值在页面结构中对应的标签实例：使用vue就要创建一个Vue实例用于管理页面、数据的渲染等功能容器与实例是一对一的关系，当一个容器 已经被一个Vue实例接管后，其他的实例再绑定这个容器对这个容器进行操作是没有作用的。（当然通常开发中就一个Vue实例，剩下的配合组件去使用）Vue指定容器的两种方式：方式1：通过实例el属性指定（el的属性值值通常
2021-11-08 13:24:41
794
原创 Git的.gitignore；Github的readme
Git工具可以管理本地仓库中的文件，但是有一些文件并不是想要git来管理。例如：我们项目中的node_modules中的文件，都是一些功能模块，而这些模块又不会有什么更改，有package.json文件存在，其他开发者根据package.json中记录的模块版本进行下载即可，也就不用将node_modules这个大东西推送至远程仓库了。那如何摆脱git的管理呢？在本地仓库根目录建立名为 .gitignore 的文件，将不用git管理的文件写在其中即可摆...
2021-10-11 10:52:41
279
原创 GitHub：SSH协议之免登陆推送
在使用Git将本地仓库推送到远程仓库Github中时，用HTTP协议地址进行推送时，需要验证账户信息（要求输入账号和密码，密码验证废弃后由token口令取代，虽然我们可以将token口令封存起来，但还是需要输入用户名）。 而Github提供的SSH协议就可以避免这个操作，我们可以在本地仓库上创建密钥，密钥分公钥和私钥，其中公钥存在于Github上，私钥存在于自己的电脑上。当推送本地仓库到远程仓库推送时，远程的公钥和本地的私钥就会进行配对，配对成功后才允许操作。对于不同的项目...
2021-10-11 10:28:24
428
原创 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
2652
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
4110
3
原创 Git使用（工作流程、使用配置、命令操作、分支branch、临时缓存stash）
Git是一个可以供我们使用的软件，首先要对Git进行下载安装；在工作中，经常会出现一些情况（例如：某个功能开发错误，需要退回某个时候的编辑版本来重新开始开发，那这个时候可能会想到将之前的文件在开发前进行备份，而当文件过大时，单纯的对文件进行备份，就要占用一定的空间内存；鉴于此，使用Git，它可以保存文件的编辑记录[第n行增加了‘hello word’，第m行删除了‘hi’]，当我们需要返回原来的编辑状态时，可以执行相关的命令，Git会根据它保存的文件修改记录来进行‘编辑退回’，也就返回了原来...
2021-10-03 19:58:52
302
原创 Ajax：获取服务端XML数据（responseXML、content-type）
XML：用于存储和传输数据，关注的是数据的内容HTML：用于展示数据，关注的是数据的外观平时使用response来获取服务端的响应数据；对于XML数据需要使用responseXML来获取。客户端获取到的responseXML有着和document类似的获取标签元素对象的方法从而可以从存在标签的响应数据中获取到被包裹在内的值<body> <!-- XML：用于存储和传输数据，关注数据的内容 HTML：用于展示数据，关注数据的外观 --> <.
2021-10-01 18:44:45
1387
原创 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
272
原创 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
562
原创 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
11464
1
原创 表单数据序列化之serialize()、serializeArray()方法的使用
serialize()可以对表单中的数据进行拼接可能之前有过这种情况：客户端将表单信息通过获取到表单项的值，再把这些值进行拼接，再将拼接好的字符串发送到服务端；现在可以使用serialize()来对表单信息进行自动拼接，serialize方法的出现使得可以不用获取每个表单项就可以拿到拼接好的字符串。注意：serialize()方法是对于表单而言的，该方法的调用者应该是某个表单对象测试serialize()：<body> <form id="form">
2021-10-01 14:10:56
5251
前端使用CSS把网页设置成灰色的几种方案
2023-02-07
Notepad++7.5.7-64位安装包.zip
2019-08-03
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人