✅ Java 开发工程师，从事 Web 应用程序的研发，擅长 Spring、SpringBoot 等技术。 ✅ 热爱编程，业余时间学习新知识，通过 CSDN 记录学习心得和笔记内容。

在src目录下面，新建一个router目录，在这个目录里面创建一个index.js路由文件，这个文件就是专门用于保存路由信息的。打开main.js文件，将刚刚创建的router/index.js路由文件导入到main.js里面。打开App.vue文件，使用标签显示路由。】的基础之上，引入vue-router路由插件，实现页面路由的跳转功能。接着在router/index.js配置文件中，添加两个组件的路由信息。这篇文章，是在前一篇文章【

一般在实际的项目开发中，我们都是会在src目录下，创建一个api目录，然后在这个目录里面创建对应的js文件，在每一个js文件里面定义好具体的接口请求，这样在其他地方就只需要导入对应的请求方法就可以完成接口请求啦。上面只是简单的工具类代码，后续可以根据实际的需要，加上对应的逻辑判断，例如：根据状态码，判断用户是否有权限、用户是否登录、请求头加上token等等操作。前面一个步骤可有可无，根据你自己的项目情况来决定，如果你想在任意的地方都可以直接使用axios，那么就可以加上前一个步骤的配置。

目前前端开发中，使用最多的就是Vue.js框架，目前Vue.js框架常用的有Vue2、Vue3两个版本，Vue3和Vue2在语法上还是存在很大的差异的，这里我将介绍如何搭建Vue3开发环境。

今天，我在创建一个Vite + Vue3的前端项目的时候，引入了quill富文本编辑器，接着又想引入quill-image-resize-module调整图片尺寸的插件，执行yarn add quill-image-resize-module安装依赖之后，进行ImageResize相关的配置，启动项目，访问页面，此时控制台居然报错了，报错如下所示：

自定义分页表格组件，是基于vue2.6.14、前端组件是element-ui、jQuery3.2.1的基础之上实现的，其中由于使用了slot具名插槽，slot具名插槽是vue2.6.x版本之后才支持的功能，所以需要保证vue.js的版本在2.6.x之上，这篇文章使用的【vue.js版本是vue2.6.14】。到此，自定义分页表格就完成啦。

ES6中新增了两个定义变量的关键字，分别是：【let】和【const】。ES6没有出现之前，定义变量是使用【var】关键字，这个关键字定义的变量，可以定义重复名称的变量，可以先使用变量再定义变量，这是因为var存在变量提升的过程，变量预定义。let：定义变量，不能重复，必须先定义变量，再使用变量。const：定义常量，一旦定义之后，变量就不能修改了，但是对于对象类型来说，可以修改对象的属性值，不能修改对象的指向地址。

JS中的事件是由三部分组成的，分别是：事件源、事件类型、事件处理函数。事件源是指：谁触发了事件；事件类型是指：触发了什么事件；事件处理函数是指：触发事件之后，应该做什么事情。

这篇文章，主要介绍CSS动画效果（2d、3d）之渐变色、过渡、变换、平移、缩放、旋转、倾斜、关键帧动画。

这篇文章，主要介绍CSS案例之二级菜单、绘制三角形、太极案例、立方体、瀑布流布局。

HTML5增加了很多的新标签，新语法，例如：文件扩展名称可以是html和htm。!DOCTYPE不区分大小；html、head、body等标签可以不写，渲染时候会自动生成；属性值可以使用单引号、双引号；部分标签可以省略结束标记；meta标签指定字符集；

NPM（Node Package Manager）是node包管理器，是node.js默认采用的软件包管理系统，使用JavaScript语言编写。包管理可以理解为依赖管理，有一个npm包管理仓库，当我们执行npm命令的时候，就可以直接从npm仓库中下载对应的依赖包，类似于后端开发中的POM。yarn和NPM的作用是相同的，都是用于管理软件包依赖，yarn解决了NPM的缺点，对NPM进行了改进，yarn的下载速度比NPM更快、更安全。

这周工作中，遇见了一个表格动态列的需求，这记录一下如何使用Vue和ElementUI实现表格多行表头以及表格动态列的功能。

上一篇文章介绍了Vue中组件的知识（Vue组件介绍），父子组件之间可以传递数据，那能不能传递HTML代码段呢？？？答案是：可以的。这里介绍的插槽slot就是用于向子组件中传递HTML代码段的，slot就相当于是一个占位符，它在子组件中使用【】标签定义，使用的时候，只需要在组件的开始标签和结束标签之间编写代码，这些代码都将被替换到子组件【slot标签】位置。

这篇文章主要介绍Vue组件的创建（局部组件和全局组件）、如何缓存组件、如何更新缓存组件数据、使用以及父子组件数据通信常见的几种方式（props属性、$emit方法、子组件回调父组件方法）。

