- 博客(94)
- 收藏
- 关注
RSS订阅原创 HTML5拖拽API学习 托拽排序和可托拽课程表
前端拖拽功能让网页元素可以通过鼠标或触摸操作移动。HTML5 提供了标准的拖拽API，简化了拖放操作的实现。以下是拖拽API的基本使用指南：
2024-11-17 21:28:21
2021
1
原创 三个js实战例子
fdsaf<!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> #container{
2024-11-06 23:30:16
971
原创 Mysql常用语法一篇文章速成
本篇文章旨在为初学者提供一个快速入门Mysql的指南，帮助读者在短时间内了解MySQL的核心语法和基本功能。逐步深入到表的操作、数据的增删改查(CRUD)以及常见的查询技巧。
2024-11-03 22:43:50
1173
原创 SpringBoot AOP介绍、核心概念、相应实现
AOP全称Aspect Oriented Programming意为面向切面编程，通过预编译和运行期间通过动态代理来实现程序功能统一维护的技术。AOP思想是OOP[面向对象]的延续，在OOP中以类[class]作为基本单元, 而 AOP中的基本单元是 Aspect[切面]，AOP是软件行业的热点，也是Spring框架中的一个重要内容。与前端中的组件化差不多意思,每个组件负责自己的视图和逻辑,将重复的功能提炼成一个切面。
2024-11-03 22:39:46
1202
原创 SpringBoot的开篇 特点 初始化 ioc 配置文件
最初，Spring框架的使用需要大量的XML配置，这使得开发过程复杂且难以维护。开发者需要通过XML文件来定义应用的各个组件和它们之间的关系。随着Spring 4.x的发布，框架逐渐引入了基于注解的配置方式。开发者可以通过Java类中的注解来代替XML配置，从而简化了配置过程。这一变化使得开发者能够更直观地理解应用的结构，并减少了配置文件的数量为了解决传统Spring开发中的复杂性，Pivotal团队在2014年推出了Spring Boot。
2024-10-27 23:31:52
1647
原创 Zustand介绍与使用 React状态管理工具
在现代前端开发中，状态管理一直是一个关键的挑战。随着应用规模的扩大，组件间的状态共享变得愈加复杂。为了应对这一需求，开发者们逐渐寻找更加轻量、灵活的解决方案。在众多状态管理库中，Zustand以其简洁易用的特点脱颖而出。Zustand 是一个基于 React 的状态管理库，旨在提供简单而强大的状态管理功能。与传统的状态管理工具相比，Zustand 采用了更为直观的 API 设计，降低了学习成本，让开发者能够快速上手。
2024-10-25 22:30:24
842
原创 React路由 基本使用 嵌套路由 动态路由 获取路由参数 异步路由 根据配置文件来生成路由
React中没有vue那样的vue.use react中使用一个插件，库，都是引入一个组件，然后把要用该插件的部分包起来。React做异步路由，要配合导react本身的一个方法-lazy和一个组件suspense。通过BroserRouter或者HashRouter包裹要使用路由的根组件。在你想使用的组件上,这里不止根组件，任何组件包裹都可使用路由 非常方便。使用NavLink或者Link组件，定义跳转链接。使用Routes组件，定义路由显示区域。使用Route组件，定义具体路由规则。
2024-10-14 22:42:32
746
原创 根据Vue对比来深入学习React 下 props 组件传值 插槽 样式操作 hooks 高阶组件 性能优化
插槽本质上讲就是子组件的html内容需要父组件传入，在jsx的加持下，我可以把html像普通的字符串，数字一样传递，所以插槽只需要直接作为props传入就行。所以React最大的一个性能问题就是-React的某个组件的更新会连带着，他的子组件一起更新。React的更新是调用方法时触发的，并没有依赖收集的过程所以他会更新整个组件树也就是会把子组件一起更新即使更新的数据和子组件没有任何关系。组件是既包含了ui界面的复用，也包含了逻辑的复用，高阶组件只是复用操作逻辑，运算，类似于。
2024-10-13 22:10:16
1676
原创 根据Vue对比来深入学习React 上 函数组件 jsx 事件绑定 响应式数据 条件绑定 列表渲染 表单绑定
,React核心库:提供react的各个功能,比如生命周期,状态管理react-dom:用于与浏览器的 DOM 进行交互提供一些dom操作方法用于把react创建出来的react对象挂载到真正的htmldom中，或者从htmldom中卸载。核心作用类似于vue的mount//main.ts).render(//严格模式//vue3中我们可以看到:React 更加强调函数式编程和hooks的使用，而 Vue 3 提供了更为直观的模板语法和灵活的 API。
2024-10-12 23:15:00
1602
原创 前端性能优化 面试如何完美回答
性能优化是目前在面试中被问到非常多的问题，主要就是通过各种算和技术来提高页和应用的速度和用户体前端性能优化的问题并不好回答在回答的时候干万不要掉进一个误区，认为性能优化只是几个技术点而已，事实上性能优化涉及到的是多方面的我们首先需要知道，当一个项目出现性能问题时，并不是突然发生了，而是日积月累的结果，所以对于一个项目来说，最好的性能优化应该是从平时开发过程中就要去注意和实现的。
2024-10-05 23:20:20
2061
原创 HTTP结构、版本、请求方法、HTTPS加密过程面试必备
HTTP 是无状态的应用层协议，用于在 Web 上传输数据，如 HTML 文件、图片等。
2024-10-04 23:19:18
1479
原创 TCP三次握手和四次挥手全解析 面试必备
客户端收到服务器的确认连接信息，向服务器发送确认连接，此时TCP连接已经建立，客户端进入ESTABLISHED 状态。如果之前的请求由于网络恢复而到达服务器，服务器会再次发送确认，并认为这是一个新的连接请求，从而建立多条连接，这可能导致资源浪费和数据混乱。) 服务器收到连接请求，同意建立连接，然后向客户段发送确认连接信息，附带向客户端连接请求，此时服务器进入 SYN_RCVD(同步收到) 状态。==服务器端完成数据传输后，发送一个FIN报文段，请求关闭连接，进入LAST-ACK状态。
2024-10-02 19:05:52
1050
原创 前端面试必备 OSI七层模型与TCP/IP协议基础知识
在数据链路层的时候说过了如果所有的使用互联网的用户在同一个网段中，会产生广播风暴，所以要将用户进行划分，让他们在不同的网段中，自己在自己的小网段中广播。因为TCP会进行三次握手四次挥手所以是可靠的，但是这样会降低速度UDP具有较好的实时性效率比TCP高UDP是没有三次握手四次挥手的，故此不稳定，但是速度快常用于直播，游戏这一层经常被叫数据段。MAC地址：每个网卡的唯一标识。在这一层通过（电，光，无线电波），会获取他们对应的传送信号，电压，转换成010101010101但是数据还未组织，它们的单位为bit，
2024-10-01 23:04:01
987
原创 HTTP状态码全解
301和302状态码都表示重定向，浏览器在接收到这些状态码后会自动跳转到新的URL地址，新的地址可以从响应的。在SEO方面，302的影响通常被认为优于301，因为302不会导致搜索引擎更改对旧网址的索引。用户看到的效果就是输入的地址A瞬间变成了地址B。
2024-09-30 22:31:24
1135
原创 三篇文章速通JavaSE到SpringBoot框架 (下) Maven、 接口、MyBatis、Spring、SpringMVC、SpringBoot
Maven非Maven项目的缺点问题一：项目中的jar包资源需要我们自己从网上下载后，手动导入到项目中使用，不好管理。问题二：jar包版本控制麻烦Maven是使用Java语编写的基于项目对象模型(POM)项目管理工具软件，开发者可通过小段描述信息来管理项目构建、报告和文档。使用Maven可以更好的帮助我们完成项目的管理。Maven仓库中央仓库（CentralRepository）:Maven官方服务器。里面存放了绝大多数市面上流行的jar。允许用户注册后，上传自己的项目到官方服务器。网址在国
2024-09-28 23:33:45
2313
原创 三篇文章速通JavaSE到SpringBoot框架 (中) IO 进程线程 网络编程 XML MySQL JDBC相关概念与演示代码
分布在不同地理区域的计算机与专门的外部设备用通信线路互连成一个规模大、功能强的网络系统，从而使众多的计算机可以方便地互相传递信息、共享硬性、软件、数据信息等资源。设备之间在网络中进行数据的传输，发送/接收数据。注解其实就是代码里的特殊标记， 这些标记可以在编译、类加载、运行时被读取，并执行相应的处理通过使用注解，程序员可以在不改变原有逻辑的情况下，在源文件中嵌入一些补充信息。代码分析工、开发工具和部署工可以通过这些补充信息进行验证或者进行部署。
2024-09-26 22:37:35
1408
原创 三篇文章速通JavaSE到SpringBoot框架 上 JavaSE基础语法
这就是封装性的设计思想。也就是说，如果两个byte类型的数据进行运算，由于运算的类型最小为int，所以其结果不是byte类型而是int类型，所以无法赋值给byte的变量，需要进行强制类型转换。Java会生成相应的异常对象，Java系统寻找匹配的catch块，执行catch块代码，执行catch块后边的代码。发生在子类和父类中，当子类对父类提供的方法不满意的时候，要对父类的方法进行重写方法的重写有严格的格式要求。：模版下具体的产物可以理解为具体对象，对象就是一个一个具体的实例，就相当于这个模版下具体的产品。
2024-09-23 23:46:52
1241
1
原创 前端大数据渲染：虚拟列表、触底加载与分堆渲染方案
针对表格展示数据，用户提出要求前端在表格下面有一展示多少条数据的选项，如果要求一次性展示10000条数据，如果直接染会造成页面的卡顿，渲染速度下降，内容展示慢,如果有操作，操作会卡顿下面总结常见的几种大数据渲染方案。
2024-09-20 23:00:04
1092
原创 掌握回流与重绘面试回答：优化网页加载与响应速度
回流是器染过程中的一个阶 涉及计算所有元素的位置和大小当DOM的结构发生任何改变时（例如元素的添加、 移除、移动或大小变化） 浏览器需要重新计算元素的几何属性 然后确定它们在页面上的确切位置文个过程是必需的 因为页面布局是动态的元素的变化可能影响它元的布局。但是我们要尽量避免或者减少回流的发生，因为这个过程也是非常消耗性能的。绘是浏览器染过程中的个步骤，它涉及到更新页面中元素的视觉表现 但不涉及这些元条的布局位置重绘发生在元素的外观变化时，如改变颜色、阴影或者透明度等。
2024-09-16 23:45:23
1268
1
原创 前端性能优化:如何有效提升网页加载速度 面试必备
进行性能优化的原因是因为：性能的体现对干产品的影响是非常大，那么为了保证用户的留存率和转化率，我们就需要提升应用的响应速度 交互体验。以保证竞争力。### 性能优化如何衡量
2024-09-13 23:22:55
1522
原创 如何利用 CSS 渐变实现多样化背景效果
总在平常看到像这样的图片 背景是如何实现的呢 背景效果的多样性和美观性直接影响用户体验。CSS 渐变为设计师提供了一种强大且灵活的方法来创建引人注目的背景。渐变是颜色之间平滑过渡的效果，通过调整渐变类型和设置，你可以轻松实现从简单到复杂的各种背景效果。在日常开发中 有很多需要用到渐变的地方，这片文章来总结一下来看MDN是如何说的CSS 渐变由 [] 数据类型表示，它是 [] 的一种特殊类型，由两种或多种颜色之间的渐变过渡构成。
2024-09-10 22:58:41
1615
原创 面试必备：从源码解析 Promise 方法的核心实现
手写Promise相关经常是各大公司手撕代码环节会被问到的问题,本文手把手带你实现一遍Promise的核心功能和方法。fn(result);});});fn(result);});});// Promise 中的 then 方法回调参数都是可选的，当调用 then 方法未传参数时，需要给默认值??});});});});
2024-09-08 17:53:42
1651
原创 TypeScript 在 Vue.js 中的应用指南
在前端开发中，TypeScript 和 Vue.js 的组合越来越受到青睐。TypeScript 的强类型系统和 Vue.js 的组件化架构相得益彰，可以帮助你编写更可靠和易维护的代码。如果你已经掌握了 TypeScript 的基本语法，但不太确定怎么将它与 Vue.js 配合使用，本文将带你一步步理解如何在 Vue.js 项目中应用 TypeScript，提升你的开发效率。
2024-09-05 23:39:53
1015
原创 一些日常使用杂碎的vue3知识点
除了 Vue 内置的一系列指令 (比如v-model或v-show) 之外，Vue 还允许你注册自定义的指令 (Custom Directives)。自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。// 在模板中启用 v-focus我们想要在追加全局功能的时候都有什么呢//全局组件:app.component('ComponentName', Component)` 进行注册。
2024-09-04 23:10:53
1289
1
原创 前端跨域问题详解与解决方案指南
跨域问题通常是由浏览器的同源策略（Same-OriginPolicy，SOP）引起的访问问题同源策略是浏览器的一个重要安全机制，它用于限制一个来源的文档或脚本如何能够与另一个来源的资源进行交互同源策略要求两个URL必须满足以下三个条件才能认为是同源协议（Protocol）：例如，http和https是不同的协议。主机（Host）：例如，www.example.com和api.example.com是不同的主机端口（Port）：例如，默认的8080和8081端口被认为是不同的端口。
2024-09-02 23:36:16
1427
原创 面试必备：掌握BFC解决布局问题的核心要点
FC–Formatting Context 格式上下文在w3c上说context.context.正常流中的框属于格式设置上下文，该上下文可以是块或内联，但不能同时是两者。块级框参与块格式化上下文。内联级框参与内联格式上下文。
2024-08-31 23:38:40
1439
原创 面试中的SEO优化：从基本概念到实用策略
SEO对于Web站点很重要，有助于优化网页在搜索引擎中的排名，提升网站可见性和流量。掌握SEO技术可以确保网页结构和内容对搜索引擎友好，从而提高用户访问量和用户体验。而且SEO被面试问的很多。
2024-08-27 22:58:00
1453
原创 网站上线流程完全手册：域名、服务器与CDN
域名是网站的地址，类似于你的家在街上的位置。它让人们通过简单的名字（如）访问你的网站，而不是记住复杂的数字IP地址。每个域名背后都有一个对应的服务器IP地址域名分等级可以用百度的域名来解释域名的分级。假设我们以顶级域名 (TLD)com是顶级域名，类似于国家。它代表了一个域名的最高级别。二级域名baidu是二级域名，类似于省。在这个例子中，baidu是顶级域名com下的具体组织或公司名。三级域名www是三级域名，类似于市。它通常用于指示特定的服务或主机。在中，www通常指代网站的主机名。
2024-08-24 10:44:13
1346
原创 实现 前端框架 SPA 路由功能：Hash 模式与 History 模式的手动实现
在前端框架（如 Vue.js、React 等）中，路由管理通常会配置一个router对象来定义 URL 路径与组件的映射关系。路径（path）: 这是浏览器 URL 的一部分，比如/home或/about。组件（component）: 这是与该路径相关联的 Vue 组件（或其他框架的组件），如Home.vue或About.vue。代码🌰},routes});对于现代开发的项目来说，稍微复杂一点的SPA，都需要用到路由。而vue-router正是vue的路由标配，且。
2024-08-20 23:22:44
1099
原创 vue案例-从0实现购物车
我们都很熟悉商品购物车功能，每次在某宝某东等平台购物时，喜欢的商品会被加入购物车，最终统一结算。购物车的这一功能让消费者能够轻松管理商品，包括添加、删除商品，以及选择特定的商品进行结算。随着操作的变化，购物车中的商品总价也会实时更新，从而帮助消费者更好地控制和查看购买清单。购物车项目是一个理想的Vue练手项目，因为它结合了实际应用场景和多种开发任务。实现购物车功能涉及数据绑定、组件化、计算属性和状态管理等Vue核心特性，能够帮助开发者掌握前端开发的关键技能。
2024-08-18 23:40:49
610
原创 吃透前端文件上传与文件相关操作 多文件上传 大文件切片上传 拖拽上传 后续还会更新 断点续传等等
最近在学文件上传的操作,所以想把学习到东西写成一文章这片文章是我以小白视角 慢慢学习并熟悉前端文件相关操作的流程总结出来的前端文件上传 我首先想到是
2024-08-15 21:33:34
1047
原创 【前端可视化】大屏可视化项目三 包含了横向柱形图、竖向柱形图、雷达图、环形图、关系图、数据云图、数据展示图和地图可视化等八个部分
那么到这里，咱们本章的主要内容就已经全部完成了。在本文章中，我们首先利用vite+ tailwindcss构建了一个大屏可视化的项目。然后通过echarts完成了大屏可视化的功能。在项目中，每一个图表都是一个单独的组件。我们还有可以有其他组件库比如antv并且利用G2库实现可视化另外，在本文章的最后，我为大家推荐一个echarts的图标库isqqy。这里面包含了各种各样的echarts图表，如果大家在开发中需要定制一些特定的图表的话，那么可以参考下这个网站的图表配置哦。
2024-08-09 23:43:34
642
原创 【前端可视化】 大屏可视化项目二 scale适配方案 g6流程图 更复杂的图表
第二个大屏可视化，整个项目利用scale进行按比例适配。图表更加复杂，涉及到图表的叠加，mark，地图，g6流程图的能等始终保持比例适配(本项目方案),始终满屏适配(项目一).echarts绘制较为复杂图表，更深入锻炼echarts.
2024-08-07 23:40:37
1153
原创 vue3大屏可视化项目，包含地图，各种 图表，全屏适配方案
.始终满屏适配，这种方案一般用在屏幕变化不会特别的大项目，项目基本上不会用在比例非常不协调的大屏，设计图按1920*1080标准电脑屏幕比，所用的屏幕也基本在这个比例左右涉及图表知识点简单，主要有自定义色系，环形图，堆叠柱状图，折线图使用高德地图标点做中间地图
2024-08-04 08:17:28
5410
3
原创 vue3后台管理系统 vue3+vite+pinia+element-plus+axios上
使用vite作为项目脚手架# pnpm安装相应依赖# sass安装element-plus按需自动引入插件并在vite.config.js中配置plugins: [vue(),}),}),],resolve:{alias: {})注册elementplus的icon库删除helloworld组件和style.css 删除App.vue相应代码在src目录下创建router文件夹在其中创建index.js 并配置基本内容path:'/',children:[routes})
2024-07-30 20:46:37
1505
原创 Grid网格布局,解决flex布局痛点
Flex布局是一种单轴布局模型，适合在一个维度（行或列）上对项目进行灵活的排列和对齐。它非常适合构建单一维度的布局，比如导航菜单、工具栏、侧边栏等。Grid布局则是一个二维的布局系统，可以同时控制行和列，以网格的形式精确布局项目。Grid适合构建复杂的多维度布局，例如整体页面的布局、文章列表或图像展示。在工作中flex应用非常广泛,但在使用flex布局有一些痛点 比如在使用justify-content:space-between;让子元素两端对齐，中间自动会分配间距 形成这种情况。
2024-07-17 19:05:13
670
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人