自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

luckypian

为读者以及自己带来方便

  • 博客(47)
  • 收藏
  • 关注

原创 ReactHooks(完结)

我们希望如果 flag 没有发生变化,则避免 tips 函数的重新计算,从而优化性能。当父组件被重新渲染的时候,也会触发子组件的重新渲染,这样就多出了无意义的性能开销。使用 React.memo() 可以将组件进行缓存。如果点击 +1 按钮,发现count自增,flag值没有发生变化,但是tips函数也会重新执行。useDeferredValue 的返回值为一个延迟版的状态。

2024-07-30 22:18:48 988 3

原创 ReactHooks(二)

<button>修改 name 的值</button><Son1 /><Son2 /></div>

2024-07-29 21:06:14 783

原创 基于VueCli自定义创建Vue项目架子

安装脚手架前提需要安装node【node安装成功后,自带npm】

2024-07-28 11:07:29 559

原创 ReactHooks(一)

ReactHooks

2024-07-26 20:31:12 1044

原创 基于Java+SpringBoot+LayUI仓库管理系统

本项目是使用Java+SpringBoot开发,可以实现仓库的注册、登录,登录后可进入系统,进行客户管理、供应商管理、商品管理、商品退货查询管理、登录日志及退出等几大模块。系统界面采用传统的后台管理界面,界面简单、直观。

2023-11-07 20:44:39 522

原创 Vue全家桶(二)

这期更新有点缓慢了,让大家久等了,深表抱歉~上期。

2023-08-16 20:01:53 22

原创 基于Java+SpringBoot+Vue前后端分离电商项目【小米商城】

基于Java+SpringBoot+Vue前后端分离电商项目

2023-08-01 21:22:51 1868 4

原创 Vue2.0和3.0(一)

Vue2.0和3.0

2022-10-09 21:37:04 290 1

原创 进程、程序、线程之间的异同

进程、程序、线程之间的异同一.进程1.1定义1.2三种状态1.3特征二.程序2.1定义进程与程序的区别三.线程3.1定义进程与线程的区别进程、线程与程序之间的关系搞得晕头转向啊。。。一.进程1.1定义在内存中运行的程序,每个进程都存在一块自己独立的空间,一个进程可以有多个线程。进程是能够独立运行并作为资源分配的基本单位,它是由一组机器指令、数据和堆栈等组成的,是一个独立运行的活动实体。进程是程序的一次执行过程,或是正在运行的程序。1.2三种状态就绪状态执行状态等待状态(阻塞状态)

2021-09-17 15:17:34 1298

原创 垃圾回收与内存泄漏

垃圾回收机制与内存泄漏一.垃圾回收1.1方法1.1.1标记清除1.1.2引用计数二.内存泄漏2.1定义2.2分类2.2.1 Vue中的内存泄漏2.2.2 JS中的内存泄漏一.垃圾回收清早起来先给小粉来一波福利~垃圾回收机制浏览器的JavaScript具有自动垃圾回收机制,执行环境会负责管理代码执行过程中使用的内存;原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,释放其内存。但是这个过程不是实时的,因为其开销比较大并且GC时停止响应其他操作,所以垃圾回收器会按照固定的时间间隔周期性的执

2021-09-17 10:50:47 271

原创 React(五)

被nvm折磨的两天,戳这里体验博主的心路历程现在终于解决了,快让我记录一下,今日分心情。3).context 状态树传参​ 在平时使用react的过程中,数据都是自顶而下的传递方式,例如,如果在顶层组件(如:App)的state存储了theme主题相关的数据作为整个App的主题管理。那么在不借助任何第三方的状态管理框架的情况下,想要在子组件里获取theme数据,就必须的一层层传递下去,即使两者之间的组件根本不需要该数据。​ Context 旨在共享一个组件树,可被视为 “

2021-09-16 17:48:57 120

原创 React(四)

快来领取今日份精神食粮刚信心满满开始准备写代码时,却是满屏的爆红整的我一下午的心情都不好了脚手架搭建出错卸载yarn之后,又出现node版本低~node升级后,npm又出现bug一.性能优化​ react组件更新的时机:只要setState()被调用了,就会引起组件更新。不论数据改前改后是否一样,或者修改的数据是否在页面上呈现,都会进行更新组件。​ 但是vue中,数据必须在模板使用,并且数据发生变化才能引起组件的重新渲染。所以,在React里,如果要做

2021-09-03 14:18:55 251

原创 React(三)

