自定义博客皮肤VIP专享

*博客头图:

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

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

博客底图:

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

栏目图:

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

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(61)
  • 资源 (1)
  • 收藏
  • 关注

原创 如果你在使用 Watt Toolkit 原名 Steam++)加速 GitHub 后,`git clone` 失败解决

失败,可能是代理配置冲突或 Watt Toolkit 的加速方式导致的问题。,确认是否是工具导致的问题。OC](这里写自定义目录标题)(原名 Steam++)加速 GitHub 后,如果 Watt Toolkit 使用。

2025-07-12 02:23:33 352

原创 CSS长度单位问题

在 CSS 中,100px。

2025-07-04 14:38:12 980

原创 微信小程序全局状态管理实现方案

实现步骤创建事件总线:if (!if (!})// 导出单例在 app.js 中挂载:// app.jsApp({// 将eventBus挂载到全局})在页面中使用:// 页面中监听事件Page({onLoad() {// 监听用户信息变化},// 页面卸载时移除监听},},// 触发事件const newInfo = {name: '王五'}})特点实现组件间松耦合通信适合跨页面、跨组件的事件通知。

2025-07-03 01:40:07 351

原创 uniapp全局状态管理实现方案

Vuex 是 Vue 的官方状态管理库,适用于复杂应用的状态管理。Pinia 是新一代的 Vue 状态管理库,更轻量且易于使用。每种方案都有其适用场景,根据项目复杂度选择最合适的方案。

2025-07-03 01:35:57 403

原创 uniapp路由拦截实现方法

以上方法可以根据项目需求灵活组合使用。

2025-07-03 01:33:38 667

原创 微信小程序实现路由拦截的方法

创建一个自定义导航组件,内部封装权限检查逻辑。

2025-07-03 01:31:09 399

原创 小程序云开发实现鉴权管理

场景OPENID是否存在说明用户已登录✅ 存在可安全使用用户未登录❌ 不存在无法获取用户身份开发工具调试⚠️ 可能模拟真机环境下严格校验因此,在云开发中,OPENID是判断用户是否登录的可靠依据,如果没有OPENID,就可以认定用户未登录。1. 检查(推荐)用户登录后,通常会把openid// 检查本地是否有 openidconsole.log('用户已登录');} else {console.log('用户未登录');// 跳转到登录页适用场景用户登录后存储openid或。

2025-07-03 01:10:11 506

原创 css遇到的一些问题

当设置html背景色后,body的背景色就变成了body自己的背景色,此时html的背景色将被浏览器获取成为浏览器的背景色。,在PC端vw单位是包含右侧滚轮的宽度,而在移动端不会包含滚轮的长度,在PC端运用vw单位进行居中对齐,会比实际偏左盒子偏右一点,因为内容区域并不包含滚轮。进行响应式布局式,媒体查询的代码要写在样式后面,否则权重一样的情况下,前者的样式会覆盖响应式的样式。所以,要让body的背景色渲染范围只在设置的body范围之内,我们需要对html进行背景样式的设置。都会失去正常的文档流,

2025-01-24 23:11:31 586

原创 Bootstrap4网格系统详解

列的工作原理:列是网格系统的基本组成部分,它们通过设置不同的类,可以在不同的屏幕尺寸下占据不同的宽度。**排序的好处:**当你需要在不同设备上调整元素的显示顺序,而又不想改变HTML结构时,列的排序功能就显得非常方便,可以根据不同的设备特性灵活调整布局。**行的重要性:**如果不使用行元素,直接将列元素放在容器中,列元素的布局可能会出现混乱,因为行元素起到了水平排列和清除边距的作用。**嵌套的意义:**嵌套列可以让你创建更复杂的布局,比如在一个主要的列中再划分出多个子区域,满足不同的内容展示需求。

2025-01-18 18:35:59 979

原创 CSS3 动画详解

关键帧是CSS3动画的核心部分,它定义了动画的起始状态、结束状态以及中间的过渡状态。

2025-01-17 18:16:17 1248

原创 css3过渡总结

CSS3过渡(Transitions)允许CSS属性在一定的时间区间内平滑地过渡,从一个值转变为另一个值。它能够让网页元素的状态变化更加自然、流畅,给用户带来更好的视觉体验。例如,当一个元素从隐藏状态变为显示状态,通过过渡可以使其淡入,而不是生硬地突然出现。

2025-01-17 17:57:08 1509

原创 CSS3 3D 转换介绍

