- 博客(33)
- 收藏
- 关注
RSS订阅原创 Umi3 创建，配置环境，路由传参（代码示例）
如果没有routes 配置 ， Umi 会进入约定式路由模式， 然后分析src/pages 目录拿到路由配置。在项目文件下创建config文件夹，复制umirc.ts内容，同时删除umirc.ts文件，因为umirc.ts的权重高。或者使用useLocation函数，返回表示当前 URL 的对象。创建config文件，粘贴umirc.ts，将routes作为文件导入引入。在.umirc.ts中的routes配置项中新增路由配置。umi的路由分为配置路由与约定路由。创建路由文件，声明路由，导出。
2024-01-15 20:05:36
2096
原创 跨域问题，解决方案（前后端代码）
因此，利用 `` 标签的这两个特性，可以通过动态创建 `` 标签，给 `src` 属性设置跨域的 URL，从而实现在浏览器中跨域请求资源的效果。1. JSONP（JSON with Padding）：通过动态创建 `` 标签，利用 `` 标签可以跨域请求数据的特性，将响应数据包装在回调函数中返回，通过调用回调函数来获取数据。3. 代理：通过服务器端进行中转，将前端的请求发送到同源的后端，由后端代为请求目标资源，并将结果返回给前端。
2024-01-14 08:22:30
1191
原创 原生Ajax的使用，四种请求方法示例（前后端代码）
这样可以避免整个页面的刷新，提高用户体验。3. 异步加载数据：原生 Ajax 可以用于异步加载数据，例如从服务器获取 JSON、XML 或纯文本数据，并用于更新页面的内容。2. 原生支持：原生 Ajax 是由浏览器原生支持的技术，无需引入额外的库或框架，可以直接使用浏览器提供的 API。例如，可以使用原生 Ajax 在用户点击按钮或链接时加载新的数据，然后将数据动态地插入到已有的页面中，实现无刷新的内容更新。对于一些高级的功能，例如处理异步请求的回调地狱、安全性等问题，可能需要更加细致的处理和实施。
2024-01-13 22:40:12
4258
原创 react中概念性总结（四）
更新渲染：虚拟 DOM 的优势体现在更新渲染上，当组件的状态改变时，虚拟 DOM 把组件内部的状态变化转换成一系列可执行的 DOM 操作，再将这些操作一次性完成，比直接对真实 DOM 进行增删改的操作速度更快，减少了对真实 DOM 的多次操作。算法复杂度：虚拟 DOM 更适合大规模的数据集合的渲染，因为它采用了一些复杂度较高的算法来实现最小化渲染，而对于少量数据更新，可能其算法复杂度高于直接操作真实 DOM，所以虚拟 DOM 并不一定比真实 DOM 更快。
2024-01-12 21:32:57
1154
原创 react中概念性总结（三）
重绘（Repaint）和回流（Reflow）是与网页渲染相关的概念。重绘指的是当元素的样式发生改变，但不影响其布局的情况下，浏览器需要重新绘制（重新渲染）该元素。回流指的是当元素的布局发生改变，需要重新计算元素的几何属性（位置、大小等）并重新构建布局树。- 修改元素的背景颜色、文字颜色等样式属性。- 修改元素的可见性（visibility）或透明度（opacity）。- 修改元素的盒模型属性（大小、边距、边框等）。- 添加、删除、修改 DOM 元素。- 改变元素的尺寸（宽度、高度）。
2024-01-11 21:07:58
1287
原创 关系型非关系型数据库区别，以MongoDB为例在express中连接MongoDB示例
关系型数据库的数据存储方式可以看做是一张张的表格，这些表格可以有多个列，每个列代表了一个数据项，每一行则代表了具体的数据记录。MongoDB广泛应用于多个领域和场景，如Web应用程序的后端存储、实时分析、移动应用程序的数据持久化和互联网的大数据平台等。与关系型数据库基于表格和 SQL 的结构化模式不同，非关系型数据库采用了不同的数据模型和存储方式，以适应不同的需求和场景。2. 存储方式：关系型数据库通常使用固定模式的表格来存储数据，表格的架构需要事先定义，数据需要满足特定的结构和约束。
2024-01-10 20:27:00
1641
原创 用JS操作窗口（react中），触底加载，回到顶部，吸顶，下拉刷新，示例代码
在该函数中，可以获取滚动容器的滚动位置和当前容器的高度、滚动条高度等信息，以判断是否已经触底（即滚动条滚动到底部）。是一个只读属性，用于返回窗口在垂直方向上已滚动的像素值。是一个自执行的函数，它会在组件第一次渲染时执行一次，并返回初始的状态值。通过比较窗口的可视区域高度和文档的滚动距离，判断是否滚动到了页面底部。是只读的，因此不能将其用于更改窗口的滚动位置。的值，这里将其增加了4，表示加载了4条数据。如果滚动到了页面底部，就执行一个延迟函数，使用。在延迟函数中，执行更新状态的操作。检测是否滚动到了底部。
2024-01-09 11:47:14
2076
原创 TS中的类
在类的内部定义其他方法：除了构造函数外，你可以在类的内部定义其他方法，用于描述对象的行为。方法的定义与普通函数类似，不过不需要使用function// 构造函数的代码// 方法代码// 方法代码只读修改符readonly和静态修饰符static可以混用，但是必须是先是static再是readonly成员修饰符(public、private、protected)和只读修饰符readonly、静态修饰符static混用，必须是成员修饰符在前，只读修饰符和静态修饰符在后成员修饰符之间不能用混用。
2024-01-08 16:57:10
1263
原创 react-redux与@reduxjs/toolkit的使用，代码示例
React Redux是一个Redux库的React绑定版本，它提供了一种在React应用程序中使用Redux状态管理的方式。Redux是一个JavaScript状态容器，可管理不同组件之间的共享状态，以及应用程序的整体状态。React Redux提供了一组API和钩子，使得访问和更改Redux状态在React组件中更加容易和简单。
2024-01-07 19:05:57
1936
原创 Node.js模块分类中核心模块，常用具体代码示例
Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的开源、跨平台的 JavaScript 运行时环境。它允许开发者使用 JavaScript 在服务器端构建高性能的网络应用程序。Node.js 提供了一组强大的特性和功能，使得开发者能够轻松地构建可扩展的网络服务器和后端应用程序。它采用了事件驱动、非阻塞 I/O 模型，使得可以在单个线程中处理大量并发连接，从而实现高效的异步编程。Node.js 基于事件驱动的架构，通过回调函数和事件监听器来管理异步操作。
2024-01-05 16:38:41
1223
原创 react中概念性总结（一）
需要注意的是，props和state都是React组件的基础构建模块，同时也都应该优化和避免不必要的渲染，以提升组件性能和用户体验。通过调度器和调度优先级的配合，React可以将任务划分为不同的优先级，高优先级的任务可以打断低优先级的任务，从而更灵活地响应用户操作和保证页面的流畅。当某个子组件触发了一个事件时，该事件会冒泡至上层的父组件，父组件可以通过监听相应的事件来进行处理。而使用key，React可以保持组件的状态，并复用现有的组件实例，从而避免重新创建和销毁，提升性能和用户体验。
2024-01-03 21:38:13
1227
原创 TS中的函数
函数重载（Function Overloading）是一种在编程语言中定义多个具有相同函数名但具有不同参数列表和不同返回类型的函数的方式。通过函数重载，在调用函数时可以根据传递的参数类型或个数的不同来自动选择调用哪个函数。函数重载在 TypeScript 和其他一些静态类型语言中被广泛使用，以提供更灵活的函数调用方式，并增强代码的可读性和可维护性。通过函数重载，可以根据不同的情况提供更具体的行为和返回类型，而无需为不同的函数定义不同的函数名称。
2024-01-02 20:16:36
1346
1
原创 TS中的泛型（generics）
在 TypeScript 中，泛型（Generics）是一种允许在定义类、接口和函数时，延迟指定其中某些类型的概念。泛型可以使代码更具有通用性和灵活性，因为它可以用于处理多种类型的数据。泛型通过使用泛型参数（Generic parameter）来实现。泛型参数使用尖括号（）括起来放在类型的名称后面。这个参数可以在类、接口或函数内部代表任何类型。
2024-01-01 18:29:49
1728
原创 react中的类（有状态）组件，函数（无状态）组件·示例，对比及组件样式引用方案（附代码）
3. 无状态函数组件（Stateless Functional Components）：无状态函数组件是函数组件的一种特殊形式，它们没有内部状态（state）。在类组件中，通过构造函数（constructor）来初始化内部状态，通过生命周期方法（componentDidMount、componentDidUpdate、componentWillUnmount等）来进行特定的操作（例如发起网络请求、订阅/取消订阅事件等），通过渲染方法（render）来返回一个React元素来描述组件的输出。
2023-12-30 11:35:00
1613
原创 ts中的接口（interface）示例代码及解释
在 TypeScript 中，interface（接口）是一种用来描述对象形状的结构化类型。与其他语言中的接口概念类似，它定义了对象应该具有的属性和方法，但不提供具体的实现。与类相似，接口可以扩展其他接口，并且可以用于描述函数类型、数组类型等数据形态。在 TypeScript 中接口非常常用，因为它可以帮助开发人员更好地理解代码和规避错误，提高代码的可维护性和可读性。
2023-12-29 19:53:13
5734
1
原创 TS编译·数据类型合集·代码示例
声明一个数组，并且限制数组里面的元素只能是number类型。数组在声明的时候必须要告诉它里面存什么类型的元素如果我们在定义一个对象的时候，把变量的类型定义为object，这是不准确的，范围过大obj = {user: 'zs', age: 20, sex: 0} // 没问题，编译能过obj = [1, 2, 3, 'a', 'b', 'c'] // 没问题，编译能过，数组也属于object类型obj = {age: 20。
2023-12-26 19:43:59
1394
1
原创 react生命周期详解，代码示例（新生命周期，与旧生命周期对比）
而在 Fiber 中，React 引入了任务优先级和工作单元的概念，使得组件的更新可以被打断和中断，并且可以根据任务的优先级进行调度。另外，由于整个协调过程是同步的，每个组件都会被完整地协调和渲染，无论它们是否发生了实际的变化，这也会影响到应用程序的性能。总之，Fiber 是 React 的一种新的协调机制，用于实现可中断和增量渲染，提高应用程序的性能和用户体验。需要注意的是，在使用新的生命周期方法时，我们需要谨慎处理它们的逻辑和调用时机，确保正确地使用这些生命周期方法，并避免不必要的更新和性能问题。
2023-12-22 20:21:15
962
原创 react当中生命周期（旧生命周期详解）
生命周期（Lifecycle）指的是软件或程序在运行过程中经历的不同阶段和状态变化。在编程领域中，特别是在面向对象编程中，生命周期是指对象从创建到销毁的整个过程中所经历的状态变化。生命周期通常由一系列的方法或事件组成，用于在对象的不同阶段执行相应的操作或处理。每个阶段可以对应于不同的状态，例如初始化、运行、暂停、恢复以及销毁等。在前端Web开发中，生命周期常常用于描述JavaScript框架或库中的组件或页面的状态变化。
2023-12-21 16:40:53
1380
1
原创 react中组件通信。context API。示例代码
传递数据不再需要通过一级一级的 props 传递，而是通过 `Context` 在组件树的某个位置提供并消费数据。当 `Provider` 组件的值发生变化时，只会重新渲染使用了这个 `Context` 的组件，而不会重新渲染整个组件树。无论组件处于哪个层级，只要它们订阅了同一个 `Context`，就可以直接访问共享的数据，而不需要通过中间组件进行数据传递。4. 代码复用: 使用 `Context` 可以将共享的数据提取到一个地方，并在需要使用的多个组件中复用。组件，用于提供数据，和一个。
2023-12-20 15:43:02
1171
1
原创 windows 使用 nvm管理 node.js安装使用教程
在进行多个项目开发时，每个项目的node版本可能是不一样的，这种情况下，对于维护多个版本的node将会是一件非常麻烦的事情，而nvm就是为解决这个问题而产生的，他可以在同一台电脑上进行多个node版本之间的切换，而这正是nvm的价值所在。如果你使用的 Node.js 版本与 OpenSSL 版本不兼容，可能会导致不支持的算法错误。（如果出现故障，可以调整路径，nvm路径最好好nodejs路径在同一文件夹下，文件夹名不要有中文名或者空格）4.安装完成后，查看已装的node版本。5.切换node版本。
2023-12-19 08:21:08
1161
1
原创 react中组件通信。props 父与子。示例代码
在React中，常用的组件通信方式1. 父子组件通信：父组件可以通过props将数据传递给子组件，子组件可以通过props接收父组件传递的数据。这是React中最常见的组件通信方式。2. 子组件向父组件通信：子组件可以通过props中的回调函数将数据传递给父组件，父组件可以在回调函数中处理接收到的数据。3. 兄弟组件通信：如果两个兄弟组件没有直接的父子关系，可以通过将它们的共同状态提升到它们的最近共同父组件中，然后通过props将数据传递给兄弟组件。
2023-12-17 20:06:23
1255
1
原创 react中的Hook函数的useCallback和useMemo作用，语法，使用
和useMemo都是 React 中的 Hook，都可以优化组件的性能。
2023-12-15 16:37:12
1112
原创 react中v6路由守卫拦截，后端expressJWT中token验证实例（前后端代码）
在上述例子中，`event.preventDefault()` 会阻止表单的默认提交行为，然后你可以编写自定义的处理逻辑（比如数据验证、数据处理、或者发送 AJAX 请求）来替代默认的行为。2. 浏览器会将收集到的数据作为请求的正文，与表单的 `action` 属性指定的URL结合，以及采用表单的 `method` 属性指定的HTTP 方法，创建一个 HTTP 请求。1. 浏览器会检查表单中的输入字段，然后将这些字段的数据收集起来，构成一个键值对的集合。是用来进行签名的密钥，和app.js配置的内容一致。
2023-12-14 10:34:47
1517
1
原创 react中的，（原生js和组件）上拉刷新，触底（下拉）刷新，回到顶部
由于在某些浏览器下（例如 Chrome），当窗口内嵌页面高度小于显示器高度时，`window.screenTop` 的值会比实际值偏小（通常比 `window.screenY` 小一点），因此习惯上一般使用 `window.innerHeight+window.screenY>=window.screenTop-1` 或者 `window.innerHeight+window.screenY>=document.body.offsetHeight-1` 来判断浏览器是否滚动到页面底部。
2023-12-13 11:37:41
1364
原创 mongoose中修改，添加，删除数组列表中的对象格式的字段
Schema表格式简单数据类型时，我们使用的 模型.find({匹配字段:查找字段})，在数组嵌套结构时，我们使用该方法是不可以的。
2023-12-12 11:28:47
658
原创 react中的Hook函数，优点。（函数之useEffect）作用，语法，使用
例如，当多个函数共享同一个全局变量时，如果其中一个函数修改了该变量，就会对其他函数产生未知的影响，从而引发难以预测和调试的问题。类组件的结构通常会更复杂，包含了 constructor、render、componentDidMount 等生命周期方法，而 Hook 可以将状态逻辑和副作用操作直接写在函数组件中，简化了组件的结构和书写方式。，我们可以在函数组件中执行副作用操作，并在组件更新或销毁时进行清理，以遵循 React 的声明式、可预测和可控制的设计原则。这个函数在组件销毁的时候执。
2023-12-08 18:22:33
1224
原创 react中的V6路由，(包含v5路由差异对比)
在 React Router v6 中，你可以使用 `useNavigate` 钩子函数和 `<Link>` 组件来进行导航，但是它不会触发整个组件重新渲染，这会提高应用的性能。2. 路由定义：在 React Router v5 中，你需要使用 `<Route>` 组件来定义路由，并使用 `path` 属性指定匹配的路径。在 React Router v6 中，你需要使用 `defineRoutes` 函数来定义路由，并使用 `path` 属性指定匹配的路径。在这里我们引用拼接字符串的方法，动态传入参数。
2023-12-07 16:13:19
1226
1
原创 Git仓库基本操作命令大合集
首先，使用 Git 管理的项目，拥有三个区域，分别是工作区、暂存区、Git 仓库-------------------基本操作命令----------------
2023-12-06 19:13:17
1071
1
原创 react中v5路由（分别在函数组件和类组件中）
将某种模式下匹配到的所有路由，全都映射到同一个组件的方式就是动态路由。（在这里因为我们的路由组件包裹的是app文件，所以可以把app.js文件看作路由表来理解）当我们进行路由跳转的时候，有时候需要满足某种条件才能跳转，比如只有我们登录成功之后才能。*Switch 的作用就是让当前路径如果被匹配到了，那么就不在向下继续匹配了。前路径了，但是它也会把下面的路由，执行完毕，那么就导致了我们最后无论如何都会。当我们希望给当前的路由添加一个样式的时候，我们可以使用。这样的路径叫做父路径，把例如： /home。
2023-12-06 16:37:06
1151
原创 express中条件筛选无限极分类，以角色筛选为例（附基本无限极分类查询例子）
进行_id判断时，因为mongoose中的id是对象类型，无法直接进行判断，所以要转为字符串类型，在这里直接使用了String()方法。* 需要对查询结果进行二次操作时，要加上.lean（）方法。*与基本类型不同的是条件筛选，要注意代码查询的先后顺序。
2023-12-05 15:47:17
503
原创 express+svg-captcha（在vue中）验证码实现及验证（附前后端代码）
在这需要注意的是，从后台获取到的svg是一串html格式的字符串，所以使用span标签，绑定为v-html的内容。2.express-session中间件 （svg-captcha依赖session存储验证码信息）同时要设置点击事件，每次点击时进行验证码的刷新，为了区别每次刷新请求，在这里使用了时间戳格式。在入口文件（以app.js为例）中定义cookie解析器，位置写在路由分配前。后端搭建完毕，测试输出，收到svg格式验证码，配置vue前台。1.svg-captcha插件 （验证码生成的插件）
2023-12-04 11:06:41
1133
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人