React一.受控元素(组件)1.1双向绑定1.2 处理多个输入元素(双向绑定的封装)二. 非受控元素(组件)2.1默认值2.2可选案例:增删改查三.生命周期及其钩子函数3 .1 初始化阶段 (挂载):3.2运行中阶段(更新)3.2 销毁阶段(卸载)一.受控元素(组件)一个标签(组件)受react中控制,受数据,受函数,等等(其实,就是一个标签(组件)里用了react里的东西)表单的value受控,受数据控制,<input type="text" value={this.state.数据名}

2021-09-01 20:32:03 96

原创 React入门(二)

♥React一.无状态组件二.有状态组件三. 事件处理3.1事件特点:3.2 事件语法3.2.1格式3.2.2事件处理函数里的this3.2.3事件对象3.2.4阻止浏览器的默认行为:四.组件的内容 :children五.refs5.1获取DOM5.2用法上期戳这里~一.无状态组件​ 顾名思义就是组件内部没有(不需要)state,无状态组件也可以理解为展示组件,仅做展示用,可以根据外部传来的props来渲染模板的内容,内部没有数据。 //无状态组件:组件内部没有state,可以使用函数式组件

2021-08-31 17:21:31 278

原创 React入门(一)

React一.React简介1.1介绍1.2特点1.3框架对比二.环境搭建2.1引入文件的方式2.2官方脚手架(模块化)三.HelloWorld四.JSX4.1介绍4.2特点4.3语法4.1.1元素类型4.1.2元素属性4.1.3JavaScript表达式五.条件渲染六.列表渲染七.组件7.1单个组件7.2组件嵌套八.Props8.1外部传值:8.2组件内部使用8.3默认值8.4类型检查:九.state状态机9.1定义并赋初始值9.2读取状态9.3修改状态一.React简介1.1介绍1.React是一

2021-08-30 20:21:29 784 2

原创 WebSocket

WebSocket聊天室一.Socket1.1应用1.2介绍1.2.1socket的通讯流程1.2.2示例二.webSocket2.1webSocket对象介绍2.1.1 属性2.1.2事件2.1.3方法2.2使用步骤:三.socket.io3.1介绍:3.2思路:3.3步骤:一.Socketsocket在哪里呢?1.1应用​ Web领域的实时推送技术,也被称作Realtime技术。这种技术要达到的目的是用户不用刷新浏览器就可以获得实时更新。它有着广泛的应用场景。eg:WebIM

2021-08-28 11:46:21 1807

原创 揭开原型的面纱

原型一.原型1.1定义1.2 new关键字执行过程1.3名词解释一.原型1.1定义任何对象都有一个原型对象,这个原型对象由对象的内置属性__proto__指向它的构造函数的prototyoe指向的对象,即任何对象都是由一个构造函数创建的,被创建的对象都可以获得构造函数的prototype属性,这个构造函数就是原型。 var str = new String("a"); console.log("str", str);好奇的宝宝有么有发现这个小箭头,是不是想动手点击一下呢?这个小

2021-08-28 09:50:56 483 3

原创 Vue全家桶(一)

今天写了一天的时间,麻烦读者怀一颗感恩的心阅读哈~小编提前感谢大家咯

2021-08-27 19:49:41 1488 6

原创 NodeJS(二)

NodeJs扩展一.bcrypt模块1.1介绍:1.2安装:1.3加密代码:二. 身份验证2.1session(会话)2.1.1思想2.1.2业务场景:2.1.3express-session2.2token2.2.1思想2.2.2实现2.2.3生成签名(token)2.2.4校验token2.2.5token删除三.session vs token四.如何保存信息给浏览器(cookie)1、前端保存:2、后端操作cookie:2.1、添加cookie2.2、删除cookie2.3、获取cookie五.文件

2021-08-26 19:10:53 709

原创 Mongodb

分享一下昨天晚上找bug的心路历程数据库已经连接成功,并且数据可以打印出来,为何数据库中查不到呢?为什么会多出一个集合呢?很是懊恼呀!据说MongoDB数据库的集合要以数字/s结尾,我的就是s结尾呀~最终解决方案:在引用的地方,第三个参数进行复用集合名称,问题就可以解决啦折腾了一个晚自习,终于解决啦~小编也可以睡个美美的觉咯...

2021-08-26 16:27:22 140

原创 项目架构

