沉睡的猫的博客

原创 前端工程化17-邂逅原生的ajax、跨域、JSONP

5、邂逅原生的ajax5.1、什么是ajaxAJAX 全称为Asynchronous Javascript And XML，就是异步的 JS 和 XML。通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势：页面无刷新获取数据。AJAX 不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。5.2、XML简介XML 可扩展标记语言。XML 被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

原创 分布式事务01：本地消息表实现分布式事务

本地消息表实现分布式事务

原创 前端工程化16-什么是节流防抖

用来解决一种问题： 代码可能会短时间内频繁调用，那么会造成性能浪费先明确一个定义节流跟防抖有不同的应用场景，不要混为一谈。

原创 前端工程化15-邂逅ES6的语法规范

4、ES6邂逅3.1、什么是ECMAECMA（European Computer Manufacturers Association）中文名为欧洲计算机制造商协会，这个组织的目标是评估、开发和认可电信和计算机标准。1994年后该组织改名为Ecma国际。3.2、什么是ECMAScriptECMAScript 是由Ecma国际通过ECMA-262标准化的脚本程序设计语言。3.3、什么是ECMA-262Ecma国际制定了许多标准，而ECMA-262只是其中的一个，所有标准列表查看http://w

原创 前端工程化14-git merge 以及 git rebase。

merge做的操作是两次提交合并，并合成一次新的提交，弊端通过查看记录发现已经不是一个线性的历史记录了，有些人就喜欢看线性的结构，如果我们想让他变成一种线性结果，就需要要用到rebase这个操作，rebase，中文意思变基的意思，切换到被合并的分支上然后再使用命令如下。merge 是一个合并操作，会将两个分支的修改合并在一起，默认操作的情况下会提交合并中修改的内容。rebase 并没有进行合并操作，只是提取了当前分支的修改，将其复制在了目标分支的最新提交后面。主分支产生了新的提交。rebase变基操作。

原创 前端工程化13-git的常见命令和面试题

​ 当你需要发布⼀个新Release的时候，我们基于Develop分⽀创建⼀个Release分⽀，完成Release后，我们合并到Master和Develop分⽀。​ 也就是我们经常使⽤的Master分⽀，这个分⽀包含最近发布到⽣产环境的代码，最近发布的Release， 这个分⽀只能从其他分⽀合并，不能在这个分⽀直接修改。​ 这个分⽀是我们的主开发分⽀，包含所有要发布到下⼀个Release的代码，这个主要合并于其他分⽀，⽐如Feature分⽀Release。

原创 前端工程化12-Git版本控制工具详解

理解版本控制工具，聊下他的历史，之后会讲两种版本控制工具的区别（集中式|分布式）、他的基本环境搭建安装，如何初始化本地仓库，如何往仓库里提交一些东西，文件的话会有那些变化。学习git的远程仓库（这是多人协作开发，远程仓库是必须的）两种验证方式一种是https账号密码，一种是ssh密钥的方式，如何为我们的某个版本打上tag,git分支如何使用，git Flow如何使用？远程分支的管理？怎么理解git rebase 变基 和meger,git常见命令速查表。

原创 前端工程化11-webpack常见插件

​ 比如添加一个noscript标签，在用户的JavaScript被关闭时，给予响应的提示；​ 比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标签；上面的代码中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式。**template：**指定我们要使用的模块所在的路径；**title：**在进行htmlWebpackPlugin.options.title读取时，就会读到该信息；

原创 前端工程化10-webpack静态的模块化打包工具之各种loader处理器

符号最初被引入是为了明确告诉Webpack在中查找库文件。现代的Webpack和Sass-loader配置已经足够智能，能够自动处理中的导入，因此不再是必需的。移除可以使你的Sass代码更加简洁，减少潜在的混乱。然而，尽管推荐移除，Webpack和Sass-loader仍然会支持它的使用，以保持向后兼容性。如果你在旧项目中看到的使用，不必惊慌，它仍然是有效的，只是现代的最佳实践中不再推荐这样做。

原创 前端工程化09-webpack静态的模块化打包工具

