- 博客(91)
- 收藏
- 关注
RSS订阅原创 搭建一个完整的web svelte框架
svelte项目框架包含了路由：svelte-spa-router 样式：less tailwind 国际化：svelte-i18n 接口请求：axios 环境变量配置:.env 组件库：melt-ui 图标库：iconfont 轮播图：swiper node:20.18.1 npm 10.8.2
2025-04-07 11:49:45
491
原创 解决 axios get请求瞎转义问题
axios是一个强大的HTTP客户端库，适用于发送各种HTTP请求。qs是一个处理查询字符串的库，特别适合与axios结合使用，尤其是在处理POST请求时。你可以通过全局配置或局部配置来使用qs，并且可以根据需要调整序列化和解析的行为。希望这些信息对你有帮助！如果你有更多问题，欢迎继续提问。
2025-04-03 17:02:27
386
原创 vue实现一个pdf在线预览，pdf选择文本并提取复制文字触发弹窗效果
【代码】vue实现一个pdf在线预览，可复制pdf中内容并提取复制文字触发弹窗效果。
2025-03-06 09:42:29
522
原创 elementUI方案汇总
注意：这样改样式如果屏幕分辨率足够大无横向滚动条时，固定列下方就会多出一道横线，不美观，可以用样式去除。解决方法：改变固定列的样式，给固定列设置下边距，下边距的大小等于横向滚定条的高度。问题原因：固定列将下方的滚动条盖住了，无法触发滚动条的滚动。
2025-02-24 16:13:27
332
原创 前端之canvas实现电子签约完成线上签署功能
电子签名，下载带有签名的合同png/pdf格式，前端/vue实现电子签功能。最近发现现在租房还是签合同，越来越多采用电子签约的方式进行，好处不用多说节约成本，节约时间。抱着好奇的心理，尝试自己动手实现一个电子签。原来并不复杂主要通过了canvas绘画能力进行实现的。
2025-01-08 12:31:14
494
原创 Linux -前端需要了解的Linux 常见命令
Linux 系统⽀持多⽤户，采⽤⽤户组的形式管理多个⽤户（root ⽤户就在 root ⽤户组）Linux 系统不同于 windows，在 Linux 系统中没有盘符，根路径⽤"/"表示。Linux 系统中的⽂件和目录都有访问权限，包括读、写、执⾏等。Linux 系统压缩⽂件通常为 tar.gz(tar 包)特征：前⾯的命令必须有输出，后⾯的命令使⽤这个输出。指令格式：指令名称 [-选项] [参数]root ⽤户默认具有所有⽂件的操作权限。uname -a 查看内核版本。管道命令：多个命令的组合。
2025-01-03 16:58:25
1592
原创 如何快速在本地运行你vue打包的的dist文件
要在本机启动运行前端提供的dist包，需要先安装一个HTTP服务器，例如Apache,Nginx，phpstudy。这里以使用Node.js的http-server为例进行说明首先，确保已经安装了Node.js。如果没有安装，可以从官网下载并安装。打开终端或命令行窗口，使用以下命令安装http-servernpm install -g http-server进入dist...
2023-07-26 14:44:00
2457
原创 监听sessionStorage中值的变化
应用场景：将登录接口所返回的用户信息存入sessionStorage，在其他地方需要使用到用户信息，但不知道什么时候接口请求完，此时可以监听sessionStorage中值的变化。应用：Event自定义事件 window.dispatchEvent();事件分发var orignalSetItem = sessionStorage.setItem;sessionStorage.se...
2023-07-21 14:52:00
491
原创 23年用vuex进行状态管理out了，都开始用pinia啦！
1 Vue2项目中，Vuex状态管理工具，几乎可以说是必不可少的了。而在Vu3中，尤大大推荐我们使用pinia(拍你啊)进行状态管理，咱得听话，用就完了。使用之前我们来看一下，使用 pinia 给我们带来哪些好处?官网介绍：Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态个人理解：在我看来就是变态版 vuex，听说是为了尊重原作者，所以给改名了叫 pinia(拍你啊)看...
2023-03-03 14:58:00
170
原创 js实现一二级域名共享cookie
前言最近接手的项目中 ，有人反馈了一个问题，说是在访问网站并登录后，登录成功有登录信息，但是刷新页面后重定向到了登录页面，让从新登录。打开 goole 调试页面，查看 cookie 时发现存储的相关 token 信息不见了。原本以为 cookie 有效期有问题，但经过排查 cookie 失效为 7 天，也没有清除 cookie 的逻辑。经排查发现：我们在输入访问 hew.cn 的时候，...
2023-02-17 16:51:00
582
原创 10分钟了解MVVM，实现简易MVVM
MVVM 是 Model-View-ViewModel 缩写，也就是把 MVC 中的 Controller 演变成 ViewModel。Model 层代表数据模型，View 代表 UI 组件，ViewModel 是 View 和 Model 层的桥梁，数据会绑定到 viewModel 层并自动将数据渲染到页面中，视图变化的时候会通知 viewModel 层更新数据。Model: 代表数据...
2023-02-17 11:34:00
101
原创 8种Vue中数据更新了但页面没有更新的情况
这一句引起的，因为触发了 setter，所以单看上述例子，具有响应式特性的数据只有 message 这一层，它的动态添加的属性是不具备的。方案3： 在vuex中设置状态，动态绑定 include 值，在登录的时候缓存需要缓存的组件，在退出的时候，清除需要刷新的组件（效果很理想，也顺带解决了加载数据时，数据闪现的情况）方案1： 如果要在进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务(亲测，时而有效，时而无效，不知道是什么原因)。
2022-11-30 17:30:46
1512
1
原创 前端-文件上传几种方式及其核心思想
目录一、文件上传几种方式1、from 表单上传1.1 普通上传1.2异步上传方案1：base64上传方案2：二进制形式2、frame上传3、FormData异步上传二、大文件上传1、切片2、断点续传3、上传进度和暂停一、文件上传几种方式form表单上传iframeFormData异步上传1、from 表单上传首先要知道我们上传文件时需要修改form表单的 enctype='mult...
2022-03-31 16:47:00
1206
原创 HyBird App(混合应用)核心原理JSBridge
目录app分类HyBird App(混合应用)JSBridge介绍优势及应用场景JsBridge的核心1、Web端调用Native端代码1.1 拦截URL Schema1.2 注入api2、Native端调用Web端代码app分类Native App(原生应用)Web App(网页应用)HyBird App(混合应用)HyBird App(混合应用)Hybrid利用JSBridge...
2022-03-29 14:58:00
105
原创 微前端
一、微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端。微服务是面向服务架构(SOA)的一种变体，把应用程序设计成一系列松耦合的细粒度服务，并通过轻量级的通信协议组织起来具体地，将应用构建成一组小型服务。这些服务都能够独立部署、独立扩展，每个服务都具有稳固的模块边界，甚至允许使用不同的编程语言来编写不同服务，也可以由不同的团队来管理。1、将单页面前端应用由单一的单体应用转...
2022-03-28 16:06:00
57
原创 linux基本操作
一、 基础介绍Linux 是一套免费使用和自由传播的类 Unix 操作系统，是一个基于 POSIX 和 UNIX 的多用户、多任务、支持多线程和多 CPU 的操作系统。1、发行的 linux 版本Linux 的发行版说简单点就是将 Linux 内核与应用软件做一个打包。市面上较知名的发行版有：Ubuntu、RedHat、CentOS、Debian、Fedora、SuSE、OpenSUSE...
2022-03-23 17:32:00
100
原创 微信小程序---快速上手云开发
一、初识云开发官方文档小程序·云开发是微信团队联合腾讯云推出的专业的小程序开发服务。开发者可以使用云开发快速开发小程序、小游戏、公众号网页等，并且原生打通微信开放能力。开发者无需搭建服务器，可免鉴权直接使用平台提供的API进行业务开发目前云开发包含：云数据库，云函数，云存储，云调用优势无需搭建服务器，只需使用平台提供的各项能力，即可快速开发业务。无需管理证书、签名、秘钥，直...
2022-01-18 15:14:00
96
原创 谷歌性能测评工具lighthouse使用
1、谷歌插件lighthouse的基本介绍Lighthouse 是一个网站性能测评工具， 它是 Google Chrome 推出的一个开源自动化工具，能够对 PWA 和网页多方面的效果指标进行评测，并给出最佳实践的建议以帮助开发者改进网站的质量。它的使用方法也非常简单，我们只需要提供一个要测评的网址，它将针对此页面运行一系列的测试，然后生成一个有关页面性能的报告。通过报告我们就可以知道需要采取...
2022-01-12 18:03:00
58
原创 微信小程序--数据共享与方法共享
目录全局数据共享 Moboxnpm安装及其注意事项小程序对 npm 的支持与限制npm 依赖包的安装与使用Mobox1. 全局数据共享2. 小程序中的全局数据共享方案3. 使用mobx组件方法共享 behaviors1. 什么是 behaviors2. behaviors 的工作方式3. 创建 behavior4. 导入并使用 behavior5. behavior 中所有可用的节点6. 同名字...
2022-01-07 16:47:00
79
原创 微信小程序-自定义菜单导航（实现楼梯效果）
设计初衷在开发页面时，往往需要实现，点击页面的导航菜单页面滚动到相应位置，滚动页面实现菜单选项的高亮。在html开发中，我们可以用到a标签锚点实现，jq的动画相结合实现类似效果。在框架中vant UI框架也为我们实现了这一效果。微信小程序该如何实现？？效果展示当菜单导航滚动到页面顶部时，菜单吸顶当点击菜单按钮时，切换到对应区域(过渡到该区域，有动画效果)当内容区滚动到某类区域时，对...
2021-12-30 14:39:00
97
原创 前端开发需要了解的浏览器通识
目录浏览器通识一、浏览器架构1、单进程浏览器时代2、多进程浏览器时代3、Chrome 打开一个页面需要启动多少进程？分别有哪些进程？二、javascript单线程1、为什么采用单线程2、浏览器内核中线程之间的关系3、进程和线程又是什么呢4、任务队列三、渲染机制1. 浏览器如何渲染网页四、缓存机制1、常见 http 缓存的类型2、缓存的好处3、浏览器缓存总结强缓存协商缓存缓存位置六、浏览器存储七、...
2021-12-02 11:46:00
49
原创 vue实现聊天+图片表情功能
项目需求是这样的：要求实现类似于微信聊天一样，表情+文字效果 “文字效果????????????”表情包三种方案表情包的实现其实可以分为以下三种情况：表情包：点击表情--直接发送大表情(这种方案其实就是发送了一张定义好的图片而已)emoji图标表情：系统可识别的emoji图标表情，这种表情实现起来相对麻烦一些，其实这种方法emoji我们可以当成一个2位字符的特殊文字去处理推荐emoji网址:emoj...
2021-11-24 13:12:00
106
原创 react之react Hooks
目录1、useState保存组件状态2、useEffect 处理副作用3、useContext 减少组件层级4、useReducer 数据交互5、useCallback 记忆函数6、useMemo 记忆组件7、useRef 保存引用值8、useImperativeHandle 透传 Ref9、useLayoutEffect 同步执行副作用函数组件，没有 class 组件中的 component...
2021-11-23 11:33:00
66
原创 react之Lazy和Suspense（懒加载）
React.lazyReact.lazy 函数能让你像渲染常规组件一样处理动态引入(的组件)。什么意思呢？其实就是懒加载。其原理就是利用es6 import()函数。这个import不是import命令。同样是引入模块，import命令是同步引入模块，而import()函数动态引入。当 Webpack 解析到该语法时，它会自动地开始进行代码分割(Code Splitting)，分割成...
2021-11-23 09:35:00
71
原创 react之路由
功能：让用户从一个视图(组件)导航到另一个视图(组件)前端路由是一套映射规则，在React中，是URL路径与组件的对应关系使用React路由简单来说，就是配置路径和组件路由的使用1、安装路由npm i -S react-router-dom2、相关组件Router组件：包裹整个应用，一个React应用只需要使用一次Router： HashRouter和BrowserR...
2021-11-22 10:12:00
87
原创 react之redux状态管理
1、传统MVC框架的缺陷模型(model)－视图(view)－控制器(controller)的缩写V即View视图：用户看到并与之交互的界面。M即Model模型是管理数据：很多业务逻辑都在模型中完成。在MVC的三个部件中，模型拥有最多的处理任务。C即Controller控制器：接受用户的输入并调用模型和视图去完成用户的需求，控制器本身不输出任何东西和做任何处理。它只是接收请求并决定调用哪个...
2021-11-19 09:24:00
45
原创 ES6--ES12笔记整理（1）
一、let const五个共同特点不允许重复声明块级作用域不存在变量提升不影响作用域链暂时性死区---在代码块内，使用let/const命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”const 特殊性声明必须赋初始值；标识符一般为大写(习惯)；值不允许修改；指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值)，...
2021-11-18 14:07:00
40
原创 js实现日期格式化封装--八种
封装一个momentTime.js文件，包含8种格式.需要传两个参数:时间戳：stamp格式化的类型：type，日期补零的方法用到es6语法中的padStart(length,‘字符’):第一个参数是指定生成的字符串的最小长度，第二个参数是用来补全的字符串。如果没有指定第二个参数，默认用空格填充。需要注意的是需要将获取到的年月日转为字符串，可以直接拼接一个引号。padSta...
2021-11-02 16:36:00
52
原创 react之组建通信
父组件与子组件通信父组件将自己的状态传递给子组件，子组件当做属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变父组件利用ref对子组件做标记，通过调用子组件的方法以更改子组件的状态,也可以调用子组件的方法父组中定义ref引用import React,{Component,createRef} from 'react'import Child1 from './C...
2021-10-14 10:11:00
32
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人