吕彬-前端-CSDN博客

原创 axios封装RESTful API 接口

通过HTTP协议的不同方法（GET、POST、PUT、DELETE等），我们可以对资源进行不同的操作（获取、创建、更新、删除）。设计API端点：为每个资源定义API端点，即确定哪些HTTP方法（GET、POST、PUT、DELETE等）可以用于每个资源。实现API端点：根据设计的API端点，编写服务器端代码来处理对资源的请求和响应。可扩展性和可重用性：通过将应用程序的功能分解成资源和API端点，可以更轻松地扩展和重用代码。接下来，在需要使用接口的地方，可以直接引入api模块，并调用相应的方法。

2024-09-24 11:05:57 442

原创使用vite+react+ts+Ant Design开发后台管理项目（四）

本文将引导开发者从零基础开始，运用、react、react-router、react-redux、Ant Design、less、tailwindcss、axios等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。使用vite+react+ts+Ant Design开发后台管理项目（一）使用vite+react+ts+Ant Design开发后台管理项目（二）

2024-09-24 10:20:16 1279

原创使用vite+react+ts+Ant Design开发后台管理项目（三）

本文将引导开发者从零基础开始，运用、react、react-router、react-redux、Ant Design、less、tailwindcss、axios等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。使用vite+react+ts+Ant Design开发后台管理项目（一）使用vite+react+ts+Ant Design开发后台管理项目（二）

2024-09-21 15:41:50 1043

原创使用vite+react+ts+Ant Design开发后台管理项目（二）

本文将引导开发者从零基础开始，运用、react、react-router、react-redux、Ant Design、less、tailwindcss、axios等前沿技术栈，构建一个高效、响应式的后台管理系统。通过详细的步骤和实践指导，文章旨在为开发者揭示如何利用这些技术工具，从项目构思到最终实现的全过程，提供清晰的开发思路和实用的技术应用技巧。使用vite+react+ts+Ant Design开发后台管理项目（一）

2024-09-20 13:42:40 873

原创使用vite+react+ts+Ant Design开发后台管理项目（一）

本文将引导开发者从零基础开始，运用。

2024-09-19 11:09:59 1571 3

原创前端开发者必备的Nginx知识

Nginx 是一款轻量级且高性能的 HTTP 服务器和反向代理服务器，它在处理静态资源、负载均衡、反向代理等方面表现出色，非常适合作为前端项目的服务器。作为一名前端开发者，了解和掌握 Nginx 的基本配置和优化技巧是非常有必要的。Nginx 是一个高性能的 HTTP 和反向代理服务器，它以占用内存少、并发能力强而闻名。Nginx 专为性能优化而设计，能够承受高负载，支持高达数万个并发连接。Nginx 是前端项目部署的重要工具，掌握其基本的配置和优化技巧对于前端开发者来说非常重要。

2024-09-14 09:30:00 547

原创虚拟 DOM 的深入解析与 React 和 Vue 的应用案例

虚拟 DOM（Virtual DOM）是一种编程概念，在现代前端框架中广泛应用，如 React 和 Vue。它是一种轻量级的、在内存中存在的DOM表示，它并不直接与浏览器的DOM交互，而是通过对比和Diff算法来更新实际DOM，从而优化页面渲染的性能和效率。虚拟 DOM 是现代前端框架中不可或缺的一部分，它通过在内存中操作 JavaScript 对象来优化页面渲染的性能和效率。React 和 Vue 都使用虚拟 DOM 来管理 DOM 更新，但它们在实现上有所不同。

2024-09-13 09:30:00 1455

原创 Node.js 实现流式渲染

本文从理论层面深入探讨了流式渲染的相关实现方案。理论上，流式渲染的概念和实现相对简单。HTTP 标准和 Node.js 早在很久以前就对这一特性提供了支持。然而，在实际的工程应用中，流式渲染并非易事。以 React 为例，要实现流式渲染，不仅需要 React 自身作为用户界面（UI）框架提供支持，还需要借助像 nextjs 这样的元框架（meta framework）来赋予服务端相应的能力。

2024-09-12 09:30:00 1187

原创前端网络层性能优化