假如说你的电脑里边有仨项目，分别是Vue2的、Vue3的项目、React的项目，这个三个项目都需要进行打包，但是不可能他们依赖的webpack版本完全一样，大概率是不一样的。我们目前的开发模式已经不是以前的那种模式，我先创建一个index.html，然后写标签写内容，下几个js文件，引入到项目里，在写对应的js,写css什么的。webpacks是一个非常非常的强大的一个工具，相应的这个东西的学习也是有一定的难度的，里边的东。开发，所谓的脚手架，不管是Vue的还是React的他们呢都是基于Webpack的。

原创 前端工程化08-新的包管理工具pnpm

什么是pnpm呢？pnpm：我们可以理解成是performant(高性能的) npm缩写；哪些公司在用呢？包括Vue在内的很多公司或者开源项目的包管理工具都切换到了pnpm；

原创 前端工程化07-常见的包管理工具npm、yarn、cnpm、npx

npm包管理工具、在安装node的时候这个东西就已经安装过了，通过npm去管理包的时候这个时候回有一个配置文件叫做package.json,他是以json的方式来书写对应的一个配置文件，这个配置文件是可以添加特别多的一些字段的，每个字段字段是什么意思呢？学习一些核心的字段都是什么意思。另外如果我们想通过npm去安装我们对应的一个包的时候，我们需要使用这个命令，我们需要学习他的原理，到底是从缓存拿的还是从服务器拿的。还有一些别的包管理工具，比如yarn、cnpm、npx,yarn这个东西在早期的时候，有一点点

原创 前端工程化06-JavaScript模块化&CommonJS规范&ES Module

到底什么是模块化、模块化开发呢？事实上模块化开发最终的目的是将程序划分成一个个小的结构；这个结构中编写属于自己的逻辑代码，有自己的作用域，定义变量名词时不会影响到其他的结构；这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用；也可以通过某种方式，导入另外结构中的变量、函数、对象等；上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程；比如var定义的变量作用域问题；

原创 前端工程化05-初始前端工程化Node基本介绍&安装配置&基础知识

虽然前几篇我的目录标题写的前端工程化，但是那些东西并不属于前端工程化的内容，更倾向于是js、jq当中的东西，下面我们将接触真正的前端工程化。前端工程化开发其实现在是离不开一个东西的，这个东西就是Node.js,早期角度来说这个东西一般是来做服务器开发的，目前的话已经不在局限于服务器开发了，现在整个前端开发过程中，已经完全离不开node.js了，特别是我们node.js帮我们管理了一些包工具。

原创 前端工程化04-VsCode插件设置总结（持续更）

log输出、平常你输出log,还必须得打一个console然后再.log()非常不方便，当然我们可以直接输入一个log,但是提示有两个，我们还得上下选择。所以我们直接采用插件的提示。

原创 前端工程化03-贝壳找房项目案例&JavaScript常用的js库

这个项目包含，基本的ajax请求调用,内容的渲染，防抖节流的基本使用，ajax请求工具类的封装。

原创 前端工程化02-复习jQuery当中的插件开发

在我们开发的时候、有时候jQuery提供的方法并不能满足我们的需求，如果我们想给jQuery扩展一些其他的方法，那这种情况下，可能会需要写一个插件。这个插件的效果是，为页面上的每个a标签都拼接上他的网址，并设置a标签的颜色为红色。那我们自己怎么编写一个插件，一般面试会问，有没有手写过一些插件？在立即执行函数中编写插件，这样可以避免插件中的变量与全局变量冲突。例如一些、图片懒加载插件、滚动的插件、响应式的插件、插件其实就是：编写一些新的方法，并将这些方法，添加到。// 监听文档完全解析完毕。

原创 前端工程化01-复习jQuery当中的AJAX

AJAX全称（Asynchronous JavaScript And XML）是异步的 JavaScript 和 XML，它描述了一组用于构建网站和Web应用程序的开发技术。简单点说，就是使用对象与服务器通信。它可以使用JSON，XML，HTML 和 text 文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性。也就是说它可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