参数:x、y、z分别表示在X轴、Y轴、Z轴方向上的移动距离,单位可以是像素(px)、百分比(%)等。例如,translate3d(100px,50px,20px)将元素在X轴方向移动100px,在Y轴方向移动50px,在Z轴方向移动20px。X轴是水平方向(从左到右为正方向),Y轴是垂直方向(从上到下为正方向),Z轴是垂直于屏幕的方向(从屏幕外指向屏幕内为正方向)。preserve-3d:子元素将在3D空间中进行转换,这使得可以创建复杂的3D结构。

2025-01-17 17:27:01 1011

原创 CSS3 2D 转换介绍

CSS3 中的 2D 转换(2D Transforms)允许你在二维平面上对元素进行操作,如移动、旋转、缩放和倾斜等,这可以让网页的布局和动画效果更加丰富多样。

2025-01-17 15:09:01 961

原创 css3网格布局

定义列和行grid-template-columns属性用于定义网格的列轨道。可以使用多种单位和方式来定义列的宽度。还可以使用fr(fractional unit)单位来创建弹性列。grid-template-rows属性用于定义网格的行轨道。和grid-template-columns类似。网格间距(Gap)grid-column-gap和grid-row-gap属性(已废弃,建议使用gap属性)

2025-01-16 16:04:59 1347

原创 css实现响应式详解