在数字时代，速度已成为互联网体验的关键。用户对网页加载时间的容忍度越来越低，每一毫秒的延迟都可能导致用户的流失。根据谷歌的研究，页面加载时间超过3秒的网站，其跳出率会增加120%。在这个以用户为中心的网络世界里，性能优化不再是一个选项，而是必须。

2024-09-11 10:19:47 1171

原创 React基础

React 应用程序是由组件组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组成网页单个部分的一组代码,如按钮、导航栏、卡片等，也可以大到整个页面。它是组成网页单个部分的一组代码,如按钮、导航栏、卡片等。它就像一个JavaScript函数,但返回一个渲染的元素。它接受称为"prop"的参数。组件以大写字母命名。注意事项推荐使用函数组件而不是基于类的组件。函数组件通常被称为无状态组件。JSX是JavaScript XML的缩写,它允许我们在React中编写HTML。它引

2024-09-09 17:31:24 1105

原创 vue3 中捕获全局和组件错误

生命周期钩子来捕获它们内部的错误。这个钩子也接收三个参数：错误对象、出错的组件实例以及错误信息。来定义全局错误处理器。这个钩子接受三个参数错误对象、出错的组件实例以及错误信息。在main.js或main.ts中使用。

2024-08-14 08:46:14 294

原创阿里云服务器 ECS部署jenkins

【系统配置】下找到SSH Servers，添加信息高级里面输入密码，然后点击Test Configuration 显示success说明连接成功。4.运行以下命令，修改npm镜像源为阿里云镜像，以加快Node.js下载速度。2.使用Git将NVM的源码克隆到本地的~/.nvm目录下，并检查最新版本。推送代码到仓库后，查看Jenkins是否有进行打包，有说明成功了。如果项目为私有项目，需要添加一个用户，如果为账号密码，则输入。5.运行以下命令，查看Node.js版本。7.查看已安装的Node.js版本。

2024-08-11 21:00:28 1294

原创 30 个 JavaScript 技巧，让你的代码更具可读性

为了实现更深层次的不变性，请考虑更彻底地实施不变性的库。使用 includes() 检查数组是否包含某个值，这是 indexOf 的更清晰的替代方案。创建一个新函数，当调用该函数时，将其 this 关键字设置为提供的值。将函数绑定到上下文（此值）并部分应用参数，创建更可重用和模块化的代码。使用括号表示法动态访问对象的属性，当属性名称存储在变量中时很有用。使用 XOR 按位运算符交换两个变量的值，无需临时变量。将多个源对象合并为目标对象，有效地组合它们的属性。将类似数组或可迭代的对象转换为真正的数组。

2024-08-02 09:51:04 928

原创 ES6 Object.freeze()和Object.seal()

Object.freeze()是一个可以将对象冻结的方法。一旦对象被冻结，就不能添加、删除或修改其属性。这在需要确保对象完整性、防止任何意外或故意更改的场景中非常有用。Object.seal()是一个可以限制对象结构变化的方法。虽然它不像Object.freeze()那样使对象完全不可变，但它可以防止添加或删除属性。然而，只要现有属性是可写的，它们仍然可以被修改。Object.freeze()和Object.seal()是JavaScript中提供的两个强大方法，它们对对象的可变性提供了不同程度的控制。

2024-07-30 10:42:55 476

原创 Vue3 接入 i18n 实现国际化多语言

在实际应用中，我们可能会有多个不同语言的消息文件，如en.js、fr.js、zh.js等。这样，根据用户的语言设置，我们可以动态加载相应的语言文件来显示对应的文本。在应用程序中根据用户的语言设置显示对应的翻译文本，为用户提供更好的体验。接下来，我们需要创建一个locale文件夹，并在其中创建不同语言的消息文件。插件会在构建时自动处理这些消息文件，并将它们注入到应用中，使得你可以使用。在 Vue.js 3 中实现网页的国际化多语言，最常用的包是。函数来访问翻译的文本。第一步，安装一个 Vite 下使用。

2024-07-30 10:33:05 557

原创 Vite+Vue 3 环境变量配置

在开发 Web 应用时，我们常常需要根据不同的环境（如开发、测试、生产）进行不同的配置。Vite 提供了灵活的环境变量配置机制在一个特殊的 import.meta.env对象上暴露环境变量，这些变量在构建时会被静态地替换掉。让我们可以轻松管理这些差异。

2024-07-24 08:43:46 708