原创 移动Web学习09-响应式布局&bootstrap案例开发

3、综合案例-AlloyTeam移动全端准备工作HTML 结构<title>腾讯全端</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon"><!-- 层叠性：咱们的css 要 层叠 框架的 --><link rel="stylesheet" href="./Bootstrap/css/bootstrap.min.css"><link

原创 移动Web学习08-响应式布局&bootstrap的使用

2、响应式布局2.1、什么响应式布局响应式布局是一种网页设计的方法，能够使网站在不同的设备上（如桌面电脑、平板电脑、手机等）呈现出最佳的用户体验。其核心思想是使网页能够根据用户的设备和屏幕尺寸自动调整布局和内容，以适应不同的屏幕大小和分辨率。根据获取屏幕的宽度、调整页面布局、其核心就是利用媒体查询、让对应的css生效、来达到响应式的效果例如 https://alloyteam.com/ 腾讯全端这个网站、他只有一个页面、在不同设备下、进行来回的相应。市面上如京东、淘宝、他们都是有两个团队、开发了两

原创 移动Web学习07-适配单位vw/vh&哔哩哔哩移动端vw单位适配案例

1.1、VW相对单位前面我们已经学习了rem单位 ，他是一个相对单位、相对于HTML表格字号大小VW/VH也是一个相对单位，他是相对于视口的尺寸计算结果VW：viewport width VH: viewport height<meta name="viewport" content="width=device-width, initial-scale=1.0">不管是使用vw还是vh这个视口标签一定需要加、因为视口宽度默认是980、加这个可以让视口等于我们设备的宽度1.2、

原创 移动Web学习06-移动端适配&Less预处理器项目案例

项目目标：实现在不同宽度设备中等比缩放的网页效果Less代码@import './base';@import './normalize';// 变量: 存储37.5@rootSize: 37.5rem;*{ margin: 0; padding: 0;}body { background-color: #F0F0F0;}// 主体内容.main { // padding-bottom: (50 / 37.5rem); padding-bot

原创 移动Web学习05-移动端适配&Less预处理器

Less是一个CSS预处理器, Less文件后缀是.less扩充了CSS语言, 使CSS具备一定的逻辑性、计算能力。常见的预处理器还有 Sass、Stylus。

原创 移动Web学习04-移动端订单结算页&PC端个人中心页面

