程序员白彬-CSDN博客

原创 Vue3+TS+Node打造个人博客（总览篇）

从 Vue3 正式发布到现在，也快过去一年了（写这行文字的时候是2021年09月08日，拖延症…）。但是就我最近招聘面试的一些经历来看，很多 Vue 技术栈的候选人依然还没有使用过 Vue3。关于他们没有选择使用 Vue3 这个事情，我觉得也是可以理解的。一方面，Vue3 直接放弃了 IE11。虽然 IE 的用户数量在持续下降，但是想让老板们直接放弃 IE11 还是有一些困难。另外就是，做项目这种事情，有时候人们的选择就是能用就行，升级 Vue3 可能并不能给项目带来太多效益。对于一些历史悠久的项

2022-02-24 09:18:43 2299

原创 windows11 怎么安装 redis

由于 Redis 官方不支持 Windows，因此需要下载由微软维护的版本。通过以上步骤，您可以在 Windows 11 上成功安装并运行 Redis。命令测试连接是否成功，若返回。

2024-08-10 22:55:32 1195

原创放弃使用外键时，sequelize 应该怎么使用？

在使用 Sequelize 时，如果不使用外键，数据一致性需要通过应用层逻辑来维护，因为数据库本身不会自动确保关联关系的完整性。选项，你可以在不创建数据库外键约束的情况下，管理 Sequelize 中的模型关联。通过这些方法，可以在不使用数据库外键的情况下，通过 Sequelize 和应用层逻辑来维护数据的一致性[1][4][5]。在使用 Sequelize 时，如果想放弃使用外键，但仍然希望在模型之间建立关联，可以通过设置。在应用层进行数据验证，确保在插入或更新记录时，数据的完整性和一致性。

2024-08-10 11:30:47 493

原创 useImperativeHandle 是什么？你可以理解为 vue3 的 expose

用于定义当父组件通过 ref 访问子组件时，实际暴露哪些方法或属性。这使得开发者能够控制父组件可以调用的接口，从而实现更好的封装。都是为了实现组件之间的接口控制，确保子组件的内部实现细节不会被直接访问。方法，父组件可以通过 ref 调用这个方法。允许父组件将 ref 传递给子组件。，两者都用于控制子组件向父组件暴露的接口。，父组件无法直接访问子组件的 ref。定义暴露给父组件的方法，同时使用。确实类似于 Vue 3 的。包裹子组件以转发 ref。在 React 中，

2024-08-09 11:38:12 459

原创 handlerbars 模板中怎么对数组执行 slice 操作

需要注意的是, JavaScript 的 slice 方法中的结束索引是独占的, 意味着它会包含到结束索引之前的所有元素, 但不包括结束索引本身。如果省略结束索引, 它会切到数组的末尾。slice 助手允许你指定切片的起始和结束索引, 给你灵活控制数组切片的能力。中切片索引 0 到 5 (不包括 5), 并遍历得到的数组。

2024-08-09 09:42:23 232

原创 tailwindcss @apply 和 @layer 有什么区别

apply用于将 Tailwind 的工具类应用到自定义的 CSS 类中，简化和复用样式。@layer用于将自定义样式归类到 Tailwind 的特定层中，确保样式的声明顺序和组织性。通过结合使用这两个指令，你可以在 Tailwind CSS 项目中更高效地管理和复用样式。

2024-08-08 14:27:26 649

原创怎么在 tailwindcss 项目中自定义一些可复用的样式

这些方法可以帮助你创建可复用的自定义样式,同时保持与 Tailwind 的一致性。选择哪种方法取决于你的具体需求和项目结构[1][2][4][5]。

2024-08-08 11:27:58 336

原创 styled-components 怎么定制 antd 组件的样式

以Card组件为例说明，要使用定制 Ant Design 的Card。

2024-08-07 16:28:39 501