原创前端开发大屏适配几种方案

假设设计稿尺寸为 1920*1080，直接使用 vw 单位，屏幕的宽默认为 100vw，那么100vw = 1920px， 1vw = 19.2px。

2024-07-23 19:43:25 2067

原创 css技巧混合模式

除去initial默认、inherit继承和unset还原这 3 个所有 CSS 属性都可以取的值外，还有另外的 16 个具体的取值，对应不同的混合效果。// 正常// 正片叠底// 滤色// 叠加// 变暗// 变亮// 颜色减淡// 颜色加深// 强光// 柔光// 差值// 排除// 色相// 饱和度// 颜色// 亮度// 默认// 继承// 还原如果不是专业的 PSer 天天和混合模式打交道，想要记住这么多效果，还是挺困难的。

2024-07-19 13:01:33 702

原创 js实现无限滚动加载数据

entries是传递给回调函数的一个参数，它是一个包含对象的数组。每个对象表示一个被观察目标元素的最新交叉状态（即目标元素与根元素或视口的交集）。IntersectionObserverEntry 对象每个time一个时间戳，表示交叉状态变化的时间戳，精确到毫秒，通常用于性能测量。target被观察的目标元素，即观察器正在观察的具体 DOM 元素。rootBounds一个对象，表示根元素的边界框。如果根元素是视口，则表示视口的边界框。一个对象，表示目标元素的边界框，即元素在视口中的位置和尺寸。一个。

2024-07-16 17:26:59 1045

原创 Vue 3中 watch 和 watchEffect的区别？

在 Vue 3 中，响应式系统允许我们声明性的绑定数据和 DOM，当数据变化时，DOM 也会自动更新。为了实现这一点，Vue 提供了特殊的 API，其中包括 reactive 和 ref，用于分别创建响应式对象和响应式基本类型值。在这些基础之上，我们可以使用 watch 和 watchEffect 来监听数据的变化并执行相应的逻辑。

2024-07-12 13:07:35 708

原创 vue3实现在style中使用响应式变量

vue2的时候需要在style模块中访问script模块中的响应式变量，为此不得不使用css变量去实现。现在vue3已经内置了这个功能啦，可以在style中使用v-bind指令绑定script模块中的响应式变量。

2024-07-11 14:16:33 852

原创 Vue2中的mixins和extends是如何区别和使用的

Vue2中的mixins和extends时，这是两个非常重要的概念，它们都可以帮助我们更好地组织和复用Vue组件的代码。在本文中，我们将深入探讨mixins和extends的区别以及如何使用它们。

2024-07-08 11:10:52 401

原创前端跨域问题解决方案

跨域产生的原因是由于浏览器的同源策略，即当页面的源和页面运行过程中加载的源不一致时，浏览器会出于安全考虑对跨域的资源访问进行限制。这种限制特别是对ajax的影响最为明显，默认情况下，它不允许ajax访问跨域资源。

2024-07-08 10:53:15 2127

原创 vue如何使用自定义插槽slot

Vue 3 中 v-slot 语法是标准用法，即使对于默认插槽也是如此，尽管默认插槽在子组件中可能不需要显式的。是用来实现组件内容分发的一个关键特性，它允许你在父组件中定义一块内容，然后在子组件中决定如何展示这块内容。Vue 3 对插槽的使用进行了简化，并推荐使用新的 v-slot 语法，即使对于默认插槽也是如此。Vue 3 中插槽的改进旨在简化API并提高可读性，同时保持了Vue组件间内容复用的强大能力。默认插槽是最基本的用法，当你在一个组件中没有明确指定插槽名称时，内容将会被分配到默认插槽。

2024-07-04 15:52:51 721

原创 es6之Proxy实现观察者模式

ES6中的Proxy是一种用于创建代理对象的特殊对象。它允许我们定义自定义行为，例如拦截和修改对象的默认操作。Proxy可以用于拦截对象的各种操作，包括属性访问、赋值、函数调用等。Proxy的作用是在目标对象之前架设一层拦截，可以对目标对象进行各种操作的拦截和自定义处理。通过使用Proxy，我们可以实现对目标对象的访问控制、数据验证、属性劫持等功能。Proxy通过使用一个代理对象来包装目标对象，并提供了一组钩子函数（也称为“陷阱”），这些钩子函数可以在代理对象上进行操作。

