我们一起学前端-CSDN博客

原创相见恨晚的css工具

地址：https://wweb.dev/resources/css-separator-generator/地址：https://9elements.github.io/fancy-border-radius。地址：https://getwaves.io/

2022-12-12 19:52:22 423 2

原创 JSON.stringify还可以这样用

let person = { name:"夫子", age:1000, gender:"male" }name:"夫子",

2022-12-12 19:51:12 365

对于一个线上app，是不是会因为无法调试而痛苦不堪，今天就给大家介绍一款好用的ios抓包应用。（对于https我们需要安装一下证书，具体原因可以看我前面有一个分享视频）1.在appstore中搜索stream，直接下载。①设置—通用—描述文件—信任描述文件。②设置—通用—关于本机—证书信任设置。2.打开软件，设置https抓包。3.下载安装证书并授权。3.结束抓包，查看历史。2.操作要抓包的应用。

2022-12-12 19:49:04 4489

原创 echarts入门到实战

在 echarts 中，“数据转换” 这个词指的是，给定一个已有的“数据集”（作为前端程序员，数据可视化也是我们必备的一个技能，怎么获取这个技能呢，其实我们只需要掌握一个图表库即可。目前，最常用的图表库是echarts。xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] },），echarts 能生成一个新的“数据集”，然后可以使用这个新的“数据集”绘制图表。图表容器，样式，数据集，数据转换，坐标轴，视觉映射，图例，事件与行为。

2022-11-27 13:45:16 823

原创 three.js入门到实战

立方体网格模型和光照组成了一个虚拟的三维场景，相机对象就像你生活中使用的相机一样可以拍照，只不过一个是拍摄真实的景物，一个是拍摄虚拟的景物，拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式，当你创建好一个三维场景，相机也设置好，就差一个动作“咔”，通过渲染器就可以执行拍照动作。生活中的物体都是三维的，但是人的眼睛只能看到正面，不能看到被遮挡的背面，三维几何体在人眼睛中的效果就像一张相机拍摄的二维照片，你看到的是一个2D的投影图。有个了解即可，需要的时候在用api文档查阅。

2022-11-27 11:59:42 1321 1

原创这些到底是个啥？

我们知道计算机只能认识0和1，那么我们要把字符存入计算机，我们还是需要将字符转化为二进制，那么怎么转化呢？直接强行转化好像没有什么好的方法，计算机常用得方法就是映射：也就是给每一个字符用一个二进制代号来表示。表情图标其实本质和我们的汉字是一样的，我们就把他当作一个字符，然后在计算机中有唯一的二进制代号和他关联。这些表情我们一直在使用，但是你能回答，这些表情到底是啥？其实你得猜想是对得，下面就是表情图得映射表，我们成为unicode映射表。这玩意，我们大家应该清楚吧，不清楚也没关系，我来讲讲。

2022-11-26 11:00:00 106

原创前端菜鸟一般不知道css可以这样命名

光明之子因为子元素不是单独的一个命名，而是包含了他的父级元素，这样命名冲突就降低了很多。光明之子冥王之子冥王之子

2022-11-26 10:56:24 593

原创 vscode一键生成佛祖保佑永无bug

"LastEditTime": "Do not edit", // 设置后，保存文件更改默认更新最后编辑时间。windows使用“ctrl+shift+p”，选择对应的codeDesign，生成代码图案！注意：对于函数注释，只有再函数上面添加的时候，param字段才会生效，否则不会显示param。"Date": "Do not edit", // 设置后默认设置文件生成时间。"email":"lujing@qq.com"//可自定义任意注释代码段。"Author": "lujing",// 设置后作者。

2022-11-26 10:55:07 1340 2

原创前端必备的实用工具与网站

其实动画库很多（动画库-animation.css），但是有时候我们为了一两个动画效果，引入一个动画库得不偿失，这里给大家推荐一个网站，需要什么动画，直接查看实现动画的代码。颜文字(日语：颜文字)并不是指有颜色的文字，而是指用文字或各种线条、符号等组成的图画，它是ASCII Art的一部分。作为前端程序员，肯定和图片离不开的，那么如果ui给我们的图片太大了怎么办呢？这个时候我们有了这个工具就不用求人了。这个网站有很多颜文字，并且可以直接cv，我们可以用于我们自己的网站系统中。

2022-11-26 10:49:53 208

原创 vue中scoped原理与样式穿透原理

