- 博客(27)
- 收藏
- 关注
RSS订阅
原创 vscode配置
hello!好久不见，前段时间博主也是选择了跳槽，所以很长时间没有写过东西了，刚好进入新公司需要重新安装vscode,并安装插件进行配置，在配置中也是经过公司大佬的指点，所以也是想自己总结一下，这样每次就不需要要麻烦大佬了，以下配置是大佬教我的，有收获的话谢谢大佬哦！...
2021-04-16 19:19:47
368
2
原创 前端之路(十二) —— CSS创建
在初识CSS中我们简单介绍了一下CSS文件创建引入，今天我们在系统地学习一下。在‘初识CSS’一节中，我们提到过CSS主要有三种方式插入：外部样式表：通过link进行引入； 内部样式表：通过style进行设置； 内联（行内）样式：标签内进行设置；样式优先级上一节中我们提到了样式优先级问题，也举一个例子说明了id选择器优先级比class优先级高。通过这个例子，我们清楚对于一个元素而言，它可以有多重样式，既可以有内联样式也可以有class类选择器样式等等，多重样式存在下，同一个属性优先展示哪个？想
2022-03-09 18:01:28
282
原创 前端之路（十一）—— CSS选择器
在上一节中我们学习了CSS语法及如何引入CSS文件，这一小节，我们来学习CSS重要的两个选择器——id和class选择器。通过上一节我们知道要想把一段落字体变成红色，我们可以在<head></head>元素利用<style></style>标签。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <.
2022-03-08 17:35:03
307
原创 前端之路（十）—— 初识CSS
通过前几个小节，我们了解了HTML及基础的标签，当我们自己练习的时候发现，自己写出来的网页没有我们平时在网上看起来那么漂亮、炫酷。要想把网页变的酷炫，我们就需要借用CSS.所以从这节开始，我们开始学习CSS，其实前面我们也接触了一点CSS，CSS还有多少有趣的东西呢？我们一起来学习。认识CSSCSS(层叠样式表)，用来指定文档如何展示给用户的一门语言，包含页面的布局，样式等。具体我们可以举个例子，比如我们前面提高的标题元素h1,它的默认颜色是黑色，我们可以通过css将它变成红色，实现这个效果也很简单
2022-02-26 20:28:45
474
原创 前端之路（九）—— 表格
对于初级前端工程师而言，日常工作无非就是‘增’、‘删’、‘改’、‘查’。这些都是对于数据操作而言的。这里我们需要明确，如果我们只是用HTML元素把网页画出来，那么这个页面只是静态页面。加上数据，跟服务器进行互动，才能称为动态网页，我们最终都是在动态网页上进行开发。想要动态就需要操作数据，所以对于程序员，增删改查是最基础的。前端展示数据形式之一就是今天的主角——表格。表格大家都不陌生，excel表格大家日常可能都在用。那么我们如何在网页上插入表格，它的元素又是什么呢？表格标签表格是由行和列组成的结构化
2022-02-25 14:58:08
888
2
原创 前端之路（八）—— 嵌入技术
上一篇中我们学习把图片、音频、视频等多媒体嵌入到页面当中，除了这些，我们还能往页面嵌入其他东西吗？比如说直接嵌入一个页面，嵌入百度的搜索框等。这一小节我们就来学习一下其他嵌入的元素。嵌入简史首先简单了解一下嵌入的发展史。刚开始流行使用框架创建网站部分，然后将各个框架放到一个框架集的主文档中，该方法也存在一些问题，经过一段时间发展，嵌入技术变成很受欢迎，于是视频、动画等内容就通过嵌入技术来实现。最后<iframe>元素出现，它能够将整个web页都嵌入到另一个网页。<iframe>
2022-02-21 11:52:08
1698
原创 前端之路（七）—— 多媒体
目前为止我们了解、学习的标签都是文字类，比如超链接，段落等，日常网页中肯定不能只有这些元素，还需要图片、音频、视频等多媒体去丰富网页内容。那么接下来我们来学习下在网页中如何呈现多媒体。图片在html中，我们用<img>元素来呈现图片，在前面《初识HTML》的文章中，我也用过img进行举例，有印象的同学可能知道<img>是一个单标签，具体都有哪些属性与用途呢？src属性。如果只在编辑器上写上<img />，它是没有任何显示的，就是一个空元素，想要显示图片就需要设
2022-02-14 15:23:15
363
原创 前端之路（六）—— 超链接
超链接在日常生活中，我们经常见到，它让我们浏览网页更加直观与方便，日常开发中，超链接也必不可少。今天我们就来总结一下超链接及其用法。什么是超链接首先我们明确一下超链接的定义。超链接使我们的文档连接到任何其他文档，也可以链接到指定稳步。几乎所有网络内容转换为链接，当然最常见的就是网页地址。创建一个超链接<a href="https://www.baidu.com">百度</a>这是一个简单的超链接，点击会跳转到百度。从上面代码不难看出超链接的标签是<a>
2022-01-26 18:14:15
2237
1
原创 前端之路（五）—— 文字标签
通过前四篇内容，我们对html有了一个简单的认识。简单的页面通过html就可以写出来，当我们准备好编辑器与浏览器就可以开始我们的代码之旅啦。页面展示的内容不能是简单的一整页文字，它有丰富内容，比如图片，段落，列表等等。要想实现这些，就需要借助各种元素。所以这篇我们就来学习一起文字标签。标题和段落标题：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>都是双标签，数字越大，标题越小<!DOCTYPE html&g
2022-01-25 17:00:47
1305
原创 前端之路（四）—— HTML中的元数据
上篇我们初识HTML，在这篇我们解析了HTML文档，其中有head标签，这里面可以包含很多东西，今天我们就一起来探讨一下。<head>元素<head>元素中的内容不会在页面中展示，它的作用是为了保存元数据。元数据：用来描述数据的数据。比如包含该文件的作者和概要，还有网页的标题。<meta>元素<meta>元素，用来为HTML添加元数据，下面我们来了解一下常见的类型。<meta charset=“utf-8”>：指定文档中的字.
2022-01-22 16:20:29
959
原创 前端之路（三）—— 初识HTML
学前端应该听说过“前端三剑客”，html、css、js。如果能够精通这三剑客，那么恭喜你，前端对你来说已经易如反掌啦。今天这一章呢，我们就来学习一下三剑客中的第一个剑客——HTML超文本标记语言HTMLHTML(Hypertext Markup Language)超文本标记语言，看它的名字我们就需要记住，HTMl不是编程语言，而是标记语言。它是由一系列元素构成的，接下来我们就要理解是元素。元素：开始标签、结束标签与内容元素相结合就是完整的元素 开始标签：包含内容的符号 结束标签：与开始标签相
2022-01-19 11:17:20
547
原创 git初级教学
什么是git?git是一个开源的分布式版本控制系统，这个是比较官方的说法，说白了git用来上传下载项目代码的工具。对于初级者来说github一定不能陌生，上面有着各种开源项目供我们学习，当我们想要把项目clone到本地的时候，就需要借助git。git基本命令电脑上安装好git之后，就可以利用它管理项目代码啦。不管是项目的上传、下载、合并都可以做。做到这一切的前提，就必须掌握以下的git命令。git init ——初始一个仓库（运用出命令初始化本地项目代码时，会出现.git文件，只有具有.gi
2022-01-12 17:45:09
181
原创 解决get传参有数组问题
传参是数组日常开发过程中，我们经常碰到参数是数组的情况。如果这时候接口method为post，那么就没什么问题，参数会被放到body里面。但当method为get时，参数会拼接到url上面，这时候如果不做出来处理会报400，导致接口出错。引入qs其实解决这个问题很简单，我们只要在传参前用qs处理一下即可。我们先简单了解一下qs，qs是可以将普通的object序列化为一个查询字符串，还可以反过来将查询字符传解析为一个Object。所以通过qs的序列化我们就能把传参中的数组处理。解决方法首先
2022-01-12 14:39:42
3611
原创 前端之路（二）—— 基础软件
编辑器编辑器就是我们的武器，用来编写代码。对于编辑器而言，这里个人推荐Visual Studio Code,再引入一些插件后，就像给武器加上各种装备，会让我们开发变得更加方便，VSCode的配置，我也写过一篇记录了一下，具体的插件与配置请移步于此配置浏览器浏览器用来测试代码。用户在浏览网页的时候，直面的就是我们前端，我们所写的代码也都要在页面中显示。当然浏览器也有各种各样的选择，这里推荐Chrome(谷歌)。谷歌兼容性比较好，页面也比较简洁，自身也有各种插件可以帮助我们开发，就是安装插件是一般需
2022-01-11 11:56:10
108
原创 前端之路(一)——了解web
hello,大家好！好久没更新了，不知不觉一年又过去了。借此2022开年之际，开启自己的新篇幅，系统复习地总结一下web，也立下flag，争取日更，哈哈。该专栏主要是根据MDN Web Docs文档进行学习，如果想自己总结或者学习的话，可以直接移步于此MDN。那么，让我们开始第一章。什么是web?说实话对于这个词目前我理解的含义只是表面，自己做前端的，而且资历尚浅，大家参考一下就行。web万维网，简单而言就是我们生活中常见的网站。当然建立起一个网站不是那么容易的，如果想要自己建立一个网站就要努力学习
2022-01-08 14:17:29
511
原创 try catch的妙用---跳出循环
日常开发中我们经常用到循环，比如数组方法中的forEach方法。有些时候我们用循环去寻找某个符合条件的值，当找到时，如果不想再继续循环要怎么样呢？如果用return，只能跳出当前循环，进入下一个循环。有什么方法能够直接跳出循环体？这时候就需要用try catch方法。 try catch 可以用来获取代码异常，try用来检查代码，当碰到错误时，可以用catch去抛出异常。这段代码就不会继续运行。根据这个特性我们就可以将循环体包子try catch里面，获取到自己想要的,，就去抛出一个异常，这样就能...
2021-11-24 17:45:31
2762
原创 饼状图百分比算法--最大余额法
前段时间测试提了一个bug，我打开一开，好家伙！原来是echarts饼状图数据展示百分比有一个与legend百分比的展示不一样。拿起手机一算果然，饼状图加在一起刚好100%，而legend加在一起是99.99%，0.01%的差距。查阅代码发现，之前同事做这部分legend的展示是通过数据四舍五入得到的，这就导致了0.01%的误差。自己有试验了几组数据，发现直接四舍五入跟饼状图展示的百分比确实会有很大差距，只能另找方法，试了几种都不好使，无奈去看了一下源码。找到了echarts百分比的算法。 ech...
2021-09-29 15:28:18
2911
原创 FormData数据中添加json格式数据
今天在写接口时候，有一个接口参数需要的是FOrmData数据类型，然后里面有一个key值对应value值是json格式的。刚开始直接用append方法往FormData里面加，但是呢key值加上了，对应的value值确实一个Object，这不行啊！没办法，只能继续寻找。然后发现了new Bolb方法，就把这个问题解决了。formData.append( 'data', new Blob([JSON.stringify(data)], { type: 'application/j
2021-09-16 14:03:41
4483
原创 padStart与padEnd方法
padStart与padEnd是es6新增的两个方法，作用是为了补全字段。前者是向前补全，后者是向后补全 。它们有两个参数，一个表示字符长度，一个表示补全用的数值。下图可以直观感受到方法的作用以及各种情况...
2021-07-14 18:00:03
307
原创 parseInt与Math.floor区别
当我们想要取整数的时候在js中parentInt与Math.floor用起来都很方便，但有些时候转换成ts就会保错，比如这个例子ParentInt((1+Math.random())*10)在js中没有问题，放到ts中就会出错，变成Math.floor((1+Math.random())*10)就可以了...
2021-07-01 09:19:57
558
原创 Property ‘xxx‘ does not exist on type ‘Vue | Element | (Vue | Element)[]‘.
这段时间使用ts,对于习惯js的我，刚开始真不习惯，各种坑等着我去踩，不过ts对于代码维护与理解确实挺nice的，还是赶快学习ts，赶上时代呀。博主在使用ts过程中碰到了好几次这个问题，以此记录一下，...
2021-06-10 10:23:53
3017
3
原创 Element表单v-for循环校验问题
开发过程中碰到了这个问题，自己也是搜索了一番，刚开始跟着网上的答案进行了一番操作没有实现，后来在一条答案中发现官方上就有，去ElementUi官网看了一下，跟着官网试了一下，立马实现。以后还是要...
2021-06-03 17:29:04
577
原创 JS新手案例-----点击效果的实现
hello!大家好，今天我们要练习的案例特别的有趣，就是实现鼠标点击页面的动画效果。我们在浏览一些页面时，点击页面就会有文字或者图片出现，看起来很高大上！这样的效果也能由js实现，好我们还是先看下效果当我们点击页面时就会有文字效果，并且颜色会随机代码如下：<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport"
2021-01-19 21:43:42
687
原创 Js新手案例---留言板
留言板案例好久不见大家了，最近在忙项目，没有时间来整理一些小案例，一直到今晚才有点时间继续给大家分享Js新手案例，真的是这段时间忙到爆呀，不过生活就是这样，努力奋斗吧！言归正传，之前的案例相信大家都已经完全弄清楚了，还记得我们之前统计字数的那个案例吗？忘记的可以再去翻阅一下，今天就是在这个方法的基础上，把它变成一个留言版，就像我们之前的评论一样，是不是很期待呢？先来看一下效果图输入昵称，选择头像，输入留言，点击广播就能够在下面显示出来了，是不是很nice呢，具体怎么实现的呢，我们来看代码<!
2021-01-08 21:59:15
1939
4
原创 JS新手案例---登录注册
登录注册案例又见面了！今天我们继续学习一起JS相关的小案例，登录注册案例。这个案例在日常生活中我们经常碰到，学完之后自己都能建一个漂亮的登录界面。首先先来看一下效果图（具体的图片和样式可以自己更改），如下：这里我添加了背景图片，并且利用透明属性，大家可以按照自己的喜好装扮，该案例重点是验证码的发送，当我们点击时，验证码会自动填入，此时按钮会进行倒计时，并处于不可选中，点击添加会添加到下面的表格当中。具体效果如下：看来效果我们是不是迫不及待想要写出来属于自己风格的代码呢？下面我们就来看具体代码，跟
2020-11-01 19:35:27
1149
2
原创 新手案例--字数统计
字数统计小案例hello!今天又要带大家学习一下字数统计的小案例，这种在平常生活中非常常见，比如：我们在注册某个页面。需要填写自我介绍，一般都会有字数限制，最多200字，当我们填内容时，字数也在慢慢减少，直到写不了。这种情节也完全可用js来实现，并且很简单，跟着下面的代码敲一遍，大家肯定会掌握的。首先我们先整理下思路，我们需要利用文本域，并设置最大字数，接下来我们就要想办法统计写进去的字数，这样才能知道剩余字数，这也是该案例的难点与重点。那么该用什么方法来实现的？答案就是利用表单事件——oninput，
2020-10-26 14:41:28
300
原创 JS新手案例---出版社信息
##新手案例本篇适合刚刚入手js的小萌新哦！主要利用函数、DOM的方法及点击事件，实现数据的添加、删除、查找。萌新跟着例子敲一遍，对于js肯定会有更加清晰的认识，接下来让我们开始！首先我们来看下效果图输入信息点击添加按钮会在下面的表格中渲染，输入书名点击查找与表格相同的背景色会变红色点击删除按钮会删除该条信息点击清除会将数据清空接下来我们来看原始代码<!DOCTYPE html><html> <head> <meta charset="UTF
2020-10-15 20:47:55
167
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人