第一种方式：直接使用【单引号】或者【双引号】定义字符串，例如：【var s = 'hello world'】或者【var s = "hello world"】。第二种方式：使用String构造方法定义字符串，例如：【var s = new String('hello world');】。两种方式的区别：直接使用【单引号】、【双引号】、【String()】方式创建的字符串，那就是普通的一个字符串。使用【new String()】方式创建的字符串，这个数据类型就是一个字符串对象。// 普通的字符串。

【background-position】属性，设置图片的位置，取值：left、right、center、top、middle、bottom。【background-attachment】属性，设置图片和内容的依附方式，取值：fixed表示图片固定不动。【background-repeat】属性，图片是否重复，取值：no-repeat不重复、repeat重复。【background-image】属性，设置背景图片，取值：url(图片地址)。【background-color】属性，设置背景颜色。

在CSS里面，如果有多个选择器作用在同一个元素上面，那么会按照上面的优先级顺序进行样式的选取，也就是优先级越高，浏览器最终就显示哪种样式。通过上面五个选择器的权重值，就可以计算出任意组合的权重值了，权重值就是将所有的权重相加。对于哪些组合选择器，我们可以通过计算选择器的权重来查看优先级，权重越大，优先级越高。

【font-weight】属性，设置字体粗细，例如：lighter细体、normal正常、bold加粗、bolder更加加粗，或者使用数字：100、200、300、400、500、600、700、800、900。【font-size】属性，设置字体大小，可以使用【px】像素单位；可以使用【rem】相对单位。基线对齐是按照四线三格来计算的，并且这只对英文有效，英文字母位于四线三格中的第二格，第三条线就是叫做基线，如下所示。【font-family】属性，用于设置字体，可以使用多个属性值，采用逗号隔开。

CSS，全称是：Cascading Style Sheets，层叠样式表，用于修饰HTML页面的。CSS编写的规则分为两部分，分别是：选择器、声明块。声明块，需要使用【{}】大括号包裹，括号里面使用【key: value；】的格式定义属性。选择器，表示需要对哪个HTML标签添加CSS样式，声明块表示要给选择的标签添加什么样式效果。h1 {}

浏览器在渲染一个HTML页面的时候，首先浏览器会获取到HTML使用标签，并且将这些标签组成一个HTML标签树，这个时候这些标签还没有样式，浏览器又会解析CSS文件，产生一个CSS样式树，接着浏览器将HTML标签树和CSS样式树进行对比组合，将样式和标签组合成一个render渲染树，最终浏览器根据render渲染树，开始一点一点的渲染出页面效果。td设置单元格的宽度、高度。一个HTML页面在渲染完成之后，如果在使用的时候，动态的修改了页面某些内容，那么这个时候就会触发重新排列和重新绘制的过程。

【CSS笔记】CSS实现后台管理系统界面。

【z-index】属性取值是数字，数字越大，优先级越高，元素就会位于最上层。CSS通过【百分比%】的形式来设置宽度、高度，从而实现宽度、高度的自适应，即：当浏览器窗口大小发生变化时候，元素的宽度、高度会自动变化。CSS可以通过【z-index】属性，设置元素的堆叠顺序，【z-index】属性值是一个数字，可以是负数、整数、0，数字越大优先级越高，也就是位于最上层。CSS默认情况下，定位元素的堆叠顺序是按照元素定义的先后顺序来确定的，也就是说，后面定义的元素会覆盖前面定义的元素，如下所示。...

设置元素的【position】属性值等于【absolute】绝对定位之后，如果没有设置【top，left、right、bottom】属性，那么就会默认都是0，这个时候元素就会移动到浏览器屏幕可见区域的左上角位置。relation相对定位，这个属性是相对于元素自身位置定位的，也就是说，某个元素使用相对定位之后，它是以没有使用相对定位之前显示的位置为参考点，上下左右移动多少距离，下面看个案例。CSS也支持相对于某个元素，进行绝对定位，也就是说，可以自定义当前元素是以哪个元素为参考点，从而完成绝对定位。...

当子级元素使用浮动属性之后，它的父级元素如果没有设置高度，那么由于浮动元素脱离文档流，不占据文档流的高度，所以从而导致父级元素的高度不能被撑开。CSS可以通过【display】属性来设置HTML元素是否显示，以及显示的方式，是以行内元素显示，还是以块内元素显示，还是以行内块元素显示。也可以设置为none隐藏元素，display设置隐藏元素之后，元素不会占据原先的空间，后面的元素会填充隐藏元素的空间位置。，也就是这个元素不占据原先的空间，后面的元素会填充浮动元素原先的空间。要如何解决父级元素的高度问题呢？..

标准盒子模型，它的特点是：当我们固定内容区域的宽度高度之后，再给这个盒子添加边框、填充、边距属性的时候，此时不会改变内容区域的宽度和高度，而是向外扩展宽度和高度。采用标准盒子模型，给元素添加边框、填充等属性的时候，整个元素区域将向外扩张宽度和高度，如果不向当前元素向外扩张宽度和高度，就可以将元素设置为怪异盒子模型。怪异盒子模型，这种模式下，当我们设置内容区域的宽度和高度时候，再添加边框、填充属性的时候，整个盒子的宽度和高度都不会变化，而是会将内容区域压缩。下面通过案例来看下标准盒子模型。...