这个时候，我们项目中需要用到ui库里面的button，但是他默认的大小不符合我项目的要求，我需要比mini还要小的按钮，这时候怎么搞，因为elementUI库中的组件使用了scoped，所以我们直接修改样式是无效的，是无法做到子组件的。这个问题怎么解决呢？2.给中的每个选择器的最后一个选择器添加一个属性选择器，原选择器[data-v-xxxx]，如：原选择器为.container #id div，则更改后选择器为.container #id div[data-v-xxxx]

2022-11-19 10:09:25 551

原创深入解剖JS 中只有按值传递，没有按地址（引用）传递

/创建了一个object对象，将其引用赋给obj。//将对象传递给函数。

2022-11-19 10:06:15 168

原创 JavaScript中一个优雅的运算符使用技巧

ECMAScript 发展进程中，会有很多功能的更新，比如销毁，箭头功能，模块，它们极大的改变 JavaScript 编写方式，可能有些人喜欢，有些人不喜欢，但像每个新功能一样，我们最终会习惯它们。处于 ES2020 提案的第 4 阶段，因此应将其添加到规范中。它改变了访问对象内部属性的方式，尤其是深层嵌套的属性。今天主要给大家分享的运算符是：可选链接运算符；使用这个运算符后，可以让我们的代码更干净简洁。title:"冥王之子"title:"光明之子"

2022-11-19 10:01:04 423

原创 [13]javascript的类型检测的方法

Object.prototype.toString.call(obj) ====> 这时候执行的是原始的toString，且需要对obj执行toString。number,string,boolean,null ,undefined,symbol, object,function,正则，array,date,这个是万能的检测方法，但是我们不能直接调用toString，而是要调用Object原型上的toString（因为toString被其他类型重写了）

2022-11-19 09:55:28 235

原创 [12]null和undefined你清楚吗

但是，JavaScript的数据类型分成基本数据和引用数据两大类，Brendan Eich觉得表示"空"的值最好不是对象。其次，JavaScript的最初版本没有包括错误处理机制，发生数据类型不匹配时，往往是自动转换类型或者默默地失败。大多数计算机语言，有且仅有一个表示"无"的值，比如，C语言的NULL，Java语言的null，Python语言的None。目前，null和undefined基本是同义的，只有一些细微的差别。时，最初像Java一样，只设置了null作为表示"空"的值。

2022-11-19 09:50:26 116

原创 [11]重绘与回流

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不影响布局(例如：background-color)，则称为重绘(repaints)（4）将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素。当render tree中的一部分(或全部)，因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就是回流(reflow)当你请求上面的一些属性的时候，浏览器为了给你最精确的值，会进行回流和重绘。

2022-11-19 09:45:18 349

原创 [10]浏览器的同源策略你清楚吗？

我们结合生活去再理解一下：假如你们家的房子，是不是不允许陌生人进入，如果可以随便进入，那么就有可能被盗了，那么这个时候，锁和钥匙就出现了为了保证家的安全。这个锁和钥匙就是这里的同源策略。同源策略就是指必须在同一个协议，域名，端口号下，而且三者必须一致的。同源策略：要求一个服务器上的网页，只能请求这个服务器上的资源。CORS是基于http1.1的一种跨域解决方案，它的全称是。haring，跨域资源共享。

2022-11-19 09:37:15 466

原创 [9]CSRF你清楚吗？

CSRF（Cross-Site request forgery）跨站请求伪造你可以这么来理解：攻击者盗用了你的身份，以你的名义发送恶意请求，对服务器来说这个请求是完全合法的，但是却完成了攻击者所期望的一个操作，比如以你的名义发送邮件、发消息，盗取你的账号，添加系统管理员，甚至于购买商品、虚拟货币转账等。每一个请求都一个referer字段，记录请求的来源，后台通过这个字段，可以知道这个请求是否是合法的。这种方法很简单，但是不安全，因为这个referer字段是可以篡改的。这个方法还是很常见的。

2022-11-05 19:48:13 266

原创 [8]xss你清楚吗

但是之前有个同事既然是这样处理的：前端直接将字符串进行了encodeURIComponent和decodeURIComponent处理，这就直接阻止了后端的转义，辜负了后端开发的一片好心。恶意攻击者往Web页面里插入恶意javaScript代码，当用户浏览该页面的时候，嵌入Web里面的javaScript代码会被执行，从而达到恶意攻击用户的目的。又称为持久型跨站点脚本，这个直接通过名字就能很好的理解（存储型），它一般发生在XSS攻击代码存储在网站数据库中，当一个页面被用户打开的时候执行。

2022-11-05 19:46:31 789

