<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[ladream的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/ladream</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; ladream]]></copyright><item><title><![CDATA[next.js v14 升级全步骤｜迁移 pages Router 到 App Router]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/139345968</link><guid>https://blog.youkuaiyun.com/ladream/article/details/139345968</guid><author>ladream</author><pubDate>Fri, 14 Jun 2024 14:59:03 +0800</pubDate><description><![CDATA[本文整体按照官网文档指引进行升级，包含next v14 升级全过程、报错处理、如何迁移 pages Router 到 App Router、以及next14 中的 seo 处理。]]></description><category></category></item><item><title><![CDATA[常见的验证码]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/136537871</link><guid>https://blog.youkuaiyun.com/ladream/article/details/136537871</guid><author>ladream</author><pubDate>Thu, 07 Mar 2024 16:29:08 +0800</pubDate><description><![CDATA[2）计算需要滑动的距离:遍历完整图的每一个像素点，利用 getRGB 对比完整图和缺口图哪里有差异，在有差异的时候，返回横坐标，即需要滑动的距离。根据用户滑动滑块的响应时间，拖拽速度，时间，位置，轨迹，重试次数等验证，相对来说更安全。用户的操作：按住滑块，拖动图片至阴影位置，完成验证。1）对比完整图和背景图的区别，得到阴影位置。类似的还有算数验证码。3）拖动滑块，看效果。]]></description><category></category></item><item><title><![CDATA[前端如何上传图片给后台？如何传递 multipart/form-data 类型的数据？图片大小、格式检查?]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/136537810</link><guid>https://blog.youkuaiyun.com/ladream/article/details/136537810</guid><author>ladream</author><pubDate>Thu, 07 Mar 2024 16:27:41 +0800</pubDate><description><![CDATA[图片上传需要传二进制流，请求头的 content-type 类型需为 multipart/form-data，传递的格式如下图所示注：目前我只用过以上这种方法，我能想到的另一种方法是表单及其图片都用 multipart/form-data 格式传递过去，但我和后台目前没用过这种方法。]]></description><category></category></item><item><title><![CDATA[js 实现点击按钮小球加入购物车动画]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/136537556</link><guid>https://blog.youkuaiyun.com/ladream/article/details/136537556</guid><author>ladream</author><pubDate>Thu, 07 Mar 2024 16:20:55 +0800</pubDate><description><![CDATA[本文旨在实现类似点击按钮实现小球加入购物车效果。]]></description><category></category></item><item><title><![CDATA[React + Node.js『markdown 笔记本 』项目]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/126328941</link><guid>https://blog.youkuaiyun.com/ladream/article/details/126328941</guid><author>ladream</author><pubDate>Sun, 14 Aug 2022 16:16:39 +0800</pubDate><description><![CDATA[该项目的主要功能是增删改查笔记，笔记可以使用 markdown 语法编写，笔记内容展示 markdown 语法编译后内容。]]></description><category></category></item><item><title><![CDATA[清除浮动的四种方式及其原理理解]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/126068918</link><guid>https://blog.youkuaiyun.com/ladream/article/details/126068918</guid><author>ladream</author><pubDate>Sat, 30 Jul 2022 10:34:26 +0800</pubDate><description><![CDATA[清除浮动的四种方式及其原理理解]]></description><category></category></item><item><title><![CDATA[【antd】使Pagination分页组件居中展示]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/124592468</link><guid>https://blog.youkuaiyun.com/ladream/article/details/124592468</guid><author>ladream</author><pubDate>Thu, 05 May 2022 16:52:38 +0800</pubDate><description><![CDATA[转载文章【antd】使Pagination分页组件居中展示

]]></description><category></category></item><item><title><![CDATA[react+ts 弹窗组件]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/124155573</link><guid>https://blog.youkuaiyun.com/ladream/article/details/124155573</guid><author>ladream</author><pubDate>Fri, 15 Apr 2022 20:24:47 +0800</pubDate><description><![CDATA[最后效果:
1.效果图
2.检查表单项的格式3.格式无误时，控制台打印表单内容
遇到的报错：


react Form submission canceled because the form is not connected
input内按回车会出发表单的默认提交事件
解决方式：将button的type设置为button


Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until ]]></description><category></category></item><item><title><![CDATA[Less 总结]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/123563081</link><guid>https://blog.youkuaiyun.com/ladream/article/details/123563081</guid><author>ladream</author><pubDate>Thu, 17 Mar 2022 23:22:18 +0800</pubDate><description><![CDATA[文章目录什么是Less注释变量嵌套@arguments获取参数转义(避免编译)运算Mixins混合继承
什么是Less

Less是一门向后兼容的 CSS 扩展语言。它为css新增许多能，如：变量、函数、作用域、混合、嵌套等等。它的优点是：更具有维护性、扩展性等，可以降低了维护的成本，less可以让我们写更少的代码做更多的事情。
它需要编译为css再被引入：lessc xxx.less yyy.css

注释
在less中，有两种注释

/*这是会暴露出去的注释 */
// 这是不会暴露出去的注释

变量
]]></description><category></category></item><item><title><![CDATA[ts总结 之 类]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/123216333</link><guid>https://blog.youkuaiyun.com/ladream/article/details/123216333</guid><author>ladream</author><pubDate>Tue, 01 Mar 2022 21:20:39 +0800</pubDate><description><![CDATA[文章目录1.类的简介2.构造函数 constructor3.继承 extends4.抽象类 abstract5.接口 interface6.属性的封装 public、private、protected、get、set7. 泛型
1.类的简介
使用class关键字
对象中主要包含的两个部分：属性、方法
class Person {
  /**
   * 直接定义的属性是实例属性。需要通过对象的实例去访问：
   *  const per = new Person()
   *  Person.age
   *]]></description><category></category></item><item><title><![CDATA[ts总结 之 webpack打包]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/123214781</link><guid>https://blog.youkuaiyun.com/ladream/article/details/123214781</guid><author>ladream</author><pubDate>Tue, 01 Mar 2022 20:51:19 +0800</pubDate><description><![CDATA[wepack的简单使用

快速初始化项目
npm init -y
安装依赖
npm i -D webpack webpack-cli typescript ts-loader
ts-loader 用于将ts和webpack整合到一起
在package.json中加上build命令"build": "webpack",
执行npm run build即可进行编译打包

用到的插件

html-webpack-plugin ：自动生成html文件
clean-webpack-plugin ：用来清除上一次编译后]]></description><category></category></item><item><title><![CDATA[ts总结 之 编译选项]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/122972356</link><guid>https://blog.youkuaiyun.com/ladream/article/details/122972356</guid><author>ladream</author><pubDate>Fri, 18 Feb 2022 15:07:38 +0800</pubDate><description><![CDATA[文章目录一、自动编译二、配置选项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

二、配置选]]></description><category></category></item><item><title><![CDATA[ts总结 之 ts中的类型]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/122971159</link><guid>https://blog.youkuaiyun.com/ladream/article/details/122971159</guid><author>ladream</author><pubDate>Wed, 16 Feb 2022 21:16:46 +0800</pubDate><description><![CDATA[ts是什么

以javascript为基础，来构建的语言
它是一个javascript的超集，它对js进行了扩展，并添加了 类型
兼容所有js平台
不能被js解析器直接执行（即.ts文件不可以被执行），需要将ts代码编译成js

ts增加了什么

类型
支持es的新特性，支持js所有内容
添加了es不具有的新特性：抽象类、接口
丰富的配置选项（可严格、可松散、可以把ts编译成es3等版本，兼容型好，）
强大的开发工具
有提示

TypeScript中的基本类型


类型声明


通过类型声明可以指定TS中变]]></description><category></category></item><item><title><![CDATA[node事件循环]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/121645043</link><guid>https://blog.youkuaiyun.com/ladream/article/details/121645043</guid><author>ladream</author><pubDate>Tue, 30 Nov 2021 23:50:37 +0800</pubDate><description><![CDATA[node是单线程的，但是它可以和内核对话，大多数内核是多线程的，node会尽量将操作装载到内核，让内核可以同时执行多个操作，当有一个操作执行完后，它就会告诉Node，node把回调加入轮询队列，最终执行。


node为了与内核对话专门用了一个库：libuv。它负责时间回到主线程之后，回调执行的事时间回到函数会排队执行。


同步任务早于异步任务执行


node的事件循环有本轮循环和次轮循环（仅针对异步事件）


本轮循环：同步任务 =&gt; process.nextTick() =&gt; 微任务..]]></description><category></category></item><item><title><![CDATA[Node.js项目 博客系统]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/120806160</link><guid>https://blog.youkuaiyun.com/ladream/article/details/120806160</guid><author>ladream</author><pubDate>Sun, 17 Oct 2021 01:18:38 +0800</pubDate><description><![CDATA[文章目录一、项目功能说明二、最终效果三、文件目录结构说明四、项目技术栈五、核心技术1. 使用Schema定义数据模型2. mongoose 的操作3.mogodb数据库的操作3. 使用第三方插件 express-session:存取数据状态4. 挂载路由5.使用md5对密码进行加密六、遇到的问题七、github链接
一、项目功能说明

登录、注册
新建博客
首页显示全部博客
查看博客详情页
查看博客评论区
修改、删除博客

二、最终效果
首页：

登录、注册：


详情页：

评论区：

新建博客：

登陆]]></description><category></category></item><item><title><![CDATA[React仿写网易云音乐项目]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/120487140</link><guid>https://blog.youkuaiyun.com/ladream/article/details/120487140</guid><author>ladream</author><pubDate>Sat, 16 Oct 2021 23:31:09 +0800</pubDate><description><![CDATA[文章目录项目功能说明最终效果项目技术文件目录结构说明
项目功能说明
最终效果
首页：
[外链图片转存中…(img-QPibK7GD-1632634396867)]
项目技术
文件目录结构说明

]]></description><category></category></item><item><title><![CDATA[vue脚手架配置代理]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/120608726</link><guid>https://blog.youkuaiyun.com/ladream/article/details/120608726</guid><author>ladream</author><pubDate>Mon, 04 Oct 2021 21:56:03 +0800</pubDate><description><![CDATA[]]></description><category></category></item><item><title><![CDATA[react、vue中的key有什么作用?(key的内部原理)]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/120096433</link><guid>https://blog.youkuaiyun.com/ladream/article/details/120096433</guid><author>ladream</author><pubDate>Sat, 04 Sep 2021 11:07:25 +0800</pubDate><description><![CDATA[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中内容没变,直]]></description><category></category></item><item><title><![CDATA[react 解决数据不可变性]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/120028538</link><guid>https://blog.youkuaiyun.com/ladream/article/details/120028538</guid><author>ladream</author><pubDate>Wed, 01 Sep 2021 08:17:28 +0800</pubDate><description><![CDATA[对象的浅拷贝：Object.assign或扩展运算符
对象的浅拷贝带来的问题：
从代码角度来讲，没有问题，解决了一些实际开发会出现的风险
从性能角度来说，有问题，如果对象过于庞大，这种拷贝方式会带来性能问题以及内存浪费
Immutable对象
Immutable对象的特点是：只要修改了对象就会返回一个新的对象，但是旧的对象不会改变。
为了节约内存，Immutable使用了一种新的算法：Persistent Data Structure(持久化数据结构/一致性数据结构)
这里的持久化数据结构使用一种数据结构.]]></description><category></category></item><item><title><![CDATA[JS版数据结构之 排序(冒泡、选择、插入、希尔、归并、快速)]]></title><link>https://blog.youkuaiyun.com/ladream/article/details/119935339</link><guid>https://blog.youkuaiyun.com/ladream/article/details/119935339</guid><author>ladream</author><pubDate>Sat, 28 Aug 2021 22:56:44 +0800</pubDate><description><![CDATA[文章目录冒泡排序选择排序插入排序希尔排序
冒泡排序
冒泡排序是升序排列
核心思想：让数组的当前项和后一项进行比较，如果当前项比后一项大，就交换位置。
时间复杂度：O(n^2)
空间复杂度：O(1)
const arr = [12, 8, 24, 16, 1, 34, 23, 12, 54]

const bubble = (arr) =&gt; {
  // 控制比较的轮数
  for (let i = 0; i &lt; arr.length - 1; i++) {
    for (let j = 0;]]></description><category></category></item></channel></rss>