5、电商结算页面案例cssbody{ background-color: #F2F2F2;}* { box-sizing: border-box; margin: 0; padding: 0;}.main{ padding: 12px 11px 80px;}.pay{ display: flex; height: 80px; background-color: #fff; bottom: 0; width: 100%; border-top:

原创 移动Web学习03-移动Web开发基础知识&Flex布局

*设置基准长度：设置伸缩项目在主轴上的基准长度，若主轴是横向的宽失效，若主轴是纵向的 高失效 这个值默认是auto*/子之间的距离我们没办法控制，比如我们在375的屏幕下的分辨下可以的，但是如果分辨率在变大，右侧的空白就会变大，在如果是。浮动通常用于PC布局，因为PC端有版心的存在、在以前Flex是有兼容性问题存在的，但是现在已经不在考虑兼容性问题了。/*浏览器在计算主轴上是否有剩余空间时，他拿的是主轴的基准长度去计算的 auto 横轴指宽，侧轴指高*/字面意思，它是用户正在看到的网站的区域。

原创 移动Web学习02-空间转换&动画

3.1、什么是空间转换前面我们所讲解的平面转换我们只关心x轴和y轴，空间转换就涉及到了Y轴空间：是从坐标轴角度定义的。x、y、z，三条坐标轴构成了一个立体空间，z轴位置与视线方向相同空间转换也被叫做3D转换语法transform：translate3d(x,y,z)transform:translateX(值)transform:translateY(值)transform:translateZ(值)取值（正负均可）像素单位数值百分比3.2、pe

原创 移动Web学习01-字体图标&平面转换

移动web学习-01字体图标&2d平面转换

原创 TypeScript学习06-TypeScript 面向对象

abstract表示是抽象的，他是一个关键字，以前的时候讲过关键字 const/let/switch/class/funciton保留字表示为目前来说可能还没有用到、未来的话可能会提升为一个关键字，保留字或者关键字都不能作为是变量的名字我们知道，继承是多态使用的前提所以在定义很多通用的调用接口时, 我们通常会让调用者传入父类，通过多态来实现更加灵活的调用方式。但是，父类本身可能并不需要对某些方法进行具体的实现，所以父类中定义的方法,，我们可以定义为抽象方法。什么是 抽象方法?

原创 TypeScript学习05-TypeScript函数类型

/1、声明的写法// 参数类型 返回值类型return 123//2、表达式写法// foo本身也是一个标识符(对象), 也应该有自己的类型，可以写成any(不太好、可以做任何操作、没限制她的范围、我们可以明确指定函数的)return 123在JavaScript开发中、函数是重要的组成部分、并且函数可以作为一等公民（可以作为参数、也可以作为返回值进行传递）// 定义一个方法、fn 参数是一个方法（调用这个方法的时候传入的参数是一个函数） function delayExecFn(fn) {

原创 TypeScript学习04-TypeScript的语法细节

TypeScript只是在我们开发阶段、编译阶段给我们做类型限制而已，最终目的是做类型限制、其实用Type和interface无所谓的，不影响效果，但是从代码拓展性的。但interface他只是用来声明对象类型的、但是在声明对象类型的时候，他的这个特性会更多一点,我们可以利用他的特性来减少我们对某些代码更多的一个复用。Type的应用范围更广、即可以声明我们的对象类型同时也可以声明别的一些数据类型、比如、联合类型、或者number类型、或者函数类型。在前面我们可以通过type来声明一个对象类型。

原创 TypeScript学习03-TypeScript基础语法

声明一个标识符时，如果有直接的进行赋值、会根据赋值的类型推导出标识符的类型注解，这个过程被称之为类型推导。

原创 TypeScript学习02-TypeScript环境搭建

在前面我们提到过，TypeScript最终会被编译成JavaScript来运行，所以我们需要搭建对应的环境：我们需要在电脑上安装TypeScript，这样就可以通过TypeScript的Compiler将其编译成JavaScript；全局安装TypeScript编译环境2.2、运行环境如果我们每次为了查看TypeScript代码的运行效果，都通过经过两个步骤的话就太繁琐了：第一步：通过编译TypeScript到JavaScript代码第二步：在浏览器或者Node环境下运行JavaScript代码是否可以

原创 TypeScript学习01-初识TypeScript

虽然我们已经知道TypeScript是干什么的，也知道它解决了什么样的问题，但是我们还是需要全面的来认识一下TypeScript到底是什么？在GitHub和TypeScript官网的说法为、TypeScript是拥有类型的JavaScript超集，她可以编译成普通的、干净的、完整的JavaScript代码其实我们完全可以将TypeScript理解成为加强版的JavaScript,JavaScript所拥有的特性，TypeScript全部都是支持的，并且它紧随ECMAScript的标准，ES6、

原创 docker安装redis,Reading the configuration file, at line 341, ‘set-proc-title yes‘

docker安装redis,Reading the configuration file, at line 341, ‘set-proc-title yes‘

原创 在Windows10下载了consul，解压完后，点击consul.exe出现闪退

测试 consul注册中心。点击consul.exe文件闪退

原创 Tomcat8 报错之INVALID BYTE TAG IN CONSTANT POOL 19

今天在做 ssm 整合的时候，在启动 Tomcat 时报错什么玩样POOL 19。

转载 springboot整合knife4j报错

水文记录bug

原创 启动dubbo服务时报错 ＜dubbo:service interface=““ /＞ interface not allow null!

启动dubbo服务报错， Initialization of bean failed; nested exception is java.lang.IllegalStateException: interface not allow null!

转载 Maven项目控制台中文乱码解决

maven 乱码执行测试中文乱码解决

原创 jdk1.8的ArrayList的源码分析