B.--CSDN博客

原创 Next.js 学习 - 路由处理程序 (Route Handlers)

Next.js 的路由处理程序非常灵活，通过文件系统轻松创建各种路径，还可以处理不同的 HTTP 方法，传递路径和查询参数，并控制缓存行为，满足多种开发需求。

2024-10-21 19:08:24 828

原创 Next.js 学习 - 路由系统（Routing）

Next.js 的路由系统基于文件系统，这意味着文件和文件夹的结构决定了 URL 路径。相较于传统的 React 应用中的路由配置，Next.js 的文件路由系统非常简洁和自动化。

2024-10-16 15:12:16 675

原创 Next.js 学习 - 生命周期

Next.js 是一个基于 React 的框架，除了继承 React 组件的生命周期之外，还扩展了自己的数据获取和页面渲染生命周期。

2024-10-15 17:27:43 687

原创在 React 项目中渲染 Markdown 文件

要在 React 项目中渲染一个 Markdown 文件（例如 .md 文件），并确保其中的图片能够正确显示，可以使用一些库来处理 Markdown 渲染，比如 react-markdown 和 remark-gfm。

2024-09-26 16:39:46 412

原创 Remix 学习 - @remix-run/react 中主要的 hooks

在 @remix-run/react 中，hooks 提供了强大的功能，可以帮助你处理数据提交、错误处理、路由渲染和查询参数管理等功能。结合使用它们可以大大简化开发过程。

2024-09-14 15:22:11 831

原创 Remix 学习 - @remix-run/react 中的主要组件

@remix-run/react 提供组件如 Link, NavLink, Form, Outlet 等，用于实现无刷新导航、表单处理、嵌套路由等功能，提升用户体验和开发效率。这些组件还支持自动滚动恢复和开发时自动刷新。

2024-09-13 14:17:46 975

原创 Remix 学习 - 路由模块（Route Module）

在 Remix 中，每个路由模块（route module）都可以包含多个导出，用于处理不同的功能。每个路由模块可以根据需要导出这些功能，以支持页面的不同需求。通过这些导出，Remix 提供了灵活的方式来处理数据、错误和页面渲染。

2024-09-12 18:17:49 720

Remix 的数据加载机制非常强大，旨在优化应用性能和用户体验。每个路由模块可以导出一个 loader 函数，用于获取该页面所需的数据。loader 函数在服务器端执行，并可以返回 JSON 数据。在组件中使用 useLoaderData 钩子来访问加载的数据，可以使用 catchBoundary 和 errorBoundary 来处理加载过程中的错误，Remix 还会自动处理数据的缓存和更新，确保数据在客户端和服务器之间保持同步。

2024-09-12 14:24:55 339

原创 Remix 学习 - 文件系统路由和动态路由

在 Remix 中，文件系统路由通过在 app/routes 目录中创建文件和文件夹来定义，每个文件或文件夹对应一个路由路径。动态路由允许在 URL 中使用动态参数，通过在文件名中使用 $ 前缀来定义动态部分。

2024-09-12 14:05:01 511

原创使用 SCSS 或 LESS 相比于纯 CSS 的好处

SCSS 和 LESS 作为 CSS 预处理器，提供了更多的编程功能，使得样式代码更加简洁、灵活和可维护。虽然现代 CSS 也在不断引入新特性（如 CSS 变量、网格布局等），但 SCSS/LESS 在复杂项目中依然具有明显的优势。

2024-09-04 17:24:47 1035 1

原创开发 Shopify 模板的步骤

开发 Shopify 模板（主题）需要掌握一些基础的网页技术（HTML、CSS、JavaScript）以及 Shopify 特有的 Liquid 模板语言。

2024-08-28 17:36:32 1183

原创使用 Tailwind CSS 实现水平和垂直居中对齐的方法

使用 Tailwind CSS 实现水平和垂直居中对齐的方法有：1. 使用 flex 布局；2. 使用 grid 布局；3. 使用绝对定位

2024-08-20 10:18:36 604

原创前端检测当前的网络状况的方法

前端可以通过一些方法来检测当前的网络状况：1. 使用 navigator.onLine 属性；2. 定期发送请求；3. 使用 Service Worker；4. 使用 Network Information API

2024-08-09 18:52:21 658

原创前端将后台返回的UTC时间格式化为本地时间的方法

