css之div盒子居中常用方法
绝对定位居中
这个方法就是利用绝对定位，使它的top、left、right、bottom都为0就可以实现居中
演示结构：
12345<!-- 父盒子 --><div class="box"> <!-- 子盒子 --> <div class="children_box"></div></div>
CSS样式结构：
1234567891011121314151617181920<style>.box { width: 200px; height: 200px; border: 1px solid #000000; position: relative;}.children_box { width: 100px; height: 100px; position: absolute; /* 绝对定位 */ top: 0; left: 0; right: 0; bottom: 0; /* margin要设为a ...
SpringBoot文件上传大小限制问题
前言：在用SpringBoot开发后台系统的时候，需要开发文件上传业务，但是上传大文件控制台会报错：The field files exceeds its maximum permitted size。
解决办法一般SpringBoot的文件上传大小限制在1M以下，单个请求中最多可容纳10M大小的文件流数据，这个大小对于我们实际开发来说实在太小了。
解决办法也很简单，在配置文件application.properties里面加入相关配置即可
Spring Boot 1.3.x或之前版本，配置如下：12multipart.maxFileSize=100Mbmultipart.maxRequestSize=1000Mb
Spring Boot 1.4.x版本及以上，配置如下：12spring.http.multipart.maxFileSize=100Mbspring.http.multipart.maxRequestSize=1000Mb
Spring Boot 2.0版本及以上，配置如下：12spring.servlet.multipart.max-file-size = 1 ...
CSS实现左边固定宽度，右边自适应的两栏布局
方法一
左边设置宽度，右边设为flex即可
1234567891011121314151617181920212223242526272829303132333435<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <div class="left"></div> <div ...
小程序缓存操作(本地、同步、异步)
本地缓存
wx.setStorage（wx.setStorageSync）、wx.getStorage（wx.getStorageSync）、wx.clearStorage（wx.clearStorageSync）可以对本地缓存进行设置、获取和清理。本地缓存最大为10MB
使用localStorage永久存储
使用uniapp进行开发的时候，可以将wx替换为uni来进行缓存的操作
异步缓存wx.setStorage(object)
uni.setStorage(object)
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容
1234wx.setStorage({ key:"key", data:"value"})
wx.getStorage(object)
uni.getStorage(object)
从本地缓存中异步获取指定 key 对应的内容。
123456wx.getStorage({ key: 'key', success: functio ...
通过axios下载/导出文件
TypeScript代码API接口代码123456789// 导出用户信息export function exportUser(){ return request({ url : '/user/export', method : 'get', headers: {}, responseType: 'blob' })}
123456789101112131415161718// 导出信息文件function exportUserInfo(){ exportUser().then((res : any) =>{ let blob :any = new Blob([res], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;"}); ...
事件循环机制
前言：JavaScript是一种单线程的，为了利用好资源和任务分配，JS将任务分为同步任务和异步任务，而事件循环就是规定了执行任务的顺序。
Event Loop事件循环机制就是按照以下的顺序模式来循环执行JS中的任务事件
顺序如下：
同步先执行
异步（微任务 > dom渲染 > 宏任务，然后又继续去找有没微任务）
微任务
promise.then（new promise构造函数是同步）、async/await。
process.nextTick
Promise.catch
resove/reject
MutationObserver
注意
Promise是异步的，是指他的then()和catch()方法，Promise本身还是同步的，所以遇到Promise还是先执行的Promise同步代码。（同步优先）
宏任务
setTimeout
setInterval
setImmediate
ajax请求
dom事件
script块
总结
先执行同步代码，
遇到异步宏任务则将异步宏任务放入宏任务队列中，
遇到异步微任务则将异步微任务放入微任务队列中，
当所有同步代码执行 ...
前端常用的性能优化
前端Vue常用的性能优化方法
尽量减少http请求，减少页面的重排重绘
开启gzip压缩，压缩css和js文件
加入CDN静态资源加速
加入节流防抖
加入图片、路由懒加载，预加载
灵活使用缓存，减少请求负担
减少页面的dom操作，尽量用v-show代替v-if
组件拆分
首屏加载速度
压缩和优化页面资源：对于HTML、CSS、JavaScript以及图片等文件进行压缩和优化，减小文件大小，加快下载速度。
使用CDN（内容分发网络）：通过将静态资源缓存在全球各地的服务器上，可以提高资源加载速度，特别是在不同地区用户访问时。
减少HTTP请求次数：合并多个CSS或JavaScript文件、使用CSS Sprites技术、避免过多的HTTP请求，从而加快网页加载速度。
延迟加载（Lazy Loading）：推迟某些资源（如图片和视频）的加载时间，以便更快地加载首屏。也可以使用按需加载（On-demand Loading）等技术，只在需要时才加载数据。
使用WebP格式：使用Google开发的WebP图像格式代替JPEG或PNG格式，可以减少图像文件大小，提高网页载入速度。
优化代码：合理优 ...
前端面试2
前言：前端面试题总结2，主要是2022年底遇到的较多的面试题。
说说http状态码，说明状态码表示的信息2开头-成功类
200 请求已成功，返回想要的东西
201 请求成功，服务器正在创建请求的资源
202 服务器收到请求了，但是未处理
203 服务器成功处理，但是返回的信息是另一个来源
204、205 服务器成功处理，但是没有返回内容
206 成功处理了部分get请求
3开头- 重定向类（要完成请求，需要进一步操作）
300 针对请求，服务器可执行多种操作
301 请求的网页已永久移动到新位置。
302 访问网页时，被暂时性重定向到另一个url上。
4开头-请求错误
400 请求参数有误，请求无法被服务器理解
401 请求需要请求者验证(无权限–token)
403 服务器拒绝该请求 (权限不够遭拒绝)
404 找不到请求网页
5开头：服务器错误
500 （服务器内部错误）服务器遇到错误，无法完成请求
502 （错误网关）服务器作为网关或代理，从上游服务器收到无效响应。
503 （服务不可用）服务器目前无法使用（由于超载或停机维护）
504 （网关超时）服务器作为网关或代 ...
前端常见面试题
HTML5部分HTML5新特性有哪些
Canvas绘图以及SVG绘图
语义化标签（header、nav、footer、article、section）
音频、视频（audio、video）API
拖放（Drag and drop）API
地理定位（Geolocation）
本地离线存储（localStorage），长期存储数据，关闭浏览器后不丢失。
会话储存（sessionStorage），数据在关闭浏览器后自动删除。
cookie与sessionStorage和localStorage的区别
保存方式
cookie存放在客户的浏览器上。
session都在客户端中保存，不参与服务器通讯。
生命周期
cookie可设置失效时间
localStorage除非手动清除否则永久保存
sessionStorage关闭当前页面或浏览器关闭后失效
存储的大小
cookie 4kb
session 5M
共同点
不能存储其他数据类型，只能存储字符串数据类型
如果一定要存储其他数据类型，转成 json 格式存储
使用方法
12345var storage = null;storage.s ...
尝试手写Ajax
Ajax是什么AJAX 即 Asynchronous Javascript And XML（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。可以通过Ajax向服务端发起异步请求数据，最大的优势在于无需刷新即可获取到数据。
Ajax的优缺点优点
可以无需刷新页面而与服务器端进行通信
充分利用客户端闲置的处理能力，减轻服务器和网络传输的负担
缺点
Ajax干掉了Back和History功能，即对浏览器机制的破坏。
没有浏览历史，不能回退
存在跨域问题(同源)
SEO 不友好
发起请求的常见响应状态码
200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求
常见请求类型
GET: 从服务器端读取数据（查）
POST: 向服务器端添加新数据 （增）
PUT: 更新服务器端已经数据 （改）
D ...