ladream的博客

原创 next.js v14 升级全步骤｜迁移 pages Router 到 App Router

本文整体按照官网文档指引进行升级，包含next v14 升级全过程、报错处理、如何迁移 pages Router 到 App Router、以及next14 中的 seo 处理。

原创 常见的验证码

2）计算需要滑动的距离:遍历完整图的每一个像素点，利用 getRGB 对比完整图和缺口图哪里有差异，在有差异的时候，返回横坐标，即需要滑动的距离。根据用户滑动滑块的响应时间，拖拽速度，时间，位置，轨迹，重试次数等验证，相对来说更安全。用户的操作：按住滑块，拖动图片至阴影位置，完成验证。1）对比完整图和背景图的区别，得到阴影位置。类似的还有算数验证码。3）拖动滑块，看效果。

原创 前端如何上传图片给后台？如何传递 multipart/form-data 类型的数据？图片大小、格式检查?

图片上传需要传二进制流，请求头的 content-type 类型需为 multipart/form-data，传递的格式如下图所示注：目前我只用过以上这种方法，我能想到的另一种方法是表单及其图片都用 multipart/form-data 格式传递过去，但我和后台目前没用过这种方法。

原创 js 实现点击按钮小球加入购物车动画

本文旨在实现类似点击按钮实现小球加入购物车效果。

原创 React + Node.js『markdown 笔记本 』项目

该项目的主要功能是增删改查笔记，笔记可以使用 markdown 语法编写，笔记内容展示 markdown 语法编译后内容。

转载 清除浮动的四种方式及其原理理解

清除浮动的四种方式及其原理理解

转载 【antd】使Pagination分页组件居中展示

转载文章【antd】使Pagination分页组件居中展示

原创 react+ts 弹窗组件

最后效果:1.效果图2.检查表单项的格式3.格式无误时，控制台打印表单内容遇到的报错：react Form submission canceled because the form is not connectedinput内按回车会出发表单的默认提交事件解决方式：将button的type设置为buttonWarning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until

原创 Less 总结

文章目录什么是Less注释变量嵌套@arguments获取参数转义(避免编译)运算Mixins混合继承什么是LessLess是一门向后兼容的 CSS 扩展语言。它为css新增许多能，如：变量、函数、作用域、混合、嵌套等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，less可以让我们写更少的代码做更多的事情。它需要编译为css再被引入：lessc xxx.less yyy.css注释在less中，有两种注释/*这是会暴露出去的注释 */// 这是不会暴露出去的注释变量

原创 ts总结 之 类

