- 博客(74)
- 收藏
- 关注
RSS订阅原创 NextJs - Middleware(中间件)
中间件允许您在请求完成之前运行代码。然后，根据传入的请求，您可以通过重写、重定向、修改请求或响应标头或直接响应来修改响应。中间件在缓存内容和路由匹配之前运行。
2023-08-18 17:29:48
3031
原创 NextJs - Error Handling （错误处理）
使用 error.js 文件规则，可以优雅地处理嵌套路由中的意外运行时错误。在 React Error Boundary 中自动封装路由段及其嵌套子段。使用文件系统层次结构来调整粒度，为特定网段量身定制错误 UI。将错误隔离到受影响的网段，同时保持应用程序其他部分的功能。添加功能，尝试在不重新加载整个页面的情况下从错误中恢复。
2023-08-18 15:29:48
1026
原创 Next.js - Loading UI and Streaming
要了解 React 和 Next.js 中的流如何工作，了解服务器端渲染（SSR）及其局限性很有帮助。首先，在服务器上获取指定页面的所有数据。然后，服务器渲染页面的 HTML。页面的 HTML、CSS 和 JavaScript 发送到客户端。使用生成的 HTML 和 CSS 显示非交互式用户界面。最后，React 对用户界面进行水合处理，使其具有交互性。这些步骤都是顺序和阻塞性的，这意味着只有在获取了所有数据后，服务器才能渲染页面的 HTML。
2023-08-17 16:32:10
778
原创 Next.js - 动态路由
例如，app/shop/[...slug]/page.js 将匹配 /shop/clothes，但也会匹配 /shop/clothes/tops、/shop/clothes/tops/t-shirts 等。例如，app/shop/[[…slug]]/page.js也将匹配/shop，此外还有/shop/衣服、/shop/服装/上衣、/shop/服装/上衣/t恤。如博客可以包含以下路由 app/blog/[slug]/page.js，其中 [slug] 是博客文章的动态分段。
2023-08-17 16:11:56
1555
原创 Next.js - Route Groups（路由组）
要将特定路由选择到布局中，请创建一个新的路由组（如 (shop），并将共享相同布局的路由移动到该组中（如account和cart）。组外的路线将不共享布局（如checkout）。尽管(marketing) 和 （shop）中的路由共享相同的 URL 层次结构，但您可以通过在它们的文件夹中添加 layout.js 文件，为每个组创建不同的布局。不过，您可以将文件夹标记为路由组，以防止该文件夹包含在路由的 URL 路径中。在上面的例子中，（marketing）和（shop）都有自己的根布局。
2023-08-17 15:48:37
710
原创 Next.js - Linking and Navigating
在 Next.js 中，有两种方法可以在路由之间导航：使用 Link 组件使用 useRouter 钩子本页将介绍如何使用 Link、useRouter() 并深入探讨导航的工作原理。
2023-08-17 15:27:30
601
原创 Next.js - Pages and Layouts
在文件夹（如 app/dashboard/layout.tsx）内定义的布局适用于特定的路由段（如 jdy.com/dashboard），并在这些段处于活动状态时呈现。默认情况下，文件层次结构中的布局是嵌套的，这意味着它们会通过子布局道具将子布局包裹起来。该组件应接受一个 children prop，该 prop 将在呈现时填充子布局（如果存在）或子页面。元数据可通过在 layout.js 或 page.js 文件中导出元数据对象或生成元数据函数来定义。根布局定义在应用程序目录的顶层，适用于所有路由。
2023-08-17 14:17:42
1197
转载 uniapp中@tap和@click区别
原文： https://blog.csdn.net/xulihua_75/article/details/125951020。@click是点击触发事件，会有约300ms的延迟；@tap是手指触摸离开时触发，没有300ms的延迟。不用想太多，把@tap当做@click用就行。
2023-07-17 10:28:01
407
原创 onbeforeunload
定义onbeforeunload 事件在即将离开当前页面（刷新或关闭）时触发。该事件可用于弹出对话框，提示用户是继续浏览页面还是离开当前页面。onbeforeunload事件在onunload事件之前触发。调用方式MDN官方示例：window.addEventListener(‘beforeunload’, function (e) {// Cancel the evente.preventDefault();// Chrome requires returnValue to be set
2021-08-26 19:53:44
1452
原创 浏览器实现全屏
废话不多说，直接上代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body><button id="btn">按钮</button&g...
2019-09-02 15:31:35
367
原创 网站添加Markdown——showdown.js使用教程
步骤1.下载showdown.js步骤2引入到自己的项目中，结构如下:步骤3，引入到html，并使用 <script type="text/javascript" src="showdown/showdown-master/showdown-master/dist/showdown.min.js"></script>使用showdown.js的基本方式：fu...
2019-08-25 19:41:54
1491
原创 实现上传图片预览功能 FileReader
FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。使用FileReader对象，web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容，可以使用File对象或者Blob对象来指定所要处理的文件或数据。创建实例：var reader = new FileReader();常用事件FileReader.onload事件在读...
2019-08-23 23:50:52
274
原创 如何用js 屏蔽浏览器历史j记录
if (window.history && window.history.pushState) { history.pushState("forward", null, location.href); $(window).on("popstate", function () { history.pushState("forward",...
2019-08-23 22:49:10
995
原创 经典游戏飞机大战
好久没更新了，想起之前做的飞机大战/** * Created by Administrator on 2019/6/22. */var playing =(function(){ var start; function setmap(){ if(start==undefined){ start = new game(); ...
2019-08-16 19:25:23
665
原创 web留言板demo
1.画一个标题栏和一个内容栏，提交按钮，留言板心情:<br/> <input type="text" id="mood"/><br/>笔记:<br/> <textarea id="network"></textarea><br/><button id="send">发表</button>...
2019-07-02 20:47:36
2522
2
原创 缓存storage
localStorage 本地缓存，关闭浏览器之后不会消失。 sessionStorage 浏览器缓存 ，关闭浏览器之后消失。只读的localStorage 属性允许你访问一个Document 源（origin）的对象 Storage；其存储的数据能在跨浏览器会话保留。localStorage 类似 sessionStorage，但其区别在于：存储在 localStorage 的数据可...
2019-07-02 19:20:27
562
原创 经典贪吃蛇游戏
主要使用单例模式，所有元素动态创建；1.创建地图 var Map; function map(){ this.mapp=null; this.makemap=function(){ this.mapp=document.createElement ("div"); this.mapp.className...
2019-06-27 16:01:26
975
原创 js的设计模式
1:工厂模式工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点function work(name,sex){ var obj=new Object(); obj.name=name; obj.sex=sex; ...
2019-06-27 15:30:44
197
原创 js的进阶-----继承
继承的方式一.原型链继承将构造函数的原型设置为另一个构造函数的实例对象，这样就可以继承另一个原型对象的所有属性和方法，可以继续往上，最终形成原型链。核心： 将父类的实例作为子类的原型注：instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置，返回值为 true 或 false function Parent(){ t...
2019-06-24 11:34:47
148
原创 ajax的跨域问题
这是一个简单的ajax 异步发送请求获取数据 var http =new XMLHttpRequest(); http.open("get","txt/ajax.txt",true); http.send(); function showdata(callback){ http.onreadystatechange =function(){ if(...
2019-06-18 08:53:04
202
原创 JS中的ajax
AJAX传统的web交换缺点：1.流量损失 2.浪费时间和带宽AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。特点： 局部刷新；最大的特点：局部刷新ajax的优点：1.局部刷新；2,。优化了浏览器与服务器之间的传输，减少了不必要...
2019-06-17 11:13:19
19104
原创 js做的省市区镇的多级联动
创作思路：设置省市区镇四个下拉列表获取各个下拉列表（document.querySelector("") ）给省级的下拉列表添加子元素option ，循环选择信息表中的省份，使用new Option(“文本”,“value”)创建新的选项框，并追加到省的下拉列表中；当省级下拉列表中的值改变时，让市区镇级默认为第一个值，（id2.options.length=1） ;给市级下拉菜单追加子...
2019-06-11 17:51:56
1978
原创 JS中的new option(), options
new Option(“文本”,“值”,true,true)后面两个true分别表示默认被选中和有效!动态创建selectfunction createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelec...
2019-06-11 17:22:27
16309
原创 js中的foreach用法
forEach() 方法对数组的每个元素执行一次提供的函数。var array = ['a', 'b', 'c'];array.forEach(function(element) { console.log(element);});输出为：a;b;c;forEach() 方法对数组的每个元素执行一次提供的函数。总是返回undefined； var arr = [1,2,3...
2019-06-10 22:30:30
597260
15
原创 正则表达式
正则表达式: 验证数据的格式描述了一种字符串匹配的模式（pattern），可以用来检查一个串是否含有某种子串、将匹配的子串替换或者从某个串中取出符合某个条件的子串等。
2019-06-08 21:15:16
130
原创 requestAnimationFrame和cancelAnimationFrame
1.requestAnimationFrame与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。...
2019-06-07 21:07:35
1110
原创 图片的淡入淡出
分析过程：1.给最大父元素里添加多张图片，让第一张图片的透明度为1 opacity: 1其余图片的透明度为0；给图片下面设置一排小点2.获取每张图片，动态设置不同层级，层级大小从4到0依次设置； Setz_index:function(){ for(var i=0;i<this.Photo.length;i++ ){ index=i; ...
2019-06-07 21:00:29
1381
原创 最简单的图片轮播
声明一个变量用来存放多张图片的名称， var imglist=["3.jpg","2.jpg","8.jpg","6.jpg","1.jpg","4.jpg","7.jpg","5.jpg"];主要就运用一个循环播放的函数setinterval(),让图片的地址一秒一秒的变换，当变换到最后一张图片时，进行判断，让图片的索引为0，就完成了图片轮播。<!DOCTYPE html&g...
2019-06-07 20:30:48
1456
1
原创 js多张图片的无缝滚动
分析：1：存在两组图片用float：left向左浮动，给父元素设置一个小块，可以展示量三张图片就可以。2：动态获取图片3：给父元素的滚动条进行循环滚动，setInterval(function(){dong.scrollLeft -=2;if(dong.scrollLeft<=0){dong.scrollLeft=1250;}},30);<!DOCTYPE html...
2019-06-07 20:20:48
1885
2
原创 js对象写的数据分页
实现数据分页要清楚这个的方面的设计：1:先模拟建立一个后台数据库，如下：var peoson=[ { "id":"1", " name":"鞠婧祎", "sex":"女", "age":"25", "class":"八班", "habby":"跳舞", "score":"40", ...
2019-06-06 12:01:43
516
原创 JS运用Date做的欧式钟表
这个钟表主要考验对时分秒的计算，以及各个指针选件角度的计算。获取当前时间 （new Date（））获取到1900年的总毫秒数alltime （getTime(））求出现在的时 分 秒（1）此刻的秒数：(alltime/1000)%60 （1s =1000ms）（2）此刻的分钟数：(alltime/1000/60)%60（3） 此刻的小时数：(alltime/1000/60/...
2019-05-29 07:02:45
225
原创 js版的倒计时（月-日-时-分-秒-毫秒）
大早上好瞌睡，爬起来接着写。今天做的倒计时用了三种方法过程和思路：设置未来的时间。（使用在new Date()后面直接设置时间的方法）获取当前的时间（ newDate() ）用未来时间减去现在的时间，算出总的毫秒数算出倒计时的月、日 、时、分、秒、毫秒（1s =1000ms 1分=60s 1时 =60分 1天 =24时 1月=30天 1年=12）每个...
2019-05-29 06:29:26
12207
1
原创 计时器对象
setTimeout: 用于在指定的毫秒数后调用函数或计算表达式，只执行一次。提示： 1000 毫秒= 1 秒。setTimeout(function(){console.log(2);},1000);setTimeout 改造为循环使用的方法： var t=null; t_time(); function t_time(){ console.log(1); t=setT...
2019-05-28 23:15:38
292
原创 Js的内置对象String和时间Date的获取
String对象定义一个字符串在工作中我们大概有3种方法去定义一个字符串：var str = ‘hello’;var str1 = String(‘hello’);var str2 = new String(‘hello’);new String(): new 出来的一定是对象object。取值 类似于数组，仍然可以使用length、concat、charAt等属性 ...
2019-05-28 22:56:27
1400
原创 js 做的随机8位验证码
开发思路：画出放置验证码的模块、一个写有“看不清…”的小块，以及输入验证码的文本框获取各个模块封装一个函数Yan_ma（），设置验证码为8位，里面含有数字，小写字母，小写字母和中文。每种类型出现的可能性为25%。随机数字在0-9，之间。对Math.ramand（）向下取整。随机大小写字母使用fromCharCode() 方法：将 Unicode 编码转为一个字符，例如： var ...
2019-05-28 22:06:59
5314
4
原创 JS的Math对象
Math 对象：用于执行数学任务。1.Math.random()随机返回（0,1）Math.random()的用法非常广泛，可以让它进行运算，返回某个区间的值，比如：a.返回 5-10 的随机数 var a=Math.random()*5 + 5;b.返回 50-100 的随机数 var b=Math.random()*50 + 50;console.log(Math.random...
2019-05-28 15:22:35
151
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人