原创 [7]能不能说一说浏览器缓存

1.强制缓存优先于协商缓存进行，若强制缓存(Expires和Cache-Control)生效则直接使用缓存，若不生效则进行协商缓存(Last-Modified / If-Modified-Since和Etag / If-None-Match)2.协商缓存由服务器决定是否使用缓存，若协商缓存失效，那么代表该请求的缓存失效，重新获取请求结果，再存入浏览器缓存中；no-cache：客户端缓存内容，但是是否使用缓存则需要经过协商缓存来验证决定【使用缓存，但是需要经过协商缓存】那怎么判断协商缓存是否成功呢？

2022-11-05 19:42:04 533

原创 [6]https为什么安全

我们类比我们的四六级证书，其实就是一张纸，这张纸我们随便也能仿造一张，但是这个真伪是很好识别，我们直接用证书编号到四六级官网一查就知道，如果里面的信息和这张纸上的信息一致，则说明这张证书是真实的。每份签发证书都可以根据验证链查找到对应的根证书，操作系统、浏览器会在本地存储权威机构的根证书，利用本地根证书可以对对应机构签发证书完成来源验证；通过上面的说明，我们知道了抓包工具怎么抓包的，但是为什么浏览器需要提前下载抓包工具的根证书呢？看下面的截图，是不是就是抓包工具的根证书，用来校验证书来源的合法性的。

2022-11-05 19:37:39 1232

原创 [5]http1、2、3的区别

但是在tcp层，还是要将上一层的切开的片，整合为一个数据包，依然需要按照顺序去响应，依然遵循“丢包重传”机制，所以tcp层的队头阻塞的问题依然是存在的。这是因为现有的TCP协议扩展起来非常困难，因为已经有太多太多的设备使用了各种不同的TCP协议的版本，如果想直接在现有的TCP协议上进行扩展非常困难，因为需要给这么多台设备进行升级几乎是不可能完成的任务。使用浏览器的开发者模式查看相关资源的加载情况，可以看到对应的http2的资源在加载的时候，客户端可以同时请求多个资源；再次，HTTP请求和回应的格式也变了。

2022-11-05 19:34:38 1542

原创 chrome高级调试技巧总结

示例：我想要知道名字是zs5的人的年纪是多大（这里只是一个示例，我们现实中，可能都不知道这个数组中每一条数据有多少个字段，之前我开发gis服务，经常会用到这个条件断点，因为数据量非常大，且每一个点位的数据结构很复杂，这时候这个方法就非常的奏效）又比如：我之前写导出功能的时候，一直出问题，这时候我会判断应该是请求头设置有问题，这时候我们不断调整代码中的请求头，然后重新执行代码去重新发送请求。确实，但是这样写有个不好的地方，这种调试需要修改代码才能实现，而浏览器本来就提供了条件断点，直接使用岂不快哉。

2022-11-05 19:22:55 8456 3

原创网络小白入门篇

五层协议的体系结构物理层数据链路层网络层传输层应用层用户上网设置我们访问一个网页更多学习视频学习资料请参考：B站搜索“我们一起学前端”

2022-10-28 21:52:25 1759

原创 px,em,rem,%，vmin，vmax,vh ,vw

px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。参考物是父元素的font-size，也就是说，如果两个元素的父元素的font-size不一样，即使两个元素都是1em，但是大小依然不一致。如果使用rem，这个相对单位，你不知道使用者使用的是什么单位，而且根元素的font-size你也不清楚，这样适配也是有问题的。css3新单位，相对于视口的宽度或高度中较小(较大)的那个。

2022-10-28 21:41:09 608

原创 http状态码

说到这个场景：我想到了options的预请求，感觉他们的功能有些相似，但是一直没有找到具体的相关资料，如果有清楚的他们区别的小伙伴，希望在视频下方留言告知，让大家一起学习一起进步哈。5xx : 服务器错误，这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生，也有可能是服务器意识到以当前的软硬件资源无法完成对请求的处理。4xx : 请求错误，这类的状态码代表了客户端看起来可能发生了错误，妨碍了服务器的处理；2xx : 成功，这一类型的状态码，代表请求已成功被服务器接收、理解、并接受；

2022-10-22 23:07:16 481

原创 tcp三次握手四次挥手

第四次挥手：Client收到FIN后，Client进入TIME_WAIT状态，接着发送一个ACK给Server，确认序号为收到序号+1，Server进入CLOSED状态，完成四次挥手。第二次握手：服务器收到syn包，必须确认客户的syn（ack=x+1），同时自己也发送一个SYN包（seq=y），即SYN+ACK包，此时服务器进入SYN_RECV状态；第一次握手：建立连接时，客户端发送syn包(seq=x)到服务器，并进入SYN_SEND状态，等待服务器确认；1.每条消息必须要有确认。

