实现瀑布流布局
实现瀑布流布局父组件
1234567891011121314151617181920<template> <WaterfallFlow :list="list"/></template><script setup lang="ts">import WaterfallFlow from "@/components/WaterfallFlow.vue";import {reactive} from "vue";type listType = { height:number, color:string}// 随机生成100个高度和颜色的对象let list = reactive<listType[]>([ ...Array.from({length:100},()=>(&# ...
Webpack5入门到原理
尚硅谷Webpack5新版视频教程
B站直达：https://www.bilibili.com/video/BV14T4y1z7sw
百度网盘：https://pan.baidu.com/s/114lJRGua2uHBdLq_iVLOOQ 提取码：yyds
阿里云盘：https://www.aliyundrive.com/s/UMkmCzdWsGh（教程配套资料请从百度网盘下载）
围观尚硅谷前端课程：http://www.atguigu.com/web
更多尚硅谷视频教程请访问：http://www.atguigu.com/download.shtml
在线课程地址：https://yk2012.github.io/sgg_webpack5/
Webpack5中文文档：Loaders | webpack 中文文档 (docschina.org)
1. 简单使用1.1 搭建项目
1.2 编写JS代码count.js
123export default function count(a,b){ return a + b}
sum.js
123export d ...
Vue自定义好用的指令
滑动到底部触发指令在 main.js 中添加
123456789101112// 自定义滑动到底部指令Vue.directive('selectLoadMore', { bind(el, binding) { // 获取element-ui定义好的scroll盒子 const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap') SELECTWRAP_DOM.addEventListener('scroll', function () { if (this.scrollHeight - this.scrollTop < this.clientHeight + 1) { binding.value() } }) },})
使用
1234567891011121314151 ...
SpringCloud
本文章完整视频和资料
链接：https://pan.baidu.com/s/1uekXKwT_dWYSAOREsBNirg?pwd=achf提取码：achf
认识微服务微服务是一种经过良好架构设计的分布式架构方案，微服务的特征有：
单一职责：微服务拆分粒度小，每一个服务都对应唯一的业务能力，做到单一职责，避免重复开发
面向服务：微服务对外暴露业务接口
自治：团队独立，技术独立，数据独立，部署独立
隔离性强：微服务调用做好隔离，容错，降级，避免出现级联问题
各架构设计的特点
单体式架构
简单方便，高度耦合，扩展性差，适合小型项目。例如：学生管理系统
分布式架构特点
松耦合，扩展性好，但架构复杂，难度大。适合大型互联网项目。例如：京东，淘宝
微服务：一种良好的分布式架构方案
优点：拆分粒度更小，服务更独立、耦合度更低
缺点：架构非常复杂，运维、监控、部署难度提高
微服务技术对比
微服务中父pom文件在这个文件中管理下面子工程的依赖版本号，然后子工程中引入依赖不需要写版本号
123456789101112131415161718192021222324252627282 ...
Java生成Token并添加拦截器校验Token，实现判断用户是否登录
添加JWT依赖
12345<dependency> <groupId>io.jsonwebtoken</groupId> <artifactId>jjwt</artifactId> <version>0.7.0</version></dependency>
添加工具类，包含
生成Token方法
从token中获取userId
从token中获取userName
查看Token是否过期
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475package com.szx.exam.util;import io.jsonwebtoken.*;import org.springframework.util.StringUtils;import jav ...
大文件分片上传
大文件分片上传文件上传到本地Java代码配置文件修改文件上传大小限制，和指定文件上传目录
1234567891011121314server: port: 8001spring: application: name: service-edu servlet: multipart: enabled: true #默认支持文件上传 max-file-size: -1 #不做限制 max-request-size: -1 #不做限制upload: directory: /apps/files
添加请求接口地址
12345678@AutowiredFileServiceImpl fileService;@ApiOperation("分片上传")@PostMapping("/splitUpload")public Response<Boolean> uploadFileByCondition(MultipartFile file, int chunkNumber, int totalChunk ...
浏览器是如何渲染页面的
浏览器是如何渲染页面的？当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。
在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。
整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画
每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。
这样，整个渲染流程就形成了一套组织严密的生产流水线。
渲染的第一步是解析 HTML。
解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML中的外部 CSS 文件和 外部的 JS 文件。
如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。
如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HT ...
CSS包含块
一说到 CSS 盒模型，这是很多小伙伴耳熟能详的知识，甚至有的小伙伴还能说出 border-box 和 content-box 这两种盒模型的区别。
但是一说到 CSS 包含块，有的小伙伴就懵圈了，什么是包含块？好像从来没有听说过这玩意儿。
好吧，如果你对包含块的知识一无所知，那么系好安全带，咱们准备出发了。
包含块英语全称为containing block，实际上平时你在书写 CSS 时，大多数情况下你是感受不到它的存在，因此你不知道这个知识点也是一件很正常的事情。但是这玩意儿是确确实实存在的，在CSS 规范中也是明确书写了的：
https://drafts.csswg.org/css2/#containing-block-details
并且，如果你不了解它的运作机制，有时就会出现一些你认为的莫名其妙的现象。
那么，这个包含块究竟说了什么内容呢？
说起来也简单，就是元素的尺寸和位置，会受它的包含块所影响。对于一些属性，例如 width, height, padding, margin，绝对定位元素的偏移值（比如position 被设置为 absolute 或 fixed ...
CSS计算属性
你是否了解 CSS 的属性计算过程呢？
有的同学可能会讲，CSS属性我倒是知道，例如：
123p { color: red;}
上面的 CSS 代码中，p 是元素选择器，color 就是其中的一个 CSS 属性。
但是要说 CSS 属性的计算过程，还真的不是很清楚。
没关系，通过此篇文章，能够让你彻底明白什么是 CSS 属性的计算流程。
首先，不知道你有没有考虑过这样的一个问题，假设在 HTML 中有这么一段代码：
1234<body><h1>这是一个h1标题</h1></body>
上面的代码也非常简单，就是在 body 中有一个 h1 标题而已，该 h1 标题呈现出来的外观是如下：
目前我们没有设置该 h1 的任何样式，但是却能看到该 h1 有一定的默认样式，例如有默认的字体大小、默认的颜色。
那么问题来了，我们这个 h1 元素上面除了有默认字体大小、默认颜色等属性以外，究竟还有哪些属性呢？
答案是该元素上面会有 CSS 所有的属性。你可以打开浏览器的开发者面板，选择【元素】，切换到【计算样式 ...
事件循环
浏览器的进程模型何为进程？程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程
每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。
何为线程？有了进程后，就可以运行程序的代码了。
运行代码的「人」称之为「线程」。
一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。
如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。
浏览器有哪些进程和线程？浏览器是一个多进程多线程的应用程序
浏览器内部工作极其复杂。
为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。
可以在浏览器的任务管理器中查看当前的所有进程
其中，最主要的进程有：
浏览器进程
主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。
网络进程
负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。
渲染进程（本节课重点讲解的进程）
渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。
默 ...