1. 在前端将后台返回的UTC时间格式化为本地时间，可以使用JavaScript的Date对象和相关的格式化方法; 2. 如果需要将UTC时间转换为特定时区的时间，可以使用第三方库如moment-timezone或者date-fns-tz。

2024-08-06 15:05:36 399

原创 JavaScript 中的 `||` 和 `??`

|| 和 ?? 都是 JavaScript 中的逻辑运算符，但它们有不同的用途和行为。如果你希望忽略所有假值（falsy），使用 ||。如果你只希望忽略 null 和 undefined，使用 ??。

2024-07-30 15:23:41 447

原创在一个使用了 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 431

原创关于单点登录（Single Sign-On，SSO）

单点登录（Single Sign-On, SSO）是一种用户认证机制，允许用户在一个地方登录后，能够访问多个相关但独立的软件系统，而无需在每个系统中重新登录。这种机制简化了用户的登录过程，提升了用户体验，同时也便于企业对用户身份的集中管理和安全控制。

2024-07-05 18:31:45 789

原创在 React 项目中使用 Auth0 并集成到后端服务的配置步骤

在 React 项目中集成 Auth0，首先在 Auth0 Dashboard 创建和配置应用程序。然后，安装 `@auth0/auth0-react` SDK 并在项目中配置 Auth0 提供程序。使用 `useAuth0` 钩子访问认证状态，创建登录和登出按钮。最后，在后端服务中使用 JWT 中间件验证令牌，并在前端通过 `getAccessTokenSilently` 获取访问令牌，向后端 API 发送带有令牌的请求。

2024-07-04 14:35:26 422

原创 Sass 和 Less 的区别

Sass 和 Less 是两种流行的 CSS 预处理器，它们帮助开发者编写更简洁、高效、可维护的 CSS 代码。尽管它们的目标相似，但在语法、特性和使用上有一些区别。

2024-06-20 16:01:34 565

原创新建一个 React TypeScript 项目，并使用 Webpack 进行构建和打包

用 create-react-app 新建一个 React TypeScript 项目，安装 Webpack 和相关插件，使用 Webpack 进行构建和打包。

2024-06-19 16:51:53 1090

原创使用 git 遇到权限错误，重新生成SSH密钥

如果在执行 `git` 相关的命令的时候遇到权限错误，可能是因为你之前使用了不同的用户名在本地生成了SSH密钥。可以尝试删除旧的SSH密钥文件，再重新生成SSH密钥。

2024-06-17 11:28:59 406

原创 VS Code 常用快捷键

快捷键可以大大提高使用 VS Code 时的效率。可以在 VS Code 中通过 `Ctrl + K, Ctrl + S`（Windows）或 `Cmd + K, Cmd + S`（Mac）查看和自定义更多快捷键。

2024-06-13 17:29:16 296

原创在 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 7900 2

原创 Flutter 常用的 Material 组件及其相关属性

Flutter 中的 Material 组件库提供了一系列用于构建漂亮的 Material Design 风格用户界面的组件。本文是一些常用的 Material 组件及其相关属性的介绍。

2024-06-06 18:28:52 927 1

原创 Flutter StatefulWidget 和 StatelessWidget 的区别

StatelessWidget 是不可变的，这意味着一旦它们被创建，它们的属性就不能改变。它们适用于那些状态在构建之后不会发生变化的场景。典型的例子包括文本、图标和静态图片等。StatefulWidget 是可变的，它们可以在其生命周期内持有和管理状态。当状态改变时，可以调用 setState 方法来触发 Widget 的重新构建。它们适用于那些状态会在构建之后发生变化的场景，如表单、动画和用户交互等。

2024-06-05 18:24:26 396

原创浏览器缓存机制

浏览器加载资源时，先检查缓存，命中强缓存则直接使用，否则向服务器请求。服务器返回资源及响应头，浏览器缓存并记录。下次加载时，先比较缓存过期时间，命中强缓存则使用，否则发起协商缓存请求。服务器根据请求头判断资源是否有变化，返回304或新资源。通过缓存机制，减少请求，加快加载速度。

2024-06-03 13:47:23 237 1

原创如何使用 Range 和 Selection API 精确管理光标位置和选区

Range 和 Selection API 是浏览器提供的用于处理用户文本选区和光标位置的强大工具。Range: 表示文档中的连续区域，可以包含部分节点和文本节点；Selection: 表示用户当前选择的文本范围，通常包含一个或多个 Range 对象。

2024-05-29 15:55:03 799