2024-07-02 15:21:53 1403 2

原创 TypeScript一些特性让代码更优雅

TypeScript不仅仅是JavaScript的类型超集，它还提供了一系列强大的高级特性，可以显著提高代码的质量和可维护性,掌握TypeScript的这些高级功能，不仅可以让你的代码更加健壮，还能大大提升你的开发效率。赶紧来看看吧！

2024-07-01 09:30:00 842

原创前端页面防止它人代码调试

这段代码展示了如何使用立即执行函数表达式 (IIFE) 和 setInterval 方法，通过在短时间内持续触发 debugger 语句来迫使调试器频繁中断，从而使调试变得极为困难。同时，通过递归调用 ban 函数进一步增加了复杂性，即使捕获到异常也会继续执行，确保防护措施持续生效。如果递归调用过程中出现错误（例如栈溢出），错误会被捕获并忽略，不会终止程序执行。老规矩，先阅读代码片段并思考，再看代码解析再思考，最后评论区留下你的见解！今天分享一段 JS 代码片段，是防止代码被调试或篡改的基础。

2024-06-30 15:06:36 433

原创 reduce函数高级用法

reduce()函数是 ECMAScript 6 (ES6) 中数组的一个迭代方法，它接收一个回调函数作为累加器（accumulator），对该数组的所有元素（从左到右）执行操作，最后将计算结果累积为单一输出值。：上一次回调函数的返回值，第一次调用回调函数时，如果指定的初始值 initialValue，那么该参数值就是 initialValue，否则就是数组元素的第一个。：数组中正在处理的元素。将需要去重处理的数组中的第1项在初始化数组中查找，如果找不到（空数组中肯定找不到），就将该项添加到初始化数组中；

2024-06-29 12:32:00 1531

原创 vue3 使用＜script setup＞中优雅地定义和使用全局状态管理

除了使用 Vuex 之外，我们还可以通过 Composition API 来定义和管理全局状态。这种方式更加轻量和灵活，适用于中小型项目。在这个部分，我将介绍如何使用reactive和组合函数来实现全局状态管理。首先，在src目录下创建一个store目录，并在其中创建一个文件，用于定义我们的全局状态。

2024-06-28 10:35:27 1178

原创 vue3一些高阶用法

通过这篇文章，够帮助你在开发中更加得心应手。

2024-06-28 10:25:41 1622

原创 vue3使用vue3-sfc-loader实现SFC在线编辑和预览功能

最近在做一个可视化项目，里面有一个拓展组件功能是可以在线写vue2或vue3代码然后实时可以查看组件的预览。

2024-06-25 15:02:07 870

原创前端实现灰度发布

如果进行AB测试，可以在测试平台设置实验组（使用新设计的用户）和对照组（使用旧设计的用户），并配置实验目标（如页面停留时间、转化率等），系统会自动根据用户标识分配组别，并收集相关数据。：在服务端（如Nginx、API Gateway、云服务商的负载均衡器等）配置规则，根据请求头中携带的灰度标识，将灰度用户的请求路由到灰度版前端资源或新版本后端接口。根据业务需求，决定选取活跃度较高的用户作为灰度用户，通过后端服务为这些用户的账户添加“灰度测试”标签，并将其同步到客户端（如浏览器Cookies）。

2024-06-24 18:19:58 922

原创 Vue 3 依赖注入: provide 和 inject API

总结来说，Vue 3的provide和injectAPI提供了一种强大且灵活的方式来处理复杂的组件通信问题。不过，记住任何工具都有其使用场景，无论何时应该深思熟虑并制定适合项目的最佳实践。

2024-06-23 18:22:57 814

原创 Vue 3 API 盲点

Composition API 是 Vue 3 中引入的一种新的代码组织方式。在深入了解 Vue 3 的 API 之前，我们先来回顾一下 Vue 3 的主要特性。在 Vue 3 中，组件可以返回多个根节点，这就是 Fragments 的概念。接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性。是 Vue 3 引入的一种新的组件，它可以将组件的内容渲染到 DOM 树中的指定位置。用来定义一个响应式的对象，它只能用来定义对象类型的值。选项用于声明组件中可以触发的事件。

2024-06-23 18:18:49 1083

空空如也

空空如也