Albert Yang-CSDN博客

原创 html+css实现漂亮的透明登录页面，HTML实现炫酷登录页面

承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！ https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743 作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领.

2021-01-14 12:46:17 85843 108

原创 Docker 教程(1)---Docker简介与安装

项目开发上线的时候，我们通常会把项目打成一个jar包或war包上传到线上的服务器，此时为了让项目能够运行，我们还要为线上的服务器配置项目的运行环境JDK,Tomcat,ES，Mysql,Redis,Hadoop等等，配置非常麻烦，特别对于搭建集群的时候更麻烦。有时候还会因为本地环境和线上环境的不一致导致很多问题，我们都应该都听说过这句话，我本地运行没问题啊。Docker给以上问题提出了解决方案。本文将带你了解Docker和Docker的安装使用。

2020-11-22 23:00:41 10956 58

原创 JavaScript 进阶教程(3)---让你彻底搞懂原型链和继承

1 原型链1.1 原型关于原型在JS面向对象编程这篇文章已经讲过了，今天简单来复习一下。1.1.1 什么是原型?在JS构造函数中有一个属性prototype,叫做原型,这是给程序员使用的。在JS实例对象中有一个属性__proto__,它也是原型,这是供浏览器使用的,它不是标准的属性。实例对象中的__proto__指向的是该实例对象中的构造函数中的prototype，构造函数中的prototype里面的属性或者方法,可以直接通过实例对象调用。一般情况下，实例对象.__proto__才

2020-09-01 19:33:14 21246 120

原创程序员常用网站和工具(持续更新)

1.画图工具1.1ProcessOnProcessOn是一个面向垂直专业领域的作图工具和社交网络，成立于2011年6月并于2012年启动。支持绘制思维导图、流程图、UML、网络拓扑图、组织结构图、原型图、时间轴等等。官网：https://www.processon.com/1.2Draw.io非常强大，Draw本身不保存图表文件，而是把文件保存到你的Dropbox或者Google云端硬盘里。支持多种格式导出，可与Jira连接使用，而且完全免费。官网：https://www.dra

2020-07-08 09:33:31 9859 65

原创我们该如何高效的学习

全文字数： 1684阅读时间：约6分钟本文在这里不讨论学习方法，关于学习的方法网上已经太多了，这里只谈一下我所认识的学习，以及如何进行高效率的学习。1.正确的认识学习在我们每个人的学习过程中，都贯穿着以下几点：1.学习态度：(靠发心)学习态度对学习效果的影响作用，已被许多实验研究所证明，积极的学习态度对学习速度有促进作用。1952年...

2019-09-28 15:50:42 21209 78

原创 Linux系统常用基本命令总结

目录Linux基本命令Linux的简介Linux的厂商Linux的目录结构基于虚拟机的环境搭建常用命令与示例一、文件基本操作命令1. ls命令2. pwd命令3. mkdir命令4. cd命令5. touch命令6. cp命令7. mv命令8. rmdir命令9. rm命令10. cat命令11 more和 les...

2018-11-13 22:42:20 80911 54

原创 VsCode自定义注释

vscode骚操作自定义注释打开设置窗口，并输入snippets，选择第一个选项(Snippets:Configure User Snippets)。打开一个js文件，输入文件注释的前缀jsNoteTitle，回车即可生成我们配置好的注释。上边的配置文件一共四个注释，一个文件注释，一个函数注释，一个修改注释，一个变量注释。，可以根据自己的喜好定义。body里面是自定义注释的内容，可以根据自己的需要增改。进入到 javascript.json 文件中后，添加如下代码，保存退出即可。

2022-10-24 18:11:53 7846 1

原创 npm ERR! command sh -c node-gyp rebuild，fatal error: ‘jpeglib.h‘ file not found npm ERR!

使用React脚手架创建React项目报错：报错日志如下：admindeiMac-3:react_redux albert$ create-react-app hello-reactCreating a new React app in /Users/albert/react_redux/hello-react.Installing packages. This might take a couple of minutes.Installing react, react-dom, and

2021-03-01 16:12:20 10642 3

原创 HTML+CSS十分钟实现响应式布局页面，响应式布局实战教程

承蒙各位小伙伴的支持，鄙人有幸入围了《CSDN 2020博客之星》的前200名，现在进入投票环节，如果我平时写的文章和分享对你有用的话，请每天点击一下这个链接，投上你们宝贵的一票吧！谢谢！❤️ 每一票都是我坚持的动力和力量！https://bss.csdn.net/m/topic/blog_star2020/detail?username=qq_23853743作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领...