原创 handlerbars {{ 和 {{{ 的区别是什么

使用{{}}可以确保输出内容是安全的，防止 XSS 攻击。使用{{{}}}可以直接输出 HTML 内容，但需要确保输入内容是可信的，以避免安全风险。

2024-08-07 16:19:10 347

原创 useEffect 为什么会执行两次，导致接口重复调用

在使用 React 18 时，大家可能会有这样的困惑，希望在 useEffect 中调用接口查询一些初始化数据，但是发现接口调用了两次useEffect钩子在某些情况下确实会执行两次，这可能会让开发者感到困惑。让我们深入分析一下这种情况的原因和解决方法。

2024-08-06 09:54:28 1248

原创 ts 里类型定义为 number 和 Number 有什么区别？

1][2]. 这样可以更好地利用 TypeScript 的类型系统,并与其他原始类型的使用保持一致。总结:在 TypeScript 中,应该使用小写的。更符合 TypeScript 的类型系统,而。在 TypeScript 中,推荐使用小写的。是 JavaScript 中的对象[1].是 TypeScript 中的类型,而。主要用于特定的对象实例场景[1][2].来定义数值类型的变量和参数[1][2].来定义数值类型,而不是大写的。TypeScript中使用。

2024-08-06 09:32:14 553

原创如果 useEffect 提供的空数组依赖，会在每次渲染都执行吗

当useEffect中没有提供依赖数组时，默认情况下，它会在每次组件渲染后执行。这包括组件的首次渲染和每次状态或属性变化导致的重新渲染。

2024-08-05 12:14:39 334

原创 yarn install 怎么不修改 lock

这个命令会严格按照 yarn.lock 文件安装依赖,如果 yarn.lock 和 package.json 不匹配,则会报错而不是更新 lock 文件[4]。yarn.lock 文件不存在,此时会根据 package.json 生成新的 yarn.lock[1][2]。package.json 中的依赖版本与 yarn.lock 中记录的版本不匹配[1][2][4]。确保提交代码时 package.json 和 yarn.lock 文件保持同步[1][2][4]。

2024-08-05 11:00:39 507

原创设置了 robots.txt 禁止爬虫抓取，为什么还是能被百度搜索出来

如果其他网站链接了您禁止收录的网页，百度可能会通过这些外部链接收录您的网页[2]。在这种情况下，网页可能会出现在搜索结果中，但内容不会被抓取和建立索引。虽然大多数搜索引擎会遵守 robots.txt 的规则，但并不是所有爬虫都会严格遵守。robots.txt 文件可能存在配置错误或未正确放置在网站根目录[1][4]。百度可能已经在您设置 robots.txt 之前抓取并收录了网页。某些特殊情况下，搜索引擎可能会忽略 robots.txt 的限制，特别是当网页内容对用户查询非常相关时[5]。

2024-08-04 18:36:29 877

原创基于 uniapp html5plus API，怎么把图片保存到相册

要将图片保存到相册中，可以使用HTML5+ API中的方法。

2024-08-04 11:18:11 1221

原创 vue filter 只能用于插值语法中吗，属性绑定可以用 filter 吗

总之,Vue的过滤器不仅限于插值语法,也可以在属性绑定中使用,为数据格式化提供了灵活的方式[4]。这使得开发者可以在不同的场景下对数据进行转换和处理,提高了模板的可读性和复用性。从Vue 2.1.0版本开始,过滤器也可以用在v-bind表达式中[1][5]。Vue过滤器不仅可以用于插值语法中,也可以用于属性绑定中。过滤器可以用在双花括号插值中[1][5]。

2024-08-03 22:24:27 583

原创 uniapp android 怎么下载一个 zip 文件

请注意，在实际开发中，应当考虑文件大小、网络状况等因素，并添加适当的错误处理和用户界面反馈。此外，对于大文件下载，建议使用断点续传等优化技术来提高用户体验。

2024-08-03 22:09:58 599

原创有了 createSlice，还有必要使用 createReducer 吗？什么情况需要 createReducer 呢？

它允许你直接定义 action 类型到 reducer 函数的映射，而不是通过。如果你有非常复杂的 action 处理逻辑，可能需要在多个地方重用或者需要更灵活的组合方式，当你在一个已经使用传统 Redux 模式的项目中逐步引入 Redux Toolkit 时，它提供了更高级的抽象，使得 Redux 的状态管理变得更加简单和直观。在某些高级场景下，你可能需要动态地添加或修改 reducer。总的来说，除非你有特殊的需求或者在处理特定的边缘情况，否则。当你需要对 reducer 的行为进行更精细的控制时，

2024-08-02 22:51:07 307

原创 React 函数式组件在更新渲染时，整个函数体都会执行吗？

在 React 函数式组件更新渲染时,整个函数体都会重新执行。这是 React 函数式组件的一个重要特性。理解函数组件的这一特性对于编写高效的 React 应用非常重要,可以帮助开发者更好地处理状态、副作用和性能优化。尽管函数体重新执行,但 React 会保留组件的状态。由于函数体每次都会重新执行,所以 Hooks 必须在函数的顶层调用,不能在条件语句中使用。可以在函数体内使用条件语句来控制渲染内容,但整个函数体仍会执行。每次组件重新渲染时,函数组件的整个函数体都会从头到尾重新执行。

2024-08-02 22:45:55 359

原创 React 组件有类似 Vue3 的 attr 的概念吗

这些方法都允许你在已经定义了 Props 的情况下，仍然能够接收和处理额外的属性。无论选择哪种方法，都能实现类似 Vue 3 $attrs 的功能，允许父组件传递额外的属性到子组件。React 确实没有像 Vue 3 的 $attrs 那样的内置概念，但我们可以通过一些技巧来实现类似的功能。这个自定义 hook 允许你明确地分离出已定义的 props 和额外的 props。这种方法允许组件接受所有有效的 HTML 属性，同时还可以定义自己的特定属性。这种方法会将所有未在 Props 中定义的属性收集到。

2024-08-01 16:19:13 240

原创 React18 怎么实现 vue3 computed 的效果

使用 useMemo 可以确保只有在依赖项发生变化时才重新计算值,从而优化性能。这与 Vue 3 的 computed 属性类似,都是用于缓存计算结果并在依赖更新时重新计算。React 18 中可以使用 useMemo hook 来实现类似 Vue 3 computed 的效果。需要注意的是,不要过度使用 useMemo,因为它也会增加内存使用。只在计算成本较高或者需要避免不必要的重渲染时使用它。

2024-08-01 16:14:19 716

原创 webpack devServer proxy 有哪些常用配置项，反向代理时修改 host 要怎么做

修改 Host 头的主要目的是解决跨域问题,因为服务器可能会根据 Host 头来判断请求的来源。通过修改 Host 头,可以让服务器认为请求是从允许的域名发出的,从而避免跨域限制[5]。changeOrigin: 设置为 true 时,会将请求头中的 Host 修改为目标 URL 的主机名[4][5]。context: 可以是路径字符串或路径数组,用于配置哪些请求需要被代理[1]。这会自动将 Host 头设置为目标 URL 的主机名[5]。target: 指定要代理的目标 URL[1][4]。

2024-07-31 11:50:12 659

原创 js 可以通过反引号调用函数吗

需要注意的是，虽然这种语法看起来像是通过反引号直接调用函数，但实际上是创建了一个带标签的模板字面量，然后将这个模板字面量作为参数传递给了指定的函数.但在实际应用中，你可能会进行更复杂的处理，比如格式化数值、转换大小写、添加样式标记等。你可以遍历这些数组，进行任何需要的操作（如格式化、转换等），然后返回最终的字符串结果。JavaScript 中可以通过反引号（模板字符串）来调用函数，这种用法被称为带标签的模板字面量.函数会被调用，接收模板中的静态字符串部分和动态表达式的值作为参数.在这个例子中，当调用。

2024-07-31 10:48:13 435

原创 uniapp scroll-view 怎么通过代码控制滚动到底部

这些方法都可以实现将 scroll-view 滚动到底部的效果[1][2][4]。选择哪种方法取决于你的具体需求和场景。第一种方法最简单,第二种方法可以更精确地控制滚动位置,第三种方法则更加灵活,可以适应不同的布局情况。在使用这些方法时,记得在适当的时机调用滚动方法,比如在数据更新后或者在用户触发某个操作后[4]。另外,为了提高性能,可以考虑使用节流函数来控制滚动方法的调用频率[4]。

2024-07-30 14:22:01 1647

原创 gpt4,gpt4o,gpt4o-mini区别

GPT-4o mini 在性能与成本效益之间提供了良好的平衡，适合许多应用场景，而 GPT-4 和 GPT-4o 则在处理更复杂和要求更高的任务时表现更为出色。

2024-07-30 08:22:37 3325

原创 create-react-app .env 文件可以自定义名字吗

总之，虽然你可以使用自定义名称的环境文件，但建议尽可能遵循 Create React App 的默认命名约定，以确保最佳的兼容性和可维护性。如果你确实需要使用自定义名称，请确保在你的构建和开发脚本中正确引用这些文件。注意，环境变量会被嵌入到构建中，所以不要在 .env 文件中存储任何秘密信息（如私有 API 密钥）[4]。要使用自定义名称的环境文件，你需要在启动或构建应用时指定文件名。每次修改 .env 文件后，你需要重启开发服务器才能使更改生效[2]。包来加载自定义名称的环境文件[2]。

2024-07-29 20:40:37 316

原创现在还推荐使用 CRA 创建 React 项目吗？

总之,2024 年创建 React 项目时,建议选择 Vite 或其他现代 React 框架,而不是使用已不再维护的 CRA。现在不再推荐使用 Create React App (CRA) 来创建新的 React 项目了。其他 React 社区框架: React 官方现在推荐使用社区中流行的 React 驱动框架来创建新项目[4][5]。适合创建单页应用(SPA),也支持服务端渲染(SSR)[2][4]。Next.js: 成熟度高的 React 框架,适合需要服务端渲染或静态站点生成的项目[2]。

2024-07-29 14:21:27 745

原创 Vue 项目中 marked.js 怎么定制链接的点击行为

这些方法中，第二种和第三种更符合 Vue 的组件化思想，因为它们不依赖于全局函数。第三种方法特别简洁，因为它不需要修改 marked.js 的渲染器。选择哪种方法主要取决于你的具体需求和项目结构。如果你需要在多个组件中重用这个功能，你可能想要创建一个可重用的组件或指令。在 Vue 3 组件中使用 marked.js 并定义有效的。在你的 Vue 组件中定义。

2024-07-28 11:16:52 402

原创 docker compose build 怎么才能只构建其中一个服务的镜像

是你想要构建的服务名称，这个名称应该与你的 docker-compose.yml 文件中定义的服务名称相匹配[3]。请注意，使用这些命令时，确保你在包含 docker-compose.yml 文件的目录中执行，或者使用。这个命令会只构建 “webapp” 服务的镜像，而不会影响其他服务。如果你想确保构建过程不使用缓存，强制重新构建镜像，可以添加。这个命令会重新构建指定服务的镜像，然后在后台启动该服务。此外，如果你想在构建完成后立即启动该服务，可以使用。选项指定 compose 文件的路径。

2024-07-28 09:29:27 500

原创实现一个全栈模糊搜索匹配的功能

提供一个全栈实现的方案，包括 Vue 3 前端、Express 后端和 MySQL 数据库的分类模糊搜索功能。

2024-07-27 19:02:51 511

原创 docker compose 和 docker-compose 两个命令等价吗

虽然两者在大多数情况下可以互换使用,但 docker compose 是更新的版本,也是 Docker 官方推荐的使用方式[3]。对于大多数项目,切换到 docker compose 不需要对 Compose YAML 文件或开发工作流程进行更改[3]。如果你正在使用较新版本的 Docker,建议使用 docker compose 命令,因为它提供了更好的集成和一些新特性。但是,为了兼容性,许多系统仍然保留了 docker-compose 命令作为 docker compose 的别名[3]。

2024-07-27 10:04:25 516

原创 url 和 uri 就差一个字，到底有什么区别

URI 是一个更广泛的概念，用于唯一标识资源，而 URL 是 URI 的一个子集，除了标识资源外，还提供了如何访问该资源的信息。URL 必须是绝对的，而 URI 可以是相对的[1][2][3][4][5]。

2024-07-26 09:33:41 438

原创我想给 git 分支换一个名字，应该怎么做？

通过以上步骤,你可以成功重命名Git分支,并保持本地和远程仓库的同步。通知团队成员分支名称已更改,让他们更新本地仓库[2][5].参数是"move"的缩写[1][4].确保你在要重命名的分支上。命令查看当前所在分支[1][2].

2024-07-26 09:28:44 332

原创 unplugin-vue-components 的作用是什么

总的来说,unplugin-vue-components 通过自动化组件的导入过程,大大简化了 Vue 项目的开发流程,提高了开发效率和代码质量。自动导入组件:无需手动 import 和注册组件,插件会自动识别并按需导入使用到的组件。支持第三方UI库:内置了多个流行UI库的解析器,可以自动导入第三方组件库的组件。灵活的配置:可以通过配置文件自定义导入行为,如排除某些组件或添加自定义解析器。支持全局组件:可以设置某些组件为全局组件,在所有地方都可以直接使用。支持自定义组件目录:可以配置多个自定义的组件目录。

2024-07-25 11:05:20 467 2

原创 css in js 相比较 css modules 有什么好处？

CSS-in-JS 和 CSS Modules 都是用于管理 React 组件样式的流行方案，它们各有优势。动态样式：CSS-in-JS 可以轻松创建基于 props 或状态的动态样式，更灵活地处理复杂的样式逻辑。无需额外的构建配置：大多数 CSS-in-JS 解决方案可以直接使用，不需要额外的 webpack 配置。无需命名约定：CSS-in-JS 自动生成唯一的类名，避免了命名冲突，不需要遵循特定的命名规范。运行时优化：一些 CSS-in-JS 库支持运行时的样式优化，只加载当前渲染所需的样式。

2024-07-25 10:59:09 449

空空如也

空空如也