DOM，全称是：Document Object Model，文档对象模型，它主要是用于描述HTML文档对象的。一个HTML页面是由许多的标签组成的，例如：html、head、body、div等等标签元素，JS里面将整个的HTML作为一个document文档来进行管理，其中HTML里面的每一个标签都是一个DOM结点。HTML里面所有的DOM结点构成了一颗DOM树，这就有点类似于二叉树了，只不过DOM里面的树是多叉树，因为HTML里面的标签里面可以嵌套许多其他的标签。...

获取浏览器窗口大小。打开和关闭浏览器窗口。获取浏览器地址栏信息。设置浏览器的滚动条。查看浏览器版本信息。浏览器弹框提示信息等等。上面这些操作浏览器的功能，全部统称为BOM对象，即：这些操作都是针对浏览器的。BOM对象的核心是【window】对象，【window】对象是每一个浏览器内置的对象，window对象里面包含了许多操作浏览器的方法，在使用这些方法的时候，可以省略window对象，直接些方法名称就可以。下面看下window对象都有哪些方法呢。

今天遇见一个问题，就是需要在多个tab页面之间切换的时候，需要保留之前tab页面的查询条件。例如：在前一个A页面输入了一些查询条件后，切换到另一个B页面时候，再次切换到A页面，发现A页面的查询条件会被重置，不会被缓存。（1）问题描述问题是这样的，我写了一个【A.vue】页面，在【activited()】钩子函数里面调用查询后端数据的方法，然后在后台系统里面切换路由页签的时候，返回到【A.vue】页面，发现每次切换回【A.vue】页面，这个页面之前的查询条件都会被重置，并且重新查询数据。这里说的t

这周工作中，遇到了一个文章编辑的功能需求，需要支持图片黏贴上传并预览，但是使用我们公司自己封装的富文本编辑器，发现居然没有黏贴上传图片的功能，额。。。心想，公司真是该有的功能没有，不该有的功能一大堆。。。没办法，只能百度自己实现如何实现黏贴上传图片功能。（1）html页面<!DOCTYPE html><html><head><meta charset="utf-8"><title>图片黏贴上传</title> &lt

这周工作中，写了几个前端界面，页面中有个表格列字段是时间类型的，但是后端传递过来的时间是时间戳，所以需要在前端将其转换展示。记录一下格式化日期代码，以后再遇见类似功能直接复制黏贴即可（其实是为了多点时间摸鱼）：(1) 日期格式化代码/** * 日期格式化函数<br/> * 调用格式：需要使用日期对象调用 * <p> new Date().Format("yyyy/MM/dd HH:mm:ss"); </p> * @param fmt 日期格式 *

1、AdminLTE基于Bootstrap3.x的免费的后台管理模板框架。Github star数量达到了34.3k。GitHub项目地址：https://github.com/ColorlibHQ/AdminLTE在线演示：https://adminlte.io/themes/AdminLTE/index2.html演示效果：2、Vue-Element-Admin...

Vue解析markdown字符串，并且将其展示到页面(代码高亮+代码行号显示)，具体步骤如下：(1) 安装依赖// marked用于将markdown转换成htmlcnpm install marked -S// 用于代码高亮显示cnpm install highlight.js -S// 代码行号显示插件cnpm install highlightjs-line-numbers.js(2) 在main.js文件中引入highlight.jsimport highlight

flex布局是W3C在2009年提出的一种新的网页布局方案，它可以更加简便、完整、响应式的实现各种网页布局，并且几乎支持所有的主流浏览器。注意：Webkit内核的浏览器，使用flex布局时，需要添加前缀。flex英文全称是flexible box的缩写，简称"无论是行内元素，还是块级元素，都可以使用flex布局。注意：在设置了flex之后，子元素的float、clear、vertical-align属性将失效。

路由嵌套在router.js中，添加对应路由：在html中添加路由view：对应的跳转路由地方，添加router-link：路由重定向在路由配置文件中，使用redirect即可。对应的页面：路由传递参数1、参数传递方式一路由中配置参数： 2. 传递参数： 3. 页面接收参数：界面显示效果：2、参数传递方...

layui框架中layer弹出层。引入js文件和对应模块：首先引入模块化组件的js文件：<!-- 如果需要使用模块，则引入layui.js文件 --><script type="text/javascript" src="../layui/layui.js"></script>注意：上面的文件路径写自己的路径。然后通过模块化方式，使用lay...

首先呢，实现这个特效使用的技术是前端技术jQuery，实现代码只需几十行即可。第一步创建一个demo.html文件，给body设置一个高度，这里如果body如果没有设置高度的话，不会看到效果。html页面创建完成之后，写入如下代码：<!DOCTYPE html><html><head> <meta charset="UTF-8">...