- 博客(33)
- 收藏
- 关注
RSS订阅原创 在一个使用了 Sass 的 React Webpack 项目中安装和使用 Tailwind CSS
在使用了 Sass 的 React 和 Webpack 项目中安装和使用 Tailwind CSS，可以按以下步骤进行：安装 Tailwind CSS 及其依赖，并初始化配置文件；创建 `postcss.config.js` 并配置 Tailwind CSS 插件；在 `src` 目录中创建 `index.css` 并引入 Tailwind 的基础、组件和工具类；更新 Webpack 配置以处理 PostCSS 插件和 Tailwind CSS；最后在组件中导入 `index.css` 和 Sass 文件
2024-07-11 17:28:05
324
原创 关于单点登录（Single Sign-On，SSO）
单点登录（Single Sign-On, SSO）是一种用户认证机制，允许用户在一个地方登录后，能够访问多个相关但独立的软件系统，而无需在每个系统中重新登录。这种机制简化了用户的登录过程，提升了用户体验，同时也便于企业对用户身份的集中管理和安全控制。
2024-07-05 18:31:45
716
原创 在 React 项目中使用 Auth0 并集成到后端服务的配置步骤
在 React 项目中集成 Auth0，首先在 Auth0 Dashboard 创建和配置应用程序。然后，安装 `@auth0/auth0-react` SDK 并在项目中配置 Auth0 提供程序。使用 `useAuth0` 钩子访问认证状态，创建登录和登出按钮。最后，在后端服务中使用 JWT 中间件验证令牌，并在前端通过 `getAccessTokenSilently` 获取访问令牌，向后端 API 发送带有令牌的请求。
2024-07-04 14:35:26
366
原创 Sass 和 Less 的区别
Sass 和 Less 是两种流行的 CSS 预处理器，它们帮助开发者编写更简洁、高效、可维护的 CSS 代码。尽管它们的目标相似，但在语法、特性和使用上有一些区别。
2024-06-20 16:01:34
468
原创 新建一个 React TypeScript 项目，并使用 Webpack 进行构建和打包
用 create-react-app 新建一个 React TypeScript 项目，安装 Webpack 和相关插件，使用 Webpack 进行构建和打包。
2024-06-19 16:51:53
887
原创 使用 git 遇到权限错误，重新生成SSH密钥
如果在执行 `git` 相关的命令的时候遇到权限错误，可能是因为你之前使用了不同的用户名在本地生成了SSH密钥。可以尝试删除旧的SSH密钥文件，再重新生成SSH密钥。
2024-06-17 11:28:59
303
原创 VS Code 常用快捷键
快捷键可以大大提高使用 VS Code 时的效率。可以在 VS Code 中通过 `Ctrl + K, Ctrl + S`（Windows）或 `Cmd + K, Cmd + S`（Mac）查看和自定义更多快捷键。
2024-06-13 17:29:16
252
原创 在 VSCode 中搭建 Flutter 开发环境并运行项目
在 VSCode 中运行 Flutter 项目并启动虚拟机的步骤如下：首先，安装 Flutter SDK 并添加其 bin 目录到系统 PATH，然后在 VSCode 中安装 Flutter 和 Dart 插件。接着，下载并安装 Android Studio，配置 Android 模拟器。创建 Flutter 项目后，打开终端启动模拟器，或通过 VSCode 工具栏选择设备，按 F5 运行项目。最后，使用调试控制台设置断点和检查变量，进行调试。这样即可在 VSCode 中运行和调试 Flutter 项目。
2024-06-07 18:39:13
2693
1
原创 Flutter 常用的 Material 组件及其相关属性
Flutter 中的 Material 组件库提供了一系列用于构建漂亮的 Material Design 风格用户界面的组件。本文是一些常用的 Material 组件及其相关属性的介绍。
2024-06-06 18:28:52
776
1
原创 Flutter StatefulWidget 和 StatelessWidget 的区别
StatelessWidget 是不可变的，这意味着一旦它们被创建，它们的属性就不能改变。它们适用于那些状态在构建之后不会发生变化的场景。典型的例子包括文本、图标和静态图片等。StatefulWidget 是可变的，它们可以在其生命周期内持有和管理状态。当状态改变时，可以调用 setState 方法来触发 Widget 的重新构建。它们适用于那些状态会在构建之后发生变化的场景，如表单、动画和用户交互等。
2024-06-05 18:24:26
305
原创 浏览器缓存机制
浏览器加载资源时，先检查缓存，命中强缓存则直接使用，否则向服务器请求。服务器返回资源及响应头，浏览器缓存并记录。下次加载时，先比较缓存过期时间，命中强缓存则使用，否则发起协商缓存请求。服务器根据请求头判断资源是否有变化，返回304或新资源。通过缓存机制，减少请求，加快加载速度。
2024-06-03 13:47:23
195
1
原创 如何使用 Range 和 Selection API 精确管理光标位置和选区
Range 和 Selection API 是浏览器提供的用于处理用户文本选区和光标位置的强大工具。Range: 表示文档中的连续区域，可以包含部分节点和文本节点；Selection: 表示用户当前选择的文本范围，通常包含一个或多个 Range 对象。
2024-05-29 15:55:03
408
原创 二级域名和三级域名的同名 Cookie 访问优先级问题
在三级域名的页面访问同名 Cookie 时，浏览器会优先使用三级域名设置的 Cookie 而非二级域名设置的 Cookie。
2024-05-28 16:50:48
362
原创 前端开发中常用的加密方法
为了保护用户的数据和隐私安全，前端加密应运而生。前端加密指的是在数据从用户的浏览器发送到服务器之前，对数据进行加密处理。这样做的目的是让数据在传输过程中变得不可读，即使被截获也无法理解其内容。
2024-05-27 13:53:03
548
原创 关于网站的 Favicon
Favicon 是网站上显示在浏览器标签栏和书签栏中的小图标。它是网站的品牌标识，通常是网站的 Logo 或其他相关图像的缩小版本。Favicon 的格式不一定是 .ico 格式，它可以是 .png、.jpg 甚至是 .gif，不过 .ico 格式是所有浏览器都支持的。Favicon 文件通常位于网站的根目录下，浏览器会自动在加载网页时寻找并显示它。
2024-05-23 11:10:05
319
1
原创 使用 webpack 搭建的 react 项目无法触发 js 事件
使用 webpack 搭建了一个 react 项目（不是直接用 create-react-app 创建的项目），当想要处理像 onClick 或者 onChange 这样简单的 js 事件的时候，都不会被执行（但是在直接用 create-react-app 搭建的项目就没问题）。将主 html 文件（index.html）里引用的 bundle 文件去掉，因为这会被自动添加。
2024-05-13 11:25:50
208
1
原创 全局 Sass 资源的使用与配置
sass-resources-loader 是一个 Webpack loader，用于将全局 Sass 资源自动注入到每个模块中，避免了重复代码和手动导入的麻烦。通过配置全局 Sass 资源路径，可以在所有模块中直接使用这些资源，减少代码冗余、提高维护性和开发效率。全局 Sass 资源的使用可以减少重复代码、简化维护工作、提高开发效率，让我们更方便地使用和管理 Sass 资源。
2024-05-11 15:15:40
371
1
原创 Javascript 中 || 和 ?? 运算符的区别
|| 运算符用于逻辑判断，返回第一个为真的操作数，而 ?? 运算符用于空值合并，返回第一个非空的操作数
2024-05-10 15:35:50
248
3
原创 前端下载非同源图片
使用 fetch 方法获取图片数据，并将其转换为 Blob 对象。然后，创建一个临时的 URL 对象，将 URL 对象赋值给 标签的 href 属性，并设置 download 属性为所需的文件名。最后，通过模拟点击 标签来触发下载。
2024-05-10 13:29:13
207
1
原创 什么是 loader？什么是 plugin？
Webpack 本身只能处理 Javascript、json 等资源，其他资源需要借助 loader（加载器），webpack 才能解析。plugin（插件）是 webpack 中的扩展器，在 webpack 运行的生命周期中，会广播出许多钩子事件，plugin 可以监听这些事件，并挂载自己的任务，也就是注册事件。当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
2024-05-04 15:03:53
528
原创 跨域限制导致无法触发 iframe 中内容的 onclick 事件
如果遇到跨域限制导致无法触发 iframe 中内容的 onclick 事件，可以考虑：1. 使用 postMessage；2. 修改响应头；3. 使用代理页面
2024-04-29 13:49:12
427
原创 浏览器一帧都会干些什么？
浏览器一帧会经过这几个过程：1. 接受输入事件；2. 执行事件回调；3. 开始一帧；4. 执行 RAF (RequestAnimationFrame)；5. 页面布局，样式计算；6. 绘制渲染；7. 执行 RIC (RequestIdelCallback)
2024-04-27 23:45:21
266
1
原创 CSRF 攻击
CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录态，那么攻击者就可以利用这个登陆状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，来实现用户的冒充。
2024-04-18 20:22:25
304
原创 关于 XSS 攻击
XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击，是一种常见的网络安全漏洞。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的 cookie 信息、监听用户行为、修改 DOM、在页面内生成浮窗广告等。
2024-04-15 13:31:54
982
1
原创 flex: 1 和 flex: auto 的区别
flex: 1 将会根据可用空间**平均分配**剩余空间，而 flex: auto 将会**根据内容大小来分配**剩余空间。
2024-04-13 14:18:40
1177
原创 HTTP1.0、1.1 和 2 的区别
HTTP/1.1 相对于 HTTP/1.0 具有更高的效率和更好的功能支持，能够更好地适应现代互联网的需求。然而，HTTP/1.1 仍然存在一些性能瓶颈，如头部冗余和阻塞等问题，这些问题在 HTTP/2 中得到了解决。HTTP/2 相对于 HTTP/1.1 具有更快的性能和更高的效率，能够更好地适应现代互联网的需求。但需要注意的是，HTTP/2 并不是在所有场景下都比 HTTP/1.1 更好，具体的性能优劣取决于具体的应用场景和网络环境。
2024-04-11 16:47:52
265
1
原创 addEventListener 第三个参数
addEventListener 的第三个参数有两种：1. options可选一个指定有关listener属性的可选参数对象；2. useCapture可选一个布尔值，表示在 DOM 树中注册了listener的元素，是否要先于它下面的EventTarget调用该listener。
2024-04-10 22:18:30
336
1
原创 浅谈 useMemo 和 useCallback 的区别
● useMemo 主要用于缓存计算结果，适用于任何需要缓存值的场景。● useCallback 主要用于缓存回调函数，适用于需要传递给子组件的事件处理函数，以避免不必要的重新渲染。
2024-04-08 20:02:50
189
原创 React render 方法的原理
在 React 中，类组件只要执行了 setState 方法，就一定会触发 render 函数执行，函数组件使用 useState 更改状态不一定导致重新 render。
2024-04-07 22:02:56
453
1
原创 JavaScript 中的 6 种继承方式
1.原型链继承：通过将一个类的实例赋值给另一个类的原型来实现继承；2.构造函数继承：使用父类的构造函数来创建子类的实例；3.组合继承：通过调用父类的构造函数来继承父类的属性，并将父类的实例赋值给子类的原型，实现继承父类的方法；4.原型式继承：创建一个临时的构造函数，将传入的对象作为该构造函数的原型，然后返回一个新的实例；5.寄生式继承：在原型式继承的基础上，添加了一些额外的属性和方法；6.寄生组合式继承：通过借用构造函数来继承属性，通过原型链的混成形式来继承方法。
2024-04-03 21:44:12
287
原创 JavaScript this 关键字的理解
this 总是返回一个对象；绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）；this关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象；JavaScript 语言之所以有 this 的设计，跟内存里面的数据结构有关系。
2024-04-02 21:36:28
605
原创 Ajax、Fetch 和 Axio 的区别
Ajax 是一种思想，XMLHttpRequest 只是实现 Ajax 的一种方式；Fetch 是浏览器内置的 API，是一个真实存在的 API，用于发送 HTTP 请求；Axios 是一个基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中发送 HTTP 请求。
2024-04-01 23:12:50
408
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人