项目架构一.MVC二.web开发中的架构:1.耦合架构2.半分离架构3.分离架构三.restful规范1.概念:2.优点:3.规范一.MVC项目架构,项目分层,不同的层的职责不同。M:model,模型(只是数据处理)业务逻辑处理,更多体现的是数据库的增删改查V:view:视图(显示)views文件夹下的文件。完成显示的格式。使用ejs模板,jade模板C:controller,控制器。(控制的就是某个功能的业务流程)routers文件夹下的文件。根据业务流程,调用不同的模块完成对应的功能。

2021-08-25 19:24:17 4075

原创 NodeJs(一)

目录一.服务器1.定义:2.web服务端保存的资源3.web服务器(软件)的作用二.nodeJS1.定义:2.目标:3.优势:4.劣势:5.特点:三.环境安装1.官网:2.测试环境:3.运行:四.web服务器的开发(一)搭建服务器(http模块)2.步骤(二)静态资源托管(fs模块)1.fs:2.fs模块(path模块)3.path模块3.2.1磁盘路径解析parse3.2.2片段合并join3....

2021-08-24 21:04:16 559

原创 状态(数据)管理vuex

每个组件内部的数据存放在data中,供组件内部使用。如果,vue组件之间数据共享怎么办?即A组件使用B组件里的数据?传统的处理方案:父子组件传值、平行(兄弟)组件跳转、利用url、路由传值等。以上这些方式存在很多缺点:数据传递复杂,容易出错; 浪费内存一.作用能够保存全局数据,供整个应用使用; 保存的数据是响应式的; 保存的数据可以跟踪状态的变化。二.核心对象(vueX.store)核心对象中的配置项:state:数据仓库,存储所有的共享数据,...

2021-08-17 19:35:30 128

原创 动态路由

