- 博客(37)
- 收藏
- 关注
RSS订阅原创 net::ERR_HTTP2_PROTOCOL_ERROR 200
某接口遇到 net::ERR_HTTP2_PROTOCOL_ERROR 200
2023-01-19 16:04:58
671
1
原创 html css早期学习笔记
HTML1. 如何理解HTML语义化什么是语义化 用正确的html标签来展示相应的元素。如段落用,标题用等。为什么要关注语义化 对人来说，便于团队开发和维护，代码可读性高，在没有加载CSS的时候也能呈现较好的内容结构与代码结构，易于阅读。 对机器来说，有利于SEO，搜索引擎的爬虫是根据标签来确定上下文权重的；其次，利于其他设备的解析，有利于无障碍阅读，提高可访问性。2. 块状元素和内联元素display: block / table 有div h1~h6 table
2022-02-27 10:54:34
245
原创 前端的性能优化总结
性能优化一、RAIL性能模型1. 什么是RAILR - Response响应： 并非网络请求的响应，而是Web应用给用户的响应体验；A - Animation动画：动画是为了提高用户体验，但是添加的动画是否流畅；I - Idle空闲：让浏览器（主线程）有足够的空闲时间处理用户的交互，而不是一直在繁忙状态； 浏览器控制台有一个performance选项卡，列出了所有和性能相关的指标。L - Load加载：网络加载2. RAIL的目标 Rail的目标就是提高用户体验
2022-02-26 13:02:24
2081
原创 计算机图形学小总结
计算机图形学1. 坐标系和空间，空间的转换物体坐标系（本地坐标系）：Local Space或Model Space；世界坐标系 World Space观察者坐标系（摄像机坐标系） View Space裁剪空间 Clipping Space屏幕空间 Screen Space 其中前四个矩阵之间，主要通过**model， view， projection矩阵进行相关的变换， 裁剪空间到屏幕空间通过视口变换进行；前三个是三维空间，后面两个是二维空间。 所
2022-02-26 12:56:05
472
2
原创 react-router-dom v6 的类组件使用路由的参数
react-router从v5升级到v6之后做了非常大的改动（刚学习的时候非常头疼）：具体的新特性可以看这篇文章：https://blog.csdn.net/weixin_40906515/article/details/104957712也可以看react-router的官方网站的迁移策略：https://reactrouter.com/docs/en/v6/upgrading/v5在react-router v6的文档以及很多网上的博客中，在组件中使用路由参数location、history、ma
2022-02-19 11:30:13
6460
8
原创 useEffect中调用的方法，只能访问到useState的初始值，不能访问到setState过后的值（未解决）
做项目遇到的情况，在useEffect中对一个元素进行事件绑定： useEffect(() => { // 处理键盘键盘事件 (document.getElementsByClassName('md-editor-panel')[0] as HTMLElement) .onkeydown = handleKeydown; }, []);其中用到的其他方法和数据如下： // 键盘事件处理函数 const handleKeydown = (e: Keyboa
2022-02-05 14:38:30
2028
原创 时间格式化函数，TS版本
export const dateFormat = ( dateStr: string | Date, formatter: string = 'yyyy-MM-dd',) => { let date = dateStr if (typeof date === 'string') { date = new Date(dateStr) } let o = { 'M+': date.getMonth() + 1, //月份 'd+': date.getDa
2022-01-30 17:29:02
1552
原创 antd+ts表单验证规则 触发时debounce
做一个需求，在表单元素输入时做验证：这是表单元素：<Form.Item label="用户名" name="username" validateTrigger={["onBlur", "onChange"]} rules={[ { validator: usernameCheck } ]} hasFeedback > <Input className='input' bordered
2022-01-24 15:57:23
1728
原创 在做react和ts学习碰到的一些问题
TypeScript中使用setTimeout()函数的返回类型是什么看这篇文章：https://www.mybj123.com/13153.html
2022-01-22 13:20:45
498
原创 获取 Element-ui的 msgbox 填写的值
最近做了一个需求，需要弹出一个 message box， 其中 msgbox 里包含一个输入框，输入框要填写内容，点击确认后要拿到这个输入的值。 // 这个函数返回一个 promise，该promise如果resolve会拿到输入的值。 function addDescription() { const h = this.$createElement; let desc = ''; // 这里保存输入的值 return new Promise(resolve =&.
2021-09-08 10:36:32
962
原创 前端文件批量压缩打包
最近碰到一个需求，已经获得一系列的url，想要去批量下载这一批文件，并且打包，生成一个zip压缩包。单文件下载使用axios或者原生的xhr都可以 downloadFile(url, fileName) {//跨域文件路径、下载到本地的文件名 var x = new XMLHttpRequest(); x.open("GET", url, true); x.responseType = 'blob'; x.onload=function(e) { .
2021-09-01 15:51:47
1081
原创 JS数据类型——FormData
https://developer.mozilla.org/zh-CN/docs/Web/API/FormData最近做一个需求，后端要求使用form-data的格式传递，我这边使用普通的json格式传递，后端没有验证，导致无法获取正确结果。应该使用js的FormData对象来当作post的参数。构造函数FormData()创建一个新的 FormData 对象。方法FormData.append()向 FormData 中添加新的属性值，FormData 对应的属性值存在也不会覆盖原值，而是
2021-07-26 15:04:48
2451
原创 类穿梭框的，可修改点击新增选中组件
左边是待选框，右边是已选中的框，可以点击左边元素的加号将左边元素添加至右边，并且右边的元素是可以编辑的。双击右边的列表元素可以进入编辑模式，编辑完成后回车或令input失焦即可以完成编辑。绑定的v-model为selectedRules属性，需要传入左侧列表的参数allRules。lebel和value的规则暂时不可配置，之后有需要可以拓展配置绑定项功能。注意，这里右边列表的元素的id我是用的随机数，严谨一点应该使用随机生成id或者其他保证唯一的id方法。<template> &l.
2021-06-29 13:13:55
242
原创 JS中的this指向问题
1. 普通函数的this指向原则：- 函数执行，首先看函数名前面是否有“.” ，有的话， “.”前面是谁，this就是谁；没有的话this就是window；- 立即执行函数的this永远指向window；- 给元素的某一事件绑定方法，当事件触发的时候，执行对应的方法，方法中的this是当前元素。2. 函数中的方法的this指向function A() { function B() { console.log(this); } B();}A(); // windo
2021-05-13 10:22:55
58
原创 如何找两个数组的差集（两个都可能是嵌套数组）
字节跳动面试算法题思路是将两个数组分别分成两个部分，一部分是基础元素，另一部分是数组元素。然后对同类型的元素分别求差集。对于数组元素，要递归判断两个数组元素是否相等，不能使用 == 号，因为数组属于对象， 两等号比较对象的时候是比较它们的地址。// 判断两个数组是否相等function arrayEquals(array1, array2) { let arr1 = array1.slice(0), arr2 = array2.slice(0); if (arr1.length !== ar
2021-04-19 18:27:05
1771
原创 Array.fill(new Array(5))初始化问题
初始化一个js二维数组：let matrix = new Array(5).fill(new Array(5).fill(0));会造成一个问题，那就是所有第二维的数组都指向了同一个对象，当我们修改一个，其他的都会跟着变。因此，不能这样初始化。...
2021-04-14 20:34:11
861
原创 Vue项目打包后，修改请求后端的地址
目录结构其中public文件夹中的东西会原封不动的打包，因此在里面新建一个webConfig.json{ "baseURL": "http://121.37.181.1:6060", "socketURL": "", "timeout": 10000}在main.js中设置import axios from 'axios';// 配置axios，如果是生产环境就读配置文件if(process.env.NODE_ENV === 'production') { axios.g
2021-04-14 14:43:15
3711
原创 前端字符串的空格、制表以及换行符被忽略
最近做一个查看日志的功能，后端传来的字符串中有’ \t ‘、’ \n ’ 等字符，直接拿来显示的时候，他们被忽略了。但是在控制台打印的时候，它们是正常的。<el-card id="log-card"> {{ logInfo }}</el-card>为什么这是因为没有在css中设置 white-space 属性，它的默认值是 normal， 即忽略所有的空格、制表和换行符。解决办法在 <el-card> 的css中.el-card { hei
2021-04-06 20:08:06
1260
原创 display: inline-block产生间隙
最近在学grid布局的的时候，使用若干个div在容器中布局，div都设置为display:inline-block的时候，div之间产生了一些空隙。<style> body { margin: 0; padding: 0; } #grid { background-color: #D3DCE6; } #grid>div { display: inline-block;
2021-04-04 17:13:17
136
原创 CSS元素居中问题
块级元素水平居中：自己设一个宽度并且给自己设 margin:auto，或者单独设置左右margin为auto。注意：如果未设置 width 属性（或将其设置为 100％），则居中对齐无效。.center { margin: auto; width: 50%; border: 3px solid green; padding: 20px;}如果是多个块级元素想要居中，先把他们变成行内块元素，再把它们的父元素的text-align设为center。定位加上transfo
2021-03-20 22:08:27
75
原创 Web Worker
Worker是什么Web Worker 是HTML5标准的一部分，这一规范定义了一套 API，它允许一段JavaScript程序运行在主线程之外的另外一个线程中。JavaScript语言采用的是单线程模型（同一时间只能做一件事），也就是说，所有任务只能在一个线程上完成，一次只能做一件事。web worker 对象的出现 ，就是为了javascript创造多线程环境（同一时间能做多件事），语序主线程创建worker线程，将一些任务分配给后者运行。在主线程运行的同时，worker线程（外部的其他js文件）在后
2021-03-13 21:19:08
237
原创 JS 对象
在JS 中一切都是对象JS是一门面向对象的语言，但它不使用类。JS是基于原型的。字符串、数值、数组、函数...都可以是对象。此外还能自定义对象。且对象是一种特殊的数据，拥有属性和方法。创建JS对象有两种方法使用Object定义并创建对象// 以构造函数的形式来调用new Object([value]) // value可以是任何值// 等价于 o = new Boolean(true);var o = new Object(true);// 创建对象并添加属性person=n
2021-03-11 20:19:31
334
原创 AJAX 学习
AJAX是什么AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。传统网页，更新数据必须要更新整个页面。怎么使用<html><body> <div id="myDiv"><h3>Let AJAX change this te
2021-03-09 12:53:43
53
原创 JavaScript严格模式
使用 “use strict” 指令“use strict” 指令在 JavaScript 1.8.5 (ECMAScript5) 中新增。它不是一条语句，但是是一个字面量表达式，在 JavaScript 旧版本中会被忽略。“use strict” 的目的是指定代码在严格条件下执行。严格模式下你不能使用未声明的变量,意思就是，声明语句必须放在使用或者赋值语句的前面。支持严格模式的浏览器: Internet Explorer 10 +、 Firefox 4+ Chrome 13+、 Safari 5
2021-03-06 11:48:39
46
原创 Java Serializable接口(序列化)
Java Serializable接口(序列化)1、是什么是启用其序列化功能的接口。实现java.io.Serializable 接口的类是可序列化的。没有实现此接口的类将不能使它们的任意状态被序列化或逆序列化。序列化是指把对象转换为字节序列的过程，我们称之为对象的序列化，就是把内存中的这些对象变成一连串的字节(bytes)描述的过程。而反序列化则相反，就是把持久化的字节文件数据恢复为对象的过程。那么什么情况下需要序列化呢?大概有这样两类比较常见的场景：1)、需要把内存中的对象状态数据保存到一个文
2021-02-28 13:21:05
513
原创 three.js 机泵模型展示
最近做一个机泵项目，要求导入一个已有的机泵3D模型在浏览器中显示。前端使用vue来完成。现在将模型封装成一个组件pump.vue. 首先确保项目已经安装了three. (npm install three).其中label是标签，可以在模型中完成对象的标注，这一功能使用three.js中的sprite来完成。有一个问题暂时还没有解决，就是在函数updateLabel以及函数genCanvas中存在内存泄漏的问题，即在更新label的时候并没有释放掉上一个label的空间，导致浏览器的GPU内存占用持续上涨
2020-12-29 16:16:21
718
原创 three.js初探
<!--创建了一个html文件--><html><head> <title>My first Three.js app</title> <style> body { margin: 0; } canvas { display: block; } </style></head><body><!--以文件形式导入--.
2020-11-16 21:57:58
118
原创 在Vue中更改ElementUI滚动条样式
//更改表格滚动条列的样式/deep/ .el-table th.gutter{background: #000000 !important;border-bottom: #7d7f84 solid 1px;width: 0;}//更改滚动条样式/deep/ .el-table__body-wrapper::-webkit-scrollbar {display:block;width: 12px;height: auto;background-color: rgba(167, 122,
2020-10-17 21:09:19
1041
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人