2021-01-17 16:47:53 41634 29

原创 CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画

作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领先的开始。微信公众号：AlbertYang今天教大家使用CSS实现一个霓虹灯按钮动画效果，大家有什么不懂的可以留言问我，视频已经同步到B站，欢迎关注我的B站账号。视频视频链接：https://www.bilibili.com/video/BV1Zi4y1F7utCSS霓虹灯按钮动画，CSS实现炫酷的霓虹灯按钮动画HTML<!DO.

2021-01-09 10:30:09 16620 25

原创送你一朵小红花，CSS实现一朵旋转的小红花

送你一朵小红花，愿你勇敢的面对生活中的苦难，不要放弃爱与希望，蓝天白云，定会如期而至。视频：B站视频链接：https://www.bilibili.com/video/BV1xX4y1M7yM送你一朵小红花，CSS实现一朵旋转的小红花HTML<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" co

2021-01-06 12:51:36 12905 19

原创十分钟实现节日祝福动画，CSS+JavaScript实现元旦祝福动画，祝大家元旦快乐

视频已同步到我的B站账号欢迎大家关注。https://space.bilibili.com/563010186参考代码HTML:<!DOCTYPE html><htm...

2020-12-31 12:48:56 15466 22

原创 5分钟实现漂亮的CSS加载动画，纯CSS实现加载动画

1 视频视频地址：2 知识点2.1CSS calc() 函数CSS calc() 函数用于动态计算长度值。语法calc(expression) 值描述 expression 必须，一个数学表达式，结果将采用运算后的返回值。需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100%- 10px)；任何长度值都可以使用calc()函数进行计算；calc...

2020-12-27 21:52:38 12615 24

原创 5分钟用CSS实现毛玻璃效果 CSS Glassmorphism

目录1 视频2 知识点2.1CSS calc() 函数2.2 CSS var() 函数2.3 backdrop-filter2.4 CSS3box-sizing属性2.5 实现思路3 参考代码3.1 HTML3.2 CSS1 视频视频地址：https://www.bilibili.com/video/BV1Ny4y1U7hp5分钟实现CSS毛玻璃效果，王冰冰照片毛玻璃效果2 知识点2.1CSS calc() 函数CSS cal...

2020-12-23 12:47:34 11684 8

原创十分钟实现炫酷透明计算器，CSS3+JavaScript实现3D炫酷计算器

vanilla-tilt.js使用方法:https://micku7zu.github.io/vanilla-tilt.js/HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>炫酷透明计算器：公众号AlbertYang</title> <link rel="stylesheet" type="text/css" href="

2020-12-17 23:59:35 9187 31

原创十分钟实现鼠标悬停效果，CSS3悬停效果

font awesome 图标使用方法参考网站：https://fontawesome.dashgame.com/HTML：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>鼠标悬停效果:微信公众号AlbertYang</title> <link rel="stylesheet" type="text/css" href="curso

2020-12-15 21:22:21 7037 23

原创 NodeJS基础入门教程(1)-一文让你快速了解什么是NodeJS

1什么是NodeNode是一个基于Chrome V8引擎的JavaScript代码运行平台。WEB浏览器也是JavaScript代码运行平台。常见的JavaScript运行平台：WEB浏览器,Node。2Node.js安装2.1官网下载下载官网：https://nodejs.org/en/Node.js有两个不同的版本，LTS(Long Term Support长期支持版稳定版)版，Current(拥有最新特性的实验版)版。一般我们下载LTS版。2.2安装根据自己的系统和版本在官网

2020-12-12 12:47:41 4111 36

原创 Docker教程(3)—Docker安装Tomcat，Nginx与可视化管理工具Portainer的安装和使用

前面我们讲了Docker的安装使用，以及一些常用的命令。俗话说只说不练假把式，接下来我们使用Docker安装一些常用的镜像Tomcat, Nginx，练习一下Docker命令的使用。同时学习一下Docker可视化图形管理工具Portainer的安装与使用。一. 安装Tomcat1.1 查找镜像在Docker Hub 上查找 Tomcat 镜像，我们可以通过 Sort by 查看不同版本的 tomcat，默认的是最新版本 tomcat:latest。

2020-12-05 17:33:38 4786 22

原创 Docker教程(2)—Docker常用基础命令