原创二级域名和三级域名的同名 Cookie 访问优先级问题

在三级域名的页面访问同名 Cookie 时，浏览器会优先使用三级域名设置的 Cookie 而非二级域名设置的 Cookie。

2024-05-28 16:50:48 466

原创前端开发中常用的加密方法

为了保护用户的数据和隐私安全，前端加密应运而生。前端加密指的是在数据从用户的浏览器发送到服务器之前，对数据进行加密处理。这样做的目的是让数据在传输过程中变得不可读，即使被截获也无法理解其内容。

2024-05-27 13:53:03 735

原创关于网站的 Favicon

Favicon 是网站上显示在浏览器标签栏和书签栏中的小图标。它是网站的品牌标识，通常是网站的 Logo 或其他相关图像的缩小版本。Favicon 的格式不一定是 .ico 格式，它可以是 .png、.jpg 甚至是 .gif，不过 .ico 格式是所有浏览器都支持的。Favicon 文件通常位于网站的根目录下，浏览器会自动在加载网页时寻找并显示它。

2024-05-23 11:10:05 455 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 245 1

原创全局 Sass 资源的使用与配置

sass-resources-loader 是一个 Webpack loader，用于将全局 Sass 资源自动注入到每个模块中，避免了重复代码和手动导入的麻烦。通过配置全局 Sass 资源路径，可以在所有模块中直接使用这些资源，减少代码冗余、提高维护性和开发效率。全局 Sass 资源的使用可以减少重复代码、简化维护工作、提高开发效率，让我们更方便地使用和管理 Sass 资源。

2024-05-11 15:15:40 420 1

原创 Javascript 中 || 和 ?? 运算符的区别

|| 运算符用于逻辑判断，返回第一个为真的操作数，而 ?? 运算符用于空值合并，返回第一个非空的操作数

2024-05-10 15:35:50 319 3

原创前端下载非同源图片

使用 fetch 方法获取图片数据，并将其转换为 Blob 对象。然后，创建一个临时的 URL 对象，将 URL 对象赋值给标签的 href 属性，并设置 download 属性为所需的文件名。最后，通过模拟点击标签来触发下载。

2024-05-10 13:29:13 279 1

原创什么是 loader？什么是 plugin？

Webpack 本身只能处理 Javascript、json 等资源，其他资源需要借助 loader（加载器），webpack 才能解析。plugin（插件）是 webpack 中的扩展器，在 webpack 运行的生命周期中，会广播出许多钩子事件，plugin 可以监听这些事件，并挂载自己的任务，也就是注册事件。当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。

2024-05-04 15:03:53 603

原创跨域限制导致无法触发 iframe 中内容的 onclick 事件

如果遇到跨域限制导致无法触发 iframe 中内容的 onclick 事件，可以考虑：1. 使用 postMessage；2. 修改响应头；3. 使用代理页面

2024-04-29 13:49:12 571

原创浏览器一帧都会干些什么？

浏览器一帧会经过这几个过程：1. 接受输入事件；2. 执行事件回调；3. 开始一帧；4. 执行 RAF (RequestAnimationFrame)；5. 页面布局，样式计算；6. 绘制渲染；7. 执行 RIC (RequestIdelCallback)

2024-04-27 23:45:21 579 1

原创 CSRF 攻击

CSRF 攻击指的是跨站请求伪造攻击，攻击者诱导用户进入一个第三方网站，然后该网站向被攻击网站发送跨站请求。如果用户在被攻击网站中保存了登录态，那么攻击者就可以利用这个登陆状态，绕过后台的用户验证，冒充用户向服务器执行一些操作。CSRF 攻击的本质是利用 cookie 会在同源请求中携带发送给服务器的特点，来实现用户的冒充。

2024-04-18 20:22:25 323

原创关于 XSS 攻击

XSS 攻击指的是跨站脚本攻击，是一种代码注入攻击，是一种常见的网络安全漏洞。攻击者通过在网站注入恶意脚本，使之在用户的浏览器上运行，从而盗取用户的 cookie 信息、监听用户行为、修改 DOM、在页面内生成浮窗广告等。

2024-04-15 13:31:54 1026 1

原创 flex: 1 和 flex: auto 的区别

flex: 1 将会根据可用空间**平均分配**剩余空间，而 flex: auto 将会**根据内容大小来分配**剩余空间。

2024-04-13 14:18:40 1518

空空如也

空空如也