- 博客(33)
- 问答 (1)
- 收藏
- 关注
RSS订阅原创 Next.js v15- Metadata
如果想在每个页面都有对应应用程序的标题，可以使用metadata对象中的title.template字段来定义页面标题的模板。相反，它在幕后工作，嵌入到页面的 HTML 中，通常在。您可以灵活地将这些文件用于静态Metadata，也可以在项目中以编程方式生成它们，使用这两个选项，Next.js 将自动生成页面的相关。嵌套页面中的元数据将覆盖父页面中的元数据。在/dashboard/invoices页面中，可以添加页面标题。Next.js 会自动将标题和元数据添加到您的应用程序中。
2024-12-19 11:09:37
442
原创 Next.js v15-基于NextAuth进行身份验证
NextAuth.js 抽象化了管理会话、登录和注销以及身份验证的其他方面所涉及的大部分复杂性操作。虽然您可以手动实现这些功能，但该过程可能非常耗时且容易出错。NextAuth.js简化了流程，为 Next.js 应用程序中的身份验证提供了统一的解决方案。
2024-12-18 23:06:50
889
原创 Next.js v15 - 服务器操作以及调用原理
这是自动为你处理的，你所要做的就是包含 ‘use server’，导入你的 server action 或将其作为 prop 传递，然后就使用它。因此，只有当你在 server 操作中包含 “use server” 指令时，它才会起作用。此外，如果你将服务器操作导入到客户端组件中，但忘记添加 “use server”，它会将该函数作为代码导入到客户端中。它将不再是服务器端功能。你可以将该指令放在 async 函数的顶部以将该函数标记为服务器操作，或者放在单独文件的顶部以将该文件的所有导出标记为服务器操作。
2024-12-18 22:26:46
1161
1
原创 React - useActionState、useFormStatus与表单处理
useActionState钩子旨在无缝处理服务器操作。当您将服务器操作传递给 useActionState 时，它将返回一个包含错误（或状态）、isPending 状态和操作本身的对象。此设置对于管理表单提交和在返回结果之前跟踪加载状态特别有用。useFormStatus钩子旨在让您深入了解表单的当前状态，例如了解表单是否处于 “submitting” 状态。这对于显示 UI 元素（如加载指示器）或阻止多个表单提交（直到当前提交完成）特别有用。
2024-12-09 00:15:15
1325
原创 Next.js v15- 链接和导航
App Router 采用混合方式进行路由和导航。在服务器端，你的应用程序代码会按路由段自动进行代码分割成更小的包，供浏览器下载和执行。而在客户端，Next.js 会预获取和缓存路由段。这意味着，当用户导航到新路由时，浏览器不会重新加载页面，只有变化的路由段会重新渲染——这改善了导航体验和性能。
2024-11-22 18:40:37
707
原创 React-自定义Hook与逻辑共享
假设你正在开发一款重度依赖网络的应用（和大多数应用一样）。当用户使用应用时网络意外断开，你需要提醒他, 该网络状态验证需要在多个组件中使用。需要两个东西：一个追踪网络是否在线的 state。一个订阅全局 online 和 offline 事件并更新上述 state 的 Effect。}, []);组件内部可以这样使用该Hook自定义 Hook 共享的是状态逻辑，而不是状态本身，如果有多个组件使用了useOnlineStatus， state 变量 isOnline是各自独立的。
2024-11-21 16:45:17
565
原创 React-useEffect与组件生命周期
题引：我认为跟着官方文档学习不会走歪路useEffect Hook，它是一个用于处理副作用的工具。副作用可以是数据获取、订阅、手动操作 DOM、定时器等操作，这些操作不直接影响组件的渲染，但需要在组件生命周期内执行。
2024-11-20 23:13:48
739
原创 React - useContext和深层传递参数
题引：我认为跟着官方文档学习不会走歪路通常来说，你会通过 props 将信息从父组件传递到子组件。但是，如果你必须通过许多中间组件向下传递 props，或是在你应用中的许多组件需要相同的信息，传递 props 会变的十分冗长和不便。Context 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。假设Heading组件接收一个level参数来决定它标题尺寸的场景就是 context 大显身手的地方。
2024-11-20 16:09:14
1476
原创 React - useReducer和复杂状态管理
useReducer 和 useState 很相似——你必须给它传递一个初始状态，它会返回一个有状态的值和一个设置该状态的函数dispatch，不同的是useReducer接收2个参数，一个你刚刚引入的reducer 函数，一个state的初始值。函数体内的逻辑是根据action对象中type的值对state进行处理，返回更新后的 state，判断action.type时你可以用if/else语句，也可以用switch语句，官方推荐switch，更利于阅读.#题引：我认为跟着官方文档学习不会走歪路。
2024-11-14 16:37:42
331
原创 React-基础知识
题引最近<table border="1" width="300"> <tr> <th width="50%">Month</th> <th width="50%">Savings</th> </tr> <tr> <td>January6666666666666666666666</td> <td>$100</td>
2024-11-13 16:35:51
226
1
原创 对接grpc之大文件分片传输（4）-Web Worker
题引大文件上传，计算hash，占用线程，非常耗时，甚至会引起UI阻塞，用 Web Worker另起一个线程，把文件上传放到Web Worker起的线程中去做webJavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 W
2021-04-13 16:19:57
885
原创 对接grpc之大文件分片传输（3）- 秒传
题引秒传是通过计算文件hash值来确定文件内容的唯一性，这里我们使用CryptoJSCryptoJS是谷歌开发的一个纯JavaScript的加密算法类库，可以非常方便的在前端进行其所支持的加解密操作。目前crypto-js已支持的算法有：MD5,SHA-1,SHA-256,AES,Rabbit,MARC4,HMAC,HMAC-MD5,HMAC-SHA1,HMAC-SHA256,PBKDF2。常用的加密方式有MD5,SHA-1,SHA-256以一个60M的文件为测试样本，经过1000次的测试平均值，
2021-04-12 18:30:18
868
原创 对接grpc之大文件分片传输（2）-文件切片
题引gRPC 最初由谷歌开发，是一个高性能远程过程调用框架，基于 HTTP/2 实现。但由于浏览器没有直接暴露 HTTP/2，所以 Web 应用程序不能直接使用 gRPC。gRPC- Web 是一个标准化协议，它解决了这个问题，可以在浏览器中使用 gRPC。解析.proto文件protoc-gen-grpc-web是用来生成web js文件的工具下地地址：https://github.com/grpc/grpc-web/releases选择：protoc-gen-grpc-web-1.2.0
2021-04-12 17:36:32
1332
原创 对接grpc之大文件分片传输（1）-proto转js
题引gRPC 最初由谷歌开发，是一个高性能远程过程调用框架，基于 HTTP/2 实现。但由于浏览器没有直接暴露 HTTP/2，所以 Web 应用程序不能直接使用 gRPC。gRPC- Web 是一个标准化协议，它解决了这个问题，可以在浏览器中使用 gRPC。参考资料https://www.fenxianglu.cn/article/246解析.proto文件protoc-gen-grpc-web是用来生成web js文件的工具下地地址：https://github.com/grpc/grp
2021-04-01 17:04:46
729
原创 vue-自定义表单控件
题引开发中有遇到一些非传统表单元素，如选择地址组件，开发人员需要将用户选择的最终结果转换成后台指定的格式和其他表单元素一起提交给后台，这时候，如果能像传统表单元素，如input，radio这些直接使用v-model双向绑定，那样就方便很多。...
2021-01-27 18:13:37
1275
1
原创 vue项目之锁屏
题引锁屏：该需求是指用户暂时离开时点击锁屏，用户无法跳转到其他页面，回来输入密码点击解锁技术栈：vue+elementUI解题通过布尔类型 lockFlag 来控制样式，绑定事件名称 lockChange <div class="lock-wrap" @click="lockChange"> <el-tooltip effect="dark" :co...
2019-09-12 09:22:08
1605
原创 快速渲染模板引擎art-template
关于elementUI日期组件：当通过不同的日期下拉框来控制显示不同的日期组件的时候，会发现日期组件错位,跑到屏幕左上方去了研究一番发现,我在不同的日期组件使用v-if显示的，改为v-show即可表格show-overflow-tooltip：在设置表格内容多余时，鼠标悬停提示的提示框样式：在通用css中设置.el-tooltip__popper { max-width: 8...
2019-09-03 10:17:42
257
原创 vue+elementUI踩坑
关于elementUI日期组件：当通过不同的日期下拉框来控制显示不同的日期组件的时候，会发现日期组件错位,跑到屏幕左上方去了研究一番发现,我在不同的日期组件使用v-if显示的，改为v-show即可表格show-overflow-tooltip：在设置表格内容多余时，鼠标悬停提示的提示框样式：在通用css中设置.el-tooltip__popper { max-width: 8...
2019-09-02 15:40:47
358
原创 页脚固定在底部之flex布局
题引资料：《css揭秘》 表格在现代网站中仍然有其不可替代的位置，我做的大多数项目都使用了表格来展示数据。对其他元素的 display 属性使用表格相关的关键字，也可以让它们具备表格类元素的行为。尽管有时候它们看起来很方便，但对于不固定的内容来说，它们的布局其实是很难预测的。这是因为列宽根据其内容进...
2019-08-02 16:14:39
1455
原创 表格内容多余省略
题引资料：《css揭秘》----- 图片对比滑动控件基本上可以理解为两层结构：下层是一张固定的图片；上层的图片则可以在水平方向上调整大小，从而或多或少地显露出下层图片。这正是 JavaScript 框架的价值所在：让上层图片的宽度可以由鼠标拖动调整。不过，要让某个元素的大小变得可调整，并不需要动用脚本。在 CSS 基本 UI 特性中，我们获得了一个为此而生的属性：低调的 resize ！简...
2019-07-29 09:26:19
1183
原创 图形对比之resize
题引资料：《css揭秘》----- 图片对比滑动控件基本上可以理解为两层结构：下层是一张固定的图片；上层的图片则可以在水平方向上调整大小，从而或多或少地显露出下层图片。这正是 JavaScript 框架的价值所在：让上层图片的宽度可以由鼠标拖动调整。不过，要让某个元素的大小变得可调整，并不需要动用脚本。在 CSS 基本 UI 特性中，我们获得了一个为此而生的属性：低调的 resize ！简...
2019-07-23 14:54:54
155
原创 css学习之背景定位
资料《css揭秘》，w3c背景定位background-position：设置背景图像的起始位置场景1：让背景图片处于右下角 background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:right bottom;场景2：在处于右下角的情况下，距离右侧1...
2019-07-13 15:00:52
365
原创 background-clip、outline 和 box-shadow与“边框透明”
资料《css揭秘》，w3c半透明边框场景：div设置白色背景，边框透明，父容器背景是一幅图片起初代码是这样的 background: white; border: 10px solid hsla(0,0%,100%,.5);会发现背景设置的白色会把边框设置的样式覆盖掉，在不考虑通过两层div的方式或者其他实现方式下，可以使用background-clip back...
2019-07-08 14:11:55
356
原创 jquery文字循环滚动播报实现
题引需要实现一个从左往右，文字循环滚动播报的功能效果是这样的疑问起初是这样获取的 <div> <video id="joinVideo" controls="controls"> <source src="moive1.mp4" type="video/mp4"> 您的浏览器不支持 video 标签。 </video...
2019-07-01 09:13:29
1730
原创 关于页面加载时video总时长获取为NaN
题引-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;了解一下浏览器前缀的历史，学习记录背景： jquery历史与大众的理解大相径庭的是，W3C 并不“生产”标准。实际上，它扮演的是一个论坛...
2019-06-25 14:52:51
4758
原创 关于浏览器前缀
关于浏览器前缀题引概念定义函数调用总结题引参考：《css揭秘》《WebKit技术内幕》-moz-border-radius: 10px;-ms-border-radius: 10px;-o-border-radius: 10px;-webkit-border-radius: 10px;border-radius: 10px;这两种方式有什么区别？适合什么样的场景？（资料：jav...
2019-06-20 17:33:46
1353
1
原创 关于javaScript函数定义
关于javaScript函数定义题引概念定义环境函数调用使用场景题引var funOne = function() { // 代码};function funTwo() { // 代码}这两种方式有什么区别？适合什么样的场景？（资料：javaScript权威指南、 stackoverflow）概念函数使用function关键字来定义，它可以用在函数定义表达式或...
2019-06-01 14:08:57
240
2
空空如也
background-origin在body中为什么不起作用
2019-07-09
TA创建的收藏夹 TA关注的收藏夹
TA关注的人