一个早上被组件与页面组件之间跳晕了,快让我写篇blog静静,屡屡思路。目录一.路由传参二.路由传参和props三.捕获所有路由/404 Not Found路由四.命名路由五.重定向(redirect)六.嵌套路由七.路由模式八.路由守卫九.组件内部守卫一.路由传参1.路由配置const router = new VueRouter({ routes: [ // 动态路径参数 以冒号开头,相当于在path里声明了一个变量 id...

2021-08-13 16:31:06 1341

原创 路由和第三方UI组件

目录一.路由二.第三方UI组件一.路由1.作用: 实现SPA(单页面)应用中的组件跳转,相当于页面中啊标签。2.基本使用非模块化开发①引入vue-router.js文件<script src="js/vue.js"></script><script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>②定义若干个组件(为了跳转用)let..

2021-08-12 20:13:13 199

原创 对象的深拷贝和浅拷贝

目录一.浅拷贝二.深拷贝一.浅拷贝1.定义: 只拷贝了对象(引用类型)的地址。 var obj = { name: "张三疯", sex: "男" } var obj2 = obj; obj2.sex = "女"; console.log("obj", obj); console.log("obj2", obj2);二.深拷贝1.定义将对象(引用类型 )数据...

2021-08-11 20:30:19 178

原创 vue模拟数据,数据交互

一.定义mock serve工具,通俗来说,就是模拟服务端接口数据,一般用在前后端分离后,前端人员可以依赖API开发,在本地搭建一个JSON服务,自己产生测试数据。即json-server就是个存储json数据的serve。注:json-server支持CORS和JSONP跨域请求。二.json-server使用步骤:初始化项目:npm init -y 安装json-server npm i json-server -D 打开...

2021-08-11 17:48:10 1018

原创 虚拟DOM,diff算法

一.虚拟DOM(virtual DOM)1.定义 也是我们常说的虚拟节点,它是通过JS的Object对象模拟DOM的节点,然后通过特定的render(渲染)方法,将其渲染成真实的DOM节点。2.为什么使用虚拟DOM? 使用js操作DOM时(增删改查),那么DOM元素的变化自然会引起页面的回流(重拍)或者重绘,页面的DOM重绘自然会导致页面性能下降,因此尽可能减少DOM的操作。vue中,使用虚拟DOM来提高性能。3.真实DOM和虚拟DOM的区别:虚拟DOM不...

2021-08-09 19:28:38 104

原创 Vue组件间的通信(组件传值)

一.定义 vue组件之间的通信(传递数据)是必然的,依据vue组件之间的关系(父子、兄弟以及无关组件)会有不同的做法。二.分类父子组件:父--->子:props,refs 子--->父:事件(tips:上个blog有说到)注:父组件给子组件传值也叫正向传值,反之则为逆向传值。1)父给子组件:refs(tips:props上个blog有说到)用标签的方式使用组件(eg:<my-com/>),实际就...

2021-08-08 19:04:16 204

原创 Vue组件

一.概念(vue的两大核心:数据驱动和组件化)组件是自定义标签,vueJs提供的组件可以让程序员自己定义标签,对页面进行模块化。每个标签里面包含html、css、js。标签: <标签名 属性名=“属性值" 事件=”函数“>内容</标签名>vue的组件就是一个vue对象。vue对象的配置项,在vue组件里也可以使用。注:1.组件的配置项中没有el属性,只有根实例存在el,组件中使用template定义模板,且只能有...

2021-08-07 09:57:31 337

原创 [前端]项目环境搭建——前后端分离

目录一.gitee(码云)准备二.工具的搭建一.gitee(码云)准备新建一个空仓库将仓库克隆到本地二.工具的搭建生成package.json文件给项目安装gulp npm -i gulp -D 安装监听sass的工具 npm -i gulp-sass node-sass -D 在项目下新建gulpfile.js文件引入第三方包拷贝除sass文件以外的文件到www(服务器)下终端执行...

2021-07-27 14:38:05 465

原创 [css案列]手风琴

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { .

2021-07-21 20:58:01 62

原创 [案例] 放大镜,评分

一.放大镜<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } li {

2021-07-20 20:36:29 65

原创 Node初体验

目录一.了解node二.命令行常用操作三.node运行js文件四.node开发一.了解node1.官方:基于chrome v8引擎的,是javascript的运行环境。v8引擎:专用解析javascript 解析引擎。2.私人:一个“软件”,能运行js代码。3.node与其他常用软件的区别:图标node没有图标顺序①其他如那件可以预先打开软件,然后在选择文件;②node不可以...

2021-07-20 16:41:48 200

原创 HTML+CSS+JavaScript试题总结(一)

一.px,em,rempx:定义:px是像素,绝对长度单位。px是相对于浏览器窗口的分辨率而言。特点:IE浏览器无法调整使用px作为单位的字体大小; Firefox可以调整px、em和rem。em:定义:em是相对长度单位。em是相对于当前对象内文本的字体尺寸。如果未被定义文本尺寸,则相em对于浏览器默认字体尺寸。特点:em的值不固定; em会继承父级元素的字体大小。注:默认浏览器的字体大小为16px,未经调整的浏览器都符合1em=16px。为了简化font-size的

2021-07-19 20:03:19 321

原创 设计模式

一.概念设计模式(Designpattern)是一套被反复使用、思想成熟、经过分类和无数实战设计经验的总结的。使用设计模式是为了让系统代码可重用、可扩展、可解耦、更容易被人理解且能保证代码可靠性。二.特点设计模式使代码开发真正工程化; 设计模式是软件工程的基石脉络,如同大厦的结构一样。设计模式并不是一种固定的公式,而是一种思想,是一种解决问题的思路;恰当的使用设计模式,可以实现代码的复用和提高可维护性;三.设计原则高内聚、低耦合。总体原则:开闭原...

2021-07-16 15:54:25 146

原创 [案列]Tab选项卡、购物车[简易版]、全选与反选

一.Tab选项卡<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {

2021-07-15 17:26:03 253

原创 Node节点、NodeList节点列表

一.NOde节点属性 className 设置/返回元素的class属性的属性值 innerHTML设置/返回元素的开始标签与结束标签之间的内容 value设置/返回文本框与文本域的内容 nextElementSibling 返回下一个紧邻的兄弟节点 previousElementSibling 返回上一个紧邻的兄弟节点 parentNode 返回父级节点 children找子级元素 style设置/获取一个...

2021-07-14 18:49:10 2581

原创 事件

帮助用户触发某个元素的事件:Node.去掉on的事件名。一.组成事件类型、事件源、事件处理函数。二.事件对象定义:当触发事件以后,对该事件的一些描述信息。三.事件类型鼠标事件 click:点击事件 dblclick:双击事件 contextmenu:右键点击事件 onmousedown:鼠标按下(左键) onmouseup:鼠标弹起(左键) onmousemove:鼠标移动 onmouseenter:鼠标移上 .

2021-07-13 16:27:54 101

原创 函数,箭头函数和构造函数

A.函数一.定义一段可以被高度复用的代码段。二.定义方式声明式——有提升(整个声明都会提升) fn1("先调用——我是乖哦bug");function fn1(str) { console.log("hi,我是声明的方式定义的 " + str);}fn1("后调用——我是乖哦bug");表达式/赋值式——没有提升(变量名提升,赋值没有提升)fn2("先调用——我是乖哦bug");var fn2 = function(str) { console.lo.

2021-07-12 16:48:17 483

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除