常见的值有flex - start(默认值,项目向主轴起点对齐)、flex - end(项目向主轴终点对齐)、center(项目在主轴上居中对齐)、space - between(项目在主轴上均匀分布,两端对齐)和space - around(项目在主轴上均匀分布,每个项目两侧的间隔相等)。可以分别设置行间隙和列间隙,如grid - row - gap和grid - column - gap,也可以使用grid - gap同时设置行和列的间隙(grid - gap: 10px 20px;

2025-01-15 23:10:05 1075

原创 meta name=“viewport“ content=“width=device-width, initial-scale=1.0“

meta name=“viewport” content=“width=device-width, initial-scale=1.0” 这段代码在网页设计中扮演着非常重要的角色,尤其是在响应式设计中。

2025-01-14 21:28:23 1300

原创 css选择器

CSS(层叠样式表)提供了多种选择器,以便开发者能够精确地选择HTML元素并应用样式。

2025-01-14 20:43:01 865

原创 弹性盒子模型

CSS3 弹性盒子模型(Flexbox)是一种用于在页面上布置元素的强大工具。它提供了一种更有效、灵活和响应式的方式来对容器中的项目进行布局、对齐和分配空间。

2025-01-14 15:08:34 430

原创 解决设置了body宽高,但设置背景颜色仍然会铺满问题

当html不设置背景时,body的背景将作为整个浏览器的背景色,而不是body标签自己的背景色。当设置html背景色后,body的背景色就变成了body自己的背景色,此时html的背景色将被浏览器获取成为浏览器的背景色。所以,要让body的背景色渲染范围只在设置的body范围之内,我们需要对html进行背景样式的设置。近期开发遇到一个问题,明明给body设置了宽高,然后给body设置背景,背景仍然会铺满整个屏幕。

2025-01-10 15:55:32 100

原创 浏览器解析过程

首先先获取HTML文档,然后构建DOM,在构建DOM的过程中如果遇到JS代码,JS代码会阻塞下面DOM的构建,遇到css是会构建cssom,cssom可以和DOM同时构建,互不影响,等js执行完,DOM和cssom会结合生成新的 DOM(渲染树)->布局->绘制,具体流程如下图:

2025-01-06 16:36:32 154

原创 git基本管理

工作区管理git clean命令用来从工作目录中删除所有没有跟踪(tracked)过的文件git clean -n 是一次clean的演习, 告诉你哪些文件会被删除git clean -f 删除当前目录下没有tracked过的文件,不会删除.gitignore指定的文件git clean -df 删除当前目录下没有被tracked过的文件和文件夹git checkout . 将没有放入到暂存区的所有文件恢复git checkout hd.js 放弃指定文件的修改git checkout – h

2022-02-14 13:37:29 205

原创 nrm的安装与使用

nrm 是一个 npm 源管理器,允许你快速地在 npm源间切换。安装npm i -g nrm使用1.查看可选源nrm ls2.查看当前使用的源nrm current3.切换源nrm use <registry>4.添加源nrm add <registry> <url>5. 删除源nrm del <registry>6. 测试源速度nrm test <registry>...

2022-02-11 22:03:42 273

原创 git入门

安装Git可以在windows、Mac、Linux全平台系统使用。登录 https://git-scm.com/downloads 下载你系统的Git软件并进行安装。安装成功后可以在终端输入:git --version查看版本。初始配置配置文件为 ~/.gitconfig ,执行任何Git配置命令后文件将自动创建。第一个要配置的是你个人的用户名称和电子邮件地址。这两条配置很重要,每次 Git 提交时都会引用这两条信息,说明是谁提交了更新,所以会随更新内容一起被永久纳入历史记录:git confi

2022-02-04 20:13:06 470

原创 less 入门

变量可以设置变量,同一个变量可以重复被使用。@width: 10px;#header{ width: @width;}编译:header{ width: 10px;}混合混合是一种将一组属性从一个规则集包含(或混入)到另一个规则集的方法。.test{ width: 10px;}.main{ .test(); height: 10px;}编译:.main{ width: 10px; height: 10px;}嵌套#header{ width: 100p

2021-12-25 21:43:37 122

原创 node.js文件系统

fs 模块提供了许多非常实用的函数来访问文件系统并与文件系统进行交互,无需安装。 作为 Node.js 核心的组成部分,可以通过简单地引用来使用它。下面是常用的api:fs.access(): 检查文件是否存在,以及 Node.js 是否有权限访问。fs.appendFile(): 追加数据到文件。如果文件不存在,则创建文件。fs.chmod(): 更改文件(通过传入的文件名指定)的权限。相关方法:fs.lchmod()、fs.fchmod()。fs.chown(): 更改文件(通过传入的文件名指

2021-12-14 17:02:20 778

原创 javascript异步机制 — call stack

代码在运行过程中,会有一个叫做调用栈(call stack)的概念。调用栈是一种栈结构,它用来存储计算机程序执行时其活跃子程序的信息。(比如什么函数正在执行,什么函数正在被这个函数调用等等信息)。调用栈是JS引擎执行程序的一种机制。程序每调用一层函数(方法),引擎就会生成它的栈帧,栈帧里面保存了函数的执行上下文,然后将它压入调用栈。栈是一个后进先出的结构,直到最里层的函数执行完,引擎才开始将最后加入的栈帧从栈中弹出。函数调用会在内存形成一个“调用记录”,又称“调用帧”(call frame),保存调用位置

2021-12-14 15:48:15 1067 1

原创 javascript调试

程序调试是我们在开发经常要做的事情,没有调试工具是很难去编写 JavaScript 程序的,你的代码可能包含语法错误,逻辑错误,如果没有调试工具,这些错误比较难于发现。在javascript中主要有以下这几种调试方法。console.log()这是一种静态的调试方法,可以在控制台上输出相应的数值,可以给我们看到相应的数值变化。断点调试断点调试是一种动态的调试方法,在复杂的bug面前,这是一种很高效的方法。下面我们假设存在一个累加的bug,然后通过这两种方法来调试bug: 从1累加到10,发现输出

2021-12-14 15:16:16 732

原创 javascript的错误处理

try/catch/finally 语句try/catch/finally语句作为javascript的一种处理异常的方式,基本语法如下代码所示:try{ //可能出错的地方 console.log(a);}catch(error){ //打印错误信息 console.log(error);}finally{ //无论是否出错都会执行的代码 console.log("finally");}错误类型● Error● InternalError

2021-12-14 14:19:10 573

原创 html5新特性

语义标签常见语义标签:标签描述<header></header>定义了文档的头部区域<footer></footer>定义了文档的尾部区域<nav></nav>定义文档的导航<section></section>定义文档中的节(section、区段)<article></article>定义页面独立的内容区域<aside

2021-12-12 17:18:57 235

原创 本地存储localStorage和sessionStorage

localStorage和sessionStorage一样都是用来存储客户端临时信息的对象他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现)。localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。sessionStorage生命周期为当前窗口或标签页,一旦窗口或标签页被永久关闭了,那么所有通过sessionStorage存储的数据也就被清空了。不同浏览器无法共享

2021-12-12 16:56:42 259

原创 affset、client、scroll

offsetoffsetWidth offsetHeightoffsetWidth 元素控件自身的宽度。不包括overflow未显示的部分。offsetHeight 元素控件自身的高度。offsetLeft offsetTopoffsetTop: 指元素距离最近的(带有定位的)父元素的顶部的距离,如果没有定位则为距离根元素(在标准兼容模式下为html元素;在怪异呈现模式下为body元素)顶部的距离。offsetLeft :指元素距离最近的(带有定位的)父元素的左侧的距离,如果没有定位则为距离根元

2021-12-12 16:44:45 229

原创 javascript中的事件

在文档、浏览器、标签元素等元素在特定状态下触发的行为即为事件,比如用户的单击行为、表单内容的改变行为即为事件,我们可以为不同的事件定义处理程序。JS使用异步事件驱动的形式管理事件。绑定事件的方法html绑定<button onclick="alert(`houdunren.com`)">点击</button>DOM绑定<div id="app">hello js</div><script> const app = document

2021-12-12 16:28:56 235

原创 使用axios发送网络请求

发送get请求<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl

2021-12-12 13:54:37 654

原创 BOM(浏览器对象模型)

BOM对象包含的内容window javascript层级的顶层对象,表示浏览器窗口Navigator 包含客服端浏览器的信息History 包含了浏览器窗口访问过的URLLocation 包含当前的URL信息Screen 包含客服端显示屏的信息window对象属性属性说明closed返回窗口是否已被关闭。defaultStatus设置或返回窗口状态栏中的默认文本。 (仅 Opera 支持)document对 Document 对象的只读引用。 请参阅 D

2021-12-11 22:29:37 123

原创 节点对象管理

javascrip操作的内容称为节点对象 Node ,包含12中类型的节点对象,常用的节点为document,标签元素节点,注释节点。节点均继承Node类型,所以有相同的属性和方法。document为DOM操作的起始节点。在浏览器渲染的过程中回将文档内容生成为不同的对象,不同的节点由专有的构造函数创建对象,下面时节点的原型链:原型说明Object根对象,提供hasOwnProperty等基本对象操作支持EventTarget提供addEventListener、remove

2021-12-11 16:51:08 297

原创 http协议

HTTP协议(超文本传输协议HyperText Transfer Protocol),它是基于TCP协议的应用层传输协议,简单来说就是客户端和服务端进行数据传输的一种规则。HTTP 是一种无状态 (stateless) 协议, HTTP协议本身不会对发送过的请求和相应的通信状态进行持久化处理。这样做的目的是为了保持HTTP协议的简单性,从而能够快速处理大量的事务, 提高效率。HTTP请求协议Request Headers常见属性Accept 指定客户端能够接收的内容类型 Accept: text/pl

2021-12-11 14:46:10 2189

原创 使用jQuery的Ajax发送网络请求

ajax()基本参数$.ajax({type:‘POST’, // 规定请求的类型(GET 或 POST)url:uploadV, // 请求的url地址dataType:‘json’, //预期的服务器响应的数据类型data:{},//规定要发送到服务器的数据beforeSend:function(){ //发送请求前运行的函数(发送之前就会进入这个函数)// …},contentType:发送数据到服务器时所使用的内容类型。默认是:”application/x-www-form-url

2021-12-11 13:33:59 318

原创 XMLHttpResquest level2 新特性

请求时限xhr.timeout函数可以设置请求时限,如果超过设置的请求时限,就会停止http请求。还可以设置一个请求超时的回调函数。var xhr = new XMLHttpRequest();xhr.open("get","http://127.0.0.1:8000?name=js&age=18");xhr.timeout = 1;xhr.timeout = function(err) { console.log("请求超时");};xhr.send();xhr.onloa

2021-12-11 12:57:30 364

原创 使用XMLHttpRequest发送网络请求

使用XMLHttpRequest发送get请求步骤创建xhr对象调用xhr.open()函数调用xhr.send函数监听onreadystatechange事件未携带参数的get请求var xhr = new XMLHttpRequest();xhr.open("get","http://127.0.0.1:8000");xhr.send();xhr.onreadystatechange = function() { if(xhr.readyState === 4 &

2021-12-10 15:30:40 5734

原创 异步任务管理终极方案(async await)

回调函数管理异步任务,会造成难以看懂和维护的回调地狱。使用promise可以解决回调地狱问题,但是还是不过简洁和优雅。所以出现了async,await结合的方案,使异步编程看起来几乎跟同步编程一样,跟利于代码的维护。废话少说,直接上代码。function s1(){ return new Promise((resolve,reject) => { setTimeout(() => { var a = 1; console.

2021-12-09 22:32:52 574

jQuery.zip javascript 前端 菜鸟入门

jQuery-3.2.1.js,jQuery-3.2.1.min.js,jQuery-3.2.1-API

2021-12-07

空空如也

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

TA关注的人

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