- 博客(61)
- 收藏
- 关注
RSS订阅原创 Nextjs15 实战 - React Notes CURD 实现
为了实现前后端交互，可能要写多个接口来实现，比如当点击删除的时候，调用删除接口，接口返回成功，前端跳转至首页。你可能会问，同级的 page.js 又没有数据请求，添加 loading.js 有什么用？回忆下之前的路由设计，当点击 New 的时候，导航至。路由，当点击 Edit 的时候，导航至。组件，用于实现编辑时的实时预览功能。的时候，导航至对应的笔记预览页面。因为需要控制输入框的状态，所以。直接搞定，省的一个个写接口了。的时候，导航至首页。了，没必要这么麻烦，
2025-04-08 13:18:04
1040
原创 Nextjs15 实战 - React Notes 预览界面实现
客户端路由缓存功能，客户端会缓存 RSC Payload 数据，所以当点击笔记后很快再次点击，这时就会从缓存中获取数据。的最大区别，其实现的关键就在于服务端组件没有被渲染成 HTML，而是一种特殊的格式（查看返回的数据 ，你会发现这个数据很奇怪，既不是我们常见的。按照我们之前的设计，当点击左侧笔记列表的时候，会导航至对应的。
2025-04-06 13:15:00
1278
1
原创 Nextjs15 实战 - React Notes之SidebarNoteList优化和Suspense的使用
数据加载不会阻塞页面，也就是说在笔记列表还在加载的时候，用户依然可以与页面其他部分进行交互，比如点击。来控制展开和收回的状态，然后添加了一些动画效果，仅此而已。具体的实现其实并不重要，你只要知道这是一个客户端组件就行了。是一个服务端组件，在这个组件中我们引入了 dayjs 这个库，然而我们却是在。声明为客户端组件，然后直接在这个组件里全部实现呢？组件，用来实现展开和收回功能，我们将笔记的标题和时间的。因为我们现在将笔记列表数据的获取放在了顶层，所以直接为。是没有效果的，我们需要将数据获取改为在。
2025-04-05 12:30:00
710
原创 Nextjs15 实战 - React Notes 项目初始化
声明为客户端组件，你会发现立刻就多了。组件使用的是服务端渲染，这意味着。的代码并不会被打包到客户端的
2025-04-03 13:01:12
665
原创 Nextjs15 - 环境变量env的使用 和 模块路径别名的配置
Next.js 可以在构建的时候，将值内联到客户端的。哪些值是可以让浏览器访问的，你需要在变量前添加。我们可以在服务端组件或者路由处理程序中通过。” 选项实现路径别名。中，替换掉所有硬编码使用。前缀后即可获取到正确的值。路径之外，你也可以设置 “内置支持将环境变量从。现在我们在根目录下的。，也就是项目根目录。
2025-04-02 12:45:00
498
原创 Nextjs15 - Caching 缓存机制
Next.js通过缓存渲染工作和数据请求来提高应用程序的性能并降低成本。本页面详细介绍了Next.js缓存机制、可用于配置它们的API以及它们如何相互交互。Mechanism 机制What 什么Where 在哪里Purpose 目的Duration 期间请求记忆函数的返回值Server服务器在 React 组件树中重用数据每个请求的生命周期Data Cache数据缓存Data数据Server服务器跨用户请求和部署存储数据持久性（可以重新验证）完整路由缓存。
2025-04-01 13:17:42
725
原创 Nextjs15 - 什么是 Server Actions
我们可以使用 “use server” 来定义服务器操作指令。您可以将指令放在async函数的顶部，以将该函数标记为服务器操作，或者放在单独文件的顶部，以将该文件的所有导出标记为服务器操作。将 “use server” 放到一个async函数的顶部表示该函数为（函数级别）将 “use server” 放到一个单独文件的顶部表示该文件导出的所有函数都是（模块级别）
2025-03-31 13:00:00
787
原创 Nextjs15 - 服务器渲染策略
页面返回的图片正是构建时调用猫猫接口返回的那张图片。局部渲染意味着只有导航时发生变化的路线段才会在客户端重新渲染，并且任何共享的段都会被保留。使用这些函数的任意一个，都会导致路由转为动态渲染。在渲染过程中，如果使用了动态函数（
2025-03-30 12:45:00
483
原创 Nextjs15 - Streaming 流式传输是什么？
这些步骤是连续且阻塞的，这意味着服务器只有在获取所有数据后才能呈现页面的 HTML。然而，它仍然很慢，因为在向用户显示页面之前需要完成服务器上的所有数据提取。，可以尽快向用户显示非交互式页面，从而帮助提高感知的加载性能。（例如骨架、微调器），然后在操作完成后交换组件。通过流式传输 ，您可以将页面的。
2025-03-28 12:45:00
669
原创 Nextjs15 - Client Component 客户端组件
1、客户端组件可以使用浏览器的 API 而 服务端组件不可以2、使用 use client 标记的组件定义为客户端组件，导入到其中的所有其他模块（包括子组件）都被视为客户端包的一部分。3、服务端组件可以直接导入客户端组件，但客户端组件并不能导入服务端组件。
2025-03-28 02:21:09
1049
原创 Nextjs15 - 服务端组件(RSC)与客服端组件
“客户端组件”在服务器上渲染的概念可能看起来令人困惑，但将它们视为主要在客户端运行、但也可以（且应该）作为优化策略在服务器上执行一次的组件，这样理解会有帮助。服务器组件架构中，服务器组件负责数据获取和静态渲染，而客户端组件则负责渲染应用程序的交互元素。团队设计的一种新架构。这个指令作为我们从服务器端跨越到客户端的通行证，并且是允许我们定义客户端组件的关键。
2025-03-27 22:01:11
1630
原创 Nextjs15 - 什么是CSR、SSR、SSG和ISR
“服务端渲染”。顾名思义，渲染工作主要在服务端执行。”，中文翻译“静态站点生成”，在构建时（函数，每次请求都会执行服务端渲染。我们可以看到并没有发起网络请求和。定义：页面内容完全由浏览器端的。我们可以看到发起了网络请求和。，数据在客户端中进行请求渲染。，数据在服务端就已经准备好了。文件夹找到构建生成的静态资源。” 标记为 服务端组件。
2025-03-26 23:24:12
731
原创 Nextjs15 - middleware的使用
中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。标头以允许跨源请求，包括简单的并已预检要求。实例直接从中间件进行响应。扩展提供了一种访问和操作这些。设置请求和响应标头（自。处于同一级别，或者在。所有路由访问重定向到。起可以设置请求标头）。我们可以在中间件中设置。
2025-03-26 22:59:42
713
原创 Nextjs15 - Route Handlers的使用
每个请求方法的处理函数会被传入两个参数，一个 request，一个 context。打开浏览器输入 http://localhost:3000/api/detail/shmily/404。打开浏览器输入 http://localhost:3000/api/home/123/456/789。每个 route.js 或 page.js 文件接管该路由的所有 HTTP 动词。我们从 GET 请求开始，现在写一个获取文章列表的接口。请求为给定路由创建自定义请求处理程序和响应。如果调用了不受支持的方法，
2025-03-25 23:09:33
529
原创 Nextjs15 - App Router（下）
`loading.tsx` 的实现原理是将 `page.tsx`和下面的 `children` 用 `<Suspense> `包裹。因为`page.js`导出一个 async 函数，`Suspense` 得以捕获数据加载的 `promise`，借此实现了` loading` 组件的关闭。
2025-03-18 22:59:49
184
原创 【2025】Electron Git Desktop 实战一（上）（架构及首页设计开发）
从 Github Desktop 我们看到 他的 主要页面分为三个区域一、目录搭建及依赖安装 Ant Design 官网 Redux 官网 react-router 官网 localforage官网 主要文件渲染进程预处理脚本主进程操作系统调用 window.api.chooseFolder()ipcRenderer.invoke('chooseFolder')显示文件选择对话框返回选择的路径返回路径结果返回 Promise 结果更新 Redux 状态渲染进程预处理脚本主进程操作
2025-03-12 12:23:39
1244
原创 【2025】Electron 基础二（进程模型三大核心）
Electron IPC通信：使用 invoke/handle 和 send/on 进行通信。
2025-03-11 12:56:00
560
原创 【2025】Electron + React 架构筑基——从零到一的跨平台开发
你是否厌倦了在命令行中反复输入git status，却依然无法直观看到文件变化？是否羡慕VS Code的丝滑Git集成，却苦恼于无法定制自己的专属工具？本专栏将为你打开一扇新的大门——。在这里，你不仅会掌握Electron的进程通信、本地API调用的精髓，还能深入理解Git的底层运作机制。从零搭建一个支持的跨平台应用，更将解锁等高级技能。
2025-03-07 12:43:09
1506
原创 Ts 类型 工具 方法
• readonly 是一个 TypeScript 修饰符，用于将某个属性标记为只读，意味着该属性不能被修改。Exclude 是一个内置的条件类型，用于从联合类型 T 中排除 U 中存在的类型。它通常用于类型过滤。NonNullable 是一个内置工具类型，用于从类型 T 中排除 null 和 undefined。Pick 是一个工具类型，它从类型 T 中提取一组属性 K。• DeepReadonly 是自定义的类型，它会递归地将对象及其所有嵌套属性都变为只读。它主要用于对象类型的部分属性排除。
2024-09-26 20:28:15
474
原创 使用 dotenv 与 config 解析全局环境变量最佳实践！
修改package.json中的dev与prod代码 去设置node对应的环境。官方文档的这样介绍 dotenv: Dotenv 是一个零依赖的模块，它能将。环境去读取默认的环境变量的同时，又有一些独立存在的全局变量 又该如何实现呢？中的全局变量并根据对应的环境使用不同的数据、对象的格式 ，我们可以通过。如果当前的环境和默认环境中的配置项重复，那么会以当前环境中的配置项为准。的方式去配置，已经可以满足我们大多数场景下对于全局变量的使用，会根据当前的环境来加载对应的配置文件。的方式取出所对应的值。
2024-05-16 15:11:29
1116
原创 Ts类型体操详讲 之 extends infer （上）
什么是条件提取？本节 我们来讲述 Ts类型体操 使用 extends ? 配合 infer 做条件提取，我会通过代码示例 去讲解数组、字符串、函数、构造器、索引等类型如何去使用条件提取说明：首先我们定义了一个 Arr 的 类型别名，表示一个包含六个数字（1 到 6）的元组。然后我们定义了一个工具函数，它首先检查传入的类型 T 是否是数组，如果 T 不是数组，getArrFirst 的结果就是 never。如果 T 是数组，它会进一步检查 T 是否有一个明确的第一个元素和后续的元素。
2024-04-22 14:20:11
934
原创 Ts支持哪些类型和类型运算(下)
ts里的条件判断为 语法为 Textends XXX ? true : false叫做条件类型，类似js中的三元运算符
2024-04-22 00:23:15
864
原创 Ts支持哪些类型和类型运算(上)
静态类型系统 就是把 类型检查从运行时提前到了编译时，所以ts类型系统中的许多类型与js并无区别例如：基本类型： number、boolean、string、object、bigint、symbol、undefined、null复合类型方面，JS 有 class、Array，这些 TypeScript 类型系统也都支持，但是又多加了三种类型：元组（Tuple）、接口（Interface）、枚举（Enum）。
2024-04-20 13:45:52
541
原创 TS为什么被叫做类型体操
类型系统不止ts有，比如说java、c++都有，为什么只有ts被称为类型体操本文将讲述为什么ts被称为类型体操。静态类型编程语言都有一套自己的类型系统，从简单到复杂可以分为3类。
2024-04-20 11:31:10
1049
1
原创 Nextjs15 - App Router（中）
布局是指多个页面共享的 UI。在导航的时候，布局会保留状态、保持可交互性并且不会重新渲染，比如用来实现后台管理系统的侧边导航栏。定义一个布局，你需要新建一个名为layout.js的文件，该文件默认导出一个 React 组件，该组件应接收一个childrenprop，chidren表示子布局（如果有的话）或者子页面
2024-04-19 22:08:40
1038
原创 Nextjs15 - App Router（上）
那如何保证这个路由可以被访问呢？你需要创建一个特殊的名为page.js的文件。至于为什么叫page.js呢？除了page有“页面”这个含义之外，你可以理解为这是一种约定或者规范。（如果你是 Next.js 的开发者，你也可以约定为index.js甚至yayu.js！对应路由 /对应路由 /dashboard对应路由/dashboard/settingsanalytics目录下因为没有page.js文件，所以没有对应的路由。这个文件可以被用于存放组件、样式表、图片或者其他文件。当然不止.js。
2024-04-18 10:05:39
886
原创 Three.js 性能优化实践
three.js是目前国内开发Web3D应用最多的第三方库，它提供了非常多的3D显示功能。在使用的时候，虽然three.js 本身做了优化，但是在较大分辨率下，加载较大或者较多模型时会出现，帧率会越低，给人感觉就越卡，因此性能方面的优化对提高视觉体验有着积极影响。以下是我在项目（vue+threejs）开发结合度娘总结的一些思路因为默认情况下）每秒执行60次，如果在里面加个for循环，代码效率就会严重影响，同时还要减少浮点计算，系统对浮点计算开支比较大，尽量写成小数乘法。
2023-08-15 09:08:26
602
原创 Three.js中的光源与阴影
首先我们要确认几何的材质是否能产生阴影、比如基础网格材质(MeshBasicMaterial)没有阴影效果,建议使用Lambert网格材质(MeshLambertMaterial)然后我们需要设置小太阳的位置、设置 小太阳是否能产生阴影、小太阳产生阴影的精细程度、阴影的投射远点和投射近点在后在场景中添加小太阳。由于渲染阴影需要耗费大量的计算资源,所以渲染器默认是不渲染的,我们需要手动开启renderer的阴影效果。然后我们需要让第一节我们所创建的每一个几何物体都会生成阴影。
2023-06-17 21:50:16
313
原创 Web 3D 引擎 Three.js
使用three去渲染3d场景我们必须具备三个条件1.场景 scene场景用来保存、跟踪所渲染的物体和使用的光源2.摄像机 camera摄像机决定了能够在场景中看到什么3.渲染器 renderer渲染器用来计算基于摄像机的角度计算场景对象在浏览器中渲染成什么样子。
2023-06-17 20:32:52
141
原创 Vite构建工具
1.vite支持esmodule的导出类型,不同的第三方包需要遵守第三方的导出格式,所以vite在import这些三方包的时候会统一调用esbuild(go语言处理js语法的库)处理成esmodule的导出格式,浏览器在引入js文件时通常通过http请求获取资源,在我们使用esmodules格式去引入三方依赖包的时候、有可能第三方还import了其他的依赖,就会导致浏览器不停的去请求、下载依赖,导致网络请求的性能浪费.vite是一个开箱即用的新型前端构建工具.vite在进行构建的时候会进行以下几个步骤。
2023-06-15 14:00:34
195
原创 uniapp支付宝小程序内嵌webview通信uniapp H5项目的解决方案
我们在uniapp小程序中内嵌了web-view的一个h5的页面，当点击h5中某个按钮的时候，需要传递参数数据在小程序中接收到，下面是实现方法。在测试的时候我们可以关闭支付宝对于webview和域名的校验，这样只需要跑一下内置的服务就可以了。所以我们在h5项目文件中新建一个html页面，并且在manifest.json中的web配置中应用该html。只需要在路径中拼接参数，在h5中onload生命周期钩子中就可以拿到了。因为uni官方文档对于webview通信的应用是在原生h5中进行的。
2023-05-11 13:19:14
4304
1
原创 简易路由history原理
history主要是通过pushState和replaceState去重写url路径实现单页面路由切换。通过window.onpopState去监听前进后退的路径。
2023-02-22 22:12:41
207
原创 自定义指令实现一键Copy功能
install方法接收一个Vue实例作为参数，我们可以通过这个Vue去注册一系列全局指令、组件、过滤器等。如果是对象的话必须提供install方法，如果是函数的话，会将这个函数当作install方法调用。本方法使用全局自定义指令，单独拿出一个文件来引入注册的。这里我们需要掌握Vue.use()这个方法。我们可以传入一个对象或者一个函数作为参数、
2023-02-04 15:30:06
253
原创 Uniapp 集成 Vant-weapp
目录1.先正常创建一个uniapp项目2.从github下载vant包，zip格式的3.项目根目录下新建wxcomponents/@vant 两个文件夹文件夹 4.把下载好的压缩包解压，放在刚才创建好的@vant文件下，并重命名为weapp5.App.vue中引入vant的样式 6.在pages.json文件下的 "globalStyle" 下的"usingComponents" 中按需引入7.页面中使用，如果没有样式从uniapp重启微信小程序总结： vant组件包https://github.com/
2023-01-11 11:22:56
7258
8
原创 _vue3中computed、watch、watchEffect函数
1.此时我们不能正常的获取到oldval，一般来说只要监听的是一个对象就拿不到正常的oldval。二、如果监听多个ref定义的数据时，我们需要把监听的值放在数组里，newval和oldval也是一个数组。五、如果我们需要监听多个reative中定义的属性的话，同样第一个参数为一个数组，每一个值为一个对象。六、如果我们监听的是reactive所定义的对象中的某一复杂数据类型属性，四、如果我们监听的数据为reatvie定义的数据中的某一个属性时，一、如果监听的数据为ref定义的响应式数据，语法为。
2023-01-08 18:21:10
153
原创 [ `1` , `2` , `3` ].map(parseInt)
这个题用到了数组的map方法、parseInt方法以及二进制的知识。如果参数不是一个字符串，则将其转换为字符串 (使用。如果为 0 开头 按照8进制处理， ES5之后取消了这个规则。所以结果为 result = 【 1，NaN，NaN 】‘A’在16进制里面 为10， ‘F’在16进制中不存在。是 2-36 之间的整数，表示被解析字符串的基数。解析一个字符串并返回指定基数的十进制整数，字符串开头的空白符将会被忽略。如果没有传或者为0，默认为10进制，的整数，表示进制的基数。采用：全权相加，从0位开始数，
2023-01-08 10:05:00
161
dotenv与config配置全局变量
2024-05-16
vue响应式原理代码，手写简单vue
2022-12-27
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人