文章目录1.类的简介2.构造函数 constructor3.继承 extends4.抽象类 abstract5.接口 interface6.属性的封装 public、private、protected、get、set7. 泛型1.类的简介使用class关键字对象中主要包含的两个部分：属性、方法class Person { /** * 直接定义的属性是实例属性。需要通过对象的实例去访问： * const per = new Person() * Person.age *

原创 ts总结 之 webpack打包

wepack的简单使用快速初始化项目npm init -y安装依赖npm i -D webpack webpack-cli typescript ts-loaderts-loader 用于将ts和webpack整合到一起在package.json中加上build命令"build": "webpack",执行npm run build即可进行编译打包用到的插件html-webpack-plugin ：自动生成html文件clean-webpack-plugin ：用来清除上一次编译后

原创 ts总结 之 编译选项

文章目录一、自动编译二、配置选项1、include2、exclude3、extends4、files5、compilerOptions(1) target(2) module(3) lib(4) outdir(5) outFile(6) allowJs(7) checkJs(8) removeComments(9) noEmit(10) noEmitOnError(11)一、自动编译编译某个文件：tsc xxx.ts -w一键编译所有文件：tsc编译所有文件并监视：tsc -w二、配置选

原创 ts总结 之 ts中的类型

ts是什么以javascript为基础，来构建的语言它是一个javascript的超集，它对js进行了扩展，并添加了 类型兼容所有js平台不能被js解析器直接执行（即.ts文件不可以被执行），需要将ts代码编译成jsts增加了什么类型支持es的新特性，支持js所有内容添加了es不具有的新特性：抽象类、接口丰富的配置选项（可严格、可松散、可以把ts编译成es3等版本，兼容型好，）强大的开发工具有提示TypeScript中的基本类型类型声明通过类型声明可以指定TS中变

原创 node事件循环

node是单线程的，但是它可以和内核对话，大多数内核是多线程的，node会尽量将操作装载到内核，让内核可以同时执行多个操作，当有一个操作执行完后，它就会告诉Node，node把回调加入轮询队列，最终执行。node为了与内核对话专门用了一个库：libuv。它负责时间回到主线程之后，回调执行的事时间回到函数会排队执行。同步任务早于异步任务执行node的事件循环有本轮循环和次轮循环（仅针对异步事件）本轮循环：同步任务 => process.nextTick() => 微任务..

原创 Node.js项目 博客系统

文章目录一、项目功能说明二、最终效果三、文件目录结构说明四、项目技术栈五、核心技术1. 使用Schema定义数据模型2. mongoose 的操作3.mogodb数据库的操作3. 使用第三方插件 express-session:存取数据状态4. 挂载路由5.使用md5对密码进行加密六、遇到的问题七、github链接一、项目功能说明登录、注册新建博客首页显示全部博客查看博客详情页查看博客评论区修改、删除博客二、最终效果首页：登录、注册：详情页：评论区：新建博客：登陆

原创 React仿写网易云音乐项目

文章目录项目功能说明最终效果项目技术文件目录结构说明项目功能说明最终效果首页：[外链图片转存中…(img-QPibK7GD-1632634396867)]项目技术文件目录结构说明

原创 vue脚手架配置代理

原创 react、vue中的key有什么作用?(key的内部原理)

key的原理与作用案例解析：使用数组Index作为key引起的问题：input的value发生错乱使用id作为key：页面正确显示总结：react、vue中的key有什么作用? (key的内部原理)虚拟DOM中key的作用:key是虚拟DOM对象的标识,当状态中的数据发生变化时,Vue会根据【新数据】生成【新的虚拟D0M】， 随后vue进行【新虚拟DO】与【虚拟DOM】的差异比较,比较規则如下对比规则(1)旧虚拟DOM中找到了与新虚拟DOM相同的key,若虚拟DOM中内容没变,直

原创 react 解决数据不可变性

对象的浅拷贝：Object.assign或扩展运算符对象的浅拷贝带来的问题：从代码角度来讲，没有问题，解决了一些实际开发会出现的风险从性能角度来说，有问题，如果对象过于庞大，这种拷贝方式会带来性能问题以及内存浪费Immutable对象Immutable对象的特点是：只要修改了对象就会返回一个新的对象，但是旧的对象不会改变。为了节约内存，Immutable使用了一种新的算法：Persistent Data Structure(持久化数据结构/一致性数据结构)这里的持久化数据结构使用一种数据结构.

原创 JS版数据结构之 排序(冒泡、选择、插入、希尔、归并、快速)

文章目录冒泡排序选择排序插入排序希尔排序冒泡排序冒泡排序是升序排列核心思想：让数组的当前项和后一项进行比较，如果当前项比后一项大，就交换位置。时间复杂度：O(n^2)空间复杂度：O(1)const arr = [12, 8, 24, 16, 1, 34, 23, 12, 54]const bubble = (arr) => { // 控制比较的轮数 for (let i = 0; i < arr.length - 1; i++) { for (let j = 0;

原创 JS版数据结构之 算法复杂度(时间复杂度、空间复杂度)

文章目录一、算法复杂度1. 时间维度2. 空间维度一、算法复杂度算法是指解决问题的方案准确而完整的描述，是一系列解决问题的清晰指令，算法代表着：用系统的方法解决问题的策略机制。算法研究的是如何花最少的时间、最少的内存空间完成相同的需求。1. 时间维度时间维度：执行当前算法所消耗的时间，时间越短，算法越好。时间复杂度：一个代码执行的时间趋势，执行次数与执行参数息息相关，如果一个问题的规模是n，解决这个问题的某一算法需要时间T(n)。T(n) = O(f(n)) //大O表示法O：某个算法耗时与

原创 JS版数据结构之 图 ( 图的遍历、最短路径 )

文章目录一、图1. 图的分类2. 图的存储结构3.实现4.遍历(1)广度优先遍历(2)深度优先遍历5.最短路径一、图1. 图的分类无向图：边没有方向。边与边之间的关系仅仅是连接。有向图：边不仅连接顶点，并具有方向性.带权图：边带着权重。2. 图的存储结构顺序存储链式存储线性表：仅有的关系就是线性关系。树：有清晰的层次关系。图：集合中每一个元素都可能有关系，图由顶点和边构成，所以要存储图形结构的信息，无非就是存储图的顶点和边。如果使用数组，存储边时会比较复杂。因此我们采用以下两

原创 JS版数据结构之 树、搜索二叉树、平衡二叉树、红黑树

文章目录一、树二、二叉树1. 定义三、二叉搜索树1.定义2.实现3.遍历（1）先序遍历（2）中序遍历（3）后序遍历（4）最大值、最小值、查找四、平衡二叉树1.定义五、红黑树1.定义2.特性一、树双亲表示法： 顺序存储各个结点时，给各个结点添加一个变量，记录其父结点的位置。孩子表示法： 建立多个指针域，指向它所有子节点的地址，任何一个结点都会掌握他所有子节点的信息。孩子兄弟表示法： 从树的根结点开始依次采用链表去存储各个结点的孩子结点和兄弟结点，可以把一颗普通的树转换为二叉树。二、二叉树1. 定义

原创 JS版数据结构之 链表、原型链、哈希表

文章目录链表1.定义2.实现链表1.定义链表：线性表：0个或n个数据元素的有限序列。物理存储结构：顺序存储：用一段连续的存储单元依次存储线性表的数据元素。链式存储：内存地址可以是连续的也可以是不连续的，用指针来存放数据元素的地址。2.实现// 链点类class Node { constructor(element) { this.element = element this.next = null }}// 链表class LikedList { co

原创 JS版数据结构之 栈与队列、异步线程、任务队列

文章目录一、栈1.定义2.实现3.扩展(1)清空数组的三种方法4.栈的应用(1)十进制转二进制二、队列一、栈1.定义栈:一种受限制的线性表,遵循后近先出(Last In First Out)2.实现class Stack { constructor() { this.items = [] } // 选择一个元素到栈顶 push(ele) { this.items.push(ele) } // 出栈 pop() { this.items.pop

原创 react github搜索案例 知识点总结

文章目录最终效果1.ES6知识点：解构赋值+重命名2.消息订阅与发布机制3.fetch发送请求(关注分离设计思想)github链接最终效果1.ES6知识点：解构赋值+重命名let obj ={a,{b:2}}const {a} = obj // 传统解构赋值const {a:{b}} = obj // 连续解构赋值const {a：{b:value}} = obj // 连续解构赋值+重命名2.消息订阅与发布机制先订阅，再发布适用于任何组件内的通信在 compone

原创 react todoList 案例 知识点总结

文章目录一、最终效果二、实现功能三、通过学习到的知识1. 拆分组件、实现静态组件。注意 class 与 style 的写法2. 动态初始化列表,如何确定将数据放在哪个组件的 state中?3. 关于父子之间通信4. 注意 defaultchecked和 checked的区别,类似的还有: defaultvalue和 value5.状态在哪里,操作状态的方法就在哪里四、github链接一、最终效果二、实现功能添加 toddo删除 todo全选/取消全选 todo清除所有已完成 todo三、

原创 解决npm error create-react-app my-app 报错

更换npm代理npm config set registry http://registry.cnpmjs.org单独执行三句命令：npm install -g reactnpm install -g react-domnpm install -g react-scripts最后重新创建！create-react-app first-demo成功！Happy hacking!为了以后下别的包快一点，可以再换回淘宝代理npm config set registry https:

原创 webpack报错： Error: Cannot find module ‘webpack-cli/bin/config-yargs‘ (不降版本)

报错：webpack版本与webpack-cli版本之间不兼容的问题internal/modules/cjs/loader.js:883throw err;^Error: Cannot find module ‘webpack-cli/bin/config-yargs’Require stack:-C:\Users\Administrator\Desktop\前端\Webpack\node_modules\webpack-dev-server\bin\webpack-dev-server.js

原创 webpack简介--webpack五个核心概念

1.2 webapck五个核心概念1.Entry入口：webpack从那个文件作为入口文件开始打包，分析构建内部依赖图。2.OutPut出口：webpack打包后的bundles输出到那里去，以及如何命名3.Loader帮助webpack去识别那些非js文件4.Plugins插件：可用于执行更范围更广的任务，插件的范围包括：打包优化、压缩、重新定义环境中的变量。5.Mode1.development:能够让代码在本地调试运行的环境2.production:能够让代码优化上线运行的环境.

原创 JS红宝书-第22章-高级技巧

本章内容使用高级函数放篡改对象Yielding with Timers1.高级函数函数是复杂和动态的，一些额外的功能可以通过闭包来实现。由于所有的函数都是对象，所以使用函数的指针非常简单。1.1安全类型检测使用typeof操作符会导致检测数据类型时得到不靠谱的结果。instanceof在全局作用域下也会有很多问题。使用Object.prototype.toString.call()来判断是否为某个对象的类型。var toString = Object.prototype.toStri

原创 TTMS课程设计 管理员板块 前端页面+使用技术总结

一、部分实现效果1.管理员->管理员管理2.管理员->电影管理3.管理员->订单管理二、使用技术html+css使用jquery和ajax实现前后端交互三、主要代码1. jq+ajax提交表单数据$('#new_hall_form').on('submit', e => { //对表单数据序列化 e.preventDefault() const formData = $('#new_hall_form').serializeArray() v

原创 CSS伪类、伪元素

伪类与伪元素的区别区别：它们是否创造了新元素。伪元素：不存在于DOM文档中，伪元素用于创建一些不在文档树中的元素，并为其添加样式。它是虚拟的元素，是创造新元素，代表某个元素的子元素，则个子元素逻辑上存在，但却并不存在于文档树中。例如：我们可以通过 :before 来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。伪元素选择符：伪类：存在于DOM文档中，伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化

原创 ES6 Set和Map数据结构

一、Set1.基本用法Set数据类型类似数组，但里面的元素都是唯一的。 var s = new Set(); [2,2,3,4,3,2,2].forEach(x=>s.add(x)); console.log(s); //[2,3,4] const a = new Set([2,8,4,6,2,2,3]); console.log(a); //[2,8,4,6,3] console.log("a的size:" +

原创 实验室纳新页面总结

“我的信息”页面最后效果：问题：1.刚开始整体宽高都用了百分比来写，导致别人的页面发生了改变，我的页面的宽高也会受到影响。2.没有合理使用定位position：由于很多盒子没有定位，导致后面想要用position：absolute时，小盒子最近的已定位父元素已经不是位置上的父元素。所以在后期调整适配性时，“报名、一面、二面、结果”，这四个字是使用position：relative向右使用百分比不断移到合适的位置，但是这样的话，只要字数有了改变，就要在不同分辨率区间改变其的left值，十分麻烦。3.进

原创 ES6 对象的扩展、对象的新增方法、Symbol

一、属性的简洁表示法（1）在{}里直接写入变量和函数 var foo = "bar"; const baz = {foo}; console.log(baz); //foo:"bar"（2）函数直接返回对象 function f(x,y){ return {x,y}; } console.log(f(1,2)); //{x:1

原创 ES6函数的扩展

一、函数参数的默认值1、基本用法（1）ES6允许为参数设置默认值function log(x, y) { y = y || 'World'; console.log(x, y);}log('Hello') // Hello Worldlog('Hello', 'China') // Hello Chinalog('Hello', '') // Hello World（2）参数变量是默认声明的，所以不能用let或const再次声明，用var可以function foo(x = 5

原创 ES6数组的扩展

一、扩展运算符（…）1、含义：一个数组转为用逗号分隔的参数序列。console.log(...[1, 2, 3])// 1 2 3console.log(1, ...[2, 3, 4], 5)// 1 2 3 4 5可用于函数的调用例1：function add(x, y) { return x + y;}const numbers = [4, 38];add(...numbers) // 42例2：function f(v,w,x,y,z){ retur

原创 ES6数值的扩展

一、 二进制和八进制表示法ES6 提供了二进制和八进制数值的新的写法，分别用前缀0b（或0B）和0o（或0O）表示。0b111110111 === 503 // true0o767 === 503 // true如果要把以0b或0o为前缀的字符串数值转为十进制，使用Number()方法。Number('0b111') // 7Number('0o10') // 8二、Number.isFinite(),Number.isNAN()Number.isFinite()用来检查一

原创 ES第六章 正则的扩展

一、RegExp构造函数（1）参数字符串，参数一位字符串，此时第二个参数表示正则表达式的修饰符（flag）var regex = new RegExp('xyz','i');等价于var regex = /xyz/i;（2）正则表达式，参数一为正则表达式，此时会返回原有的正则表达式var regex = new RegExp(/xyz/i);等价于var regex = /xyz/i;（3）若RegExp构造函数的参数一为正则对象，参数二可用于指定修饰符，那么指定的修饰符会覆盖前面的修