Docker常用命令帮助命令1.显示docker的版本信息: docker version2.显示docker的系统信息docker info3.帮助命令docker 命令 --help例如：docker info --help镜像命令1.查看所有本地主机上的镜像docker images2.搜索镜像我们可以在Docker Hub网站上来搜索镜像，网址为：https://hub.docker.com/，也可以使用docker s...

2020-11-24 21:45:46 4152 34

原创 JavaScript进阶(8)-ES6简介及新增let和const关键字

ES6一般用来泛指“下一代JavaScript语言”，但有时也用来特指ES2015标准。所有浏览器基本上对ES5（ECMAScript 5）提供了完善的支持，而对ES6（ECMAScript 6）和ES7（ECMAScript 7）的支持度也在不断提升。ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:let和const。let 声明的变量只在 let 命令所在的代码块内有效。const 声明一个只读的常量，一旦声明，常量的值就不能改变。

2020-11-14 14:42:30 6877 43

原创 JavaScript进阶教程(7)-正则表达式

正则表达式了解正则表达式基本语法能够使用JavaScript的正则对象正则表达式简介什么是正则表达式正则表达式：用于匹配规律规则的表达式，正则表达式最初是科学家对人类神经系统的工作原理的早期研究，现在在编程语言中有广泛的应用。正则表通常被用来检索、替换那些符合某个模式(规则)的文本。正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个“规则字符串”，这个“规则字符串”用来表达对字符串的一种过滤逻辑。正则表达式的作用给定的字符串是否

2020-10-24 23:07:20 14356 60

原创 JavaScript进阶教程(6)—硬核动图让你轻松弄懂递归与深浅拷贝

目录一、递归1.1 概念1.2 出口1.3 递归经典问题：递归求斐波那契数列1.4 递归经典问题：递归求阶乘1.5 递归求一个数字各个位数上的数字的和1.6 递归遍历DOM树二深浅拷贝2.1 浅拷贝2.2 深拷贝2.3 如何区分深拷贝与浅拷贝？2.3.1 浅拷贝：仅复制了引用，彼此之间的操作会互相影响2.3.2 深拷贝：在堆中重新分配内存，不同的地址，互不影响三总结一、递归1.1 概念递归简单的来说就是程序自己调用自己，就像下面这幅图一

2020-09-13 19:47:49 11456 38

原创 JavaScript进阶教程(5)-一文让你搞懂作用域链和闭包

1 作用域在JS中变量可以分为局部变量和全局变量，对于变量不熟悉的可以看一下我这篇文章：https://blog.csdn.net/qq_23853743/article/details/106946100作用域就是变量的使用范围，分为局部作用域和全局作用域，局部变量的使用范围为局部作用域，全局变量的使用范围是全局作用域。在 ECMAScript 2015 引入let 关键字之前，js中没有块级作用域---即在JS中一对花括号（{}）中定义的变量，依然可以在花括号外面使用。{ var num2

2020-09-12 19:26:40 8519 36

原创 JavaScript进阶教程(4)-函数内this指向解惑call()，apply()，bind()的区别

目录1 函数的定义方式1.1 函数声明1.2 函数表达式1.3 函数声明与函数表达式的区别1.4 构造函数Function（了解即可，一般不用）2 函数的调用方式3 函数内 this 的指向4 call、apply、bind4.1 call，apply4.1.1 新的函数调用方式apply和call方法4.1.2 apply和call可以改变this的指向4.2 call，apply使用4.3 bind4.4 总结5 函数的其它成员(了解)6

2020-09-06 20:44:40 17427 44

原创 JavaScript 进阶教程(2)---面向对象实战之贪吃蛇小游戏

目录1 引言2 游戏地图3 游戏对象3.1 食物对象3.2 小蛇对象3.3 游戏对象4 游戏的逻辑4.1小蛇的移动4.2 让蛇自己动起来4.2.1 自动移动4.2.2 自调用函数4.2.3 私有方法4.3 判断蛇是否吃到食物5 代码6 其它处理6.1 index.js6.2 自调用函数的参数6.2 多个自调用函数1 引言上篇文章：https://blog.csdn.net/qq_23853743/article/details/

2020-08-29 22:12:04 4116 16

原创 JavaScript 进阶教程(1)--面向对象编程

1 学习目标理解面向对象开发思想掌握 JavaScript 面向对象开发相关模式 2 面向对象介绍2.1什么是对象Everything is object （一切皆对象）我们可以从两个层次来理解对象：(1) 对象是单个事物的抽象。一本书、一辆汽车、一个人都可以是对象，一个数据库、一张网页、一个与远程服务器的连接也可以是对象。当实物被抽象成对象，实物之间的关系就变成了对象之间的关系，从而就可以模拟现实情况，针对对象进行编程。(2) 对象是一个.