2022-10-22 23:05:30 435

原创说一下对cookie和Storage(localStorage和sessionStorage) 的认识和区别？

SessionStorage, LocalStorage, Cookie这三者都可以被用来在浏览器端存储数据，而且都是字符串类型的键值对。sessionStorage和localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。cookie一般是后端在浏览器种cookie,后面所有的请求都会携带这个cookie。cookie ：设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭；cookie的数据会自动的传递到服务器，服务器端也可以写cookie到客户端；

2022-10-22 23:02:53 268 1

原创 graphQL入门分享

创建文件夹 /src/schema，并创建文件 index.js。并在 index.js 文件中编写GraphQL Schema。Schema 是 GraphQL 请求的入口，用户请求的GraphQL 将会对应到具体的 Schema。修改 server.js 文件，连接 schema。简单理解，他能提供一个接口，让我们来调用，只是返回的数据格式更多是由我们前端来控制。它与特定技术无关，你可以用任何语言实现它。，说明你的 express 服务已经 OK 了。初始化项目，以及引入所需的包。

2022-10-22 22:57:54 347

原创动态水球效果

（2）设置background-size让他重复，并且将红色改为白色。更多学习视频学习资料请参考：B站搜索“我们一起学前端”（1）首先画出两条虚线之间的弧，以左上的那个点为原点。（3）再创建一个波浪，添加动画。（4）使用一个球包裹起来。

2022-10-22 22:53:27 479

原创值得拥有的Loading 效果

repeating-linear-gradient(135deg,#f0f 0 10px,#ff0 0 20px) 0/0% 100% no-repeat, 意思是：这是一个重复的线性渐变，一个渐变单元是：0-10px使用#f0f 0-20px使用#ff0。更多学习视频学习资料请参考：B站搜索“我们一起学前端”

2022-10-22 22:49:10 289

原创这些非常实用的 HTML 标签你知道吗？

注释：标签中的 usemap 属性与 map 元素 name 属性相关联，创建图像与映射之间的联系。progress 这个标签其实是很好的选择，既有语义化，又有进度条的功能，性能还好，兼容性也很不错。area 这个标签也非常有意思，它的作用是为图片提供点击热区，可以自己规定一张图的哪些区域可点击;有了这个标签，我们可以更加方便的统一修改高亮的样式，不用给所有需要高亮的元素设置class。通过名字，我们应该就知道是居中的意思；

2022-10-22 22:43:20 625

原创 package.json 与 package-lock.json你可能不是真得了解

如果依赖包实在有bug，我们需要升级依赖包，此时我们只需要修改package.json依赖包的版本，只要package.json和package-lock.json中版本不一致，就会重新生产一个package-lock.json。如果我们使用^或*，这两种都都是大版本的迭代，可以是依赖包的功能修改，这时候，我们还是按照之前的用法去使用，我们的项目可能会出现错误。^ 会匹配最新的大版本依赖包，比如 ^1.2.3 会匹配所有 1.x.x 的包，包括 1.3.0，但是不包括 2.0.0。

2022-10-22 22:28:42 1948

原创我也来一个“羊了个羊”

羊了个羊你也可以来一个

2022-10-22 22:26:16 9160 9

原创销售属性与sku傻傻分不清楚

销售属性==== [['红色','黄色','蓝色'],['xl','xxl','xxxl'],['全棉','冰沙']]sku ======= ['黄色', 'xl', '冰纱'], ['红色', 'xl', '冰纱'] .......

2022-10-16 20:22:25 1109

原创今天一次性给你讲清楚：File、Blob、FileReader、ArrayBuffer、Base64

blob对象本质上是js中的一个对象，里面可以储存大量的二进制编码格式的数据。Blob 对象一个不可修改，从Blob中读取内容的唯一方法是使用 FileReader。根据 ArrayBuffer 和 Blob 的特性，Blob 作为一个整体文件，适合用于传输；type：默认值为 ""，表示将会被放入到 blob 中的数组内容的 MIME 类型。如果省略 type，则默认为 blob 的原始值。②将获取的图片文件，生成base64图片【这个在上面的filereader的时候已经演示过了，这里就不演示了】

2022-10-05 09:43:42 3149 3

content-counter.html

从零开始，支持小数的翻牌器

request.html

空空如也