2020-08-16 18:13:37 19675 85

原创使用canvas把照片旋转任意角度

1. 效果演示地址：https://www.albertyy.com/2020/8/rotateImg.html2. canvas关于canvas的使用我在这篇文章中有简单的介绍，可以看一下。3. 代码实现<!DOCTYPE html><html> <head> <title>图片旋转：公众号AlbertYang</title> </head> <style type="text/css">

2020-08-13 18:10:01 5460 25

原创不会吧不会吧，你不会还不知道这些提高JS代码质量的骚操作吧？

目录1 评价代码质量指标1.1 健壮性1.1.1 参数校验1.1.2 try, catch1.1.3 控制变量权限1.2 可扩展性1.2.1 模块分明1.2.2 高内聚低耦合1.2.3 用添加代替更改1.3可读性1.3.1 变量命名规范1.3.2 代码结构清晰2 设计模式2.1 用享元模式减少重复代码2.2 策略模式/状态模式2.3 装饰器模式3 总结1 评价代码质量指标1.1 健壮性程序的健壮性是指程序在执行时，在局部发生错误

2020-08-10 08:38:08 12337 83

原创设计模式(12)[JS版]--JavaScript必会设计模式之外观模式（Façade Pattern）

目录1 什么是外观模式2 外观模式的主要的参与者3 代码实现4 实例应用4.1 跨浏览器事件4.2阻止默认和冒泡事件5 总结1 什么是外观模式外观模式为子系统提供了一个接口，它屏蔽一个或多个子系统的复杂功，提供了一个一致的界面（接口）给用户。外观模式是一个非常简单的模式，但它的功能却很很强大，非常有用。外观模式不仅简化类中的接口，而且对接口与调用者也进行了解耦。外观模式可以将一些复杂操作封装起来，并创建一个简单的接囗用于调用，它经常出现在多层架构的系统中。外观模式的.

2020-08-06 22:09:35 3208 19

原创设计模式(11)[JS版]-JavaScript中的注解之装饰器模式

目录1 什么是装饰器模式？2 装饰器模式的主要参与者有哪些3 代码实现4 实例应用5ES7 中的 decorator6 总结1 什么是装饰器模式？装饰器模式模式动态地扩展了（装饰）一个对象的行为，同时又不改变其结构。在运行时添加新的行为的能力是由一个装饰器对象来完成的，它 "包裹 "了原始对象，用来提供额外的功能。多个装饰器可以添加或覆盖原始对象的功能。装饰器模式属于结构型模式。和适配器模式不同的是，适配器模式是原有的对象不能用了，而装饰器模式是原来的对象还能用，在不改变原.

2020-08-05 23:38:20 6500 40

原创设计模式(10)[JS版]-JavaScript如何实现组合模式？？？

目录1什么是组合模式2主要参与者3代码实现4应用实例4.1 表单验证4.1 图片阅读器5总结1什么是组合模式组合模式允许创建具有属性的对象，这些对象是原始项目或对象集合。集合中的每个项目本身可以容纳其他集合，创建深度嵌套结构。树型控件是复合模式的一个完美例子。树的节点要么包含一个单独的对象（叶子节点），要么包含一组对象（节点的子树）。组合模式用于简单化，一致化对单组件和复合组件的使用；其实它就是一棵树。组合模式能对于工作能起到简化作用，组合...

2020-08-04 22:35:22 5833 45

原创设计模式(9)[JS版]-JavaScript设计模式之如何实现桥接模式？？？

1什么是桥接模式Bridge模式允许两个组件，即客户端和服务一起工作，每个组件都有自己的接口。Bridge是一种高级架构模式，它的主要目标是通过两级抽象来编写更好的代码。它有利于对象之间非常松散的耦合，有时也被称为双适配器模式。桥接模式的作用在于将实现部分和抽象部分分离，以便两者可以独立的变化。这种类型的设计模式属于结构型模式，它通过提供抽象化和实现化之间的桥接结构，来实现二者的解耦。Bridge模式弱化了代码之间的耦合，将抽象和其实现分离，便于二者独立变化、让API更加健壮，有利于分层，提高组.

2020-08-03 22:53:18 4775 45

xmpcore-6.1.8.jar

metadata-extractor-2.14.0.jar

空空如也