commit 0a21a84531d3a5261fa3635c0360ab7209faf8bb Author: zhengchiliu Date: Thu Jan 2 10:46:09 2025 +0800 从gitlab迁移 diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000..f22034a Binary files /dev/null and b/.DS_Store differ diff --git a/Ansible.md b/Ansible.md new file mode 100644 index 0000000..114000d --- /dev/null +++ b/Ansible.md @@ -0,0 +1,2 @@ +# Ansible + diff --git a/README.md b/README.md new file mode 100644 index 0000000..f253da4 --- /dev/null +++ b/README.md @@ -0,0 +1,71 @@ +# "倘若耶稣活在 21 世纪，大抵也会像我一样成为一名全栈" -- 周树人 + +学全栈的第 29 天 -- 学习进度 JavaScript 自定义属性 + +--- + +# 证书墙 + +![](./images/证书/hcie-cloud.png) + +![](./images/证书/cka.png) + +![](./images/证书/hcia-presales.png) + +![](./images/证书/tca.jpg) + +![](./images/证书/tcloud.jpg) + +--- + +# 全栈学习计划 + +1、HTML + +2、CSS + +3、JavaScript + +4、VUE3 + +5、Go + +6、Linux + +7、Nginx + +8、OpenResty + +9、MySQL + +10、xtrabackup + +10、Redis + +11、MongoDB + +12、Kubernetes + +13、ElasticSearch + +14、Kibana + +15、Logstash + +16、Prometheus + +17、Grafana + +18、Kafka + +19、RocketMQ + +20、Consul + +21、CoreDNS + +22、etcd + +23、VPN + +### 本文档仅用于博主个人学习，如侵权请联系作者删除 857493511@qq.com diff --git a/images/Consul/consul-architecture.png b/images/Consul/consul-architecture.png new file mode 100644 index 0000000..bb3df27 Binary files /dev/null and b/images/Consul/consul-architecture.png differ diff --git a/images/HTML/1.png b/images/HTML/1.png new file mode 100644 index 0000000..cf88316 Binary files /dev/null and b/images/HTML/1.png differ diff --git a/images/HTML/2.png b/images/HTML/2.png new file mode 100644 index 0000000..af7f5b9 Binary files /dev/null and b/images/HTML/2.png differ diff --git a/images/HTML/3.png b/images/HTML/3.png new file mode 100644 index 0000000..f3a68e5 Binary files /dev/null and b/images/HTML/3.png differ diff --git a/images/HTML/4.png b/images/HTML/4.png new file mode 100644 index 0000000..445a4f8 Binary files /dev/null and b/images/HTML/4.png differ diff --git a/images/Linux/Linux小技巧中文man手册.png b/images/Linux/Linux小技巧中文man手册.png new file mode 100644 index 0000000..4ab6631 Binary files /dev/null and b/images/Linux/Linux小技巧中文man手册.png differ diff --git a/images/MySQL/MySQL-1.jpeg b/images/MySQL/MySQL-1.jpeg new file mode 100644 index 0000000..881a581 Binary files /dev/null and b/images/MySQL/MySQL-1.jpeg differ diff --git a/images/TCPIP/tls-1.png b/images/TCPIP/tls-1.png new file mode 100644 index 0000000..8f95d99 Binary files /dev/null and b/images/TCPIP/tls-1.png differ diff --git a/images/TCPIP/tls-10.png b/images/TCPIP/tls-10.png new file mode 100644 index 0000000..0d72fa0 Binary files /dev/null and b/images/TCPIP/tls-10.png differ diff --git a/images/TCPIP/tls-11.png b/images/TCPIP/tls-11.png new file mode 100644 index 0000000..0cde976 Binary files /dev/null and b/images/TCPIP/tls-11.png differ diff --git a/images/TCPIP/tls-2.jpeg b/images/TCPIP/tls-2.jpeg new file mode 100644 index 0000000..8e915ea Binary files /dev/null and b/images/TCPIP/tls-2.jpeg differ diff --git a/images/TCPIP/tls-3.jpeg b/images/TCPIP/tls-3.jpeg new file mode 100644 index 0000000..a503dab Binary files /dev/null and b/images/TCPIP/tls-3.jpeg differ diff --git a/images/TCPIP/tls-4.jpeg b/images/TCPIP/tls-4.jpeg new file mode 100644 index 0000000..5b03e3d Binary files /dev/null and b/images/TCPIP/tls-4.jpeg differ diff --git a/images/TCPIP/tls-5.png b/images/TCPIP/tls-5.png new file mode 100644 index 0000000..4b5154b Binary files /dev/null and b/images/TCPIP/tls-5.png differ diff --git a/images/TCPIP/tls-6.png b/images/TCPIP/tls-6.png new file mode 100644 index 0000000..80dbae2 Binary files /dev/null and b/images/TCPIP/tls-6.png differ diff --git a/images/TCPIP/tls-7.png b/images/TCPIP/tls-7.png new file mode 100644 index 0000000..b96e767 Binary files /dev/null and b/images/TCPIP/tls-7.png differ diff --git a/images/TCPIP/tls-8.png b/images/TCPIP/tls-8.png new file mode 100644 index 0000000..85152bf Binary files /dev/null and b/images/TCPIP/tls-8.png differ diff --git a/images/TCPIP/tls-9.png b/images/TCPIP/tls-9.png new file mode 100644 index 0000000..1c1ff72 Binary files /dev/null and b/images/TCPIP/tls-9.png differ diff --git a/images/gitlab/gitlab-1.png b/images/gitlab/gitlab-1.png new file mode 100644 index 0000000..5ff9b66 Binary files /dev/null and b/images/gitlab/gitlab-1.png differ diff --git a/images/证书/cka.png b/images/证书/cka.png new file mode 100644 index 0000000..3806746 Binary files /dev/null and b/images/证书/cka.png differ diff --git a/images/证书/hcia-presales.png b/images/证书/hcia-presales.png new file mode 100644 index 0000000..7f7c839 Binary files /dev/null and b/images/证书/hcia-presales.png differ diff --git a/images/证书/hcie-cloud.png b/images/证书/hcie-cloud.png new file mode 100644 index 0000000..632c0ce Binary files /dev/null and b/images/证书/hcie-cloud.png differ diff --git a/images/证书/tca.jpg b/images/证书/tca.jpg new file mode 100644 index 0000000..280d3a9 Binary files /dev/null and b/images/证书/tca.jpg differ diff --git a/images/证书/tcloud.jpg b/images/证书/tcloud.jpg new file mode 100644 index 0000000..2309a84 Binary files /dev/null and b/images/证书/tcloud.jpg differ diff --git a/开发/.DS_Store b/开发/.DS_Store new file mode 100644 index 0000000..3ef0f92 Binary files /dev/null and b/开发/.DS_Store differ diff --git a/开发/前端/AJAX/AJAX文档/AJAX-day01.pdf b/开发/前端/AJAX/AJAX文档/AJAX-day01.pdf new file mode 100644 index 0000000..6d33e2a Binary files /dev/null and b/开发/前端/AJAX/AJAX文档/AJAX-day01.pdf differ diff --git a/开发/前端/AJAX/AJAX文档/AJAX-day02.pdf b/开发/前端/AJAX/AJAX文档/AJAX-day02.pdf new file mode 100644 index 0000000..a43b045 Binary files /dev/null and b/开发/前端/AJAX/AJAX文档/AJAX-day02.pdf differ diff --git a/开发/前端/AJAX/AJAX文档/AJAX-day03.pdf b/开发/前端/AJAX/AJAX文档/AJAX-day03.pdf new file mode 100644 index 0000000..c142dad Binary files /dev/null and b/开发/前端/AJAX/AJAX文档/AJAX-day03.pdf differ diff --git a/开发/前端/AJAX/AJAX文档/AJAX-day04.pdf b/开发/前端/AJAX/AJAX文档/AJAX-day04.pdf new file mode 100644 index 0000000..532dcba Binary files /dev/null and b/开发/前端/AJAX/AJAX文档/AJAX-day04.pdf differ diff --git a/开发/前端/AJAX手册.md b/开发/前端/AJAX手册.md new file mode 100644 index 0000000..8f902b8 --- /dev/null +++ b/开发/前端/AJAX手册.md @@ -0,0 +1,59 @@ +## 定义 + +AJAX使用XMLHttpRequest对象与服务器异步通信，可以使用JSON，XML，HTML，text文本等格式发送和接收数据 + +## URL + +``` +http://lzcwy.cn/api/user?name=lzc&age=18 +协议://域名/资源地址?查询参数1&查询参数2 +``` + +## 使用axios传递查询参数 + +``` +axios({ + url: 'http://域名/资源路径' + params: { + key1: 'value1', + key2: 'value2' + } +}).then (res => { + //接受并使用数据 +}) +``` + +## 使用axios提交数据 + +``` +axios({ + url: 'url', + method: 'post', + data: { + key: 'value' + }, +}) +``` + +## 错误处理 + +``` +axios({ + //请求选项 +}).then(res => { + //处理数据 +}).catch(err => { + //处理错误 +}) +``` + +## 快速收集表单元素的值 + +``` +form-serialize + const form = document.qs() + const data = serialize(form, {hash: true,empty:true}) + 生成的数据格式-true 为js + empty 是否收集空数据 +``` + diff --git a/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day01.pdf b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day01.pdf new file mode 100644 index 0000000..fadcd0c Binary files /dev/null and b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day01.pdf differ diff --git a/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day02.pdf b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day02.pdf new file mode 100644 index 0000000..4259d1a Binary files /dev/null and b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day02.pdf differ diff --git a/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day03.pdf b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day03.pdf new file mode 100644 index 0000000..3259746 Binary files /dev/null and b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day03.pdf differ diff --git a/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day04.pdf b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day04.pdf new file mode 100644 index 0000000..aacca5f Binary files /dev/null and b/开发/前端/Git/Git文档/Git&黑马就业数据平台-Day04.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day01.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day01.pdf new file mode 100644 index 0000000..1997f94 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day01.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day02.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day02.pdf new file mode 100644 index 0000000..d47cc40 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day02.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day03.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day03.pdf new file mode 100644 index 0000000..905053b Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day03.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day04.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day04.pdf new file mode 100644 index 0000000..0bbe52c Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day04.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day05.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day05.pdf new file mode 100644 index 0000000..88c4052 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day05.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day06.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day06.pdf new file mode 100644 index 0000000..2c68b94 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day06.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day07.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day07.pdf new file mode 100644 index 0000000..2df6f49 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day07.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day08.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day08.pdf new file mode 100644 index 0000000..60ccd58 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day08.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day09.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day09.pdf new file mode 100644 index 0000000..6e855b8 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day09.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day10.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day10.pdf new file mode 100644 index 0000000..a81db08 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/HTML+CSS day10.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day01.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day01.pdf new file mode 100644 index 0000000..4541d17 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day01.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day02.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day02.pdf new file mode 100644 index 0000000..c515c79 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day02.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day03.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day03.pdf new file mode 100644 index 0000000..0274c30 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day03.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day04.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day04.pdf new file mode 100644 index 0000000..6a25296 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day04.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day05.pdf b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day05.pdf new file mode 100644 index 0000000..01d6252 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS文档/移动Web-day05.pdf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/css/base.css b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/css/base.css new file mode 100644 index 0000000..7d817e8 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/css/base.css @@ -0,0 +1,21 @@ +/* 基础公共样式：清除默认样式 + 设置通用样式 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +li { + list-style: none; +} + +body { + font: 14px/1.5 "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif; + color: #333; +} + +a { + color: #333; + text-decoration: none; +} + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/css/index.css b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/css/index.css new file mode 100644 index 0000000..b2235ce --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/css/index.css @@ -0,0 +1,334 @@ +/* 首页样式表 */ + +/* 版心居中 */ +.wrapper { + margin: 0px auto; + width: 1200px; +} + +body { + background-color: #f3f5f7; +} + +/* 导航 */ +.header { + height: 100px; + background-color: #fff; +} + +/* 导航版心居中 */ +.header .wrapper { + padding-top: 29px; + display: flex; +} + +/* logo区域 */ +.logo > h1 > a { + display: block; + width: 195px; + height: 41px; + font-size: 0px; + background-image: url(../images/logo.png); +} + +.nav { + margin-left: 102px; +} + +.nav ul { + display: flex; +} + +.nav li { + margin-right: 24px ; +} + +.nav a { + display: block; + padding: 6px 8px; + font-size: 19px; + line-height: 27px; +} + +.nav li .active, +.nav li a:hover { + border-bottom: 2px solid #00a4ff; +} + +.search { + display: flex; + width: 412px; + height: 40px; + background-color: #f3f5f7; + border-radius: 20px; + margin-left: 64px; + padding-left: 19px; + padding-right: 12px; +} + +.search input { + flex: 1; + border: none; + background-color: transparent; + outline: none; + +} + +.search input::placeholder { + font-size: 14px; + color: #999; +} + +.search a { + width: 16px; + height: 16px; + background-image: url(../images/search.png); + align-self: center; +} + +.user img { + width: 30px; + height: 30px; + border-radius: 15px; + vertical-align: middle; + margin-right: 7px; +} + +.user { + margin-left: 32px; + margin-top: 4px; + margin-bottom: 7px; +} + +.user span { + font-size: 16px; + color: #666; +} + +.banner { + height: 420px; + background-color: #0092cb; +} + +.banner .wrapper { + display: flex; + height: 420px; + background-image: url(../uploads/banner.png); + justify-content: space-between; +} + +.banner .left { + width: 191px; + height: 420px; + background-color: rgba(0, 0, 0, 0.42); + padding-left: 20px; + padding-right: 20px; + padding-top: 3px; + padding-bottom: 3px; +} + +.banner .left li a { + display: block; + color: white; + height: 46px; + line-height: 46px; + font-size: 16px; + background-image: url(../images/right.png); + background-repeat: no-repeat; + background-position: right center; +} + +.banner .left li a:hover { + color: #00a4ff; + background-image: url(../images/right-hover.png); + background-repeat: no-repeat; + background-position: right center; +} + + +.banner .right { + margin-top: 60px; + border-radius: 10px; + width: 218px; + height: 305px; + background-color: #209dd5; +} + +.banner .right h3 { + margin-left: 14px; + height: 48px; + line-height: 48px; + color: white; + font-weight: 400; + font-size: 15px; +} + +.banner .right .content { + height: 257px; + background-color: #fff; + border-radius: 10px; + padding: 14px; +} + +.banner .right dl { + margin-bottom: 12px; + border-bottom: 1px solid #e0e0e0; +} + +.banner .right dt { + margin-bottom: 8px; + font-size: 14px; + line-height: 20px; + font-weight: 700; +} + +.banner .right dd { + margin-bottom: 8px; + font-size: 12px; + line-height: 16px; +} + + +.banner .right dd span { + color: #00a4ff; +} + +.banner .right dd strong { + color: #7d7d7d; + font-weight: 400; +} + +.banner .right a { + display: block; + height: 32px; + background-color: #00a4ff; + line-height: 32px; + border-radius: 15px; + text-align: center; + color: white; + font-size: 14px; +} + +.recommend { + display: flex; + height: 60px; + padding: 0 20px; + background-color: #fff; + margin-top: 11px; + box-shadow: 0px 1px 2px 0px rgba(211,211,211,0.5); + line-height: 60px; +} + +.recommend ul { + flex: 1; + display: flex; + justify-content: space-evenly; +} + +.recommend ul li a { + border-right: 1px solid #e0e0e0; + padding-left: 24px; + padding-right: 24px; + font-size: 18px; + +} + +.recommend ul li:last-child a { + border: none; +} + +.recommend h3 { + font-weight: 400; + color: #00a4ff; + font-size: 18px; +} + +.recommend .modify { + font-size: 16px; + color: #00a4ff; +} + +.course { + margin-top: 15px; + +} + +.hd { + height: 60px; + line-height: 60px; + display: flex; + justify-content: space-between; +} + +.hd h3 { + font-weight: 400; + font-size: 21px; +} + +.hd .more { + font-size: 14px; + color: #999; + background-image: url(../images/more.png); + background-repeat: no-repeat; + background-position: right center; + padding-right: 20px; +} + +.bd ul { + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.bd li { + width: 228px; + height: 271px; + background-color: #0092cb; + margin-bottom: 14px; +} + +.bd li .pic { + height: 156px; + background-image: url(../uploads/course01.png); +} + +.bd li .text { + padding: 20px; + height: 115px; + background-color: #fff; +} + +.bd li .text h4 { + line-height: 20px; + height: 40px; + font-size: 14px; + font-weight: 400; + margin-bottom: 13px; +} + +.bd li .text p { + line-height: 20px; + color: #999; + font-size: 14px; +} + +.bd li .text p span { + color: #fa6400; +} + +.bd li .text p i { + font-style: normal; +} + +.hd ul { + display: flex; +} + +.hd li { + margin-right: 60px; + font-size: 16px; +} + +.hd li .active { + color: #00a4ff; +} \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/logo.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/logo.png new file mode 100644 index 0000000..a45db31 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/logo.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/more.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/more.png new file mode 100644 index 0000000..8deeea9 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/more.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/right-hover.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/right-hover.png new file mode 100644 index 0000000..b365233 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/right-hover.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/right.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/right.png new file mode 100644 index 0000000..508b058 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/right.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/search.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/search.png new file mode 100644 index 0000000..6521d78 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/images/search.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/index.html b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/index.html new file mode 100644 index 0000000..e28f6ce --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/index.html @@ -0,0 +1,200 @@ + + + + + + Document + + + + +
+
+ +
+ +
+
+ + +
+
+ + 驰子学前端 +
+
+
+ + + +
+

精品推荐

+ + 修改兴趣 +
+ +
+
+

精品推荐

+ 查看全部 +
+
+ +
+
+ +
+
+

前端开发工程师

+ + 查看全部 +
+
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/banner.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/banner.png new file mode 100644 index 0000000..27fd19e Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/banner.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course01.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course01.png new file mode 100644 index 0000000..8f9ee38 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course01.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course02.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course02.png new file mode 100644 index 0000000..1feda95 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course02.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course03.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course03.png new file mode 100644 index 0000000..4eeb59b Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course03.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course04.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course04.png new file mode 100644 index 0000000..4e5c80e Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course04.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course05.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course05.png new file mode 100644 index 0000000..4d09595 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course05.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course06.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course06.png new file mode 100644 index 0000000..86adee2 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course06.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course07.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course07.png new file mode 100644 index 0000000..68ab899 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course07.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course08.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course08.png new file mode 100644 index 0000000..1c21116 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course08.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course09.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course09.png new file mode 100644 index 0000000..6e0ee7d Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course09.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course10.png b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course10.png new file mode 100644 index 0000000..a6d22f3 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/course10.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/微信图片_20240716025920.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/微信图片_20240716025920.jpg new file mode 100644 index 0000000..98be37a Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/学成在线练习/uploads/微信图片_20240716025920.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/base.css b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/base.css new file mode 100644 index 0000000..65035ae --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/base.css @@ -0,0 +1,53 @@ +/* 头尾各个页面相同的样式 */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +/* 设置网页统一的字体大小、行高、字体系列相关属性 */ +body { + font: 16px/1.5 "Microsoft Yahei", sans-serif; + color: #333; +} + +/* 去除列表默认样式 */ +ul, +ol { + list-style: none; +} + +/* 去除默认的倾斜效果 */ +em, +i { + font-style: normal; +} + +/* 去除a标签默认下划线，并设置 */ +a { + text-decoration: none; + color: #333; +} + +/* 设置img的垂直对齐方式为居中对齐，去除img默认下间隙 */ +img { + vertical-align: middle; + width: 100%; + height: 100%; +} + +/* 去除input默认样式 */ +input { + border: none; + outline: none; + color: #333; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + font-weight: 400; +} \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/common.css b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/common.css new file mode 100644 index 0000000..5a69a25 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/common.css @@ -0,0 +1,91 @@ +/* 头尾各个页面相同的样式 */ +/* 版心 */ +.wrapper { + margin: 0 auto; + width: 1240px; +} + +/* 快捷导航 */ +.shortcut { + height: 52px; + background-color: #333; +} + +.shortcut .wrapper { + display: flex; + height: 52px; + justify-content: flex-end; +} + +.shortcut ul { + display: flex; + line-height: 52px; +} + +.shortcut li a { + padding-right: 15px; + padding-left: 15px; + color: white; + border-right: 1px solid #999; + font-size: 14px; +} + +.shortcut li:last-child a { + border-right: none; + padding-right: 0; +} + +.shortcut li .iconfont { + vertical-align: middle; +} + +.shortcut li .login { + color: #5EB69C; +} + +.header { + height: 88px; + margin-top: 22px; + margin-bottom: 22px; + background-color: pink; + display: flex; +} + +.logo a { + display: block; + font-size: 0px; + width: 200px; + height: 88px; + background-image: url(../images/logo.png); +} + +.nav { + margin-top: 33px; + margin-left: 28px; +} + +.nav ul { + display: flex; +} + +.nav ul li { + margin-right: 47px; +} + +.nav ul li a { + padding-bottom: 10px; +} + +.nav ul li a:hover { + border-bottom: 2px solid #5EB69C; + color: #5EB69C; +} + +.search { + margin-top: 33px; + margin-right: 45px; + width: 170px; + height: 34px; + border-bottom: 2px solid #F4F4F4; + display: flex; +} \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/index.css b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/index.css new file mode 100644 index 0000000..2a5d840 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/css/index.css @@ -0,0 +1 @@ +/* 首页内容的样式 */ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/favicon.ico b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/favicon.ico new file mode 100644 index 0000000..8fbb1e3 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/favicon.ico differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/demo.css b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/demo.css new file mode 100644 index 0000000..a67054a --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/demo.css @@ -0,0 +1,539 @@ +/* Logo 字体 */ +@font-face { + font-family: "iconfont logo"; + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); + src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), + url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); +} + +.logo { + font-family: "iconfont logo"; + font-size: 160px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +/* tabs */ +.nav-tabs { + position: relative; +} + +.nav-tabs .nav-more { + position: absolute; + right: 0; + bottom: 0; + height: 42px; + line-height: 42px; + color: #666; +} + +#tabs { + border-bottom: 1px solid #eee; +} + +#tabs li { + cursor: pointer; + width: 100px; + height: 40px; + line-height: 40px; + text-align: center; + font-size: 16px; + border-bottom: 2px solid transparent; + position: relative; + z-index: 1; + margin-bottom: -1px; + color: #666; +} + + +#tabs .active { + border-bottom-color: #f00; + color: #222; +} + +.tab-container .content { + display: none; +} + +/* 页面布局 */ +.main { + padding: 30px 100px; + width: 960px; + margin: 0 auto; +} + +.main .logo { + color: #333; + text-align: left; + margin-bottom: 30px; + line-height: 1; + height: 110px; + margin-top: -50px; + overflow: hidden; + *zoom: 1; +} + +.main .logo a { + font-size: 160px; + color: #333; +} + +.helps { + margin-top: 40px; +} + +.helps pre { + padding: 20px; + margin: 10px 0; + border: solid 1px #e7e1cd; + background-color: #fffdef; + overflow: auto; +} + +.icon_lists { + width: 100% !important; + overflow: hidden; + *zoom: 1; +} + +.icon_lists li { + width: 100px; + margin-bottom: 10px; + margin-right: 20px; + text-align: center; + list-style: none !important; + cursor: default; +} + +.icon_lists li .code-name { + line-height: 1.2; +} + +.icon_lists .icon { + display: block; + height: 100px; + line-height: 100px; + font-size: 42px; + margin: 10px auto; + color: #333; + -webkit-transition: font-size 0.25s linear, width 0.25s linear; + -moz-transition: font-size 0.25s linear, width 0.25s linear; + transition: font-size 0.25s linear, width 0.25s linear; +} + +.icon_lists .icon:hover { + font-size: 100px; +} + +.icon_lists .svg-icon { + /* 通过设置 font-size 来改变图标大小 */ + width: 1em; + /* 图标和文字相邻时，垂直对齐 */ + vertical-align: -0.15em; + /* 通过设置 color 来改变 SVG 的颜色/fill */ + fill: currentColor; + /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 + normalize.css 中也包含这行 */ + overflow: hidden; +} + +.icon_lists li .name, +.icon_lists li .code-name { + color: #666; +} + +/* markdown 样式 */ +.markdown { + color: #666; + font-size: 14px; + line-height: 1.8; +} + +.highlight { + line-height: 1.5; +} + +.markdown img { + vertical-align: middle; + max-width: 100%; +} + +.markdown h1 { + color: #404040; + font-weight: 500; + line-height: 40px; + margin-bottom: 24px; +} + +.markdown h2, +.markdown h3, +.markdown h4, +.markdown h5, +.markdown h6 { + color: #404040; + margin: 1.6em 0 0.6em 0; + font-weight: 500; + clear: both; +} + +.markdown h1 { + font-size: 28px; +} + +.markdown h2 { + font-size: 22px; +} + +.markdown h3 { + font-size: 16px; +} + +.markdown h4 { + font-size: 14px; +} + +.markdown h5 { + font-size: 12px; +} + +.markdown h6 { + font-size: 12px; +} + +.markdown hr { + height: 1px; + border: 0; + background: #e9e9e9; + margin: 16px 0; + clear: both; +} + +.markdown p { + margin: 1em 0; +} + +.markdown>p, +.markdown>blockquote, +.markdown>.highlight, +.markdown>ol, +.markdown>ul { + width: 80%; +} + +.markdown ul>li { + list-style: circle; +} + +.markdown>ul li, +.markdown blockquote ul>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown>ul li p, +.markdown>ol li p { + margin: 0.6em 0; +} + +.markdown ol>li { + list-style: decimal; +} + +.markdown>ol li, +.markdown blockquote ol>li { + margin-left: 20px; + padding-left: 4px; +} + +.markdown code { + margin: 0 3px; + padding: 0 5px; + background: #eee; + border-radius: 3px; +} + +.markdown strong, +.markdown b { + font-weight: 600; +} + +.markdown>table { + border-collapse: collapse; + border-spacing: 0px; + empty-cells: show; + border: 1px solid #e9e9e9; + width: 95%; + margin-bottom: 24px; +} + +.markdown>table th { + white-space: nowrap; + color: #333; + font-weight: 600; +} + +.markdown>table th, +.markdown>table td { + border: 1px solid #e9e9e9; + padding: 8px 16px; + text-align: left; +} + +.markdown>table th { + background: #F7F7F7; +} + +.markdown blockquote { + font-size: 90%; + color: #999; + border-left: 4px solid #e9e9e9; + padding-left: 0.8em; + margin: 1em 0; +} + +.markdown blockquote p { + margin: 0; +} + +.markdown .anchor { + opacity: 0; + transition: opacity 0.3s ease; + margin-left: 8px; +} + +.markdown .waiting { + color: #ccc; +} + +.markdown h1:hover .anchor, +.markdown h2:hover .anchor, +.markdown h3:hover .anchor, +.markdown h4:hover .anchor, +.markdown h5:hover .anchor, +.markdown h6:hover .anchor { + opacity: 1; + display: inline-block; +} + +.markdown>br, +.markdown>p>br { + clear: both; +} + + +.hljs { + display: block; + background: white; + padding: 0.5em; + color: #333333; + overflow-x: auto; +} + +.hljs-comment, +.hljs-meta { + color: #969896; +} + +.hljs-string, +.hljs-variable, +.hljs-template-variable, +.hljs-strong, +.hljs-emphasis, +.hljs-quote { + color: #df5000; +} + +.hljs-keyword, +.hljs-selector-tag, +.hljs-type { + color: #a71d5d; +} + +.hljs-literal, +.hljs-symbol, +.hljs-bullet, +.hljs-attribute { + color: #0086b3; +} + +.hljs-section, +.hljs-name { + color: #63a35c; +} + +.hljs-tag { + color: #333333; +} + +.hljs-title, +.hljs-attr, +.hljs-selector-id, +.hljs-selector-class, +.hljs-selector-attr, +.hljs-selector-pseudo { + color: #795da3; +} + +.hljs-addition { + color: #55a532; + background-color: #eaffea; +} + +.hljs-deletion { + color: #bd2c00; + background-color: #ffecec; +} + +.hljs-link { + text-decoration: underline; +} + +/* 代码高亮 */ +/* PrismJS 1.15.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, +pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, +code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, +pre[class*="language-"] ::selection, +code[class*="language-"]::selection, +code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre)>code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre)>code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #9a6e3a; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function, +.token.class-name { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} + +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/demo_index.html b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/demo_index.html new file mode 100644 index 0000000..878dbbf --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/demo_index.html @@ -0,0 +1,418 @@ + + + + + iconfont Demo + + + + + + + + + + + + + +
+

+ + +

+
+
    +
  • Unicode
    • +
  • Font class
    • +
  • Symbol
    • +
+ + 查看项目 + +
+
+
+
    + +
  • + +
    favorites-fill
    +
    
    +
    • + +
  • + +
    cart- full
    +
    
    +
    • + +
  • + +
    browse
    +
    
    +
    • + +
  • + +
    comment
    +
    
    +
    • + +
  • + +
    customer-service
    +
    
    +
    • + +
  • + +
    fabulous
    +
    
    +
    • + +
  • + +
    mobile-phone
    +
    
    +
    • + +
  • + +
    search
    +
    
    +
    • + +
  • + +
    arrow-left-bold
    +
    
    +
    • + +
  • + +
    arrow-right-bold
    +
    
    +
    • + +
+
+

Unicode 引用

+
+ +

Unicode 是字体在网页端最原始的应用方式，特点是：

+
    +
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • +
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • +
+
+

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

+
+

Unicode 使用步骤如下：

+

第一步：拷贝项目下面生成的 @font-face

+
@font-face {
+  font-family: 'iconfont';
+  src: url('iconfont.woff2?t=1665647794908') format('woff2'),
+       url('iconfont.woff?t=1665647794908') format('woff'),
+       url('iconfont.ttf?t=1665647794908') format('truetype');
+}
+
+

第二步：定义使用 iconfont 的样式

+
.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+

第三步：挑选相应图标并获取字体编码，应用于页面

+
+<span class="iconfont">&#x33;</span>
+
+
+

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    + favorites-fill +
    +
    .icon-favorites-fill +
    +
    • + +
  • + +
    + cart- full +
    +
    .icon-cart-full +
    +
    • + +
  • + +
    + browse +
    +
    .icon-browse +
    +
    • + +
  • + +
    + comment +
    +
    .icon-comment +
    +
    • + +
  • + +
    + customer-service +
    +
    .icon-customer-service +
    +
    • + +
  • + +
    + fabulous +
    +
    .icon-fabulous +
    +
    • + +
  • + +
    + mobile-phone +
    +
    .icon-mobile-phone +
    +
    • + +
  • + +
    + search +
    +
    .icon-search +
    +
    • + +
  • + +
    + arrow-left-bold +
    +
    .icon-arrow-left-bold +
    +
    • + +
  • + +
    + arrow-right-bold +
    +
    .icon-arrow-right-bold +
    +
    • + +
+
+

font-class 引用

+
+ +

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

+

与 Unicode 使用方式相比，具有如下特点：

+
    +
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • +
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 fontclass 代码：

+
<link rel="stylesheet" href="./iconfont.css">
+
+

第二步：挑选相应图标并获取类名，应用于页面：

+
<span class="iconfont icon-xxx"></span>
+
+
+

" + iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

+
+
+
+
+
    + +
  • + +
    favorites-fill
    +
    #icon-favorites-fill
    +
    • + +
  • + +
    cart- full
    +
    #icon-cart-full
    +
    • + +
  • + +
    browse
    +
    #icon-browse
    +
    • + +
  • + +
    comment
    +
    #icon-comment
    +
    • + +
  • + +
    customer-service
    +
    #icon-customer-service
    +
    • + +
  • + +
    fabulous
    +
    #icon-fabulous
    +
    • + +
  • + +
    mobile-phone
    +
    #icon-mobile-phone
    +
    • + +
  • + +
    search
    +
    #icon-search
    +
    • + +
  • + +
    arrow-left-bold
    +
    #icon-arrow-left-bold
    +
    • + +
  • + +
    arrow-right-bold
    +
    #icon-arrow-right-bold
    +
    • + +
+
+

Symbol 引用

+
+ +

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 + 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

+
    +
  • 支持多色图标了，不再受单色限制。
    • +
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • +
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • +
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • +
+

使用步骤如下：

+

第一步：引入项目下面生成的 symbol 代码：

+
<script src="./iconfont.js"></script>
+
+

第二步：加入通用 CSS 代码（引入一次就行）：

+
<style>
+.icon {
+  width: 1em;
+  height: 1em;
+  vertical-align: -0.15em;
+  fill: currentColor;
+  overflow: hidden;
+}
+</style>
+
+

第三步：挑选相应图标并获取类名，应用于页面：

+
<svg class="icon" aria-hidden="true">
+  <use xlink:href="#icon-xxx"></use>
+</svg>
+
+
+
+ +
+
+ + + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.css b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.css new file mode 100644 index 0000000..5dea8bb --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.css @@ -0,0 +1,55 @@ +@font-face { + font-family: "iconfont"; /* Project id 3703850 */ + src: url('iconfont.woff2?t=1665647794908') format('woff2'), + url('iconfont.woff?t=1665647794908') format('woff'), + url('iconfont.ttf?t=1665647794908') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +.icon-favorites-fill:before { + content: "\e721"; +} + +.icon-cart-full:before { + content: "\e746"; +} + +.icon-browse:before { + content: "\e666"; +} + +.icon-comment:before { + content: "\e668"; +} + +.icon-customer-service:before { + content: "\e66a"; +} + +.icon-fabulous:before { + content: "\e66f"; +} + +.icon-mobile-phone:before { + content: "\e678"; +} + +.icon-search:before { + content: "\e67d"; +} + +.icon-arrow-left-bold:before { + content: "\e685"; +} + +.icon-arrow-right-bold:before { + content: "\e687"; +} + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.js b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.js new file mode 100644 index 0000000..e398e27 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.js @@ -0,0 +1 @@ +window._iconfont_svg_string_3703850='',function(e){var t=(t=document.getElementsByTagName("script"))[t.length-1],c=t.getAttribute("data-injectcss"),t=t.getAttribute("data-disable-injectsvg");if(!t){var o,i,n,l,a,s=function(t,c){c.parentNode.insertBefore(t,c)};if(c&&!e.__iconfont__svg__cssinject__){e.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(t){console&&console.log(t)}}o=function(){var t,c=document.createElement("div");c.innerHTML=e._iconfont_svg_string_3703850,(c=c.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",c=c,(t=document.body).firstChild?s(c,t.firstChild):t.appendChild(c))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(o,0):(i=function(){document.removeEventListener("DOMContentLoaded",i,!1),o()},document.addEventListener("DOMContentLoaded",i,!1)):document.attachEvent&&(n=o,l=e.document,a=!1,h(),l.onreadystatechange=function(){"complete"==l.readyState&&(l.onreadystatechange=null,d())})}function d(){a||(a=!0,n())}function h(){try{l.documentElement.doScroll("left")}catch(t){return void setTimeout(h,50)}d()}}(window); \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.json b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.json new file mode 100644 index 0000000..bf19b0c --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.json @@ -0,0 +1,79 @@ +{ + "id": "3703850", + "name": "no name", + "font_family": "iconfont", + "css_prefix_text": "icon-", + "description": "", + "glyphs": [ + { + "icon_id": "11481317", + "name": "favorites-fill", + "font_class": "favorites-fill", + "unicode": "e721", + "unicode_decimal": 59169 + }, + { + "icon_id": "11487995", + "name": "cart- full", + "font_class": "cart-full", + "unicode": "e746", + "unicode_decimal": 59206 + }, + { + "icon_id": "15838432", + "name": "browse", + "font_class": "browse", + "unicode": "e666", + "unicode_decimal": 58982 + }, + { + "icon_id": "15838447", + "name": "comment", + "font_class": "comment", + "unicode": "e668", + "unicode_decimal": 58984 + }, + { + "icon_id": "15838453", + "name": "customer-service", + "font_class": "customer-service", + "unicode": "e66a", + "unicode_decimal": 58986 + }, + { + "icon_id": "15838479", + "name": "fabulous", + "font_class": "fabulous", + "unicode": "e66f", + "unicode_decimal": 58991 + }, + { + "icon_id": "15838513", + "name": "mobile-phone", + "font_class": "mobile-phone", + "unicode": "e678", + "unicode_decimal": 59000 + }, + { + "icon_id": "15838525", + "name": "search", + "font_class": "search", + "unicode": "e67d", + "unicode_decimal": 59005 + }, + { + "icon_id": "15838561", + "name": "arrow-left-bold", + "font_class": "arrow-left-bold", + "unicode": "e685", + "unicode_decimal": 59013 + }, + { + "icon_id": "15838566", + "name": "arrow-right-bold", + "font_class": "arrow-right-bold", + "unicode": "e687", + "unicode_decimal": 59015 + } + ] +} diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.ttf b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.ttf new file mode 100644 index 0000000..e42959a Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.ttf differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.woff b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.woff new file mode 100644 index 0000000..c1de667 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.woff differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.woff2 b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.woff2 new file mode 100644 index 0000000..5a1df71 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/iconfont/iconfont.woff2 differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/app.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/app.png new file mode 100644 index 0000000..e255edb Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/app.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/logo.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/logo.png new file mode 100644 index 0000000..beb8681 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/logo.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/sprite.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/sprite.png new file mode 100644 index 0000000..0c3a697 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/sprite.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/wechat.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/wechat.png new file mode 100644 index 0000000..e255edb Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/images/wechat.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/index.html b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/index.html new file mode 100644 index 0000000..c0ee473 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/index.html @@ -0,0 +1,56 @@ + + + + + + + + Document + + + + + + + +
+
+ +
+
+ +
+ +
+ +
+
+ + +
+
+ 购物车 +
+
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/banner1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/banner1.png new file mode 100644 index 0000000..a00bf2f Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/banner1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes1.png new file mode 100644 index 0000000..0b274cc Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes2.png new file mode 100644 index 0000000..b11659c Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes3.png new file mode 100644 index 0000000..05a5815 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes4.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes4.png new file mode 100644 index 0000000..4d5f1d1 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes4.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes5.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes5.png new file mode 100644 index 0000000..e10a8f4 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes5.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes6.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes6.png new file mode 100644 index 0000000..b5ccb7e Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes6.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes7.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes7.png new file mode 100644 index 0000000..56d94a0 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes7.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes8.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes8.png new file mode 100644 index 0000000..307392a Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/clothes8.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/colthes_left.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/colthes_left.png new file mode 100644 index 0000000..f2c89b3 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/colthes_left.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh1.png new file mode 100644 index 0000000..3742c35 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh2.png new file mode 100644 index 0000000..a18c085 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh3.png new file mode 100644 index 0000000..d1ed9e3 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh4.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh4.png new file mode 100644 index 0000000..74e0182 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh4.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh5.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh5.png new file mode 100644 index 0000000..ada9187 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh5.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh6.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh6.png new file mode 100644 index 0000000..45629c3 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh6.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh7.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh7.png new file mode 100644 index 0000000..30c1710 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh7.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh8.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh8.png new file mode 100644 index 0000000..d718902 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh8.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh_left.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh_left.png new file mode 100644 index 0000000..368b5c6 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/fresh_left.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods1.png new file mode 100644 index 0000000..08b11db Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods2.png new file mode 100644 index 0000000..2da1689 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods3.png new file mode 100644 index 0000000..f4f8faa Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods4.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods4.png new file mode 100644 index 0000000..16a3dbc Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/goods4.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home1.png new file mode 100644 index 0000000..842b4a5 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home2.png new file mode 100644 index 0000000..0ad1e9e Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home3.png new file mode 100644 index 0000000..e40bfc3 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home4.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home4.png new file mode 100644 index 0000000..e1a71f5 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home4.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home5.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home5.png new file mode 100644 index 0000000..bedc3e5 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home5.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home6.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home6.png new file mode 100644 index 0000000..831c1c1 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home6.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home7.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home7.png new file mode 100644 index 0000000..85deb6f Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home7.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home8.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home8.png new file mode 100644 index 0000000..3265c38 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home8.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home_left.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home_left.png new file mode 100644 index 0000000..2bf0c8e Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/home_left.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot1.png new file mode 100644 index 0000000..0571d40 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot2.png new file mode 100644 index 0000000..f02bc65 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot3.png new file mode 100644 index 0000000..7189f25 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot4.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot4.png new file mode 100644 index 0000000..6ad157d Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot4.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot5.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot5.png new file mode 100644 index 0000000..7542a4b Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/hot5.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen1.png new file mode 100644 index 0000000..0893ec0 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen2.png new file mode 100644 index 0000000..6553507 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen3.png new file mode 100644 index 0000000..86c04a5 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen4.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen4.png new file mode 100644 index 0000000..e15a18b Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen4.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen5.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen5.png new file mode 100644 index 0000000..b3e8e37 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen5.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen6.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen6.png new file mode 100644 index 0000000..d2a465f Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen6.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen7.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen7.png new file mode 100644 index 0000000..a4838f8 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen7.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen8.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen8.png new file mode 100644 index 0000000..1460d51 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen8.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen_left.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen_left.png new file mode 100644 index 0000000..6f6265e Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/kitchen_left.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend1.png new file mode 100644 index 0000000..c43dc27 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend2.png new file mode 100644 index 0000000..4ffd593 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend3.png new file mode 100644 index 0000000..91edff8 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend4.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend4.png new file mode 100644 index 0000000..6f86c82 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/recommend4.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic1.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic1.png new file mode 100644 index 0000000..cae3784 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic1.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic2.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic2.png new file mode 100644 index 0000000..b42ba43 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic2.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic3.png b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic3.png new file mode 100644 index 0000000..0865c8c Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/小兔鲜练习/uploads/topic3.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/1.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/1.jpg new file mode 100644 index 0000000..fddc5d7 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/1.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/1.svg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/1.svg new file mode 100644 index 0000000..fdcaa9e --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/1.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/2.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/2.jpg new file mode 100644 index 0000000..e6dd473 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/2.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/2.svg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/2.svg new file mode 100644 index 0000000..c80aa2b --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/2.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/3.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/3.jpg new file mode 100644 index 0000000..fced56f Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/3.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/3.svg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/3.svg new file mode 100644 index 0000000..14c353f --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/3.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/4.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/4.jpg new file mode 100644 index 0000000..db96ae5 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/4.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/4.svg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/4.svg new file mode 100644 index 0000000..a3c36e3 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/4.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner1.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner1.jpg new file mode 100644 index 0000000..45c98d2 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner1.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner2.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner2.jpg new file mode 100644 index 0000000..d51edbc Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner2.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner3.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner3.jpg new file mode 100644 index 0000000..afd0152 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/banner3.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/bk.png b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/bk.png new file mode 100644 index 0000000..0f3b1fa Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/bk.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/img.gif b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/img.gif new file mode 100644 index 0000000..2c884ee Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/img.gif differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/liveSDK.svg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/liveSDK.svg new file mode 100644 index 0000000..943673e --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/liveSDK.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/photo.jpg b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/photo.jpg new file mode 100644 index 0000000..56fa85d Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/photo.jpg differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/square.png b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/square.png new file mode 100644 index 0000000..31983ce Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/square.png differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/vue.mp4 b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/vue.mp4 new file mode 100644 index 0000000..89aa0a6 Binary files /dev/null and b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/images/vue.mp4 differ diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例1-个人简介.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例1-个人简介.html new file mode 100644 index 0000000..2ce2c8a --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例1-个人简介.html @@ -0,0 +1,21 @@ + + + + + + Document + + +

尤雨溪

+
+

尤雨溪，前端框架Vue.js的作者，HTML5版Clear的打造人，独立开源开发者。曾就职于Google Creative Labs和Meteor Development Group。由于工作中大量接触开源的项目JavaScript，最后自己也走上了开源之路，现全职开发和维护Vue.js。

+ +

学习经历

+

尤雨溪毕业于上海复旦附中，在美国完成大学学业，本科毕业于Colgate University，后在Parsons设计学院获得Design & Technology艺术硕士学位，任职于纽约Google Creative Lab。

+

主要成就

+

尤雨溪大学专业并非是计算机专业，在大学期间他学习专业是室内艺术和艺术史，后来读了美术设计和技术的硕士， 正是在读硕士期间，他偶然接触到了JavaScript ，从此被这门编程语言深深吸引，开启了自己的前端生涯 。

+

2014年2月，开发了一个前端开发库Vue.js。Vue.js 是构建 Web 界面的 JavaScript 框架，是一个通过简洁的API提供高效的数据绑定和灵活的组件系统。

+

社会任职

+

2016年9月3日，在南京的JSConf上，Vue作者尤雨溪正式宣布加盟阿里巴巴Weex团队，尤雨溪称他将以技术顾问的身份加入Weex团队来做 Vue 和 Weex 的 JavaScript runtime 整合，目标是让大家能用 Vue 的语法跨三端。

+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例10-产品卡片.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例10-产品卡片.html new file mode 100644 index 0000000..927180a --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例10-产品卡片.html @@ -0,0 +1,40 @@ + + + + + + Document + + + +
+ +

抖音直播SDK

+

包含抖音直播看播功能

+
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例11-新闻列表.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例11-新闻列表.html new file mode 100644 index 0000000..be7ed98 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例11-新闻列表.html @@ -0,0 +1,69 @@ + + + + + + Document + + + +
+ 新闻 + +
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例12-抖音解决方案.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例12-抖音解决方案.html new file mode 100644 index 0000000..1f90cd7 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例12-抖音解决方案.html @@ -0,0 +1,63 @@ + + + + + + Document + + + +
+ +
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例13-过渡.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例13-过渡.html new file mode 100644 index 0000000..684af0e --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例13-过渡.html @@ -0,0 +1,24 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例14-轮播图.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例14-轮播图.html new file mode 100644 index 0000000..c28e405 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例14-轮播图.html @@ -0,0 +1,73 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例15-双开门.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例15-双开门.html new file mode 100644 index 0000000..4cfcc62 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例15-双开门.html @@ -0,0 +1,51 @@ + + + + + + Document + + + +
+
+
+
+ +
+
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例16-时钟.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例16-时钟.html new file mode 100644 index 0000000..df55dd7 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例16-时钟.html @@ -0,0 +1,15 @@ + + + + + + Document + + +
+
+
+
+
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例2-Vue简介.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例2-Vue简介.html new file mode 100644 index 0000000..59aaa08 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例2-Vue简介.html @@ -0,0 +1,18 @@ + + + + + + Document + + +

Vue.js

+

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。 [5] 与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用（SPA）提供驱动。

+

其作者为尤雨溪

+

主要功能

+

Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

+

Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

+

Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时 [2] ，Vue.js 也能驱动复杂的单页应用。

+ + + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例3-新闻列表.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例3-新闻列表.html new file mode 100644 index 0000000..a9f7ff6 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例3-新闻列表.html @@ -0,0 +1,23 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例4-注册信息.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例4-注册信息.html new file mode 100644 index 0000000..c111e1c --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例4-注册信息.html @@ -0,0 +1,90 @@ + + + + + + Document + + +

注册信息

+
+

个人信息

+ +

+ +

+ +

+ +

+ +

教育经历

+ +

+ +

+ +

+ +

工作经历

+ +

+ +

已阅读并同意以下协议

+ +

+ + +
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例5-新闻详情.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例5-新闻详情.html new file mode 100644 index 0000000..557ac7e --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例5-新闻详情.html @@ -0,0 +1,49 @@ + + + + + + Document + + + +

在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收

+

来源：央视网 | 2222年12月12日 12:12:12

+

央视网消息：眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。

+

中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。

+
+

王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。

+

此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。

+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例6-CSS简介.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例6-CSS简介.html new file mode 100644 index 0000000..e13da4e --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例6-CSS简介.html @@ -0,0 +1,35 @@ + + + + + + Document + + + +

CSS（层叠样式表）

+

层叠样式表 (Cascading Style Sheets，缩写为 CSS），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

+

CSS 是开放网络的核心语言之一，由 W3C 规范 实现跨浏览器的标准化。CSS 节省了大量的工作。 样式可以通过定义保存在外部.css 文件中，同时控制多个网页的布局，这意味着开发者不必经历在所有网页上编辑布局的麻烦。CSS 被分为不同等级：CSS1 现已废弃， CSS2.1 是推荐标准， CSS3 分成多个小模块且正在标准化中。

+ + + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例7-热词.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例7-热词.html new file mode 100644 index 0000000..f4684d5 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例7-热词.html @@ -0,0 +1,40 @@ + + + + + + Document + + + +
+ HTML + CSS + JavaScript + Vue + React +
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例8-banner效果.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例8-banner效果.html new file mode 100644 index 0000000..973eb97 --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例8-banner效果.html @@ -0,0 +1,45 @@ + + + + + + Document + + + +
+

让创造产生价值

+

我们希望小游戏平台可以提供无限的可能性，让每一个创作者都可以将他们的才华和创意传递给用户。

+ 我要报名 +
+ + \ No newline at end of file diff --git a/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例9-结构伪类选择器.html b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例9-结构伪类选择器.html new file mode 100644 index 0000000..ffc423d --- /dev/null +++ b/开发/前端/HTMLCSS/HTMLCSS练习/综合案例/综合案例9-结构伪类选择器.html @@ -0,0 +1,25 @@ + + + + + + Document + + + + + + \ No newline at end of file diff --git a/开发/前端/HTML手册.md b/开发/前端/HTML手册.md new file mode 100644 index 0000000..044bbc2 --- /dev/null +++ b/开发/前端/HTML手册.md @@ -0,0 +1,831 @@ +# HTML手册 + +## 标题标签 + +``` +h1~h6 +文字加粗 +字号逐渐减小 +独占一行 +``` + +## 段落标签 + +``` +p +独占一行 +段落之间存在间隙 +``` + +## 换行标签 + +``` +br +``` + +## 水平线标签 + +``` +hr +``` + +## 文本格式化标签 + +``` +strong 加粗 +em 倾斜 +ins 下划线 +del 删除线 +``` + +## 图像标签 + +``` +img +属性： + src 图片url + alt 替换文本 + title 鼠标悬浮在图片上提示文本 + width 图片高度 + height 图片高度 +``` + +## 超链接 + +``` +a +属性： + href 跳转地址 + target="_blank" 新窗口打开页面 +``` + +## 音频标签 + +``` +audio +属性： + src 音频URL + controls 显示视频控制面板 + loop 循环播放 + autoplay 自动播放 +``` + +## 视频标签 + +``` +video +属性： + src 视频url + controls 显示视频控制面板 + muted 静音播放 + loop 循环播放 + autoplay 自动播放 +``` + +## 列表标签 + +``` +ul 无序列表 +ol 有序列表 + li 列表项 能放任何东西 +dl 定义列表 + dt 列表标题 + dd 列表项 +``` + +## 表格标签 + +``` +table 表格 + tr 行 + th 头 + td 列 +``` + +## 合并表格 + +``` +rowspan 行跨几行 +colspan 列跨几行 +``` + +## 表单 + +``` +form +``` + +## 输入标签 + +``` +input +属性： + type + text 文本框 + password 密码框 + radio 单选框 + name 同组中只能选一个 + checked 默认选中 + checkbox 多选框 + file 上传文件 + multiple 多选文件 + placeholder 提示信息 +``` + +## 下拉菜单 + +``` +select 下拉菜单整体 + option 每一项 + selected 默认选中 +``` + +## 文本域 + +``` +textarea +``` + +## 标签标签 + +``` +label + for id 绑定id增大选中范围 +``` + +## 按钮标签 + +``` +button + type + submit 提交按钮提交数据到后台 + reset 重置按钮 + button 普通按钮没有功能 +``` + +## 语义标签 + +``` +div 块级标签 +span 行内标签 +``` + +# CSS手册 + +## 标签选择器 + +``` +标签名 { + +} +``` + +## 类选择器 + +``` +.类名 { + +} +``` + +## id选择器 + +``` +#id名 { + +} +``` + +## 通配符选择器 + +``` +* { + +} +``` + +## 后代选择器 + +``` +div span { + 选择所有后代 +} +``` + +## 子代选择器 + +``` +div > span { + 只选择一个子代 +} +``` + +## 交集选择器 + +``` +p.box { + 选择带有类名为box的p标签 +} +``` + +## 鼠标悬停选择器 + +``` +a:hover { + 鼠标悬停 +} +``` + +## 超链接访问前选择器 + +``` +a:link { + 超链接访问前 +} +``` + +## 超链接访问后选择器 + +``` +a:visited { + 超链接访问后 +} +``` + +## 超链接点击时选择器 + +``` +a:active { + 超链接点击时 +} +``` + +## 查找第一个元素选择器 + +``` +标签:first-child +``` + +## 查找最后一个元素选择器 + +``` +标签:last-child +``` + +## 查找第N个元素选择器 + +``` +标签:nth-child(N) n从0开始 + 2n 偶数 + 2n+1 奇数 +``` + +## 添加内容选择器 + +``` +标签::before { + content : "内容" +} +``` + +``` +标签::after { + content : "内容" +} +``` + +## 继承性 + +``` +子级默认继承父级的文字控制属性 +``` + +## 层叠性 + +``` +相同的属性后面覆盖前面的 +不同的属性会叠加 +``` + +## 优先级 + +``` +直接看vscode 前面的越大越优先（id、类、标签） +``` + +## 盒子宽度 + +``` +width 宽度 +``` + +## 盒子高度 + +``` +height 高度 +``` + +## 内边距 + +``` +padding 内边距 +``` + +## 外边距 + +``` +margin +``` + +## 边框线 + +``` +border 宽度 线类型 颜色 + solid 实线 + dashed 虚线 + dotted 点线 +``` + +## 盒子尺寸 + +``` +box-sizing + border-box 内减，不会撑大盒子尺寸 +``` + +## 盒子溢出 + +``` +overflow + hidden 溢出隐藏 + scroll 溢出滚动，无论溢出与否都显示滚动条 + auto 溢出才滚动 +``` + +## 外边距合并 + +``` +垂直排列的兄弟，上下margin会合并，取最大的值生效 +``` + +## 外边距塌陷 + +``` +父子级标签，子级添加外边距会被父亲抢走 +解决方式： + 1、取消子级margin，设置父亲padding + 2、父级设置overflow: hidden + 3、父级设置border-top +``` + +## 行内元素内外边距 + +``` +行内元素添加margin、padding 无法改变元素垂直 +解决方式： + 1、给行内元素添加line-height 改变垂直位置 +``` + +## 圆角盒子 + +``` +border-radius + 数字+px +``` + +## 阴影盒子 + +``` +box-shadow +``` + +## 文字大小 + +``` +font-size 文字大小px，默认16px +``` + +## 文字粗细 + +``` +font-weight + 400 正常 + 700 加粗 +``` + +## 字体倾斜 + +``` +font-style + normal 正常 + italic 倾斜 +``` + +## 文本行高 + +``` +line-height + 等于盒子高度的时候单行文字会在盒子里垂直居中 +``` + +## 字体族 + +``` +font-family + 字体名 设置字体样式 +``` + +## 文本缩进 + +``` +text-indent + ?em 缩进几个字符 +``` + +## 文本水平对齐 + +``` +text-align + left 左对齐 + center 居中对齐 + right 右对齐 +``` + +## 文本修饰线 + +``` +text-decoration + none 无效果 + underline 下划线 + line-through 删除线 + overline 上划线 +``` + +## 文字颜色 + +``` +color + rgba（r,g,b,a） +``` + +## 背景色 + +``` +background-color +``` + +## 背景图 + +``` +background-image url() +``` + +## 背景图平铺方式 + +``` +background-repeat + no-repeat 不平铺 + repeat 平铺 + repeat-x 水平方向平铺 + repeat-y 垂直方向平铺 +``` + +## 背景图位置 + +``` +background-position + left 左侧 + right 右侧 + center 居中 + top 顶部 + bottom 底部 +``` + +## 背景图缩放 + +``` +background-size + cover 等比例缩放背景图完全覆盖背景区、可能背景图片部分看不见 + contain 等比例缩放背景图片以完全装入背景区，可能部分区域空白 +``` + +## 背景图固定 + +``` +background-attachment + fixed 固定 +``` + +## 显示模式 + +``` +display + block + 独占一行 + 宽度默认是父级的100% + 添加宽高属性生效 + lnline-block + 一行可显示多个 + 设置宽高属性不生效 + 宽高尺寸由内容撑开 + inline + 一行可以显示多个 + 设置宽高属性生效 + 宽高尺寸也可以由内容撑开 +``` + +## 浮动 + +``` +float 让块元素水平排列 + left 左对齐 + right 右对齐 + 浮动后的盒子顶对齐 + 浮动后的盒子具备行内块特点 + 浮动后的盒子脱标，不占标准流位置 + 如果父级没有高度，子级无法撑开父亲高度 +``` + +## 清除浮动 + +``` +.clearfix::before, +.clearfix::after { + content: ""; + display: table; +} + +.clearfix::after { + clear: both; +} +``` + +## Flex组成 + +``` +设置方式：给父元素设置display:flex，子元素可以自动挤压或拉伸 +组成部分： + 弹性容器 + 弹性盒子 + 主轴：默认在水平方向 + 侧州：默认在垂直方向 +``` + +## 创建flex容器 + +``` +display: flex； +``` + +## flex主轴对齐方式 + +``` +justify-content +属性： + flex-start 弹性盒子从起点开始依次排列 + flex-end 弹性盒子从终点开始依次排列 + center 弹性盒子沿主轴居中排列 + space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间 + space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧 + space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 +``` + +## flex侧轴对齐方式 + +``` +align-items 当前弹性容器内所有弹性盒子的侧轴对齐方式 +align-self 单独控制某个弹性盒子的侧轴对齐方式 +属性： + stretch 弹性盒子沿测轴线被拉伸至铺满容器 + center 弹性盒子沿测轴居中排列 + flex-start 弹性盒子从起点开始依次排列 + flex-end 弹性盒子从终点开始依次排列 +``` + +## flex主轴方向 + +``` +flex-direction 主轴默认在水平方向，侧轴默认在垂直方向 +属性： + row 水平方向，从左向右 + column 垂直方向，从上到下 + row-reverse 水平方向，从右向左 + column-reverse 垂直方向，从下向上 +``` + +## flex弹性伸缩比 + +``` +flex 控制弹性盒子的主轴方向的尺寸 整数数字，占用父级剩余尺寸份数 +``` + +## flex弹性盒子换行 + +``` +flex-wrap 弹性盒子可以自动挤压或拉伸，默认情况在，所有弹性盒子都在一行显示 +属性： + wrap 换行 + nowrap 不换行 +``` + +## flex行对齐方式 + +``` +align-content +属性： + flex-start 弹性盒子从起点开始依次排列 + flex-end 弹性盒子从终点开始依次排列 + center 弹性盒子沿主轴居中排列 + space-between 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子之间 + space-around 弹性盒子沿主轴均匀排列，空白间隙均分在弹性盒子两侧 + space-evenly 弹性盒子沿主轴均匀排列，弹性盒子与容器之间间距相等 +``` + +## 相对定位 + +``` +position: relative 设置盒子的位置 +不脱标，占用自己原来的位置 +left +right +top +bottom +值可以写50% +需要加transform:translate(-50%,-50%) +``` + +## 绝对定位 + +``` +position: absolute +脱标，不占位 +显示模式具备行内块特点 +设置偏移则相对最近的已经定位的祖先元素改变位置，所以子绝父相 +``` + +## 挪动自己大小的一半 + +``` +transform:translate(-50%,-50%) +``` + +## 固定定位 + +``` +position：fixed 元素的位置在网页滚动时不会改变 +脱标，不占位 +显示模式具备行内块特点 +``` + +## 堆叠层级 + +``` +z-index 按照标签书写位置，后来者居上，属性值为数字，取值越大，层级越高 +``` + +## 行内块垂直对齐方式 + +``` +vertical-align + bottom + top + middle +``` + +## 过渡 + +``` +transition给一个元素在不同状态之间切换的时候增加过渡效果 +加到原属性 +属性值： + 过渡的属性（可以是all） 花费的时间 +``` + +## 透明度 + +``` +opacity 设置整个元素的透明度 +``` + +## 光标类型 + +``` +cursor 鼠标悬停在元素上时显示样式 + pointer 小手效果 + text 工字型 + move 十字光标 +``` + +## 平面转换（2D转换） + +``` +transform为元素添加动态效果，改变盒子在平面的形态（位移、旋转、缩放、倾斜），通常卸载hover里 +属性值： + translate(x轴，y轴) 左/上都为负，值为像素和百分比 + rotate(旋转角度) 单位deg 取正顺时针旋转，取负逆时针旋转 + transform-origin 水平原点位置 垂直原点位置 。转换原点位置 取值left、top、right、bottom + scale(缩放倍数/x轴/y轴缩放倍数) + skew(倾斜度数) +多重转换：先平移再旋转 +``` + +## 渐变色 + +``` +linear-gradient( + 渐变方向（默认从上到下,可以to right/left/top/角度度数) + 颜色1 终点位置(百分比), + 颜色2 终点位置 +) +``` + +## 径向渐变 + +``` +radial-gradient( + 半径（可以是2条） at 圆心位置（像素单位数值/百分比/方位名词）， + 颜色 终点位置， + 颜色 终点位置， +) +``` + +## 空间平移（3D） + +``` +transform: translate3d(x,y,z) + translateX() + translateY() + translateZ() + +perspective：视距（人眼和屏幕之间的距离，建议800-1200px），给父级元素添加，子级的translateZ就生效了 +``` + +## 空间旋转（3D） + +``` +transform: 沿着哪个轴旋转 + rotateX() + rotateY() + rotateZ() +``` + +## 动画 + +``` +animation 动画名字 动画花费时间 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态 + 定义动画 + @keyframes 动画名 { + from {} + to {} + } + @keyframes 动画名 { + 0% {} + 20% {} + 100% {} + } + 速度曲线： + linear：匀速 + steps(步骤) 分步动画 + 重复次数：infinite 无限循环 + 反向：alternate + 结束状态：forwards 结束状态 backwards 开始状态 +animation-play-state 暂停动画 paused 为暂停 +``` + +## rem适配 + +``` +rem 相对于HTML标签的字号计算结果 +``` + +## 媒体查询 + +``` +@media (媒体特性[width:375px]) { + #差异化CSS样式 + 选择器 { + + } +} +``` + +## flexible.js + +``` +flexible.js是淘宝开发的一个用来适配移动端的js库，根据不同的视口宽度设置不同的fontsize +``` + +## less + +``` +less是一个CSS预处理器，Less后缀是.less。扩充了CSS语言，使CSS具备一定的逻辑性、计算能力 +``` + +## 页面丝滑滚动 + +``` +html { + scroll-behavior: smooth; +} +``` + diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript01-基础第一天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript01-基础第一天.pdf new file mode 100644 index 0000000..601fe5a Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript01-基础第一天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript02-基础第二天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript02-基础第二天.pdf new file mode 100644 index 0000000..e0f8316 Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript02-基础第二天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript03-基础第三天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript03-基础第三天.pdf new file mode 100644 index 0000000..3799dc0 Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript03-基础第三天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript04-基础第四天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript04-基础第四天.pdf new file mode 100644 index 0000000..1e2c76e Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript04-基础第四天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript05-基础第五天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript05-基础第五天.pdf new file mode 100644 index 0000000..049a8da Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript05-基础第五天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript06-web APIs 第一天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript06-web APIs 第一天.pdf new file mode 100644 index 0000000..81df31f Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript06-web APIs 第一天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript07-web APIs 第二天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript07-web APIs 第二天.pdf new file mode 100644 index 0000000..0c5d588 Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript07-web APIs 第二天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript08-web APIs 第三天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript08-web APIs 第三天.pdf new file mode 100644 index 0000000..4d649b2 Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript08-web APIs 第三天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript09-web APIs 第四天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript09-web APIs 第四天.pdf new file mode 100644 index 0000000..483bac8 Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript09-web APIs 第四天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript10-web APIs 第五天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript10-web APIs 第五天.pdf new file mode 100644 index 0000000..1e890ab Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript10-web APIs 第五天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript11-web APIs 第六天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript11-web APIs 第六天.pdf new file mode 100644 index 0000000..b63e92e Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript11-web APIs 第六天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript12-进阶第一天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript12-进阶第一天.pdf new file mode 100644 index 0000000..4d1271c Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript12-进阶第一天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript13-进阶第二天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript13-进阶第二天.pdf new file mode 100644 index 0000000..e9adc97 Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript13-进阶第二天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript14-进阶第三天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript14-进阶第三天.pdf new file mode 100644 index 0000000..501498b Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript14-进阶第三天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript文档/JavaScript15-进阶第四天.pdf b/开发/前端/JavaScript/JavaScript文档/JavaScript15-进阶第四天.pdf new file mode 100644 index 0000000..ecbed91 Binary files /dev/null and b/开发/前端/JavaScript/JavaScript文档/JavaScript15-进阶第四天.pdf differ diff --git a/开发/前端/JavaScript/JavaScript练习/综合案例1-订单详情.html b/开发/前端/JavaScript/JavaScript练习/综合案例1-订单详情.html new file mode 100644 index 0000000..866abc7 --- /dev/null +++ b/开发/前端/JavaScript/JavaScript练习/综合案例1-订单详情.html @@ -0,0 +1,78 @@ + + + + + + Document + + + + + + + \ No newline at end of file diff --git a/开发/前端/JavaScript/JavaScript练习/综合案例2-数组求最大值.html b/开发/前端/JavaScript/JavaScript练习/综合案例2-数组求最大值.html new file mode 100644 index 0000000..669f4b3 --- /dev/null +++ b/开发/前端/JavaScript/JavaScript练习/综合案例2-数组求最大值.html @@ -0,0 +1,20 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/开发/前端/JavaScript/JavaScript练习/综合案例3-销售额生成柱形图.html b/开发/前端/JavaScript/JavaScript练习/综合案例3-销售额生成柱形图.html new file mode 100644 index 0000000..b851620 --- /dev/null +++ b/开发/前端/JavaScript/JavaScript练习/综合案例3-销售额生成柱形图.html @@ -0,0 +1,127 @@ + + + + + + Document + + + +

2099年季度销售数额（单位万）

+ + + + \ No newline at end of file diff --git a/开发/前端/JavaScript/JavaScript练习/综合案例4-获取当前时间.html b/开发/前端/JavaScript/JavaScript练习/综合案例4-获取当前时间.html new file mode 100644 index 0000000..296eb6d --- /dev/null +++ b/开发/前端/JavaScript/JavaScript练习/综合案例4-获取当前时间.html @@ -0,0 +1,18 @@ + + + + + + Document + + + + + \ No newline at end of file diff --git a/开发/前端/JavaScript手册.md b/开发/前端/JavaScript手册.md new file mode 100644 index 0000000..1968d20 --- /dev/null +++ b/开发/前端/JavaScript手册.md @@ -0,0 +1,672 @@ +# JS基础 + +## 输入输出语句 + +``` +alert('页面弹出警示框') +document.write('页面打印输出') +console.log('控制台打印输出') +prompt('输入对话框') 默认取的字符串类型 +``` + +## 声明变量 + +``` +let name = 10 +``` + +## 声明常量 + +``` +const pi = 3.14 +``` + +## 基本数据类型 + +``` +number +string +boolean +undefined +null +``` + +## 引用数据类型 + +``` +Object、Function、Arry +``` + +## 字符串拼接 + +``` +`今年${age}岁了` +'今年' + age + "岁了" +``` + +## 逻辑运算符 + +``` +&& 与 +|| 或 +！ 非 +``` + +## 类型转换 + +``` +转换为数字 + Number('12') 转换为数字型 + parseInt('12') 转换为整数数字型 + parseFloat('12.5') 转换为小数数字型 +转换为字符串类型 + String(12) 转换为字符串型 + 变量.toString) 转换为字符串行 +转换为布尔型 + Boolean() +``` + +## 隐式转换 + +``` +转换为数字型 + 算数运算符 + +号作为正号可以把字符串转换成数字型 + +转换为字符串型 + +字符串拼接 + +转换为布尔型 + ！逻辑非 +``` + +## 分支语句 + +``` +if (条件) { + 语句 +} +else if (条件) { + 语句 +} else { + +} + +条件? 表达式1:表达式2 + +switch （变量） { + case 值: + 语句 + break + default： + 语句 +} +``` + +## 循环语句 + +``` +while (判断) { + 语句 +} + + +for (执行前语句;条件;执行后语句) { + 语句 +} + +break 跳出 +continue 跳过本次 +``` + +## 数组 + +``` +数组声明： + let 数组名 = [数据1,数据2] +数组长度： + arry.length +新增数组： + arry.push(元素...) 增加一个或者多个元素到 数组末尾，返回数组长度 + arry.splice(开始位置，删除个数，数据1，数据2) + arry.unshift(元素...) 增加一个或者多个元素到 数组开头，返回数组长度 +删除数组： + arry.pop() 删除最后一个元素，返回被删除的元素 + arry.splice(起始位置0开始,删除个数) + arry.shift() 删除第一个元素，返回被删除的元素 +修改数组： + arry[i] = 值 +查询数组： + arry[i] 不存在则为undefined +遍历数组： （遍历数组处理数据，并返回新数组） + const newarr = arr.map(function (ele,index) { + ele为数组元素 + index 为数组索引号 + return ... + }) +排序数组： + arry.sort() 会直接修改原数组 + 升序： + arry.sort(function(a,b){ + return a - b + }) + 降序： + arry.sort(function(b,a){ + return a - b + }) +数组转字符串： + arr.json('每个值之间插入的值') +筛选数组：filter()方法创建一个新的数组，新数组中的元素是符合条件的所有元素 + const newarr = arr.filter(function (element数组元素,index数组下标){ + return 筛选条件 + }) +遍历数组： + arr.reduce(function(){}, 起始值) + arr.reduce(function(上一次值， 当前值){}, 初始值) + +查找元素： + find +拷贝数组： + arr.prototype.cocat() +``` + +## 函数 + +``` +定义函数： + function 函数名(参数1，参数2...) { + 函数体 + return 变量 + } +调用函数： + 函数名(实参1，实参2) +匿名函数： + 函数表达式：将匿名函数赋值给一个变量，并通过变量名称进行调用 +立即执行函数： + (function(){}) () +剩余参数： + function(a,b,...other) +``` + +## 作用域 + +``` +全局： + 函数内部的变量，如果没有声明直接赋值，当全局变量用 +局部： + 函数形参为局部变量 +``` + +## 对象 + +``` +定义对象： + let people = { + name: 'lzc', + sex: 'man', + age: 18, + str: function(){ + 语句 + } + + } +访问对象： + 对象.属性 + 对象['属性'] +删除属性： + delete 对象.属性 +新增属性： + 对象.新属性 +遍历对象： + for (let key in people) { + 获取key + people[key] 只能通过此种方式获取值 + } +获取对象所有属性值 + const o = { name: 'lzc', age: 18} + const arr = Object.values(o) //数组里值为lzc 18 +获取对象所有的键： + Object.key +拷贝对象： + const o = { name: 'lzc', age: 18} + const newo = {} + Object.assign(newo,o) +``` + +## 内置对象 + +``` +Math：数学运算方法 + 方法： + PI Math属性，返回圆周率 + max(1,2) 返回最大值 + min() 返回最小值 + abs()返回绝对值 + ceil()向上取整 + floor()向下取整 + round()四舍五入取整 + random()返回一个0-1之间，包括0不包括1 +``` + +## 数据类型存储 + +``` +基本数据类型 + 存放在栈里，访问速度快 +引用类型（数组、方法、对象） + 地址存放在栈里，数据存放在堆里，导致let x = 10; y=x 的时候，y随x变化而变化 +``` + +# WEB API + +## 获取DOM对象 + +``` +document.querySelector('css选择器') 获取指定的第一个元素 + +document.querySelectorAll() 获取指定的所有元素 + 得到一个伪数组（无法使用数组方法，仅能使用下标及长度） + +getElementsById 通过ID +getElementsByClassName 类名 +getElementsByTagName 标签名 +getElementsByName name属性 +``` + +## 操作元素内容 + +``` +元素.innerText 操作元素内容，不解析标签 + + 增： + 元素.innerText = '新值' + 删： + 元素.innerText = '' + 改： + 元素.innerText = '新值' + 查： + 元素.innerText + +元素.innerHTML 操作元素内容，解析标签 +``` + +## 操作元素属性 + +``` +元素.src .title .href +表单.value .type +``` + +## 操作元素样式 + +``` +元素.style.width 通过style操作样式(如果有-，采用小驼峰命名比如marginTop) +元素.className 通过类名操作样式 +元素.classList.add() 增加类名 +元素.classList.remove() 删除类名 +元素.classList.toggle() 切换类名 +``` + +## 间隔函数 + +``` +setInterval(函数,间隔时间单位ms) + +关闭定时器 + let 变量 = setInterval(函数，间隔时间) + clearInterval（变量） +``` + +## 延迟函数 + +``` +setTimeout（回调函数，等待的毫秒数） 只执行一次 + +关闭延迟函数 +clearTimeout() +``` + +## 自定义属性 + +``` +可以在标签上加 data-自定义属性名 +在dom上通过dataset获取 +元素.dataset.自定义属性名 +``` + +## 事件 + +``` +元素对象.addEventListener('事件类型',事件处理函数) + 事件类型： + 鼠标事件： + click 点击 + mouseenter 鼠标进入(没有冒泡) + mouseleave 鼠标离开（没有冒泡） + 焦点事件： + focus 获取脚垫 + blur 失去焦点 + 键盘事件： + keydown 键盘按下 + keyup 键盘 + 文本事件： + input 当表单value 被修改时触发 + 页面加载事件： + load 等待所有的外部资源加载完后触发，包括图片、外部CSS，对象为window + window.addEventLinstener() + DOMContentLoaded 等待html加载完就触发，对象为document + 页面滚动事件： + scroll 监听用户把页面滚动到某个区域做一些处理，比如固定导航栏，监听在window上 + 获取被卷去的左侧（scrollLeft）和头部（scrollTop） + 获取当前滚动的长度 document.documentElement.scrollTop + 页面尺寸事件： + resize 监听在window上 + 获取当前元素的宽度clientWidth + 获取当前元素的高度clientHeight + M端事件（移动端触屏事件）： + touchstart： 手指触屏开始事件 + touchmove： 手指触屏滑动事件 + touchend： 手指触屏结束事件 + 事件对象： + e.key 判断用户按下哪个键 + 环境对象： + this 谁调用，指向谁 +``` + +## 事件对象 + +``` +回调函数中的第一个参数即为事件对象 + 元素对象.addEventListener('事件类型',事件处理函数（e）{ + e.key #按下了哪个键 + }) +``` + +## 环境对象 + +``` +函数内部的特殊对象 this ，收当前环境影响（通常指向调用方） + 全局环境/普通函数下： + this 指向window 对象 + 对象方法： + this 指向对象 + 事件 谁调用 指向谁 +``` + +## 事件流 + +``` +事件完整执行过程中的流动路径，两个阶段，捕获阶段、冒泡阶段 + 事件捕获：当一个元素的事件被触发时，会从DOM的跟元素开始依次调用同名事件（从外到里） + 事件冒泡：当一个元素触发事件时，会依次向上调用父级元素的同名事件 + 阻止冒泡： + 事件对象.stopPropagation() +``` + +## 事件委托 + +``` +原本需要注册在子元素的事件委托给父元素，让父元素监听 + 获取事件对象目标元素 + 事件.target.tagName +``` + +## 阻止默认行为 + +``` +当点击提交的时候阻止对表单的提交 +阻止链接的跳转 +``` + +## 移除事件监听 + +``` +removeEventListener(事件类型, 事件处理函数（匿名函数无法移除））, 获取捕获或者冒泡阶段) +``` + +## 元素尺寸与位置 + +``` +元素尺寸： + clientWidth/clientHeight 不带边框 + offsetWidth/offsetHeight 带边框的大小 + +元素位置： + offsetLeft/offsetTop 元素距离页面的左上距离 +``` + +## 日期对象 + +``` +获取当前时间 + const date = new Date() +得到指定的日期和事件 + const date = new Data('yyyy-mm-dd hh-mm-ss') +方法： + getFullYear（）获取年份 + getMonth（）获取月份 + getDate（）获取月份中的每一天 + getDay() 获取星期 + getHours() 获取小时 + getMinutes（）获取分钟 + getSeconds（） 获取秒 + +其他方法： + toLocaleString() 返回该日期对象的字符串（包含日期和时间） + toLocaleDateString() 返回日期对象日期部分的字符串 + toLocaleTimeString() 返回日期对象时间部分的字符串 +``` + +## 时间戳 + +``` +获取时间戳 + +new Date() 获取当前时间，（）里加时间格式就会自动转换 +``` + +## DOM节点 + +``` +可以利用节点关系查找节点 + 父节点查找： parentNode 返回最近一级的父节点对象，找不到返回为null + 子节点查找： children 返回最近一级的子节点对象 + 兄弟节点查找：nextElementSibling/previousElementSibling +``` + +## 节点操作 + +``` +创建节点： + document.createElement('标签名') +追加节点： + element.append() 放到父元素的最后面 + element.prepend（） 放到第一个子元素前面 +删除节点： + element.remove() 把对象从他所属的DOM树中删除 +``` + +## BOM浏览器对象模型 + +``` +window（全局对象、顶级对象） + navigator：记录了浏览器自身的相关信息（ua） + location：拆分保存了URL地址的各个组成部分 + document： + history：管理历史记录，前进后退 + screen： +``` + +## location对象 + +``` +href属性：得到完整的地址，赋值则是跳转到新地址 +search属性：得到？ 后面的地址 +hash属性：得到#后面的地址 +reload方法： 刷新页面 +``` + +## history对象 + +``` +管理历史记录，做前进、后退功能 + back() 后退 + forward() 前进 + go() 前进后退功能（1为前进，-1为后退） +``` + +## 本地存储 + +``` +localStorage 长久存储在浏览器中，刷新或者关闭页面也不丢失，无法存储复杂类型，直接存字符串 + setItem(key,value)：存储数据 + getItem(key)：读取数据 + removeItem(key)：删除数据 + +sessionStorage 当浏览器被关闭时，存储在这里的数据会被清除 + 方法和上面一致 +``` + +## 复杂数据类型转JSON字符串 + +``` +JSON.stringify(复杂数据) +JSON.parse(字符串) +``` + +## 正则表达式 + +``` +const reg = 定义规则 +reg.test(字符串) 匹配则为真 + +表达式： + ^：匹配行首 + $：匹配行尾 + *：重复0次或多次 + +：重复1次或多次 + ?：重复0次或1次 + {n}：重复n次 + {n,}：重复n次或者更多次 + {n,m}：重复n到m次 + [abc]：匹配其中一个 + [a-z]：匹配a-z中的一个 + [^abc]：排除abc + \d：匹配数字 + \D：匹配0-9以外的字符 + \w：匹配任意字母、数字和下划线 + \W：与w相反 + \s：匹配空格（换行符、制表符） + \S：取反 +``` + +## 替换 + +``` +字符串.replace（/正则/，'替换的文本'） +``` + +## 展开运算符 + +``` +... 将一个数组/对象进行展开 + ...arr +``` + +## 箭头函数 + +``` +用于替代匿名函数 +const fn = function() { + console.log('匿名函数'） +} +fn() + +const fn = () => { + console.log('箭头函数') +} +fn() + +如果只有一个形参可以省略小括号 + const fn = x => { + 语句 + } +如果函数只用一句代码，则可以省略大括号，这句代码就是返回值 + const fn = x => 1+1 +如果返回的是一个对象，则需要用小括号把对象包裹起来 + const fn = () => ({ name: 'lzc' }) +``` + +## 对象属性和方法简写 + +``` +在对象中，如果属性名和属性值一致，可以简写只写属性名 +对象中，方法可以简写 +``` + +## 解构 + +``` +数组解构： + const [max,min,avg] = [1,2,3] + max = 1 +对象解构： + const { max, min, avg } = user + 重命名： + const { 原名：新名 } = user +对象数组解构： +``` + +## 构造函数 + +``` +命名以大写字谜开头，用new构造 +function 名字(参数1，参数2) { + this.实参1=形参1 #实例成员 + this.实参2=形参2 +} + +名字.参数 = 值 静态成员 + +const People = new 名字('实参1','实参2') + +实例成员： + 实力对象的属性和方法即为实例成员 + 实力对象互相独立 +静态成员： + 构造函数的属性和方法被称为静态成员 +``` + +## 异常处理 + +``` +throw 抛出异常，程序终止运行 + throw new Error('错误描述') +try试试/catch拦住/finally 最后 捕获错误信息 +try { + 可能出错的语句 +} catch (error) { + 出现错误才执行 +} finally { + 不管如何都执行 +} +``` + +## 改变this + +``` +bind() +fun.bind(在fun函数运行指定的this值，arg1，arg2) +``` + +## 防抖 + +``` +单位时间内，频繁触发事件，只执行最后一次 +``` + +## 节流 + +``` +单位时间内，频繁触发事件，只执行一次 +``` + diff --git a/开发/前端/Node.js.md b/开发/前端/Node.js.md new file mode 100644 index 0000000..41cdbd8 --- /dev/null +++ b/开发/前端/Node.js.md @@ -0,0 +1 @@ +Node.js是一个跨平台的JavaScript运行环境，使开发者可以搭建服务器端的JavaScript应用程序 \ No newline at end of file diff --git a/开发/前端/Node.js/Node.js文档/Day01_Node.js入门.pdf b/开发/前端/Node.js/Node.js文档/Day01_Node.js入门.pdf new file mode 100644 index 0000000..2e3dcfe Binary files /dev/null and b/开发/前端/Node.js/Node.js文档/Day01_Node.js入门.pdf differ diff --git a/开发/前端/Node.js/Node.js文档/Day02_Node.js模块化.pdf b/开发/前端/Node.js/Node.js文档/Day02_Node.js模块化.pdf new file mode 100644 index 0000000..1f118bc Binary files /dev/null and b/开发/前端/Node.js/Node.js文档/Day02_Node.js模块化.pdf differ diff --git a/开发/前端/React/React文档/React day01.pdf b/开发/前端/React/React文档/React day01.pdf new file mode 100644 index 0000000..11193bc Binary files /dev/null and b/开发/前端/React/React文档/React day01.pdf differ diff --git a/开发/前端/React/React文档/React day02.pdf b/开发/前端/React/React文档/React day02.pdf new file mode 100644 index 0000000..f503cae Binary files /dev/null and b/开发/前端/React/React文档/React day02.pdf differ diff --git a/开发/前端/React/React文档/React-day03.pdf b/开发/前端/React/React文档/React-day03.pdf new file mode 100644 index 0000000..02f27cb Binary files /dev/null and b/开发/前端/React/React文档/React-day03.pdf differ diff --git a/开发/前端/React/React文档/React-day04.pdf b/开发/前端/React/React文档/React-day04.pdf new file mode 100644 index 0000000..c63c4c0 Binary files /dev/null and b/开发/前端/React/React文档/React-day04.pdf differ diff --git a/开发/前端/React/React文档/记账本项目.pdf b/开发/前端/React/React文档/记账本项目.pdf new file mode 100644 index 0000000..eb8bfac Binary files /dev/null and b/开发/前端/React/React文档/记账本项目.pdf differ diff --git a/开发/前端/React手册.md b/开发/前端/React手册.md new file mode 100644 index 0000000..04dcfa0 --- /dev/null +++ b/开发/前端/React手册.md @@ -0,0 +1,42 @@ +## 元素渲染 + +``` +//导入react dom 渲染包 +import { createRoot } from 'react-dom/client' +//创建根对象 +const root = createRoot(DOM对象) +//渲染react 内容 +root.render(React内容) +``` + +## 事件绑定 + +``` +// on+事件名称= { 事件处理程序 } +
{}} /> + +//事件对象 + e.preventDefault()} href="..."> +``` + +## 组件状态 + +``` +const [变量, 修改变量的函数] = useState(默认值) +``` + +## DOM操作 + +``` +const inputRef = useRef(null) // 创建ref对象 + // 与jsx绑定 + +inputRef.current.value // 使用dom中的值 +``` + +## 组件传递数据props + +``` + +``` + diff --git a/开发/前端/VUE/VUE3/02.Pinia入门.pdf b/开发/前端/VUE/VUE3/02.Pinia入门.pdf new file mode 100755 index 0000000..a435712 Binary files /dev/null and b/开发/前端/VUE/VUE3/02.Pinia入门.pdf differ diff --git a/开发/前端/VUE/VUE3/da01.pdf b/开发/前端/VUE/VUE3/da01.pdf new file mode 100755 index 0000000..e6c506f Binary files /dev/null and b/开发/前端/VUE/VUE3/da01.pdf differ diff --git a/开发/前端/VUE/VUE3/day02.pdf b/开发/前端/VUE/VUE3/day02.pdf new file mode 100755 index 0000000..68037d9 Binary files /dev/null and b/开发/前端/VUE/VUE3/day02.pdf differ diff --git a/开发/前端/VUE/VUE3/day03.pdf b/开发/前端/VUE/VUE3/day03.pdf new file mode 100755 index 0000000..84c9564 Binary files /dev/null and b/开发/前端/VUE/VUE3/day03.pdf differ diff --git a/开发/前端/VUE/VUE3/day04.pdf b/开发/前端/VUE/VUE3/day04.pdf new file mode 100755 index 0000000..5b0deda Binary files /dev/null and b/开发/前端/VUE/VUE3/day04.pdf differ diff --git a/开发/前端/VUE/VUE3/day05.pdf b/开发/前端/VUE/VUE3/day05.pdf new file mode 100755 index 0000000..0def6d2 Binary files /dev/null and b/开发/前端/VUE/VUE3/day05.pdf differ diff --git a/开发/前端/VUE/VUE3/day06.pdf b/开发/前端/VUE/VUE3/day06.pdf new file mode 100755 index 0000000..dfd68c5 Binary files /dev/null and b/开发/前端/VUE/VUE3/day06.pdf differ diff --git a/开发/前端/VUE/VUE3/day07.pdf b/开发/前端/VUE/VUE3/day07.pdf new file mode 100755 index 0000000..e20351b Binary files /dev/null and b/开发/前端/VUE/VUE3/day07.pdf differ diff --git a/开发/前端/VUE/VUE3/day08.pdf b/开发/前端/VUE/VUE3/day08.pdf new file mode 100755 index 0000000..cf306ee Binary files /dev/null and b/开发/前端/VUE/VUE3/day08.pdf differ diff --git a/开发/前端/VUE/VUE3/day09.pdf b/开发/前端/VUE/VUE3/day09.pdf new file mode 100755 index 0000000..36b0f62 Binary files /dev/null and b/开发/前端/VUE/VUE3/day09.pdf differ diff --git a/开发/前端/VUE/VUE3/day10.pdf b/开发/前端/VUE/VUE3/day10.pdf new file mode 100755 index 0000000..19125a5 Binary files /dev/null and b/开发/前端/VUE/VUE3/day10.pdf differ diff --git a/开发/前端/VUE/VUE3/day11.pdf b/开发/前端/VUE/VUE3/day11.pdf new file mode 100755 index 0000000..ef2b9e3 Binary files /dev/null and b/开发/前端/VUE/VUE3/day11.pdf differ diff --git a/开发/前端/VUE/VUE3/day12.pdf b/开发/前端/VUE/VUE3/day12.pdf new file mode 100755 index 0000000..a6e6743 Binary files /dev/null and b/开发/前端/VUE/VUE3/day12.pdf differ diff --git a/开发/前端/VUE/VUE文档/day01-快速上手+插值表达式+指令上.pdf b/开发/前端/VUE/VUE文档/day01-快速上手+插值表达式+指令上.pdf new file mode 100644 index 0000000..f52ead1 Binary files /dev/null and b/开发/前端/VUE/VUE文档/day01-快速上手+插值表达式+指令上.pdf differ diff --git a/开发/前端/VUE/VUE文档/day02-指令下+计算属性+侦听器.pdf b/开发/前端/VUE/VUE文档/day02-指令下+计算属性+侦听器.pdf new file mode 100644 index 0000000..b891332 Binary files /dev/null and b/开发/前端/VUE/VUE文档/day02-指令下+计算属性+侦听器.pdf differ diff --git a/开发/前端/VUE/VUE文档/day03-生命周期+工程化开发(组件入门).pdf b/开发/前端/VUE/VUE文档/day03-生命周期+工程化开发(组件入门).pdf new file mode 100644 index 0000000..fc866dc Binary files /dev/null and b/开发/前端/VUE/VUE文档/day03-生命周期+工程化开发(组件入门).pdf differ diff --git a/开发/前端/VUE/VUE文档/day04-组件通信&进阶用法.pdf b/开发/前端/VUE/VUE文档/day04-组件通信&进阶用法.pdf new file mode 100644 index 0000000..733a61d Binary files /dev/null and b/开发/前端/VUE/VUE文档/day04-组件通信&进阶用法.pdf differ diff --git a/开发/前端/VUE/VUE文档/day05-自定义指令&插槽&路由入门.pdf b/开发/前端/VUE/VUE文档/day05-自定义指令&插槽&路由入门.pdf new file mode 100644 index 0000000..a7c9287 Binary files /dev/null and b/开发/前端/VUE/VUE文档/day05-自定义指令&插槽&路由入门.pdf differ diff --git a/开发/前端/VUE/VUE文档/day06-路由进阶.pdf b/开发/前端/VUE/VUE文档/day06-路由进阶.pdf new file mode 100644 index 0000000..7be98fb Binary files /dev/null and b/开发/前端/VUE/VUE文档/day06-路由进阶.pdf differ diff --git a/开发/前端/VUE/VUE文档/day07&day08-面经移动端.pdf b/开发/前端/VUE/VUE文档/day07&day08-面经移动端.pdf new file mode 100644 index 0000000..2165162 Binary files /dev/null and b/开发/前端/VUE/VUE文档/day07&day08-面经移动端.pdf differ diff --git a/开发/前端/VUE/VUE文档/day09-Vuex的基本使用.pdf b/开发/前端/VUE/VUE文档/day09-Vuex的基本使用.pdf new file mode 100644 index 0000000..dfef9b6 Binary files /dev/null and b/开发/前端/VUE/VUE文档/day09-Vuex的基本使用.pdf differ diff --git a/开发/前端/VUE/VUE文档/day10&day11-面经PC端.pdf b/开发/前端/VUE/VUE文档/day10&day11-面经PC端.pdf new file mode 100644 index 0000000..85ff8c3 Binary files /dev/null and b/开发/前端/VUE/VUE文档/day10&day11-面经PC端.pdf differ diff --git a/开发/前端/VUE/VUE练习/随手练/index.html b/开发/前端/VUE/VUE练习/随手练/index.html new file mode 100644 index 0000000..bd816b9 --- /dev/null +++ b/开发/前端/VUE/VUE练习/随手练/index.html @@ -0,0 +1,31 @@ + + + + + + Document + + + + +
+ {{ message }} +

粉随爱豆爽肤水

+ +
+ + + \ No newline at end of file diff --git a/开发/前端/Vue手册.md b/开发/前端/Vue手册.md new file mode 100644 index 0000000..c3d1a1b --- /dev/null +++ b/开发/前端/Vue手册.md @@ -0,0 +1,46 @@ +Vue是一个用于构建用户界面的渐进式框架 + +## 插值表达式 + +``` +可以被求值的代码，JS引擎会将其计算出一个结果 +
+ {{ message }} +
+``` + +## VUE指令 + +``` +v-html: "表达式" + 设置元素的innerHTML + +v-show： "true/false" + 控制元素显示隐藏，通过display:none 控制显示隐藏 + +v-if: "表达式" + 控制元素显示/隐藏，通过是否创建/移除元素节点方式实现，适用于不频繁切换场景 + +v-else v-else-if + 辅助v-if判断渲染，紧挨着v-if使用 + +v-on: 事件名="methods中的函数名" + 注册事件 = 添加监听 + 提供逻辑处理 + 可简写成@事件名="函数/表达式" + +v-bind: + 动态设置html的标签属性，如src url title class等 + :属性名="表达式" + +v-for="(item,index) in 数组" + 基于数据循环，多次渲染整个元素 + +v-model='变量' + 给表单元素（通常写在input中）使用，双向数据绑定 + 输入框：value + 复选框：ckecked + 单选框： 绑定value + 下拉菜单：绑定value + +v-bind： +``` diff --git a/开发/前端/Webpack/Webpack文档/Webpack模块打包工具.pdf b/开发/前端/Webpack/Webpack文档/Webpack模块打包工具.pdf new file mode 100644 index 0000000..a5a8253 Binary files /dev/null and b/开发/前端/Webpack/Webpack文档/Webpack模块打包工具.pdf differ diff --git a/开发/前端/微信小程序/微信小程序第1天.pdf b/开发/前端/微信小程序/微信小程序第1天.pdf new file mode 100644 index 0000000..12e9354 Binary files /dev/null and b/开发/前端/微信小程序/微信小程序第1天.pdf differ diff --git a/开发/前端/微信小程序/微信小程序第2天.pdf b/开发/前端/微信小程序/微信小程序第2天.pdf new file mode 100644 index 0000000..f290e9b Binary files /dev/null and b/开发/前端/微信小程序/微信小程序第2天.pdf differ diff --git a/开发/前端/微信小程序/微信小程序第3天.pdf b/开发/前端/微信小程序/微信小程序第3天.pdf new file mode 100644 index 0000000..e794d85 Binary files /dev/null and b/开发/前端/微信小程序/微信小程序第3天.pdf differ diff --git a/开发/后端/.DS_Store b/开发/后端/.DS_Store new file mode 100644 index 0000000..14ac0fd Binary files /dev/null and b/开发/后端/.DS_Store differ diff --git a/开发/后端/Go/.DS_Store b/开发/后端/Go/.DS_Store new file mode 100644 index 0000000..ae242fa Binary files /dev/null and b/开发/后端/Go/.DS_Store differ diff --git a/开发/后端/Go/书籍/Go语言实战 .pdf b/开发/后端/Go/书籍/Go语言实战 .pdf new file mode 100644 index 0000000..02c665e Binary files /dev/null and b/开发/后端/Go/书籍/Go语言实战 .pdf differ diff --git a/开发/后端/Go/书籍/go语言趣学指南.pdf b/开发/后端/Go/书籍/go语言趣学指南.pdf new file mode 100644 index 0000000..47d343a Binary files /dev/null and b/开发/后端/Go/书籍/go语言趣学指南.pdf differ diff --git a/开发/后端/Go/课程/马哥/01-01序言.pdf b/开发/后端/Go/课程/马哥/01-01序言.pdf new file mode 100644 index 0000000..4efae94 Binary files /dev/null and b/开发/后端/Go/课程/马哥/01-01序言.pdf differ diff --git a/开发/后端/Go/课程/马哥/01-02计算机基础.pdf b/开发/后端/Go/课程/马哥/01-02计算机基础.pdf new file mode 100644 index 0000000..9797748 Binary files /dev/null and b/开发/后端/Go/课程/马哥/01-02计算机基础.pdf differ diff --git a/开发/后端/Go/课程/马哥/01-03语言基础.pdf b/开发/后端/Go/课程/马哥/01-03语言基础.pdf new file mode 100644 index 0000000..80665f1 Binary files /dev/null and b/开发/后端/Go/课程/马哥/01-03语言基础.pdf differ diff --git a/开发/后端/Go/课程/马哥/01-04分支和循环.pdf b/开发/后端/Go/课程/马哥/01-04分支和循环.pdf new file mode 100644 index 0000000..7d1a8ba Binary files /dev/null and b/开发/后端/Go/课程/马哥/01-04分支和循环.pdf differ diff --git a/开发/后端/Go/课程/马哥/02-01线性表.pdf b/开发/后端/Go/课程/马哥/02-01线性表.pdf new file mode 100644 index 0000000..95c496f Binary files /dev/null and b/开发/后端/Go/课程/马哥/02-01线性表.pdf differ diff --git a/开发/后端/Go/课程/马哥/02-02字符串.pdf b/开发/后端/Go/课程/马哥/02-02字符串.pdf new file mode 100644 index 0000000..e422bf1 Binary files /dev/null and b/开发/后端/Go/课程/马哥/02-02字符串.pdf differ diff --git a/开发/后端/Go/课程/马哥/02-03哈希表.pdf b/开发/后端/Go/课程/马哥/02-03哈希表.pdf new file mode 100644 index 0000000..6d0a70a Binary files /dev/null and b/开发/后端/Go/课程/马哥/02-03哈希表.pdf differ diff --git a/开发/后端/Go/课程/马哥/03-01函数定义参数及作用域.pdf b/开发/后端/Go/课程/马哥/03-01函数定义参数及作用域.pdf new file mode 100644 index 0000000..787c594 Binary files /dev/null and b/开发/后端/Go/课程/马哥/03-01函数定义参数及作用域.pdf differ diff --git a/开发/后端/Go/课程/马哥/03-02递归匿名函数和闭包.pdf b/开发/后端/Go/课程/马哥/03-02递归匿名函数和闭包.pdf new file mode 100644 index 0000000..cbabb5b Binary files /dev/null and b/开发/后端/Go/课程/马哥/03-02递归匿名函数和闭包.pdf differ diff --git a/开发/后端/Go/课程/马哥/03-03defer.pdf b/开发/后端/Go/课程/马哥/03-03defer.pdf new file mode 100644 index 0000000..3a73f8a Binary files /dev/null and b/开发/后端/Go/课程/马哥/03-03defer.pdf differ diff --git a/开发/后端/Go/课程/马哥/04-01结构体.pdf b/开发/后端/Go/课程/马哥/04-01结构体.pdf new file mode 100644 index 0000000..c82ac2f Binary files /dev/null and b/开发/后端/Go/课程/马哥/04-01结构体.pdf differ diff --git a/开发/后端/Go/课程/马哥/04-02接口.pdf b/开发/后端/Go/课程/马哥/04-02接口.pdf new file mode 100644 index 0000000..8a2d29a Binary files /dev/null and b/开发/后端/Go/课程/马哥/04-02接口.pdf differ diff --git a/开发/后端/Go/课程/马哥/04-03错误处理.pdf b/开发/后端/Go/课程/马哥/04-03错误处理.pdf new file mode 100644 index 0000000..01c4289 Binary files /dev/null and b/开发/后端/Go/课程/马哥/04-03错误处理.pdf differ diff --git a/开发/后端/Go/课程/马哥/04-04面向对象和泛型.pdf b/开发/后端/Go/课程/马哥/04-04面向对象和泛型.pdf new file mode 100644 index 0000000..190b599 Binary files /dev/null and b/开发/后端/Go/课程/马哥/04-04面向对象和泛型.pdf differ diff --git a/开发/后端/Go/课程/马哥/05-01时间.pdf b/开发/后端/Go/课程/马哥/05-01时间.pdf new file mode 100644 index 0000000..e54dbe5 Binary files /dev/null and b/开发/后端/Go/课程/马哥/05-01时间.pdf differ diff --git a/开发/后端/Go/课程/马哥/05-02文件IO.pdf b/开发/后端/Go/课程/马哥/05-02文件IO.pdf new file mode 100644 index 0000000..ff533d9 Binary files /dev/null and b/开发/后端/Go/课程/马哥/05-02文件IO.pdf differ diff --git a/开发/后端/Go/课程/马哥/05-02文件IO_v1.pdf b/开发/后端/Go/课程/马哥/05-02文件IO_v1.pdf new file mode 100644 index 0000000..b002391 Binary files /dev/null and b/开发/后端/Go/课程/马哥/05-02文件IO_v1.pdf differ diff --git a/开发/后端/Go/课程/马哥/05-03序列化.pdf b/开发/后端/Go/课程/马哥/05-03序列化.pdf new file mode 100644 index 0000000..38aa3c7 Binary files /dev/null and b/开发/后端/Go/课程/马哥/05-03序列化.pdf differ diff --git a/开发/后端/Go/课程/马哥/05-04日志.pdf b/开发/后端/Go/课程/马哥/05-04日志.pdf new file mode 100644 index 0000000..0721292 Binary files /dev/null and b/开发/后端/Go/课程/马哥/05-04日志.pdf differ diff --git a/开发/后端/Go/课程/马哥/06-01包管理.pdf b/开发/后端/Go/课程/马哥/06-01包管理.pdf new file mode 100644 index 0000000..8376ae2 Binary files /dev/null and b/开发/后端/Go/课程/马哥/06-01包管理.pdf differ diff --git a/开发/后端/Go/课程/马哥/06-02反射.pdf b/开发/后端/Go/课程/马哥/06-02反射.pdf new file mode 100644 index 0000000..d743d21 Binary files /dev/null and b/开发/后端/Go/课程/马哥/06-02反射.pdf differ diff --git a/开发/后端/Go/课程/马哥/07-01加密解密.pdf b/开发/后端/Go/课程/马哥/07-01加密解密.pdf new file mode 100644 index 0000000..f19700c Binary files /dev/null and b/开发/后端/Go/课程/马哥/07-01加密解密.pdf differ diff --git a/开发/后端/Go/课程/马哥/08-01链接表和栈.pdf b/开发/后端/Go/课程/马哥/08-01链接表和栈.pdf new file mode 100644 index 0000000..4011d1d Binary files /dev/null and b/开发/后端/Go/课程/马哥/08-01链接表和栈.pdf differ diff --git a/开发/后端/Go/课程/马哥/08-02树堆.pdf b/开发/后端/Go/课程/马哥/08-02树堆.pdf new file mode 100644 index 0000000..03295d1 Binary files /dev/null and b/开发/后端/Go/课程/马哥/08-02树堆.pdf differ diff --git a/开发/后端/Go/课程/马哥/09-00python环境.pdf b/开发/后端/Go/课程/马哥/09-00python环境.pdf new file mode 100644 index 0000000..ed53121 Binary files /dev/null and b/开发/后端/Go/课程/马哥/09-00python环境.pdf differ diff --git a/开发/后端/Go/课程/马哥/09-01进程线程.pdf b/开发/后端/Go/课程/马哥/09-01进程线程.pdf new file mode 100644 index 0000000..925a27e Binary files /dev/null and b/开发/后端/Go/课程/马哥/09-01进程线程.pdf differ diff --git a/开发/后端/Go/课程/马哥/09-02TCP编程.pdf b/开发/后端/Go/课程/马哥/09-02TCP编程.pdf new file mode 100644 index 0000000..9732987 Binary files /dev/null and b/开发/后端/Go/课程/马哥/09-02TCP编程.pdf differ diff --git a/开发/后端/Go/课程/马哥/09-03IO模式.pdf b/开发/后端/Go/课程/马哥/09-03IO模式.pdf new file mode 100644 index 0000000..1dab733 Binary files /dev/null and b/开发/后端/Go/课程/马哥/09-03IO模式.pdf differ diff --git a/开发/后端/Go/课程/马哥/09-04协程.pdf b/开发/后端/Go/课程/马哥/09-04协程.pdf new file mode 100644 index 0000000..cfd9fd3 Binary files /dev/null and b/开发/后端/Go/课程/马哥/09-04协程.pdf differ diff --git a/开发/后端/Go/课程/马哥/09-05通道.pdf b/开发/后端/Go/课程/马哥/09-05通道.pdf new file mode 100644 index 0000000..9381831 Binary files /dev/null and b/开发/后端/Go/课程/马哥/09-05通道.pdf differ diff --git a/开发/后端/Go/课程/马哥/10-01TCP编程.pdf b/开发/后端/Go/课程/马哥/10-01TCP编程.pdf new file mode 100644 index 0000000..e4941ac Binary files /dev/null and b/开发/后端/Go/课程/马哥/10-01TCP编程.pdf differ diff --git a/开发/后端/Go/课程/马哥/10-02UDP编程.pdf b/开发/后端/Go/课程/马哥/10-02UDP编程.pdf new file mode 100644 index 0000000..1a61252 Binary files /dev/null and b/开发/后端/Go/课程/马哥/10-02UDP编程.pdf differ diff --git a/开发/后端/Go/课程/马哥/10-03WebSocket.pdf b/开发/后端/Go/课程/马哥/10-03WebSocket.pdf new file mode 100644 index 0000000..ee73e89 Binary files /dev/null and b/开发/后端/Go/课程/马哥/10-03WebSocket.pdf differ diff --git a/开发/后端/Go/课程/马哥/11-01关系模型.pdf b/开发/后端/Go/课程/马哥/11-01关系模型.pdf new file mode 100644 index 0000000..cf96e14 Binary files /dev/null and b/开发/后端/Go/课程/马哥/11-01关系模型.pdf differ diff --git a/开发/后端/Go/课程/马哥/11-02SQL语句.pdf b/开发/后端/Go/课程/马哥/11-02SQL语句.pdf new file mode 100644 index 0000000..c9cef40 Binary files /dev/null and b/开发/后端/Go/课程/马哥/11-02SQL语句.pdf differ diff --git a/开发/后端/Go/课程/马哥/11-03数据库标准库开发.pdf b/开发/后端/Go/课程/马哥/11-03数据库标准库开发.pdf new file mode 100644 index 0000000..549eb31 Binary files /dev/null and b/开发/后端/Go/课程/马哥/11-03数据库标准库开发.pdf differ diff --git a/开发/后端/Go/课程/马哥/11-04ORM.pdf b/开发/后端/Go/课程/马哥/11-04ORM.pdf new file mode 100644 index 0000000..9a3e7d4 Binary files /dev/null and b/开发/后端/Go/课程/马哥/11-04ORM.pdf differ diff --git a/开发/后端/Go/课程/马哥/11-05MongoDB.pdf b/开发/后端/Go/课程/马哥/11-05MongoDB.pdf new file mode 100644 index 0000000..587ebe7 Binary files /dev/null and b/开发/后端/Go/课程/马哥/11-05MongoDB.pdf differ diff --git a/服务器列表.txt b/服务器列表.txt new file mode 100644 index 0000000..6a6e9c6 --- /dev/null +++ b/服务器列表.txt @@ -0,0 +1,34 @@ +192.168.30.5 StandOS + +工具层 +192.168.30.10 ansible + +工具层 +192.168.30.200 lvs +192.168.30.220 lvs-1 +192.168.30.221 lvs-2 + + +数据层 +192.168.30.211 mysql-master +192.168.30.212 mysql-slave +192.168.30.213 elasticsearch-1 +192.168.30.214 elasticsearch-2 +192.168.30.215 elasticsearch-3 +192.168.30.216 kibana +192.168.30.217 consul-1 +192.168.30.218 consul-2 +192.168.30.111 minio-1 +192.168.30.112 minio-2 +192.168.30.113 minio-3 +192.168.30.114 minio-4 + +应用层 +192.168.30.222 k8s-master-1 +192.168.30.223 k8s-master-2 +192.168.30.224 k8s-master-3 +192.168.30.225 k8s-node-1 +192.168.30.226 k8s-node-2 +192.168.30.227 k8s-node-3 +192.168.30.228 k8s-node-4 +192.168.30.229 k8s-node-5 \ No newline at end of file diff --git a/杂物间/.DS_Store b/杂物间/.DS_Store new file mode 100644 index 0000000..5008ddf Binary files /dev/null and b/杂物间/.DS_Store differ diff --git a/杂物间/电脑壁纸.jpg b/杂物间/电脑壁纸.jpg new file mode 100644 index 0000000..060f179 Binary files /dev/null and b/杂物间/电脑壁纸.jpg differ diff --git a/网络/DHCP/DHCP.md b/网络/DHCP/DHCP.md new file mode 100644 index 0000000..b6939dd --- /dev/null +++ b/网络/DHCP/DHCP.md @@ -0,0 +1,154 @@ +--- +title: DHCP +categories: + - Linux服务 +tags: + - DHCP + - Linux +date: 2021-03-27 21:55:45 +--- +# DHCP + +## 定义 + +DHCP (Dynamic Host Configuration Protocol，动态主机配置协议）是一个工作在应用层的局域网网络协议！！！，数据传输时使用UDP不可靠传输协议工作，通常被应用在大型的局域网络环境中，主要作用是集中的管理、分配网络资源，使网络环境中的主机能动态的获得IP地址、Gateway 地址、DNS服务器地址等信息，并能够提升地址的使用率。 + +## DHCP工作原理 + +![](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E8%BF%90%E7%BB%B4/DHCP/DHCP工作原理.png) + +1、DHCP客户端进行IP请求 + +DHCP客户机启动时，没有ip，便会使用0.0.0.0作为源ip，携带自己的mac地址，使用255.255.255.255（广播地址）作为目标地址，通过UDP67端口发送广播报文，也就是DHCP Discover报文。（没开UDP67端口的主机无法接受报文，节省主机资源开销） + +2、DHCP服务器响应请求 + +当DHCP服务器收到客户及请求ip地址的信息时，查看ip地址池，找一个ip写入到DHCP OFFER的消息中，然后DHCP使用自己的IP地址作为源地址，使用255.255.255.255作为目标地址，使用UDP68端口作为源端口来广播DHCP OFFER + +DHCP OFFER的报文内容 + +```shell +DHCP客户机的MAC地址; +DHICP服务器提供的合法IP地址; +子网掩码;默认网关（路由); +租约的期限; +DHCP服务器的IP地址-MAC。 +``` + +3、DHCP客户机选择IP + +DHCP客户端从接收到的第一个DHCP OFFER消息中选择一个IP地址，客户机将DHCP REQUEST消息广播到所有的DHCP服务器，表明它接受提供的内容 + +4、DHCP服务器确认租约 + +DHCP服务器接收到DHCP REQUEST消息后，以DHCPACK消息的形式向客户机广播成功的确认，当客户机收到DHCP ACK消息时，它就配置了IP地址，完成了TCP/IP的初始化。 + +5、DHCP客户机续租 + +![](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E8%BF%90%E7%BB%B4/DHCP/DHCP续租.png) + +DHCP客户机会在租期过去50%的时候，直接向为其提供IP地址的DHCP服务器发送DHCP REQUEST消息包。如果客户机接收到该服务器回应的DHCP ACK消息包，客户机就根据包中所提供的新的租期以及其它已经更新的TCP/IP参数，更新自己的配置，IP租用更新完成。如果没有收到该服务器的回复，则客户机继续使用现有的IP地址，因为当前租期还有50%。 + +如果在租期过去50%的时候没有更新，则DHCP客户机将在租期过去87.5%的时候再次向为其提供IP地址的DHCP那器联系。如果还不成功，到租约的100%时候，DHCP客户机必须放弃这个IP地址，重新申请。如果此时无DHCP服务器用，DHCP客户机会使用169.254.0.0/16中随机的一个地址，并且每隔5分钟再进行尝试。 + +## DHCP服务搭建 + +### DHCP软件信息 + +软件名：dhcp（DHCP服务软件包） dhcp-comm（DHCP命令软件包） + +服务名：dhcpd（DHCP服务名）dhcrelay（DHCP中继服务名） + +端口号：udp 67（客户端目标端口）udp 68（服务器源端口） + +配置文件： + +``` +dhcpd服务的配置文件：/etc/dhcp/dhcpd.conf +dhcpd.conf.sample dhcp的模板配置文件：/usr/share/doc/dhcp-4.*.*/dhcpd.conf.sample +dhcrelay dhcp中继的配置文件：/etc/sysconfig/dhcrelay +``` + +### DHCP配置文件详解 + +```shell +subnet 192.168.133.0 netmask 255.255.255.0 { +#声明要分配的网段和子网掩码 +range 192.168.133.3 192.168.133.254; +#声明可用IP地址池 +option domain-name "lzcwy.com" ; +#设置DNS域 +option domain-name-servers 8.8.8.8 ; +#设置DNS服务器地址 +option routers 192.168.133.2; +#默认网关的地址 +option broadcast-address 192.168.133.255; +#广播地址(可不写) +default-lease-time 600; +#默认租约(s) +max-lease-time 7200; +#最大租约(s) + +``` + +### DHCP部署 + +将DHCP配置文件模板覆盖配置文件 + +```shell +cp -a /usr/share/doc/dhcp-4.*.*/dhcpd.conf.sample /etc/dhcp/dhcpd.conf +``` + +修改配置文件 + +```shell +vim /etc/dhcp/dhcpd.conf +``` + +重启服务 + +```shell +systemctl restart dhcpd +``` + +重启客户机网卡 + +``` +ifdown/ifup +``` + +### 配置静态ip + +1、通过arp -a 查看客户端的ip地址 + +2、修改/etc/dhcp/dhcpd.conf文件 + +```shell +host fantasia { + hardware ethernet mac地址; #客户机的mac地址 + fixed-address IP地址; #分配给客户机的静态ip地址 +} +``` + +3、重启DHCP服务 + +```shell +systemctl restart dhcpd +``` + +4、重启客户机网卡，验证IP获取是否成功 + +```shell +ifdown/ifup +``` + +### 配置DHCP超级作用域 + +待补充——我菜啊 + +### 配置DHCP中继 + +待补充——我菜啊 + + + diff --git a/网络/FRP/FRP.md b/网络/FRP/FRP.md new file mode 100644 index 0000000..25e72f8 --- /dev/null +++ b/网络/FRP/FRP.md @@ -0,0 +1,203 @@ +--- +title: FRP +categories: + - Linux服务 +tags: + - 运维 + - 内网穿透 + - Linux +date: 2021-03-21 22:48:33 +--- +# FRP + +## frp 是什么？ + +``` +FRP官方文档：https://gofrp.org/docs/ +``` + +frp 是一个专注于内网穿透的高性能的反向代理应用，支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 + +## 为什么使用 frp？ + +通过在具有公网 IP 的节点上部署 frp 服务端，可以轻松地将内网服务穿透到公网，同时提供诸多专业的功能特性，这包括： + +- 客户端服务端通信支持 TCP、KCP 以及 Websocket 等多种协议。 +- 采用 TCP 连接流式复用，在单个连接间承载更多请求，节省连接建立时间。 +- 代理组间的负载均衡。 +- 端口复用，多个服务通过同一个服务端端口暴露。 +- 多个原生支持的客户端插件（静态文件查看，HTTP、SOCK5 代理等），便于独立使用 frp 客户端完成某些工作。 +- 高度扩展性的服务端插件系统，方便结合自身需求进行功能扩展。 +- 服务端和客户端 UI 页面。 + +## 原理 + +frp 主要由 **客户端(frpc)** 和 **服务端(frps)** 组成，服务端通常部署在具有公网 IP 的机器上，客户端通常部署在需要穿透的内网服务所在的机器上。 + +内网服务由于没有公网 IP，不能被非局域网内的其他用户访问。 + +用户通过访问服务端的 frps，由 frp 负责根据请求的端口或其他信息将请求路由到对应的内网机器，从而实现通信。 + + + +## 代理 + +在 frp 中一个代理对应一个需要暴露的内网服务。一个客户端支持同时配置多个代理。 + +## 代理类型 + +frp 支持多种代理类型来适配不同的使用场景。 + +| 类型 | 描述 | +| ------ | ------------------------------------------------------------ | +| tcp | 单纯的 TCP 端口映射，服务端会根据不同的端口路由到不同的内网服务。 | +| udp | 单纯的 UDP 端口映射，服务端会根据不同的端口路由到不同的内网服务。 | +| http | 针对 HTTP 应用定制了一些额外的功能，例如修改 Host Header，增加鉴权。 | +| https | 针对 HTTPS 应用定制了一些额外的功能。 | +| stcp | 安全的 TCP 内网代理，需要在被访问者和访问者的机器上都部署 frpc，不需要在服务端暴露端口。 | +| sudp | 安全的 UDP 内网代理，需要在被访问者和访问者的机器上都部署 frpc，不需要在服务端暴露端口。 | +| xtcp | 点对点内网穿透代理，功能同 stcp，但是流量不需要经过服务器中转。 | +| tcpmux | 支持服务端 TCP 端口的多路复用，通过同一个端口访问不同的内网服务。 | + +# 配置文件 + +frp 目前仅支持 ini 格式的配置文件，frps 和 frpc 各自支持不同的参数。 + +frps 主要配置服务端的一些通用参数，frpc 则需要额外配置每一个代理的详细配置。 + +### 格式 + +目前仅支持 ini 格式的配置，如下的示例配置将本地 SSH 服务穿透到公网。 + +frps 配置： + +```ini +[common] +bind_port = 7000 +``` + +frpc 配置： + +```ini +[common] +server_addr = x.x.x.x +server_port = 7000 + +[ssh] +type = tcp +local_ip = 127.0.0.1 +local_port = 22 +remote_port = 6000 +``` + +`[common]` 是固定名称的段落，用于配置通用参数。 + +`[ssh]` 仅在 frpc 中使用，用于配置单个代理的参数。代理名称必须唯一，不能重复。 + +同一个客户端可以配置多个代理。 + +# 身份认证 + +目前 frpc 和 frps 之间支持两种身份验证方式，`token` 和 `oidc`，默认为 `token`。 + +通过 `frpc.ini` 和 `frps.ini` 的 `[common]` 段落中配置 `authentication_method` 来指定要使用的身份验证方式。 + +只有通过身份验证的客户端(frpc)才能成功连接 frps。 + + + +### Token + +基于 Token 的身份验证方式比较简单，需要在 frpc 和 frps 的 `[common]` 段落中配置上相同的 `token` 参数即可。 + + + +### 参数说明 + +| 类型 | 描述 | +| --------------------------- | ------------------------------------------------------------ | +| authentication_method | 身份验证方式，token 或 oidc，默认为 token。 | +| authenticate_heartbeats | 在每一个心跳包中附加上身份认证信息，客户端服务端需要一致。 | +| authenticate_new_work_conns | 在每次创建工作连接时附加上身份认证信息，客户端服务端需要一致。 | + +## 个人常用配置 + +服务端 + +```shell +[common] +bind_port = 7000 #连接端口 +authentication_method = token #认证方式 +token = ******** #认证密码 +allow-ports = 8000-9000 #运行连接的密码 + +``` + +客户端 + +```shell +[common] #连接参数 +server_addr = 39.107.94.47 #服务端IP +server_port = 7000 #服务端端口 +authentication_method = token #认证方式 +token = zhanxiaoyao #认证类型 + +[ssh] #名称 +type = tcp #类型 +local_ip = 127.0.0.1 #本地IP +local_port = 22 #本地端口 +remote_port = 8022 #远端端口 + +[web] +type = tcp +local_ip = 127.0.0.1 +local_port = 80 +remote_port = 8080 +``` +## systemctl控制启动 + +```shell +vim /lib/systemd/system/frpc.service +``` + +在frpc.service里写入以下内容 + +```shell +[Unit] +Description=fraps service +After=network.target syslog.target +Wants=network.target + +[Service] +Type=simple +#启动服务的命令（此处写你的frps的实际安装目录） +ExecStart=/your/path/frpc -c /your/path/frpc.ini + +[Install] +WantedBy=multi-user.target +``` + +然后启动frpc + +```shell +systemctl start frpc +``` + +设置开机自启动 + +```shell +systemctl enable frpc +``` + +## windows中设置FRPC/S开机自启动 + +``` +1、下载frp软件包并解压至c盘，并在frp文件夹内创建frp.bat，追加以下内容 +C: +cd \frp +start frpc.exe -c frpc.ini + +2、打开windows服务器管理器——>工具——>任务计划程序 +3、创建基本任务——>触发器为计算机启动时——>操作为启动程序——>程序或脚本选择frp.bat——>完成 +``` + diff --git a/网络/TCPIP/TCP-IP.md b/网络/TCPIP/TCP-IP.md new file mode 100644 index 0000000..b2eb6a9 --- /dev/null +++ b/网络/TCPIP/TCP-IP.md @@ -0,0 +1,135 @@ +--- +title: TCP/IP +categories: + - TCP/IP +tags: + - TCP +date: 2022-08-22 21:45:25 +--- +# TCP/IP协议详解 + +## 一、什么是TCP/IP + +TCP/IP是现代Internet的核心技术，由IETF定义。互联网传输都需要依靠TCP/IP族，其包含HTTP、Telnet、FTP、RIP、UDP等等 + +## 二、TCP/IP协议模型 + +![1](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E7%BD%91%E7%BB%9C/TCPIP/1.png) + +## 三、TCP/IP工作流程 + +![2](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E7%BD%91%E7%BB%9C/TCPIP/2.jpg) + +**源主机封包：** + +1、 **应用层：**源主机将数据向下传输给传输层； + +2、 **传输层：**将数据分组，加上TCP首部形成TCP数据段，向下传输给网络层； + +3、 **网络层：**给TCP数据段加上源主机、目的主机IP首部，生成IP数据包，向下传输给链路层； + +4、 **链路层：**链路层在其MAC帧的数据部分装上IP数据包，再加上源主机，目的主机的MAC地址和帧头，并根据其目的的MAC地址，将MAC帧发往目的主机或IP路由器； + +**目的主机拆包：** + +1、 **链路层：**在目的主机，链路层将MAC帧的帧头去掉，并将IP数据包向上传递给网络层； + +2、 **网路层：**检查IP报头，如果报头中校验和计算结果不一致，则丢弃该IP数据包，若校验和计算结果一致，则去掉IP报头，将TCP数据段向上传递给传输层； + +3、 **传输层：**检查顺序号，判断是否是正确的TCP分组，然后检查TCP报头数据，若正确，则向源主机发送确认信息，若不正确或丢包，则向源主机要求重发信息； + +4、 **应用层：**目的主机，传输层去掉TCP报头，将排好顺序的分组组成应用数据流送给应用程序，这样目的主机接收到的来自源主机的字节流，就像是直接接收来自源主机的字节流一样。 + +## 四、TCP报文格式 + +![3](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E7%BD%91%E7%BB%9C/TCPIP/3.gif) + +上图中 TCP 报文中每个字段的含义如下： + +**源端口和目的端口字段** + +TCP源端口（Source Port）：源计算机上的应用程序的端口号，占 16 位。 +TCP目的端口（Destination Port）：目标计算机的应用程序端口号，占 16 位。 + + + +**序列号字段** + +CP序列号（Sequence Number）：占 32 位。它表示本报文段所发送数据的第一个字节的编号。在 TCP 连接中，所传送的字节流的每一个字节都会按顺序编号。当SYN标记不为1时，这是当前数据分段第一个字母的序列号；如果SYN的值是1时，这个字段的值就是初始序列值（ISN），用于对序列号进行同步。这时，第一个字节的序列号比这个字段的值大1，也就是ISN加1。 + + + +**确认号字段** + +TCP 确认号（Acknowledgment Number，ACK Number）：占 32 位。它表示接收方期望收到发送方下一个报文段的第一个字节数据的编号。其值是接收计算机即将接收到的下一个序列号，也就是下一个接收到的字节的序列号加1。 + + + +**数据偏移字段** + +TCP 首部长度（Header Length）：数据偏移是指数据段中的“数据”部分起始处距离 TCP 数据段起始处的字节偏移量，占 4 位。其实这里的“数据偏移”也是在确定 TCP 数据段头部分的长度，告诉接收端的应用程序，数据从何处开始。 + + + +**保留字段** + +保留（Reserved）：占 4 位。为 TCP 将来的发展预留空间，目前必须全部为 0。 + + + +**标志位字段** + +- CWR（Congestion Window Reduce）：拥塞窗口减少标志，用来表明它接收到了设置 ECE 标志的 TCP 包。并且，发送方收到消息之后，通过减小发送窗口的大小来降低发送速率。 +- ECE（ECN Echo）：用来在 TCP 三次握手时表明一个 TCP 端是具备 ECN 功能的。在数据传输过程中，它也用来表明接收到的 TCP 包的 IP 头部的 ECN 被设置为 11，即网络线路拥堵。 +- URG（Urgent）：表示本报文段中发送的数据是否包含紧急数据。URG=1 时表示有紧急数据。当 URG=1 时，后面的紧急指针字段才有效。 + ACK：表示前面的确认号字段是否有效。ACK=1 时表示有效。只有当 ACK=1 时，前面的确认号字段才有效。TCP 规定，连接建立后，ACK 必须为 1。 +- PSH（Push）：告诉对方收到该报文段后是否立即把数据推送给上层。如果值为 1，表示应当立即把数据提交给上层，而不是缓存起来。 +- RST：表示是否重置连接。如果 RST=1，说明 TCP 连接出现了严重错误（如主机崩溃），必须释放连接，然后再重新建立连接。 +- SYN：在建立连接时使用，用来同步序号。当 SYN=1，ACK=0 时，表示这是一个请求建立连接的报文段；当 SYN=1，ACK=1 时，表示对方同意建立连接。SYN=1 时，说明这是一个请求建立连接或同意建立连接的报文。只有在前两次握手中 SYN 才为 1。 +- FIN：标记数据是否发送完毕。如果 FIN=1，表示数据已经发送完成，可以释放连接。 + + + +**窗口大小字段** + +窗口大小（Window Size）：占 16 位。它表示从 Ack Number 开始还可以接收多少字节的数据量，也表示当前接收端的接收窗口还有多少剩余空间。该字段可以用于 TCP 的流量控制。 + + + +**TCP 校验和字段** + +校验位（TCP Checksum）：占 16 位。它用于确认传输的数据是否有损坏。发送端基于数据内容校验生成一个数值，接收端根据接收的数据校验生成一个值。两个值必须相同，才能证明数据是有效的。如果两个值不同，则丢掉这个数据包。Checksum 是根据伪头 + TCP 头 + TCP 数据三部分进行计算的。 + + + +**紧急指针字段** + +紧急指针（Urgent Pointer）：仅当前面的 URG 控制位为 1 时才有意义。它指出本数据段中为紧急数据的字节数，占 16 位。当所有紧急数据处理完后，TCP 就会告诉应用程序恢复到正常操作。即使当前窗口大小为 0，也是可以发送紧急数据的，因为紧急数据无须缓存。 + + + +**可选项字段** + +选项（Option）：长度不定，但长度必须是 32bits 的整数倍。 + +## 五、TCP三次握手 + +![4](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E7%BD%91%E7%BB%9C/TCPIP/4.png) + +1. TCP服务器进程先创建传输控制块TCB，时刻准备接受客户进程的连接请求，此时服务器就进入了LISTEN（监听）状态； +2. TCP客户进程也是先创建传输控制块TCB，然后向服务器发出连接请求报文，这是报文首部中的同部位SYN=1，同时选择一个初始序列号 seq=x ，此时，TCP客户端进程进入了 SYN-SENT（同步已发送状态）状态。TCP规定，SYN报文段（SYN=1的报文段）不能携带数据，但需要消耗掉一个序号。 +3. TCP服务器收到请求报文后，如果同意连接，则发出确认报文。确认报文中应该 ACK=1，SYN=1，确认号是ack=x+1，同时也要为自己初始化一个序列号 seq=y，此时，TCP服务器进程进入了SYN-RCVD（同步收到）状态。这个报文也不能携带数据，但是同样要消耗一个序号。 +4. TCP客户进程收到确认后，还要向服务器给出确认。确认报文的ACK=1，ack=y+1，自己的序列号seq=x+1，此时，TCP连接建立，客户端进入ESTABLISHED（已建立连接）状态。TCP规定，ACK报文段可以携带数据，但是如果不携带数据则不消耗序号。 +5. 当服务器收到客户端的确认后也进入ESTABLISHED状态，此后双方就可以开始通信了。 + +## 六、TCP四次挥手 + +![5](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E7%BD%91%E7%BB%9C/TCPIP/5.png) + +1. 客户端进程发出连接释放报文，并且停止发送数据。释放数据报文首部，FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即使不携带数据，也要消耗一个序号。 +2. 服务器收到连接释放报文，发出确认报文，ACK=1，ack=u+1，并且带上自己的序列号seq=v，此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，但是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。 +3. 客户端收到服务器的确认请求后，此时，客户端就进入FIN-WAIT-2（终止等待2）状态，等待服务器发送连接释放报文（在这之前还需要接受服务器发送的最后的数据）。 +4. 服务器将最后的数据发送完毕后，就向客户端发送连接释放报文，FIN=1，ack=u+1，由于在半关闭状态，服务器很可能又发送了一些数据，假定此时的序列号为seq=w，此时，服务器就进入了LAST-ACK（最后确认）状态，等待客户端的确认。 +5. 客户端收到服务器的连接释放报文后，必须发出确认，ACK=1，ack=w+1，而自己的序列号是seq=u+1，此时，客户端就进入了TIME-WAIT（时间等待）状态。注意此时TCP连接还没有释放，必须经过2∗ *∗MSL（最长报文段寿命）的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态。 +6. 服务器只要收到了客户端发出的确认，立即进入CLOSED状态。同样，撤销TCB后，就结束了这次的TCP连接。可以看到，服务器结束TCP连接的时间要比客户端早一些。 + diff --git a/网络/TCPIP/TLS.md b/网络/TCPIP/TLS.md new file mode 100644 index 0000000..3671e26 --- /dev/null +++ b/网络/TCPIP/TLS.md @@ -0,0 +1,285 @@ +## **一、从HTTPS讲起** + + HTTP 本身不具备加密的功能，所以也无法做到对通信整体（使用 HTTP 协议通信的请求和响应的内容）进行加密。 + + HTTP之所以会被HTTP取代，最重要的原因，就是不安全。为什么不安全？——按传输层 TCP/IP 协议族的工作机制，通信内容在所有的通信线路上都有可能遭到窥视。而HTTP 在传输数据的过程中，所有的数据都是明文传输，非常奔放，自然没有安全性可言。数据在公网上传输，容易被第三方获取，尤其特别是一些敏感数据，比如用户密码和信用卡信息等，一旦被第三方获取，后果不堪设想。 + + HTTPS 主要用于解决数据安全传输的问题，通过加密套件，让数据在网络传输过程中对第三方“不可见”（看见的是无意义的乱码信息）。在 HTTPS 中，原有的 HTTP 协议会得到 TLS (安全传输层协议) 或其前辈 SSL (安全套接层) 的加密。因此 HTTPS 也常指 HTTP over TLS 或 HTTP over SSL。 + + 也就是说 HTTPS = HTTP + SSL / TLS。 + +![img](../images/TCPIP/tls-1.png) + + SSL/TLS是一个介于HTTP协议和TCP协议之间的可选层。 + + SSL（Secure Socket Layer，安全套接字层）由Netscape公司研发，用于确保数据在网络之上传输过程不会被截取，当前版本为3.0。 + + TLS（Transport Layer Security，传输层安全协议）则是由IETF（Internet Engineering Task Force，Internet工程任务组）纳入标准化的一种新的协议，它建立在SSL 3.0协议规范之上，是SSL 3.0的后续版本，可以理解为SSL 3.1。 + +![img](../images/TCPIP/tls-2.jpeg) + +SSL/TLS协议能够提供的安全目标主要包括如下几个： + +- 认证性——借助数字证书认证服务器端和客户端身份，防止身份伪造 +- 机密性——借助加密防止第三方窃听 +- 完整性——借助消息认证码(MAC)保障数据完整性，防止消息篡改 +- 重放保护——通过使用隐式序列号防止重放攻击 + +简单的说，SSL/TLS就是一套协议，为客户端和服务器之间通信，约定和交换密钥，提供了可靠的机制。 + +### **二、SSL/TLS 及其协议格式** + +SSL/TLS协议被设计为一个两阶段协议，分为握手阶段和应用阶段： + +- 握手阶段也称协商阶段，在这一阶段，客户端和服务器端会认证对方身份(依赖于PKI体系，利用数字证书进行身份认证)，并协商通信中使用的安全参数、密码套件以及MasterSecret。后续通信使用的所有密钥都是通过MasterSecret生成。 +- 在握手阶段完成后，进入应用阶段。在应用阶段通信双方使用握手阶段协商好的密钥进行安全通信。 + +SSL/TLS协议有一个高度模块化的架构，分为很多子协议，如下图所示： + +![img](../images/TCPIP/tls-3.jpeg) + +握手层： + +- SSL握手协议：包括协商安全参数和密码套件、服务器身份认证(客户端身份认证可选)、密钥交换； +- SSL握手密钥参数更换协议：一条消息表明握手协议已经完成； +- SSL告警协议：对握手协议中一些异常的错误提醒，分为fatal和warning两个级别，fatal类型的错误会直接中断SSL链接，而warning级别的错误SSL链接仍可继续，只是会给出错误警告； + +记录层：包括对消息的分段、压缩、消息认证和完整性保护、加密等。 + +- 数据分片 +- 数据压缩记录/解压缩 +- 数据加密规约/负载保护 + +### **三、SSL/TLS 握手过程详解** + +#### **原理详解** + +![img](../images/TCPIP/tls-4.jpeg) + +首先得完成传输层的握手，然后进入SSL握手阶段： + +**1、ClientHello** + + 客户端发送Client Hello Message，表明自己可以使用的SSL版本、以及相应参数。 + +- client_version：SSL版本。客户端会从高到低去尝试填入自己支持的SSL版本，例如这里就是SSLv3.0。 +- random：客户端随机数。客户端的随机字符序列，用于后续协商密钥。 +- session_id：本次会话ID。用于后面恢复会话。如果没有会话ID，则这里可以为空。 +- cipher_suites：支持的加密套件列表。根据客户端想要使用的且自己支持的加密套件由高到低排序。 +- compression_methods：压缩算法列表。根据客户端想要使用的且自己支持的压缩算法由高到低排序。可以为null，表示不要压缩。 + +**2、ServerHello** + +【Server Hello】 + +服务器接受到ClientHello后，会返回ServerHello。服务器从客户端在ClientHello中提供的密码套件、SSL/TLS版本、压缩算法列表里选择它所支持的项，并把它的选择包含在ServerHello中告知客户端。 + +ServerHello中同样会包含一个随机数，同样4+28 字节类型，由服务器生成。 + +- server_version：服务器支持的SSL版本。例如这里就是SSLv3.0。 +- random：服务器随机数。服务器端的随机字符序列，用于后续协商密钥。 +- session_id：本次会话ID。如果服务器找到了客户端传过来的session_id会话，并且可以恢复会话，那么这里会填入和Client Hello相同的session_id；否则这里将填入新session_id +- cipher_suite：密钥套件。服务器支持的，且是从客户端给的列表中选的密钥套件。 +- compression_method：压缩算法。服务器支持的，且是从客户端给的列表中选的压缩算法。 + +接下来SSL协议的建立就基于服务器选择的密码套件类型、SSL/TLS协议版本以及压缩算法。 + +**3、Server -> Client：Certificate、Server Key Exchange、Certificate Request、ServerHello Done** + +【Certificate*】[服务器证书](https://cloud.tencent.com/product/ssl?from_column=20065&from=20065) + +和所选密钥套件中密钥交换算法（Key Exchange）匹配的，用于客户端验证服务器身份和交换密钥的X.509证书。 + +【Server Key Exchange*】服务器密钥交换信息 + +如果服务器没有证书，或者服务器的证书仅用来签名（如DSS证书、签名RSA证书），或者使用的是FORTEZZA KEA密钥交换算法（现在已经不用了，不需要去了解），那么就需要发送这条消息。 + +【Certificate Request *】证书请求 + +要求客户端也发送它的证书，让服务端校验客户端的身份。 + +【Server Hello Done】服务器Hello阶段结束信息 + +一条简单的表明状态的空消息。 + +**3、客户端校验服务端身份** + +【校验服务器身份】 + +客户端会校验服务器发过来的证书的合法性，包括： + +- 证书链的可信性 +- 证书是否被吊销 +- 证书是否处于有效期 +- 证书的域名是否和当前访问域名匹配 + +如果发现证书不合法，客户端可以发起告警信息。 + +**4、Client --> Server：Certificate Verify、Change Cipher Spec、Encrypted Handshake Message** + +【Certificate*】客户端证书 + +如果服务器发送了“Certificate Request”，要求校验客户端身份，那么客户端需要回应自己的证书。如果客户端没有合适的证书，直接抛出告警信息让服务端处理（服务端的处理方式通常就是断开TCP连接）。和所选密钥套件中密钥交换算法（Key Exchange）匹配的，用于服务器验证客户端身份的X.509证书。 + +【Client Key Exchange*】客户端密钥交换信息：合法性校验通过后，客户端计算产生随机数字Pre-master，并用证书公钥加密，发送给服务器。 + +对于不同的密钥交换算法，密钥交换信息格式也不同： + +| 密钥交换算法 | 密钥交换信息 | +| :------------- | :------------------------ | +| RSA | EncryptedPreMasterSecret | +| Diffie-Hellman | ClientDiffieHellmanPublic | +| Fortezza Kea | FortezzaKeys | + +通常我们都会用RSA，而RSA的密钥交换信息就是加密的预主密钥（Encrypted Pre-Master Secret）。服务端会生成48字节的预主密钥，用服务器传过来的公钥证书加密该预主密钥。 + +【Certificate Verify*】客户端证书校验信息 + +用于提供客户端证书的显示校验信息，仅在具有签名功能的客户端证书（也就是除包含固定diffie-hellman参数的证书外的所有证书）之后发送。它是采用客户端的私钥加密的一段基于已经协商的通信信息得到的数据，服务器可以用公钥解密验证。 + +【Change Cipher Spec】更换加密规约 + +此时客户端已经获得全部的计算协商密钥所需信息：两个明文随机数random_S与random_C，还有自己计算产生的Pre-master。 + +用于提示服务端这条连接以后都使用当前协商好的加密方式以及主密钥，是一条事件消息。 + +【Finish（Encrypted Handshake Message）】完成信息 + +当所有操作完成后，发送Finish信息。Finish信息包含了Handshake信息、主密钥的哈希散列（如SHA、MD5）数据，用于验证身份校验和密钥交换过程都成功了。Finish消息不要求收到回包，发送之后可以立刻进行加密应用数据传输。 + +**5、服务端回应客户端** + +服务端同样地发送Change Cipher Spec、Finish（Encrypted Handshake Message）消息，然后开始数据传输。 + +#### **抓包实例讲解** + +1、访问[www.jd.com](https://cloud.tencent.com/developer/article/www.jd.com?from_column=20421&from=20421)（https）网站，抓取数据包，筛选出tls协议内容。（tls && tcp.port==60457） + +![img](../images/TCPIP/tls-5.png) + +2、握手过程详解 + +1）ClientHello + +![img](../images/TCPIP/tls-6.png) + +客户端：TLS 1.2协议、客户端随机数、SessionID、加密套件（支持16种）、压缩算法（null） + + + +2）ServerHello + +![img](../images/TCPIP/tls-7.png) + +服务器也用TLS 1.2；提供服务器随机数；没有找到这个客户端的SessionID，所以填入了新的SessionID；选择了TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA384加密套件；同意不压缩数据； + + + +3）Server -> Client： + +- Certificate +- Server Key Exchange +- ServerHello Done + +![img](../images/TCPIP/tls-8.png) + +回复了crt证书，回复了服务器密钥交换信息，回复了Server Hello Done + + + +4）Client -> Server： + +- Client Key Exchange +- Change Cipher Spec +- Encrypted Handshake Message + +![img](../images/TCPIP/tls-9.png) + +客户端校验了证书合法性，单向认证于是客户端没有发送证书；产生了预主密钥，并用服务器发过来的公钥加密放到Client Key Exchange发送给服务器；生成主密钥及一系列通信密钥；发送Change Cipher Spec，通知服务端后面再发送的消息都会使用前面协商出来的秘钥加密了。Encrypted Handshake Message后完成握手。 + + + +5）Server -> Client，包括三部分 + +- New Session Ticket +- Change Cipher Spec +- Encrypted Handshake Message + +![img](../images/TCPIP/tls-10.png) + +服务端收到预主密钥，取出预主密钥，生成主密钥及一系列通信密钥；发送Change Cipher Spec、Encrypted Handshake Message后完成握手。 + +**New Session Ticket** + +包含了一个加密通信所需要的信息，这些数据采用一个只有服务器知道的密钥进行加密。目标是消除服务器需要维护每个客户端的会话状态缓存的要求。 + +**Change Cipher Spec** + +编码改变通知。这一步是服务端通知客户端后面再发送的消息都会使用加密，也是一条事件消息。 + +**Encrypted Handshake Message** + +这一步对应的是 Server Finish 消息，服务端也会将握手过程的消息生成摘要再用秘钥加密，这是服务端发出的第一条加密消息。客户端接收后会用秘钥解密，能解出来说明协商的秘钥是一致的。 + +到这里双方SSL/TLS握手完成。 + + + +6）Application Data + +![img](../images/TCPIP/tls-11.png) + +开始加密地传输数据 + + + +### **四、TLS与SSL差别** + +| 协议 | 使用情况 | +| :----------- | :--------------------------------------------- | +| SSLv3.0以下 | 有安全问题，且已被废弃，不建议使用 | +| TLSv1.0/v1.1 | 过渡版本，不建议使用 | +| TLSv1.2 | 目前绝大多数都在使用，不知道选什么就选这个版本 | +| TLSv1.3 | 最新的更快更安全的协议，如果有条件建议一步到位 | + +SSL/TLS由于使用了加密算法，非常消耗CPU资源，因此应该尽可能将SSL在LB（[负载均衡](https://cloud.tencent.com/product/clb?from_column=20065&from=20065)，Load Balance）层终结掉。终结的意思是[负载均衡器](https://cloud.tencent.com/product/clb?from_column=20065&from=20065)对外提供SSL连接，对内提供TCP连接，把SSL剥离掉。这样传输更快，且后端服务不需要消耗CPU资源处理SSL了（后端服务一般都是VPC的，肯定安全）。 + +**TLS的主要增强内容** + +> TLS的主要目标是使SSL更安全，并使协议的规范更精确和完善。TLS 在SSL v3.0 的基础上，提供了以下增强内容： + +- 1.更安全的MAC算法 +- 2.更严密的警报 +- 3.“灰色区域”规范的更明确的定义 + +**TLS对于安全性的改进** + +- 1.对于消息认证使用密钥散列法：TLS 使用“消息认证代码的密钥散列法”（HMAC），当记录在开放的网络（如因特网）上传送时，该代码确保记录不会被变更。SSLv3.0还提供键控消息认证，但HMAC比SSLv3.0使用的（消息认证代码）MAC 功能更安全。 +- 2.增强的伪随机功能（PRF）：PRF生成密钥数据。在TLS中，HMAC定义PRF。PRF使用两种散列算法保证其安全性。如果任一算法暴露了，只要第二种算法未暴露，则数据仍然是安全的。 +- 3.改进的已完成消息验证：TLS和SSLv3.0都对两个端点提供已完成的消息，该消息认证交换的消息没有被变更。然而，TLS将此已完成消息基于PRF和HMAC值之上，这也比SSLv3.0更安全。 +- 4.一致证书处理：与SSLv3.0不同，TLS试图指定必须在TLS之间实现交换的证书类型。 +- 5.特定警报消息：TLS提供更多的特定和附加警报，以指示任一会话端点检测到的问题。TLS还对何时应该发送某些警报进行记录。 + +### **五、SSL/TLS 可以解决什么安全问题** + + TLS的基本工作方式是，客户端使用非对称加密与服务器进行通信，实现身份验证并协商对称加密使用的密钥，然后对称加密算法采用协商密钥对信息以及信息摘要进行加密通信，不同的节点之间采用的对称密钥不同，从而可以保证信息只能通信双方获取。 + + 身份验证：通过验证CA证书，验证服务器的身份，不能造假。 + + 信息加密：通过加密，混淆明文数据，让数据在网络中传输更加安全。 + + 散列算法：由于散列函数不可逆，攻击者无法还原明文，同时无法篡改文件内容。 + +### **六、HTTPS性能损耗** + + 前文讨论了HTTPS原理与优势：身份验证、信息加密与完整性校验等，且未对TCP和HTTP协议做任何修改。但通过增加新协议以实现更安全的通信必然需要付出代价，HTTPS协议的性能损耗主要体现如下： 1）握手延时 + + 一次完整的握手至少需要两端依次来回两次通信，至少增加延时2* RTT，利用会话缓存从而复用连接，延时也至少1* RTT*。 2）加解密延时 & CPU资源消耗 + + 除数据传输之外，HTTPS通信主要包括对对称加解密、非对称加解密(服务器主要采用私钥解密数据) + + 网上评测数据参考： + + 压测 TS8 机型的单核 CPU：**对称加密算法AES-CBC-256 吞吐量 600Mbps，非对称 RSA 私钥解密200次/s**。不考虑其它软件层面的开销，10G 网卡为对称加密需要消耗 CPU 约17核，24核CPU最多接入 HTTPS 连接 4800; + + **静态节点当前10G 网卡的 TS8 机型的 HTTP 单机接入能力约为10w/s**，如果将所有的HTTP连接变为HTTPS连接，则明显RSA的解密最先成为瓶颈。因此，RSA的解密能力是当前困扰HTTPS接入的主要难题。 \ No newline at end of file diff --git a/网络/TCPIP/Wireshark.md b/网络/TCPIP/Wireshark.md new file mode 100644 index 0000000..867d1a4 --- /dev/null +++ b/网络/TCPIP/Wireshark.md @@ -0,0 +1,131 @@ +# Wireshark + +## 一、基本语法 + +基本使用方法，及包过滤规则 + +### 1、过滤IP，如来源IP或者目标IP等于某个IP + +``` +ip.src eq 192.168.1.107 or ip.dst eq 192.168.1.107 + +ip.addr eq 192.168.1.107 //显示来源IP和目标IP。 +``` + + + +### 2、过滤端口 + +``` +tcp.port eq 80 // 显示来源和目标都是80的端口 + +tcp.port == 80 + +tcp.port eq 2722 + +tcp.port eq 80 or udp.port eq 80 + +tcp.dstport == 80 // 只显tcp协议的目标端口80 + +tcp.srcport == 80 // 只显tcp协议的来源端口80 + +udp.port eq 15000 //udp同样适用 + +tcp.port >= 1 and tcp.port <= 80 //过滤端口范围 +``` + +### 3、过滤协议 + +``` +tcp、udp、arp、icmp、http、smtp、ftp、dns、msnms、ip、ssl、oicq、bootp +排除arp包，如!arp 或者 not arp +``` + +### 4、过滤MAC + +``` +eth.dst == A0:00:00:04:C5:84 // 过滤目标mac + +eth.src eq A0:00:00:04:C5:84 // 过滤来源mac + +eth.dst==A0:00:00:04:C5:84 + +eth.dst==A0-00-00-04-C5-84 + +eth.addr eq A0:00:00:04:C5:84 // 过滤来源MAC和目标MAC都等于A0:00:00:04:C5:84的 +``` + +### 5、http模式过滤 + +``` +http.request.method == “GET” //过滤GET请求 + +http.request.method == “POST” //过滤POST请求 + +http.request.url == “/img/1.jpg” //过滤url + +http contains “GET” //过滤数据包的内容 + +http contains “HTTP/1.” //过滤数据包的内容 +``` + +#### GET包 + +``` +http.request.method == “GET” && http contains “Host: “ + +http.request.method == “GET” && http contains “User-Agent: “ +``` + +#### POST包 + +``` +http.request.method == “POST” && http contains “Host: “ + +http.request.method == “POST” && http contains “User-Agent: “ +``` + +#### 响应包 + +``` +http contains “HTTP/1.1 200 OK” && http contains “Content-Type: “ + +http contains “HTTP/1.0 200 OK” && http contains “Content-Type: “ +``` + +一定包含如下 + +Content-Type: + +### 6、TCP参数过滤 + +``` +tcp.flags 显示包含TCP标志的封包。 + +tcp.flags.syn == 0x02 显示包含TCP SYN标志的封包。 + +tcp.window_size == 0 && tcp.flags.reset != 1 +``` + +### 7、包内容过滤 + +matches(匹配)和contains(包含某字符串)语法 + +ip.src==192.168.1.107 and udp[8:5] matches “\\x02\\x12\\x21\\x00\\x22″ + +ip.src==192.168.1.107 and udp contains 02:12:21:00:22 + +ip.src==192.168.1.107 and tcp contains “GET” + +udp contains 7c:7c:7d:7d 匹配payload中含有0x7c7c7d7d的UDP数据包，不一定是从第一字节匹配。 + +### 8.DHCP + +注意：DHCP协议的检索规则不是dhcp/DHCP， 而是bootp + +以寻找伪造DHCP服务器为例，介绍Wireshark的用法。在显示过滤器中加入过滤规则， + +显示所有非来自DHCP服务器并且bootp.type==0x02（Offer/Ack/NAK）的信息： + +bootp.type==0x02 and not ip.src==192.168.1.1 + diff --git a/网络/域名/DNS域名系统服务.md b/网络/域名/DNS域名系统服务.md new file mode 100644 index 0000000..467e369 --- /dev/null +++ b/网络/域名/DNS域名系统服务.md @@ -0,0 +1,196 @@ +--- +title: DNS域名系统服务 +categories: + - Linux服务 +tags: + - DNS +date: 2022-04-04 21:35:25 +--- +# DNS域名系统服务 + +## DNS介绍 + +定义：域名也就是个名字，用名字代替ip地址，方便记忆 + +正向解析：域名换IP + +反向解析：IP换域名（比较少） + +## 域名组成 + +常见格式：www.lzcwy.cn + +其实隐藏了.（根域）：www.lzcwy.cn. + +. ：根域，可省略不写 + +com：顶级域，由ICANN组织指定和管理 + +主机名: s1.www.atguigu.com.中的s1就是主机名，一般用来表示具体某一台主机 + +``` +国家地区域名:cn(中国)、hk（香港）、sg（新加坡）等 +通用顶级域名: com（商业机构）、org（非营利组织）、edu（教育机构）等新通用顶级域名:red(红色、热情)、top(顶级、高端）等 +lzcwy:二级域（注册域），可由个人或组织申请注册 +www:三级域（子域），服务器网站名代表 +``` + +主机名: s1.www.lzcwy.cn.中的s1就是主机名，一般用来表示具体某一台主机 + +## DNS软件信息 + +**软件名称：bind** + +**服务名称：named** + +**软件端口：UDP 53（域名解析） TCP（主从同步）** + +**配置文件：/etc/named.conf（服务器运行参数）** + +**区域配置文件：/etc/named.rfc1912.zones（服务器解析的区域配置，正反向区域定义信息）** + +**数据配置文件：/var/named/xx.xx（主机名和IP地址对应的解析关系）** + +## 搭建DNS + +1、安装软件 + +``` +yum install bind +``` + +2、配置主配置文件/etc/named.conf + +``` +vim /etc/named.conf +``` + +原内容解释 + +``` +options { + listen-on port 53 { 127.0.0.1; }; #设置DNS服务的ip地址，推荐设置成any + listen-on-v6 port 53 { ::1; }; #IPv6 + directory "/var/named"; #数据文件的位置 + dump-file "/var/named/data/cache_dump.db"; #数据文件的位置 + statistics-file "/var/named/data/named_stats.txt"; #数据文件的位置 + memstatistics-file "/var/named/data/named_mem_stats.txt"; #数据文件的位置 + secroots-file "/var/named/data/named.secroots"; #数据文件的位置 + recursing-file "/var/named/data/named.recursing"; #数据文件的位置 + allow-query { localhost; }; #允许访问此DNS的ip地址，可设置成any +``` + +修改为如下 + +``` +options { + listen-on port 53 { any; }; + directory "/var/named"; + dump-file "/var/named/data/cache_dump.db"; + statistics-file "/var/named/data/named_stats.txt"; + memstatistics-file "/var/named/data/named_mem_stats.txt"; + secroots-file "/var/named/data/named.secroots"; + recursing-file "/var/named/data/named.recursing"; + allow-query { any; }; +``` + +3、配置区域配置文件/etc/named.rfc1912.zones + +``` +vim /etc/named.rfc1912.zones +``` + +删除多余部分，留下这些内容 + +``` +zone "localhost.localdomain" IN { #正向配置区域配置文件标签，修改成要解析的域 + type master; #DNS类型，主备 + file "named.localhost"; #正向数据配置文件名称，保存在/var/name/下 + allow-update { none; }; #运行数据更新的IP地址（即备用dns） +}; + + +zone "1.0.0.127.in-addr.arpa" IN { #反向区域配置文件标签，如0.1.168.192.in-addr-arpa + type master; + file "named.loopback"; + allow-update { none; }; +}; +``` + +根据自己的域名修改配置文件 + +``` +zone "lzcwy.cn" IN { + type master; + file "named.lzcwy"; + allow-update { none; }; +}; + + +zone "0.1.168.192.in-addr.arpa" IN { + type master; + file "named.loopback"; + allow-update { none; }; +}; +``` + +4、配置数据配置文件/var/named/xx.xx + +``` +cp /var/named/named.localhost /var/named/named.lzcwy +vim /var/named/named.lzcwy +``` + +配置文件如下 + +``` +$TTL 1D #域名有效解析生存周期 +@ IN SOA @ rname.invalid. ( + 0 ; serial + 1D ; refresh + 1H ; retry + 1W ; expire + 3H ) ; minimum + NS @ + A 127.0.0.1 + AAAA ::1 +``` + +![](https://lzcwy-1257903760.cos.ap-beijing.myqcloud.com/%E8%BF%90%E7%BB%B4/DNS/1.png) + +5、给相关文件授权 + +``` +chmod 777 /var/named/named.lzcwy /var/named/named.loopback +``` + +6、重启DNS服务 + +``` +systemctl restart named +``` + +## 开启DNS转发器 + +解析内网域名已经可以实现了，那内网服务器怎么解析外网域名呢，这就需要配置DNS转发器，当内网无法解析到就去外网解析 + +1、编辑主配置文件 + +``` +vim /etc/named.conf +#内容如下，增加最后两行 +options { + listen-on port 53 { any; }; + directory "/var/named"; + dump-file "/var/named/data/cache_dump.db"; + statistics-file "/var/named/data/named_stats.txt"; + memstatistics-file "/var/named/data/named_mem_stats.txt"; + secroots-file "/var/named/data/named.secroots"; + recursing-file "/var/named/data/named.recursing"; + allow-query { any; }； + #下面为新增 + forwarders { 外网DNS地址; }; + forward only; +``` + +2、重启服务即可 diff --git a/运维/.DS_Store b/运维/.DS_Store new file mode 100644 index 0000000..6a0f73e Binary files /dev/null and b/运维/.DS_Store differ diff --git a/运维/CICD/Git/Git.md b/运维/CICD/Git/Git.md new file mode 100644 index 0000000..f11d2fa --- /dev/null +++ b/运维/CICD/Git/Git.md @@ -0,0 +1,38 @@ +## Git配置用户信息 + +``` +查看配置： + git config --list +设置用户名： + git config --global user.name "用户名" +设置邮箱地址： + git config --global user.email 邮箱地址 +``` + +## 查看及切换历史版本 + +``` +查看历史版本： + git log --online + git log +切换历史版本 + git reset --hard 版本号 +``` + +## 分支 + +``` +查看分支： + git branch +创建分支： + git branch 新分支名 +切换分支： + git checkout 分支 +合并分支： + git merge 分支名 +删除分支： + git branch -d 分支名 +重命名分支： + git branch -m 老分支名 新分支名 +``` + diff --git a/运维/CICD/Gitlab/gitlab流水线.md b/运维/CICD/Gitlab/gitlab流水线.md new file mode 100644 index 0000000..e69de29 diff --git a/运维/CICD/Gitlab/搭建gitlab.md b/运维/CICD/Gitlab/搭建gitlab.md new file mode 100644 index 0000000..d733749 --- /dev/null +++ b/运维/CICD/Gitlab/搭建gitlab.md @@ -0,0 +1,11 @@ +# 搭建Gitlab + +## 一、环境 + +腾讯云4C4G轻量型服务器 + +gitlab 环境要求至少4C4G，然而实际资源消耗如下： + +![](./../images/gitlab/gitlab-1.png) + +所以个人推荐选用4C8G服务器，或者2C8G服务器，极致性能可以选择2C4G 2G swap。 \ No newline at end of file diff --git a/运维/中间件/Pulsar/Pulsar.assets/1.png b/运维/中间件/Pulsar/Pulsar.assets/1.png new file mode 100644 index 0000000..11bb8e2 Binary files /dev/null and b/运维/中间件/Pulsar/Pulsar.assets/1.png differ diff --git a/运维/中间件/Pulsar/Pulsar.assets/2.png b/运维/中间件/Pulsar/Pulsar.assets/2.png new file mode 100644 index 0000000..7be63b2 Binary files /dev/null and b/运维/中间件/Pulsar/Pulsar.assets/2.png differ diff --git a/运维/中间件/Pulsar/Pulsar.md b/运维/中间件/Pulsar/Pulsar.md new file mode 100644 index 0000000..62aba6d --- /dev/null +++ b/运维/中间件/Pulsar/Pulsar.md @@ -0,0 +1,22 @@ +# Apache Pulsar + +## 一、架构介绍 + +### 1、软件架构 + +Apache Pulsar 是一个发布-订阅模型的消息系统，由 Broker、Apache BookKeeper、Producer、Consumer 等组件组成。 + +![](C:\Users\zhengchiliu\Desktop\笔记汇总\中间件\Pulsar.assets\1.png) + +- Producer ： 消息的生产者，负责发布消息到 Topic。 +- Consumer：消息的消费者，负责从 Topic 订阅消息。 +- Broker：无状态服务层，负责接收和传递消息，集群负载均衡等工作，Broker 不会持久化保存元数据，因此可以快速的上、下线。 +- Apache BookKeeper：有状态持久层，由一组 Bookie 存储节点组成，可以持久化地存储消息。 + +Apache Pulsar 在架构设计上采用了计算与存储分离的模式，消息发布和订阅相关的计算逻辑在 Broker 中完成，数据存储在 Apache BookKeeper 集群的 Bookie 节点上。 + +### 2、Topic与分区 + +![](C:\Users\zhengchiliu\Desktop\笔记汇总\中间件\Pulsar.assets\1.png) + +创建一个三分区Topic，每个分区的数据由N个数据分片组成，每个分片3副本 \ No newline at end of file diff --git a/运维/分布式存储/Ceph/assets/image-20200426180726385.png b/运维/分布式存储/Ceph/assets/image-20200426180726385.png new file mode 100644 index 0000000..99eba41 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200426180726385.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427100435453.png b/运维/分布式存储/Ceph/assets/image-20200427100435453.png new file mode 100644 index 0000000..c065ac7 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427100435453.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427101031988.png b/运维/分布式存储/Ceph/assets/image-20200427101031988.png new file mode 100644 index 0000000..2a36590 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427101031988.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427101925308.png b/运维/分布式存储/Ceph/assets/image-20200427101925308.png new file mode 100644 index 0000000..3784f7a Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427101925308.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427144601636.png b/运维/分布式存储/Ceph/assets/image-20200427144601636.png new file mode 100644 index 0000000..76017c2 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427144601636.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427144655626.png b/运维/分布式存储/Ceph/assets/image-20200427144655626.png new file mode 100644 index 0000000..c62f32a Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427144655626.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427144918893.png b/运维/分布式存储/Ceph/assets/image-20200427144918893.png new file mode 100644 index 0000000..4ca0d59 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427144918893.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427150232465.png b/运维/分布式存储/Ceph/assets/image-20200427150232465.png new file mode 100644 index 0000000..a577d29 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427150232465.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427181932971.png b/运维/分布式存储/Ceph/assets/image-20200427181932971.png new file mode 100644 index 0000000..d421a77 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427181932971.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427183616937.png b/运维/分布式存储/Ceph/assets/image-20200427183616937.png new file mode 100644 index 0000000..517deb6 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427183616937.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427184923746.png b/运维/分布式存储/Ceph/assets/image-20200427184923746.png new file mode 100644 index 0000000..30fe72f Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427184923746.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427201944778.png b/运维/分布式存储/Ceph/assets/image-20200427201944778.png new file mode 100644 index 0000000..c5f3cba Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427201944778.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200427203351189.png b/运维/分布式存储/Ceph/assets/image-20200427203351189.png new file mode 100644 index 0000000..10061cd Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200427203351189.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200430151905835.png b/运维/分布式存储/Ceph/assets/image-20200430151905835.png new file mode 100644 index 0000000..3c4ae77 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200430151905835.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200430192604292.png b/运维/分布式存储/Ceph/assets/image-20200430192604292.png new file mode 100644 index 0000000..fd69790 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200430192604292.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200430192726639.png b/运维/分布式存储/Ceph/assets/image-20200430192726639.png new file mode 100644 index 0000000..f88056b Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200430192726639.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200430194407343.png b/运维/分布式存储/Ceph/assets/image-20200430194407343.png new file mode 100644 index 0000000..d3adbb6 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200430194407343.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200430194440011.png b/运维/分布式存储/Ceph/assets/image-20200430194440011.png new file mode 100644 index 0000000..5c07a80 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200430194440011.png differ diff --git a/运维/分布式存储/Ceph/assets/image-20200502210158493.png b/运维/分布式存储/Ceph/assets/image-20200502210158493.png new file mode 100644 index 0000000..962d176 Binary files /dev/null and b/运维/分布式存储/Ceph/assets/image-20200502210158493.png differ diff --git a/运维/分布式存储/Ceph/分布式存储Ceph技术.md b/运维/分布式存储/Ceph/分布式存储Ceph技术.md new file mode 100644 index 0000000..8945a54 --- /dev/null +++ b/运维/分布式存储/Ceph/分布式存储Ceph技术.md @@ -0,0 +1,1172 @@ +# 分布式存储Ceph技术 + +#### 认识分布式存储 + +```shell +分布式存储系统，是通过网络将数据分散存储在多台独立的设备上。 +``` + +#### 分布式存储系统的特性 + +```shell +可扩展 +分布式存储系统可以扩展到几百台甚至几千台的集群规模，而且随着集群规模的增长，系统整体性能表现为线性增长。分布式存储的水平扩展有以下几个特性： + +　　1) 节点扩展后，旧数据会自动迁移到新节点，实现负载均衡，避免单点过热的情况出现; + +　　2) 水平扩展只需要将新节点和原有集群连接到同一网络，整个过程不会对业务造成影响; + +　　3) 当节点被添加到集群，集群系统的整体容量和性能也随之线性扩展，此后新节点的资源就会被管理平台接管，被用于分配或者回收。 + +低成本 +分布式存储系统的自动容错、自动负载均衡机制使其可以构建在普通的PC机之上。另外，线性扩展能力也使得增加、减少机器非常方便，可以实现自动运维。 + +高性能 +无论是针对整个集群还是单台服务器，都要求分布式存储系统具备高性能。 + +易用 +分布式存储系统需要能够提供易用的对外接口，另外，也要求具备完善的监控、运维工具，并能够与其他系统集成。 + +易管理 +可通过一个简单的WEB界面就可以对整个系统进行配置管理，运维简便，极低的管理成本。 + + +分布式存储系统的挑战主要在于数据、状态信息的持久化，要求在自动迁移、自动容错、并发读写的过程中保证数据的一致性。分布式存储涉及的技术主要来自两个领域：分布式系统以及数据库。 +``` + +###### 存储分类 + +```shell + +本地存储本地的文件系统，不能在网络上用。 + ext3 ext4 xfs ntfs + +网络存储---网络文件系统，共享的都是文件系统。 + nfs 网络文件系统 + hdfs 分布式网络文件系统 + glusterfs 分布式网络文件系统 + + + 共享的是裸设备 + 块存储 cinder ceph(块存储 对象存储 网络文件系统-分布式) + SAN(存储区域网) + + + 分布式 + 集群 + + client + | + namenode 元数据服务器 + | + ------------------------------------ + | | | + datanode datanode datanode +``` + + + +## 分布式存储分类介绍 + +#### Hadoop HDFS(大数据分布式文件系统) + +```shell +HDFS（Hadoop Distributed File System）是一个分布式文件系统,是hadoop生态系统的一个重要组成部分，是hadoop中的的存储组件.HDFS是一个高度容错性的系统，HDFS能提供高吞吐量的数据访问，非常适合大规模数据集上的应用。 + +HDFS的优点： + 1. 高容错性 + 数据自动保存多个副本 + 副本丢失后,自动恢复 + 2. 良好的数据访问机制 + 一次写入、多次读取,保证数据一致性 + 3. 适合大数据文件的存储 + TB、 甚至PB级数据 + 扩展能力很强 + +HDFS的缺点： + 1. 低延迟数据访问 + 难以应付毫秒级以下的应用 + 2. 海量小文件存取 + 占用NameNode大量内存 + 3. 一个文件只能有一个写入者 + 仅支持append(追加) +``` + +#### OpenStack的对象存储Swift + +![image-20200426180726385](assets/image-20200426180726385.png) + +```shell +OpenStack Object Storage（Swift）是OpenStack开源云计算项目的子项目之一。Swift的目的是使用普通硬件来构建冗余的、可扩展的分布式对象存储集群，存储容量可达PB级。Swift的是用Python开发 + +其主要特点为： +1.各个存储的节点完全对等，是对称的系统架构。 +2. 开发者通过一个RESTful HTTP API与对象存储系统相互作用。 +3.无单点故障:Swift的元数据存储是完全均匀随机分布的，并且与对象文件存储一样，元数据也会存储多份。整个Swift集群中，也没有一个角色是单点的。 +4. 在不影响性能的情况下，集群通过增加外部节点进行扩展。 +5.无限的可扩展性：这里的扩展性分两方面，一是数据存储容量无限可扩展；二是Swift性能（如QPS、吞吐量等）可线性提升，扩容只需简单地新增机器，系统会自动完成数据迁移等工作，使各存储节点重新达到平衡状态。 +6.极高的数据持久性 + + +Swift可以用以下用途： +图片、文档存储 +长期保存的日志文件 +存储媒体库(照片、音乐、视频等) +视频监控文件的存档 +总结：Swift适合用来存储大量的、长期的、需要备份的对象。 +``` + +#### 公有云对象存储 + +公有云大都只有对象存储。例如，谷歌云存储是一个快速，具有可扩展性和高可用性的对象存储。 + +```shell +Amazon类似产品就是S3： http://aws.amazon.com/s3; + +微软类似产品Azure Bolb：http://azure.microsoft.com/en-us/documentation/articles/storage-dotnet-how-to-use-blobs/; + +阿里类似的有OSS：https://www.aliyun.com/product/oss/; + +阿里云对象存储OSS +阿里云对象存储服务（Object Storage Service，简称 OSS），是阿里云提供的海量、安全、低成本、高可靠的云存储服务 + + +存储类型（Storage Class） +OSS 提供标准、低频访问、归档三种存储类型，其中标准存储类型提供高可靠、高可用、高性能的对象存储服务，能够支持频繁的数据访问；低频访问存储类型适合长期保存不经常访问的数据（平均每月访问频率 1 到 2 次），存储单价低于标准类型；归档存储类型适合需要长期保存（建议半年以上）的归档数据，在三种存储类型中单价最低。 + +应用场景 +1、图片和音视频等应用的海量存储 +OSS可用于图片、音视频、日志等海量文件的存储。 +2、云端数据处理 +上传文件到OSS后，可以配合媒体处理服务和图片处理服务进行云端的数据处理。 +3、网页或者移动应用的静态和动态资源分离 +利用海量互联网带宽，OSS可以实现海量数据的互联网并发下载。 +``` + +#### GlusterFS分布式文件系统 + +![image-20200427100435453](assets/image-20200427100435453.png) + +```shell +GlusterFS（GNU ClusterFile System）是一种全对称的开源分布式文件系统，所谓全对称是指GlusterFS采用弹性哈希算法，没有中心节点，所有节点全部平等。GlusterFS配置方便，稳定性好，可轻松达到PB级容量，数千个节点，2011年被红帽收购。 + +PB级容量 高可用性 基于文件系统级别共享 分布式 去中心化 + +glusgerfs存储卷的类型 + +基本类型：条带，复制，哈希。 +复合卷 +复合卷就是分布式复制，分布式条带，分布式条带复制卷，像分布式复制，分布式条带这两个是比较常用的，像分布式条带复制卷三种揉一块儿的用的都比较少， + +各种卷的整理 + +分布卷：存储数据时，将文件随机存储到各台glusterfs机器上。 + 优点：存储数据时，读取速度快 + 缺点：一个birck坏掉，文件就会丢失 +复制卷：存储数据时，所有文件分别存储到每台glusterfs机器上。 + 优点：对文件进行的多次备份，一个brick坏掉，文件不会丢失，其他机器的brick上面有备份 + 缺点：占用资源 +条带卷：存数据时，一个文件分开存到每台glusterfs机器上 + 优点：对大文件，读写速度快 + 缺点：一个brick坏掉，文件就会坏掉 +``` + +#### 最常见的GPFS和HDFS有什么区别？ + +```shell +GPFS和Hadoop的HDFS系统对比，它设计用于在商用硬件上存储类似或更大的数据 + +HDFS还将文件分割成块，并将它们存储在不同的文件系统节点内。 + +HDFS对磁盘可靠性的依赖并不高，它可以在不同的节点内存储块的副本。保存单一副本块的一个节点出现故障可以再复制该组其它有效块内的副本。相较而言，虽然GPFS支持故障节点恢复，但它是一个更严重的事件，它可能包括数据(暂时性)丢失的高风险。 + +GPFS支持完整的Posix文件系统语义。 HDFS和GFS(谷歌文件系统)并不支持完整的Posix语义。 + +GPFS跨文件系统分布它的目录索引和其它元数据。相反， Hadoop将它们保留在主要和次要Namenode中，大型服务器必须在RAM内存储所有的索引信息。 + +GPFS将文件分割成小块。Hadoop HDFS喜欢64MB甚至更多的块，因为这降低了Namenode的存储需求。小块或很多小的文件会快速填充文件系统的索引，因此限制了文件系统的大小。 +``` + +# Ceph + +##### Ceph简介 + +```shell +Ceph使用C++语言开发，遵循LGPL协议开源。Sage Weil(Ceph论文发表者)于2011年创立了以Inktank公司主导Ceph的开发和社区维护。2014年Redhat收购inktank公司，并发布Inktank Ceph企业版（ICE）软件，业务场景聚焦云、备份和归档，支持对象存储和块存储以及文件系统存储应用。出现Ceph开源社区版本和Redhat企业版。 + +Cphe主要设计的初衷是变成一个可避免单节点故障的分布式文件系统，PB级别的扩展能力，而且是一种开源自由软件，许多超融合的分布式文件系统都是基于Ceph开发的。 + + +Ceph是一个统一的分布式存储系统，设计初衷是提供较好的性能、可靠性和可扩展性。 +``` + +##### ceph的优势 + +```shell +高扩展性：使用普通x86服务器，支持10~1000台服务器，支持TB到EB级的扩展。 +高可靠性：没有单点故障，多数据副本，自动管理，自动修复。 +高性能：数据分布均衡。 +可用于对象存储，块设备存储和文件系统存储 +``` + +### ceph架构 + +![image-20200427101925308](assets/image-20200427101925308.png) + +```shell +基础存储系统 +rados：基础存储系统RADOS（Reliable, Autonomic, Distributed Object Store，即可靠的、自动化的、分布式的对象存储）。所有存储在Ceph系统中的用户数据事实上最终都是由这一层来存储的。Ceph的高可靠、高可扩展、高性能、高自动化等等特性本质上也是由这一层所提供的。 + +基础库librados: +librados：这一层的功能是对RADOS进行抽象和封装，并向上层提供API，以便直接基于RADOS（而不是整个Ceph）进行应用开发。特别要注意的是，RADOS是一个对象存储系统，因此，librados实现的API也只是针对对象存储功能的。 + +高层应用接口 +radosgw：对象网关接口(对象存储) +rbd:块存储 +cephfs：文件系统存储 +其作用是在librados库的基础上提供抽象层次更高、更便于应用或客户端使用的上层接口。 +``` + +#### Ceph的基本组件 + +![image-20200427150232465](assets/image-20200427150232465.png) + +```shell +如上图所示，Ceph主要有三个基本进程 + +Osd +用于集群中所有数据与对象的存储。处理集群数据的复制、恢复、回填、再均衡。并向其他osd守护进程发送心跳，然后向Mon提供一些监控信息。 +当Ceph存储集群设定数据有两个副本时（一共存两份），则至少需要两个OSD守护进程即两个OSD节点，集群才能达到active+clean状态。 + +MDS(可选) +为Ceph文件系统提供元数据计算、缓存与同步（也就是说，Ceph 块设备和 Ceph 对象存储不使用MDS ）。在ceph中，元数据也是存储在osd节点中的，mds类似于元数据的代理缓存服务器。MDS进程并不是必须的进程，只有需要使用CEPHFS时，才需要配置MDS节点。 + +Monitor +监控整个集群的状态，维护集群的cluster MAP二进制表，保证集群数据的一致性。ClusterMAP描述了对象块存储的物理位置，以及一个将设备聚合到物理位置的桶列表。 + +Manager（ceph-mgr） +用于收集ceph集群状态、运行指标，比如存储利用率、当前性能指标和系统负载。对外提供 ceph dashboard（ceph ui）和 resetful api。Manager组件开启高可用时，至少2个 +``` + +##### ceph 结构包含两个部分 + +```shell +ceph client：访问 ceph 底层服务或组件，对外提供各种接口。比如：对象存储接口、块存储接口、文件级存储接口。 +ceph node：ceph 底层服务提供端，也就是 ceph 存储集群。 +``` + +#### Ceph存储种类及其应用场景 + +##### 块存储 + +![image-20200427144601636](assets/image-20200427144601636.png) + +```shell +典型设备： 磁盘阵列，硬盘 + +主要是将裸磁盘空间映射给主机使用的。 + +优点： + +通过Raid与LVM等手段，对数据提供了保护。 +多块廉价的硬盘组合起来，提高容量。 +多块磁盘组合出来的逻辑盘，提升读写效率。 + +缺点： +采用SAN架构组网时，光纤交换机，造价成本高。 +主机之间无法共享数据。 + +使用场景： + +Docker容器、虚拟机磁盘存储分配。 +日志存储。 +文件存储。 +``` + +##### 文件存储 + +![image-20200427144655626](assets/image-20200427144655626.png) + +```shell +典型设备： FTP、NFS服务器 +为了克服块存储文件无法共享的问题，所以有了文件存储。 +在服务器上架设FTP与NFS服务，就是文件存储。 + +优点： + +造价低，随便一台机器就可以了。 +方便文件共享。 + +缺点： + +读写速率低。 +传输速率慢。 + +使用场景： + +日志存储。 +有目录结构的文件存储。 +``` + +##### 对象存储 + +```shell +为什么需要对象存储？ + +首先，一个文件包含了属性（术语叫metadata，元数据，例如该文件的大小、修改时间、存储路径等）以及内容（以下简称数据）。 + +例如FAT32这种文件系统，存储过程是链表的形式。 + +而对象存储则将元数据独立了出来，控制节点叫元数据服务器（服务器+对象存储管理软件），里面主要负责存储对象的属性（主要是对象的数据被打散存放到了那几台分布式服务器中的信息），而其他负责存储数据的分布式服务器叫做OSD，主要负责存储文件的数据部分。当用户访问对象，会先访问元数据服务器，元数据服务器只负责反馈对象存储在哪些OSD，假设反馈文件A存储在B、C、D三台OSD，那么用户就会再次直接访问3台OSD服务器去读取数据。 + +这时候由于是3台OSD同时对外传输数据，所以传输的速度就加快了。当OSD服务器数量越多，这种读写速度的提升就越大，通过此种方式，实现了读写快的目的。 + +另一方面，对象存储软件是有专门的文件系统的，所以OSD对外又相当于文件服务器，那么就不存在文件共享方面的困难了，也解决了文件共享方面的问题。 + +所以对象存储的出现，很好地结合了块存储与文件存储的优点。 + +优点： + +具备块存储的读写高速。 +具备文件存储的共享等特性。 + +使用场景： (适合更新变动较少的数据) +图片存储。 +视频存储。 +``` + +**Ceph同时提供对象存储、块存储和文件系统存储三种功能，满足不同应用需求。** + +###### 扩展什么是OSD + +```shell +对象存储（Object-based Storage)是一种新的网络存储架构，基于对象存储技术的设备就是对象存储设备（Object-based Storage Device）简称OSD。总体上来讲，对象存储综合了NAS和SAN的优点，同时具有SAN的高速直接访问和NAS的分布式数据共享等优势，提供了具有高性能、高可靠性、跨平台以及安全的数据共享的存储体系结构。 +``` + +## Ceph 工作原理 + +##### ceph数据的存储过程 + +![image-20200427144918893](assets/image-20200427144918893.png) + +```shell +无论使用哪种存储方式（对象、块、挂载），存储的数据都会被切分成对象（Objects）。Objects size大小可以由管理员调整，通常为2M或4M。每个对象都会有一个唯一的OID，由ino与ono生成，虽然这些名词看上去很复杂，其实相当简单。ino即是文件的File ID，用于在全局唯一标示每一个文件，而ono则是分片的编号。比如：一个文件FileID为A，它被切成了两个对象，一个对象编号0，另一个编号1，那么这两个文件的oid则为A0与A1。Oid的好处是可以唯一标示每个不同的对象，并且存储了对象与文件的从属关系。由于ceph的所有数据都虚拟成了整齐划一的对象，所以在读写时效率都会比较高。 + +　　但是对象并不会直接存储进OSD中，因为对象的size很小，在一个大规模的集群中可能有几百到几千万个对象。这么多对象光是遍历寻址，速度都是很缓慢的；并且如果将对象直接通过某种固定映射的哈希算法映射到osd上，当这个osd损坏时，对象无法自动迁移至其他osd上面（因为映射函数不允许）。为了解决这些问题，ceph引入了归置组的概念，即PG。 + +　　PG是一个逻辑概念，我们linux系统中可以直接看到对象，但是无法直接看到PG。它在数据寻址时类似于数据库中的索引：每个对象都会固定映射进一个PG中，所以当我们要寻找一个对象时，只需要先找到对象所属的PG，然后遍历这个PG就可以了，无需遍历所有对象。而且在数据迁移时，也是以PG作为基本单位进行迁移，ceph不会直接操作对象。 + +　　对象时如何映射进PG的？还记得OID么？首先使用静态hash函数对OID做hash取出特征码，用特征码与PG的数量去模，得到的序号则是PGID。由于这种设计方式，PG的数量多寡直接决定了数据分布的均匀性，所以合理设置的PG数量可以很好的提升CEPH集群的性能并使数据均匀分布。 + +　　最后PG会根据管理员设置的副本数量进行复制，然后通过crush算法存储到不同的OSD节点上（其实是把PG中的所有对象存储到节点上），第一个osd节点即为主节点，其余均为从节点。 +``` + +### Ceph名词介绍 + +```shell +Ceph核心组件及概念介绍 + +Monitor + +监控整个集群的状态，维护集群的cluster MAP二进制表，保证集群数据的一致性 + +OSD -- + +OSD全称Object Storage Device，也就是负责响应客户端请求返回具体数据的进程。一个Ceph集群一般都有很多个OSD。 + +MDS + +MDS全称Ceph Metadata Server，是CephFS服务依赖的元数据服务。 + +Object -- + +Ceph最底层的存储单元是Object对象，每个Object包含元数据和原始数据。 + +PG -- + +PG全称Placement Grouops，是一个逻辑的概念，一个PG包含多个OSD。引入PG这一层其实是为了更好的分配数据和定位数据。 + +RADOS + +RADOS全称Reliable Autonomic Distributed Object Store，是Ceph集群的精华，用户实现数据分配、Failover等集群操作。 + +Libradio + +Librados是Rados提供库，因为RADOS是协议很难直接访问，因此上层的RBD、RGW和CephFS都是通过librados访问的，目前提供PHP、Ruby、Java、Python、C和C++支持。 + +CRUSH -- + +CRUSH是Ceph使用的数据分布算法，类似一致性哈希，让数据分配到预期的地方。 + +RBD -- + +RBD全称RADOS block device，是Ceph对外提供的块设备服务。 + +RGW + +RGW全称RADOS gateway，是Ceph对外提供的对象存储服务，接口与S3和Swift兼容。 + +CephFS -- + +CephFS全称Ceph File System，是Ceph对外提供的文件系统服务。 +``` + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +# ceph集群部署 + +## ceph的存储方式 + +###### radosgw：Ceph对象网关 + +```shell +Ceph对象网关是一个对象存储接口，建立在该对象之上， librados为应用程序提供了通往Ceph存储集群的RESTful网关。Ceph对象存储支持两个接口： + +与S3兼容：为对象存储功能提供与Amazon S3 RESTful API的大部分子集兼容的接口。 + +兼容Swift：通过与OpenStack Swift API的大部分子集兼容的接口，为对象存储功能提供支持。 +``` + +Ceph对象存储使用Ceph对象网关守护进程（`radosgw`），它是用于与Ceph存储群集进行交互的HTTP服务器。由于它提供与OpenStack Swift和Amazon S3兼容的接口，因此Ceph对象网关具有其自己的用户管理。Ceph对象网关可以将数据存储在用于存储来自Ceph文件系统客户端或Ceph块设备客户端的数据的同一Ceph存储群集中。S3和Swift API共享一个公共的名称空间，因此您可以使用一个API编写数据，而使用另一个API检索数据。 + +![image-20200430151905835](assets/image-20200430151905835.png) + +###### Ceph 文件系统 + +Ceph 文件系统（ Ceph FS ）是个 POSIX 兼容的文件系统，它使用 Ceph 存储集群来存储数据。 Ceph 文件系统与 Ceph 块设备、同时提供 S3 和 Swift API 的 Ceph 对象存储、或者原生库（ librados ）一样，都使用着相同的 Ceph 存储集群系统。 + + + +###### CEPH 块存储 + +块是一个字节序列（例如，一个 512 字节的数据块）。基于块的存储接口是最常见的存储数据方法，它们基于旋转介质，像硬盘、 CD 、软盘。无处不在的块设备接口使虚拟块设备成为与 Ceph 这样的海量存储系统交互的理想之选。 + +Ceph 块设备是精简配置的、大小可调且将数据条带化存储到集群内的多个 OSD 。 Ceph 块设备利用 RADOS 的多种能力，如快照、复制和一致性。 Ceph 的 RADOS 块设备（ RBD ）使用内核模块或 librbd 库与 OSD 交互。 + +![image-20200430194407343](assets/image-20200430194407343.png) + +## 安装ceph集群 + +```shell +注意版本更新非常快，有问题看官方文档 +官方文档： +http://docs.ceph.com/docs/master +======================================== +准备环境 +系统版本：centos7.4 x86_64 server +硬件配置：5台vm，1核1G内存，每台node角色的机器至少挂载1块不低于5个G的空闲盘为osd存储 + + 主机名 ip role + admin 192.168.153.130 admin--安装ceph-deploy + node1 192.168.153.131 mon / mgr / osd + node2 192.168.153.132 osd + node3 192.168.153.133 osd + ceph-client 192.168.153.134 + +1.给三台node节点添加一块大小5G以上的磁盘。 +2.所有节点修改主机名并相互解析 +3.关闭所有机器的防火墙和selinux +4.所有节点创建普通用户并设置密码--所有节点都操作 +[root@admin ~]# useradd cephu +[root@admin ~]# passwd cephu + +5.确保各 Ceph 节点上新创建的用户都有 sudo 权限--所有节点操作 +[root@admin ~]# visudo ----在root ALL=(ALL) ALL下面添加： +cephu ALL=(root) NOPASSWD:ALL +``` + +![image-20200427181932971](assets/image-20200427181932971.png) + +```shell +6.实现ssh无密码登录（admin节点操作） +[root@admin ~]# su - cephu +[cephu@admin ~]$ ssh-keygen + +7.将admin节点cephu用户生成的密钥拷贝到各Ceph节点： +[cephu@admin ~]$ ssh-copy-id cephu@node1 +[cephu@admin ~]$ ssh-copy-id cephu@node2 +[cephu@admin ~]$ ssh-copy-id cephu@node3 +[cephu@admin ~]$ ssh-copy-id cephu@ceph-client + +8.在admin节点用root用户添加~/.ssh/config配置文件，并进行如下设置，这样 ceph-deploy 就能用你所建的用户名登录 Ceph 节点了 +[root@admin ~]# mkdir ~/.ssh +[root@admin ~]# vim ~/.ssh/config +Host node1 +Hostname node1 +User cephu + +Host node2 +Hostname node2 +User cephu + +Host node3 +Hostname node3 +User cephu +``` + + + +```shell +9.添加下载源，安装ceph-deploy（admin节点，root用户） +[root@admin ~]# vim /etc/yum.repos.d/ceph.repo +[ceph-noarch] +name=Ceph noarch packages +baseurl=https://download.ceph.com/rpm-luminous/el7/noarch +enabled=1 +gpgcheck=1 +type=rpm-md +gpgkey=https://download.ceph.com/keys/release.asc + +更新源，安装ceph-deploy： +[root@admin ~]# yum makecache +[root@admin ~]# yum update +开启yum缓存 +[root@admin ~]# vim /etc/yum.conf +keepcache=1 +安装 +[root@admin ~]# yum install ceph-deploy -y + +10.安装ntp（所有节点） +#注意！！选择任何一台机器当ntp时间服务器，其他的节点当时间服务器的客户端跟服务器同步时间 +我选择的是admin上: +[root@admin ~]# yum install -y ntp +[root@admin ~]# vim /etc/ntp.conf #有4行server的位置，把那4行server行注释掉，填写以下两行 +server 127.127.1.0 # local clock +fudge 127.127.1.0 stratum 10 +``` + +![image-20200427184923746](assets/image-20200427184923746.png) + +```shell +[root@admin ~]# systemctl start ntpd +[root@admin ~]# systemctl status ntpd +其他所有节点： +# yum install ntpdate -y +# ntpdate 时间服务器ip +``` + +=============================================================== + +```shell +部署ceph集群 +#注意！！没有特别说明以下所有操作均是在admin节点，cephu用户下执行 +1.创建cephu操作的目录： +[root@qfedu.com-admin ~]# su - cephu +[cephu@admin ~]$ mkdir my-cluster #之后，所有ceph-deploy命令操作必须在该目录下执行 + +2.创建集群---这里报错查看后面的错误整理 +首先在这里需要先下载一个包并安装否则会报错，然后在创建集群 +[cephu@admin ~]$ wget https://files.pythonhosted.org/packages/5f/ad/1fde06877a8d7d5c9b60eff7de2d452f639916ae1d48f0b8f97bf97e570a/distribute-0.7.3.zip +[cephu@admin ~]$ unzip distribute-0.7.3.zip +[cephu@admin ~]$ cd distribute-0.7.3 +[cephu@admin distribute-0.7.3]$ sudo python setup.py install +创建集群 +[cephu@admin ~]$ cd my-cluster/ +[cephu@admin my-cluster]$ ceph-deploy new node1 +[cephu@qfedu.com-admin my-cluster]$ ls +ceph.conf ceph-deploy-ceph.log ceph.mon.keyring +创建成功会有三个文件：ceph.conf, ceph.mon.keyring, and a log file + +3.安装luminous-12.2.13在(脚本方式在admin节点) +目标：在node1,node2,node3三个节点上安装ceph和ceph-radosgw主包 +方法1：利用官方脚本全自动安装 +#脚本会帮助node1,node2,node3创建epel源和ceph源，并且自动安装ceph和ceph-radosgw主包 +[cephu@admin my-cluster]$ ceph-deploy install --release luminous node1 node2 node3 +#这一步时间很长，容易超时，可以利用手动安装 + +如果ceph和ceph-radosgw安装不上，则采用方法2 +在千锋做实验要注意epel的源(切记) +测试是否安装完成：分别在node1 node2 node3中确认安装版本为12.2.13 + [cephu@node1 ~]$ ceph --version +ceph version 12.2.13 (584a20eb0237c657dc0567da126be145106aa47e) luminous (stable) + + +方法2：手动部署安装三台机器分别创建：三台node节点相同操作 + 1）安装epel源 + # yum install -y epel* + 2）创建Ceph源，内容如下：官方源 + # vim /etc/yum.repos.d/ceph.repo +[Ceph] +name=Ceph packages for $basearch +baseurl=http://download.ceph.com/rpm-luminous/el7/$basearch +enabled=1 +gpgcheck=1 +type=rpm-md +gpgkey=https://download.ceph.com/keys/release.asc +priority=1 + +[Ceph-noarch] +name=Ceph noarch packages +baseurl=http://download.ceph.com/rpm-luminous/el7/noarch +enabled=1 +gpgcheck=1 +type=rpm-md +gpgkey=https://download.ceph.com/keys/release.asc +priority=1 + +[ceph-source] +name=Ceph source packages +baseurl=http://download.ceph.com/rpm-luminous/el7/SRPMS +enabled=1 +gpgcheck=1 +type=rpm-md +gpgkey=https://download.ceph.com/keys/release.asc +priority=1 + +#下面的是阿里云的ceph源 +# vim /etc/yum.repos.d/ceph.repo +[Ceph] +name=Ceph packages for $basearch +baseurl=http://mirrors.aliyun.com/ceph/rpm-luminous/el7/$basearch +enabled=1 +gpgcheck=0 +type=rpm-md +gpgkey=https://mirrors.aliyun.com/ceph/keys/release.asc +priority=1 + +[Ceph-noarch] +name=Ceph noarch packages +baseurl=http://mirrors.aliyun.com/ceph/rpm-luminous/el7/noarch +enabled=1 +gpgcheck=0 +type=rpm-md +gpgkey=https://mirrors.aliyun.com/ceph/keys/release.asc +priority=1 + +[ceph-source] +name=Ceph source packages +baseurl=http://mirrors.aliyun.com/ceph/rpm-luminous/el7/SRPMS +enabled=1 +gpgcheck=0 +type=rpm-md +gpgkey=https://mirrors.aliyun.com/ceph/keys/release.asc +priority=1 + + 3)分别在node1，node2，node3节点执行下面命令安装软件,可以完全手动安装，但需要yum的ceph缓存目录结构 + $sudo yum install ceph ceph-radosgw -y + 如果因为速度慢导致安装失败可以按ctrl+c，利用它创建的yum缓存目录，手动把安装包下载下来保存到缓存目录/var/cache/yum/x86_64/Ceph/packages目录下 + 再次执行安装命令： + $sudo yum install ceph ceph-radosgw -y + +测试是否安装完成：分别在node1 node2 node3中确认安装版本为12.2.13 +[cephu@node1 ~]$ ceph --version +ceph version 12.2.13 (584a20eb0237c657dc0567da126be145106aa47e) luminous (stable) +``` + +```shell +4.初始化mon：admin节点--cephu用户执行 +[cephu@admin my-cluster]$ ceph-deploy mon create-initial + +5.赋予各个节点使用命令免用户名权限： +[cephu@admin my-cluster]$ ceph-deploy admin node1 node2 node3 + +6.安装ceph-mgr：只有luminous才有，为使用dashboard做准备 +[cephu@admin my-cluster]$ ceph-deploy mgr create node1 + +7.添加osd： +注意：各个节点上提供存储空间的磁盘大小不能太小，最好5G以上，注意检查你的磁盘名字 +[cephu@admin my-cluster]$ ceph-deploy osd create --data /dev/sdb node1 +[cephu@admin my-cluster]$ ceph-deploy osd create --data /dev/sdb node2 +[cephu@admin my-cluster]$ ceph-deploy osd create --data /dev/sdb node3 +命令中/dev/sdb是在各个节点上为osd准备的空闲磁盘（无需分区格式化，如果有分区需要指定具体分区），通过如下命令查看： +[cephu@admin my-cluster]$ ssh node1 lsblk -f + + +最后通过如下命令查看集群状态： +[cephu@admin my-cluster]$ ssh node1 sudo ceph -s +如果显示health_ok，3个osd up就成功了 +``` + +![image-20200502210158493](assets/image-20200502210158493.png) + +```shell +Dashboard的配置：在node1上操作 +把ceph-mgr和ceph-mon安装在同一个主机上，最好只有一个ceph-mgr +[root@node1 ~]# su - cephu + +1.创建管理域秘钥： +[cephu@node1 ~]$ sudo ceph auth get-or-create mgr.node1 mon 'allow profile mgr' osd 'allow *' mds 'allow *' +[mgr.node1] + key = AQAePadeYsvJLxAA9Pnmib3S+0Kj1jAeuSQcKw== + +2.开启 ceph-mgr 管理域 +[cephu@node1 ~]$ sudo ceph-mgr -i node1 + +3.查看ceph的状态：确认mgr的状态为active +[cephu@node1 ~]$ sudo ceph status + cluster: + id: aec06bc6-428c-49ff-a2c1-2d84808bcb54 + health: HEALTH_OK + + services: + mon: 1 daemons, quorum node1 + mgr: node1(active, starting) + osd: 3 osds: 3 up, 3 in + + data: + pools: 0 pools, 0 pgs + objects: 0 objects, 0B + usage: 3.01GiB used, 12.0GiB / 15.0GiB avail + pgs: + +4.打开dashboard模块： +[cephu@node1 ~]$ sudo ceph mgr module enable dashboard + +5.绑定开启dashboard模块的ceph-mgr节点的ip地址： +[cephu@node1 ~]$ sudo ceph config-key set mgr/dashboard/node1/server_addr 192.168.153.136 +set mgr/dashboard/node1/server_addr +# ip地址为mgr节点的ip地址,也就是node1的ip地址 + +5.web登录：浏览器地址栏输入： + mgr地址:7000 +``` + +![image-20200427203351189](assets/image-20200427203351189.png) + +到这里ceph分布式集群完成！ + +```shell +配置客户端使用 + +配置客户端使用rbd： +# 创建块设备之前需要创建存储池，存储池相关命令需要在mon节点执行--也就是规划好的node1节点 + +1.创建存储池： +[cephu@node1 ~]$ sudo ceph osd pool create rbd 128 128 +pool 'rbd' created + +2.初始化存储池 +[cephu@node1 ~]$ sudo rbd pool init rbd + +3.准备客户端client：客户端操作 +#另备一台主机，系统centos7用来作为client。主机名为client，ip：192.168.153.135。修改hosts文件实现和admin节点的主机名互通。 + +3.1.升级client内核到4.x,方法在子目录中 +Centos7升级内核 +更新前，内核版本为： +[root@ceph-client ~]# uname -r +3.10.0-693.el7.x86_64 +升级方法:导入key: +[root@ceph-client ~]# rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org + +3.2.安装elrepo的yum源: +[root@ceph-client ~]# rpm -Uvh http://www.elrepo.org/elrepo-release-7.0-2.el7.elrepo.noarch.rpm + +查看可用的系统内核包 +[root@ceph-client ~]# yum --disablerepo="*" --enablerepo="elrepo-kernel" list available + +3.3安装内核: 当前内核为最新5.6，也可以安装4版本的内核 +[root@ceph-client ~]# yum --enablerepo=elrepo-kernel install kernel-ml-devel kernel-ml -y +#当前为5.6.7版本 +Dependencies Resolved + +=============================================================================================================================== + Package Arch Version Repository Size +=============================================================================================================================== +Installing: + kernel-ml x86_64 5.6.7-1.el7.elrepo elrepo-kernel 49 M + kernel-ml-devel x86_64 5.6.7-1.el7.elrepo elrepo-kernel 13 M + +Transaction Summary +=============================================================================================================================== +Install 2 Packages + + +查看内核默认启动顺序 +[root@ceph-client ~]# awk -F\' '$1=="menuentry " {print $2}' /etc/grub2.cfg +CentOS Linux (5.6.7-1.el7.elrepo.x86_64) 7 (Core) +CentOS Linux (3.10.0-693.el7.x86_64) 7 (Core) +CentOS Linux (0-rescue-8c5f0e6efaf047c5a0b72fdd72ee6575) 7 (Core) + +默认启动的顺序是从0开始，新内核是从头插入（目前位置在0，而5.6.7的是在1），所以需要选择0。 +[root@ceph-client ~]# grub2-set-default 0 + +然后reboot重启，使用新的内核，下面是重启后使用的内核版本: +[root@ceph-client ~]# reboot +[root@ceph-client ~]# uname -r +5.6.7-1.el7.elrepo.x86_64 + +4.删除旧的内核 +[root@ceph-client ~]# yum remove kernel -y + +5.为client安装ceph： +[root@ceph-client ~]# yum -y install python-setuptools #还要做着一步 否则报错 +5.1.参考部署ceph文档开头环境准备的2-5步 +5.2.参考部署ceph集群中的第3步--安装安装luminous-12.2.13的第2中方式手动安装ceph +5.2.1.安装epel源 +[root@ceph-client ~]# yum install -y epel* +5.2.2。创建ceph源 +[root@ceph-client ~]# vim /etc/yum.repos.d/ceph.repo +[Ceph] +name=Ceph packages for $basearch +baseurl=http://mirrors.aliyun.com/ceph/rpm-luminous/el7/$basearch +enabled=1 +gpgcheck=0 +type=rpm-md +gpgkey=https://mirrors.aliyun.com/ceph/keys/release.asc +priority=1 + +[Ceph-noarch] +name=Ceph noarch packages +baseurl=http://mirrors.aliyun.com/ceph/rpm-luminous/el7/noarch +enabled=1 +gpgcheck=0 +type=rpm-md +gpgkey=https://mirrors.aliyun.com/ceph/keys/release.asc +priority=1 + +[ceph-source] +name=Ceph source packages +baseurl=http://mirrors.aliyun.com/ceph/rpm-luminous/el7/SRPMS +enabled=1 +gpgcheck=0 +type=rpm-md +gpgkey=https://mirrors.aliyun.com/ceph/keys/release.asc +priority=1 + +[root@ceph-client ~]# vim /etc/yum.conf #开启yum缓存 +keepcache=1 +[root@ceph-client ~]# yum clean all +[root@ceph-client ~]# su - cephu +[cephu@ceph-client ~]$ sudo yum install ceph ceph-radosgw -y +[cephu@ceph-client ~]$ ceph --version +ceph version 12.2.13 (584a20eb0237c657dc0567da126be145106aa47e) luminous (stable) + +6.在admin节点赋予client使用命令免用户名权限： +[cephu@admin my-cluster]$ ceph-deploy admin ceph-client + +7.修改client下该文件的读权限： +[cephu@ceph-client ~]$ sudo chmod +r /etc/ceph/ceph.client.admin.keyring + +8.修改client下的ceph配置文件：这一步是为了解决映射镜像时出错问题 +[cephu@ceph-client ~]$ sudo vi /etc/ceph/ceph.conf #在global section下添加： +rbd_default_features = 1 + +9.client节点创建块设备镜像：单位是M，这里是4个G +[cephu@ceph-client ~]$ rbd create foo --size 4096 + +10.client节点映射镜像到主机： +[cephu@ceph-client ~]$ sudo rbd map foo --name client.admin +/dev/rbd0 + +11.client节点格式化块设备： +[cephu@ceph-client ~]$ sudo mkfs.ext4 -m 0 /dev/rbd/rbd/foo + +12.client节点mount块设备： +[cephu@ceph-client ~]$ sudo mkdir /mnt/ceph-block-device #创建挂载点 +[cephu@ceph-client ~]$ sudo mount /dev/rbd/rbd/foo /mnt/ceph-block-device #挂载 +[cephu@ceph-client ~]$ cd /mnt/ceph-block-device +[cephu@ceph-client ceph-block-device]$ sudo touch a.txt + +客户端重起之后，设备需要重新作映射，不然可能会卡死 +``` + +## 错误整理 + +```shell +[cephu@centos7u3_1 my-cluster]$ ceph-deploy new node1 +Traceback (most recent call last): + File "/bin/ceph-deploy", line 18, in + from ceph_deploy.cli import main + File "/usr/lib/python2.7/site-packages/ceph_deploy/cli.py", line 1, in + import pkg_resources +ImportError: No module named pkg_resources + + + +重新安装python的distribution： + +下载 distribution : https://pypi.python.org/pypi/distribute +cd distribution-0.7.3/ +sudo python setup.py install + +distribution下载地址： +https://files.pythonhosted.org/packages/5f/ad/1fde06877a8d7d5c9b60eff7de2d452f639916ae1d48f0b8f97bf97e570a/distribute-0.7.3.zip + + + +问题二 +[ERROR ] admin_socket: exception getting command descriptions: [Errno 2] No such file or dir + +cat /etc/ceph/ceph.conf +添加 +public_network= 192.168.122.0/24 +推送 +ceph-deploy --overwrite-conf config push admin node1 node2 node3 + +https://www.cnblogs.com/aguncn/p/7352393.html +https://blog.csdn.net/zhydream77/article/details/81041767 + + +问题三: +ceph-deploy mon create-initial 时候 +​``` +[node1][INFO ] Running command: sudo ceph --cluster=ceph --admin-daemon /var/run/ceph/ceph-mon.node1.asok mon_status +[node1][ERROR ] no valid command found; 10 closest matches: +[node1][ERROR ] perf reset +[node1][ERROR ] perf histogram schema +[node1][ERROR ] log reopen +[node1][ERROR ] log flush +[node1][ERROR ] perf histogram dump {} {} +[node1][ERROR ] perf dump {} {} +[node1][ERROR ] git_version +[node1][ERROR ] get_command_descriptions +[node1][ERROR ] log dump +[node1][ERROR ] help +[node1][ERROR ] admin_socket: invalid command +[node1][WARNIN] monitor: mon.node1, might not be running yet +[node1][INFO ] Running command: sudo ceph --cluster=ceph --admin-daemon /var/run/ceph/ceph-mon.node1.asok mon_status +[node1][ERROR ] no valid command found; 10 closest matches: +[node1][ERROR ] perf reset +[node1][ERROR ] perf histogram schema +[node1][ERROR ] log reopen +[node1][ERROR ] log flush +[node1][ERROR ] perf histogram dump {} {} +[node1][ERROR ] perf dump {} {} +[node1][ERROR ] git_version +[node1][ERROR ] get_command_descriptions +[node1][ERROR ] log dump +[node1][ERROR ] help +[node1][ERROR ] admin_socket: invalid command +[node1][WARNIN] monitor node1 does not exist in monmap +​``` + +原因： 第一次在做的时候没有修改主机名是就生成了公私钥，结果拷贝的公钥有问题，在问题二推送配置的时候，排查后发现主机名的问题。 +之后初始化mon的时候出错，排错两个小时，差点怀疑人生的时候突然发现，想起主机名的事情，就检查了以下公私钥，结果发现生成的公私钥是以原主机名生成的，删除后生成新的公私钥，传送公钥后，还是失败。 +但是感觉已经找到了问题所在，继续排查，到node1查看日志发现，地址被占用，平复以下自己激动的心，然后冷静的杀掉进程，重新初始化OK + + +问题四： +ceph-deploy osd create --data /dev/vdc node3 +[node1][WARNIN] ceph-volume lvm create: error: GPT headers found, they must be removed on: /dev/vdb +[node1][ERROR ] RuntimeError: command returned non-zero exit status: 2 +[ceph_deploy.osd][ERROR ] Failed to execute command: /usr/sbin/ceph-volume --cluster ceph lvm create --bluestore --data /dev/vdb +[ceph_deploy][ERROR ] GenericError: Failed to create 1 OSDs + + +千万不要分区，然后重新加磁盘，重新做 +又文档说加上参数也可以但是 +ceph-deploy osd create --data /dev/vdc --fs-type xfs node3 不行 + + + +[cephu@node1 ~]$ sudo ceph auth get-or-create mgr.node1 mon 'allow profile mgr' osd 'allow *' mds 'allow *' +[mgr.node1] + key = AQD8HPdcmntqJRAAlZ3Aeialqq0nVcdcg+axqQ== + + + + + +------------- +问题:rdb map出错rbd sysfs write failed +创建了一个rbd镜像 + $ rbd create --size 4096 docker_test +然后，在Ceph client端将该rbd镜像映射为本地设备时出错。 + $ rbd map docker_test --name client.admin + + rbd: sysfs write failed + RBD image feature set mismatch. You can disable features unsupported by the kernel with "rbd feature disable". + In some cases useful info is found in syslog - try "dmesg | tail" or so. + +原因： + rbd镜像的一些特性，OS kernel并不支持，所以映射失败。我们查看下该镜像支持了哪些特性。 + $ rbd info docker_test + + rbd image 'docker_test': + size 4096 MB in 1024 objects + order 22 (4096 kB objects) + block_name_prefix: rbd_data.43702ae8944a + format: 2 + features: layering, exclusive-lock, object-map, fast-diff, deep-flatten + flags: + 可以看到特性feature一栏，由于我OS的kernel只支持layering，其他都不支持，所以需要把部分不支持的特性disable掉。 + +方法一： 直接diable这个rbd镜像的不支持的特性： + $ rbd feature disable docker_test exclusive-lock object-map fast-diff deep-flatten + +方法二： 创建rbd镜像时就指明需要的特性，如： + $ rbd create --size 4096 docker_test --image-feature layering + +方法三： 如果还想一劳永逸 +那么就在执行创建rbd镜像命令的服务器中， +修改Ceph配置文件/etc/ceph/ceph.conf， +在global section下，增加rbd_default_features = 1 +再创建rdb镜像。 + $ rbd create --size 4096 docker_test + +通过上述三种方法后，查看rbd镜像的信息。 + $ rbd info docker_test + + rbd image 'docker_test': + size 4096 MB in 1024 objects + order 22 (4096 kB objects) + block_name_prefix: rbd_data.43a22ae8944a + format: 2 + features: layering + flags: + +再次尝试映射rdb镜像到本地块设备，成功！ + $ rbd map docker_test --name client.admin + /dev/rbd0 +====================================== +问题: +[cephu@client ~]$ sudo rbd map docker_test --name client.admin + + +rbd: sysfs write failed +In some cases useful info is found in syslog - try "dmesg | tail". +rbd: map failed: (110) Connection timed out + +解决方案: +[cephu@client ~]$ sudo ceph osd crush tunables hammer +adjusted tunables profile to hammer + +然后重新 +[cephu@client ~]$ sudo rbd map docker_test --name client.admin +/dev/rbd0 + +成功 + +参考链接: https://randomopenstackthoughts.wordpress.com/2018/08/16/ceph-block-device/ +===================================== + +问题1: +2.3步骤中,如果由于网速太慢,可以如下操作 +由于网速慢的问题，安装并不会成功。之所以仍进行这一步，只因执行过了该命令就会自动创建相应文件夹。在进入各个节点手动安装的时候，才能把下载的不成功的包放到正确的目录下，这样，手动安装使用yum命令才会成功。之后进入每个节点执行安装。 +以node1为例： +• 先从https://download.ceph.com/rpm-luminous/el7/x86_64/ 下载所有最有最新版本的rpm包到本地 + +• 之后使用secure shell client上传到node1的/var/cache/yum/x86_64/7/Ceph/packages/文件夹下 + +• 然后安装ceph： +$ ssh node1 +$ sudo yum install –y epel-release ceph ceph-radosgw +虽然所有安装包都在相应的目录中了，但仍可能不成功，这个时候只需要再次重新把安装包放到对应目录后再执行该命令就成功了，原因不明。 +====================================== +问题2: +2.3步骤中如果开启防火墙需要做如下操作 +设置防火墙（由于node1既是mon节点又是osd节点，所以要添加下面两个规则。其他节点只开启ceph服务即可）： +$ sudo firewall-cmd --zone=public --add-service=ceph-mon --permanent //该规则仅在mon节点执行，如果不添加就不能在其他osd上进行一些查询操作 +$ sudo firewall-cmd --zone=public --add-service=ceph --permanent +$ sudo firewall-cmd --reload +注意:该防火墙规则只能在安装成功ceph后才能添加，否则就不识别，添加失败。最后退出node1节点，返回admin节点 +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +问题3： +激活 OSD 的时候需要先把OSD所在服务器的目录所有者和所属组手动改成ceph，不然无法激活 +[root@vm42 yum.repos.d]# chown ceph:ceph /var/local/osd2 + +~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ +问题4： +ceph:health_warn clock skew detected on mon的解决办法 +造成集群状态health_warn：clock skew detected on mon节点的原因有两个，一个是mon节点上ntp服务器未启动，另一个是ceph设置的mon的时间偏差阈值比较小。 + 排查时也应遵循先第一个原因，后第二个原因的方式。 + +第一步：确认ntp服务是否正常工作 + +第二步：修改ceph配置中的时间偏差阈值 +1. 在admin部署节点修改配置参数： +# vi ~/my-cluster/ceph.conf在global字段下添加： +mon clock drift allowed = 2 +mon clock drift warn backoff = 30 + +2. 向需要同步的mon节点推送配置文件： +# ceph-deploy --overwrite-conf config push node{1..3}这里是向node1 node2 node3推送，也可以后跟其它不联系节点 + 3. 重启mon服务（centos7环境下） +# systemctl restart ceph-mon.target4.验证： +# ceph -s显示health_ok说明问题解决 + +问题5： +有些场景下，对osd进行一些操作，但是并不想要集群进行数据恢复，此时，可以通过设置noout标志来实现： +[root@node3 ~]# ceph osd set noout +noout is set +[root@node3 ~]# ceph -s + cluster: + id: b8b4aa68-d825-43e9-a60a-781c92fec20e + health: HEALTH_WARN + noout flag(s) set + + services: + mon: 1 daemons, quorum node1 + mgr: node1(active) + osd: 6 osds: 6 up, 6 in + flags noout + + data: + pools: 0 pools, 0 pgs + objects: 0 objects, 0 bytes + usage: 6339 MB used, 55100 MB / 61440 MB avail + pgs: 去除noout标志命令： +[root@node3 ~]# ceph osd unset noout +noout is unset +[root@node3 ~]# ceph -s + cluster: + id: b8b4aa68-d825-43e9-a60a-781c92fec20e + health: HEALTH_OK + + services: + mon: 1 daemons, quorum node1 + mgr: node1(active) + osd: 6 osds: 6 up, 6 in + + data: + pools: 0 pools, 0 pgs + objects: 0 objects, 0 bytes + usage: 6339 MB used, 55100 MB / 61440 MB avail + pgs: + + + + + + +================================================== + +Error: Package: 2:librbd1-12.2.12-0.el7.x86_64 (Ceph) + Requires: liblttng-ust.so.0()(64bit + +方法1 +sudo yum install -y yum-utils && sudo yum-config-manager --add-repo https://dl.fedoraproject.org/pub/epel/7/x86_64/ &&sudo yum install --nogpgcheck -y epel-release &&sudo rpm --import /etc/pki/rpm-gpg/RPM-GPG-KEY-EPEL-7 &&sudo rm -f /etc/yum.repos.d/dl.fedoraproject.org* + +方法二： +yum install epel-release -y + +wget https://dl.fedoraproject.org/pub/epel/7/x86_64/Packages/e/epel-release-7-12.noarch.rpm + +rpm -Uvh epel-release*rpm + +yum install lttng-ust -y +``` + diff --git a/运维/容器/.DS_Store b/运维/容器/.DS_Store new file mode 100644 index 0000000..58c7b6e Binary files /dev/null and b/运维/容器/.DS_Store differ diff --git a/运维/容器/Docker/docker和crictl和ctr命令区别.md b/运维/容器/Docker/docker和crictl和ctr命令区别.md new file mode 100644 index 0000000..185804d --- /dev/null +++ b/运维/容器/Docker/docker和crictl和ctr命令区别.md @@ -0,0 +1,38 @@ +--- +title: Docker和Containerd命令区别 +categories: + - 小技巧 +tags: + - k8s +date: 2023-03-27 13:24:33 +--- + +# Dcoker和Containerd命令区别 + +| 命令 | docker | ctr（containerd） | crictl（kubernetes） | +| :----------------------: | :----------------: | :--------------------------: | :------------------: | +| 查看运行的容器 | docker ps | ctr task ls/ctr container ls | crictl ps | +| 查看镜像 | docker images | ctr image ls | crictl images | +| 查看容器日志 | docker logs | 无 | crictl logs | +| 查看容器数据信息 | docker inspect | ctr container info | crictl inspect | +| 查看容器资源 | docker stats | 无 | crictl stats | +| 启动/关闭已有的容器 | docker start/stop | ctr task start/kill | crictl start/stop | +| 运行一个新的容器 | docker run | ctr run | 无（最小单元为 pod） | +| 打标签 | docker tag | ctr image tag | 无 | +| 创建一个新的容器 | docker create | ctr container create | crictl create | +| 导入镜像 | docker load | ctr image import | 无 | +| 导出镜像 | docker save | ctr image export | 无 | +| 删除容器 | docker rm | ctr container rm | crictl rm | +| 删除镜像 | docker rmi | ctr image rm | crictl rmi | +| 拉取镜像 | docker pull | ctr image pull | ctictl pull | +| 推送镜像 | docker push | ctr image push | 无 | +| 登录或在容器内部执行命令 | docker exec | 无 | crictl exec | +| 清空不用的容器 | docker image prune | 无 | crictl rmi --prune | + +`crictl` 和 `ctr` 都是 Kubernetes 中用于管理容器运行时的命令行工具。 + +`crictl` 是一个 CLI 工具，用于与 CRI（容器运行时接口）兼容的容器运行时进行通信。它可以用来列出容器镜像、创建和删除容器等操作。 + +`ctr` 是 Docker 提供的一个 CLI 工具，用于与容器和镜像进行交互。它也可以用来在 Kubernetes 中管理容器，包括在 Kubernetes 中创建、删除和更新容器。 + +因此，`crictl` 和 `ctr` 的主要区别在于它们与不同的容器运行时进行通信，以及它们提供的功能集。如果您使用 CRI 兼容的容器运行时，建议使用 `crictl` 进行操作。如果您使用 Docker（containerd） 作为容器运行时，建议使用 `ctr` 进行操作。 \ No newline at end of file diff --git a/运维/容器/Helm/.k8s集群编排工具helm3实战教程.ctb~ b/运维/容器/Helm/.k8s集群编排工具helm3实战教程.ctb~ new file mode 100644 index 0000000..9833b31 Binary files /dev/null and b/运维/容器/Helm/.k8s集群编排工具helm3实战教程.ctb~ differ diff --git a/运维/容器/Helm/Helm学习指南：Kubernetes上的应用程序管理.pdf b/运维/容器/Helm/Helm学习指南：Kubernetes上的应用程序管理.pdf new file mode 100644 index 0000000..87a35e9 Binary files /dev/null and b/运维/容器/Helm/Helm学习指南：Kubernetes上的应用程序管理.pdf differ diff --git a/运维/容器/Helm/cherrytree_1.1.4.0_win64_setup.exe b/运维/容器/Helm/cherrytree_1.1.4.0_win64_setup.exe new file mode 100644 index 0000000..6903581 Binary files /dev/null and b/运维/容器/Helm/cherrytree_1.1.4.0_win64_setup.exe differ diff --git a/运维/容器/Helm/k8s集群编排工具helm3实战教程.ctb b/运维/容器/Helm/k8s集群编排工具helm3实战教程.ctb new file mode 100644 index 0000000..b1e720f Binary files /dev/null and b/运维/容器/Helm/k8s集群编排工具helm3实战教程.ctb differ diff --git a/运维/容器/Kubernetes/常用运维命令/1.Pod内抓包.md b/运维/容器/Kubernetes/常用运维命令/1.Pod内抓包.md new file mode 100644 index 0000000..41fe297 --- /dev/null +++ b/运维/容器/Kubernetes/常用运维命令/1.Pod内抓包.md @@ -0,0 +1,33 @@ +K8S的POD时常出现网络问题，而在制作容器镜像时往往没有安装网络排障工具，也没有配置sidecar容器，排障特别困难。为了解决这个问题我们可以通过nsenter，在node上抓取pod 的数据包 +## 获取pod所在的node位置，以及容器ID +``` +kubectl describe pod pod-name -n namespace-name + +#Node: 192.168.1.21/192.168.1.21 //确认pod 在21这台服务器上 +#Containers: +# Container ID: containerd://d885d05d37342a24ebca5d791f803e4ae8698f654a94b0e4f1808e65cb4c0ef1 //确认容器ID +``` + +## 获取容器的PID +我们登录21这台服务器，去获取主进程的PID +``` +crictl inspect d885d05d37342a24ebca5d791f803e4ae8698f654a94b0e4f1808e65cb4c0ef1 + +# "info": { +# "pid": 64774, +``` +## 使用 nsenter 进入容器 netns +在节点上使用 nsenter 进入 pod 的 netns: +``` +nsenter -n --target 64774 +``` + +查看IP地址 是否为POD IP地址 +``` +ip a +``` + +此时即可通过tcpdump抓包了，抓的包就是pod内的数据包。 +``` +exit //通过此命令退出nsenter +``` diff --git a/运维/容器/Kubernetes/常用运维命令/2.误删PV后恢复.md b/运维/容器/Kubernetes/常用运维命令/2.误删PV后恢复.md new file mode 100644 index 0000000..c33855b --- /dev/null +++ b/运维/容器/Kubernetes/常用运维命令/2.误删PV后恢复.md @@ -0,0 +1,14 @@ +### 修改PV信息 + +``` +kubectl edit pv PVNAME +# 找到如下内容并删除，共7行 +# claimRef: +# apiVersion: v1 +# kind: PersistentVolumeClaim +# name: data-apisix-etcd-1 +# namespace: arexpert +# resourceVersion: "15491" +# uid: 050108cd-ba8e-4f2f-9345-dbca90a43c85 +``` + diff --git a/运维/容器/Kubernetes/常用运维命令/3.误删PVC后恢复.md b/运维/容器/Kubernetes/常用运维命令/3.误删PVC后恢复.md new file mode 100644 index 0000000..d732836 --- /dev/null +++ b/运维/容器/Kubernetes/常用运维命令/3.误删PVC后恢复.md @@ -0,0 +1,45 @@ +### 1、修改PV的回收策略为Retain + +``` +#kubectl edit pv PVNAME + +persistentVolumeReclaimPolicy: Retain +``` + +### 2、备份pvc yaml + +``` +kubectl get pvc PVCNAME -o yaml > PVCNAME.yml +``` + +### 3、停止相关pod，当pod停止后，相关pvc会删除； + +``` +# 删除pod +kubectl -n test scale deploy nginx --replicas=0 +# 查看pvc +kubectl get pvc +``` + +### 4、修改pv，删除以前的绑定信息： + +``` +kubectl edit pv PVNAME +# 找到如下内容并删除，共7行 +# claimRef: +# apiVersion: v1 +# kind: PersistentVolumeClaim +# name: data-apisix-etcd-1 +# namespace: arexpert +# resourceVersion: "15491" +# uid: 050108cd-ba8e-4f2f-9345-dbca90a43c85 +``` + +### 5、删除完成后，保存退出，重新创建pvc，并查看状态，启动pod，查看状态 + +``` +kubectl apply -f PVCNAME.yml +kubectl get pvc +kubectl -n test scale deploy nginx --replicas=0 +``` + diff --git a/运维/容器/Kubernetes/相关实验/1.搭建高可用K8S.md b/运维/容器/Kubernetes/相关实验/1.搭建高可用K8S.md new file mode 100644 index 0000000..1013f56 --- /dev/null +++ b/运维/容器/Kubernetes/相关实验/1.搭建高可用K8S.md @@ -0,0 +1,141 @@ +把主机清单写到/etc/hosts中 +``` +cat > /etc/hosts < /etc/sysctl.d/k8s.conf <> /etc/modules && modprobe br_netfilter +sysctl -p /etc/sysctl.d/k8s.conf +``` +关闭swap和防火墙 +``` +swapoff -a # 临时 +sed -ri 's/.*swap.*/#&/' /etc/fstab +systemctl stop ufw +systemctl disable ufw +``` +安装ipvs +``` +apt install ipset ipvsadm net-tools -y + +modprobe -- ip_vs +modprobe -- ip_vs_rr +modprobe -- ip_vs_wrr +modprobe -- ip_vs_sh +modprobe -- nf_conntrack + + +lsmod | grep -e ip_vs -e nf_conntrack +``` +安装containerd（来源于docker官网） +``` +apt-get install ca-certificates curl gnupg -y +install -m 0755 -d /etc/apt/keyrings +curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg + +echo \ + "deb [arch="$(dpkg --print-architecture)" signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu \ + "$(. /etc/os-release && echo "$VERSION_CODENAME")" stable" | \ + sudo tee /etc/apt/sources.list.d/docker.list > /dev/null + +apt update -y + +apt install containerd.io -y + +systemctl start containerd +systemctl enable containerd +``` +配置containerd +``` +mkdir -p /etc/containerd +containerd config default > /etc/containerd/config.toml +``` +配置Systemd以及配置镜像加速 +``` +修改pause镜像路径（原镜像拉不下来) +替换 k8s.gcr.io/pause:x.x 为 registry.aliyuncs.com/google_containers/pause:x.x(x.x保持不变) + +启用SystemdCgroup +修改SystemdCgroup=true + + [plugins."io.containerd.grpc.v1.cri".registry.mirrors."docker.io"] + endpoint = ["https://hub-mirror.c.163.com"] +``` +添加k8s软件仓库 +``` +wget -qO - https://mirrors.aliyun.com/kubernetes/apt/doc/apt-key.gpg | sudo apt-key add - +echo "deb https://mirrors.aliyun.com/kubernetes/apt/ kubernetes-xenial main" >>/etc/apt/sources.list.d/kubernetes.list +apt update -y +``` +安装相关组件 +``` +apt install kubelet=1.28.0-00 kubeadm=1.28.0-00 kubectl=1.28.0-00 -y +``` +初始化K8S集群 +``` +source <(kubeadm completion bash) +kubeadm init --kubernetes-version=v1.28.0 --apiserver-advertise-address=192.168.30.6 --control-plane-endpoint=192.168.30.200 --image-repository=registry.aliyuncs.com/google_containers --pod-network-cidr=10.244.0.0/16 --service-cidr=10.96.0.0/12 +``` +回显 +``` + mkdir -p $HOME/.kube + sudo cp -i /etc/kubernetes/admin.conf $HOME/.kube/config + sudo chown $(id -u):$(id -g) $HOME/.kube/config + +Alternatively, if you are the root user, you can run: + + export KUBECONFIG=/etc/kubernetes/admin.conf + +You should now deploy a pod network to the cluster. +Run "kubectl apply -f [podnetwork].yaml" with one of the options listed at: + https://kubernetes.io/docs/concepts/cluster-administration/addons/ + +You can now join any number of control-plane nodes by copying certificate authorities +and service account keys on each node and then running the following as root: + + kubeadm join 192.168.30.200:6443 --token f0gexj.iytj5hqfc5s1116l \ + --discovery-token-ca-cert-hash sha256:1465370d2d4b57183d4b6a58845c17cbebb879c9f331fb0434f6cab6e4c2808f \ + --control-plane + +Then you can join any number of worker nodes by running the following on each as root: + +kubeadm join 192.168.30.200:6443 --token ydz0cs.j19rp8pnn8704daa \ + --discovery-token-ca-cert-hash sha256:d71f8f976a0e75c023ab811b95037ab41d061375a0f4e7a4eb2ba346eac77509 +``` +k8s-master-2/3先关闭lo:0，向1注册 +``` +ifconfig lo:0 down + +scp /etc/kubernetes/admin.conf root@k8s-master-3:/etc/kubernetes +scp /etc/kubernetes/pki/{ca.*,sa.*,front-proxy-ca.*} root@k8s-master-3:/etc/kubernetes/pki +scp /etc/kubernetes/pki/etcd/ca.* root@k8s-master-3:/etc/kubernetes/pki/etcd +scp /etc/kubernetes/admin.conf root@k8s-master-2:/etc/kubernetes +scp /etc/kubernetes/pki/{ca.*,sa.*,front-proxy-ca.*} root@k8s-master-2:/etc/kubernetes/pki +scp /etc/kubernetes/pki/etcd/ca.* root@k8s-master-2:/etc/kubernetes/pki/etcd + + kubeadm join 192.168.30.200:6443 --token z4k9ta.eddqrseu4jjd7iwz \ + --discovery-token-ca-cert-hash sha256:26457fb6f8da7ebc8875ae39042e2494f1be5349dbaf38afcce3c013020fc594 \ + --control-plane + + +``` +node节点直接执行下面的就行 +``` +kubeadm join 192.168.30.200:6443 --token z4k9ta.eddqrseu4jjd7iwz \ + --discovery-token-ca-cert-hash sha256:26457fb6f8da7ebc8875ae39042e2494f1be5349dbaf38afcce3c013020fc594 +``` diff --git a/运维/容器/Kubernetes/相关实验/2.金丝雀发布实验.md b/运维/容器/Kubernetes/相关实验/2.金丝雀发布实验.md new file mode 100644 index 0000000..e392ef2 --- /dev/null +++ b/运维/容器/Kubernetes/相关实验/2.金丝雀发布实验.md @@ -0,0 +1,132 @@ +金丝雀发布又称为灰度发布。它能够缓慢的将修改推广到一小部分用户，验证没有问题后，再推广到全部用户，以降低生产环境引入新功能带来的风险。 + +主要实现思想是SVC 通过标签 将生产流量逐步转发到新版本的POD中，不断扩容新版本Deployment的副本数，缩减旧版本的副本数 + +## 工作负载概览 +| **工作负载** | **名称** | **标签** | **标签选择器** | **作用** | +| --- | --- | --- | --- | --- | +| service | web-service | 无 | app: nginx +env: prod | 负载均衡，通过筛选pod 的标签进行流量转发 | +| deployment | web-nginx-v1(旧版本，使用nginx1.14镜像) +web-nginx-v2(新版本，使用nginx1.20镜像) | 随意，为方便管理，这里我们与下面的pod 的标签保持一致 | app: nginx +env: prod +release：v1（旧） +release：v2（新） | 扩展管理、管理pod等 | +| pod | web-nginx | app: nginx +env: prod +release：v1（旧） +release：v2（新） | 无 | 管理容器，最小调度单位 | + +通过nginx 的版本进行验证，举个例子 svc 的Cluster IP为 1.1.1.1，那我们就通过curl 1.1.1.1/net 查看404 显示中的nginx版本，即可快速区分 +## YAML +以下为详细yaml配置文件 +### SVC +```yaml +apiVersion: v1 +kind: Service +metadata: + name: web-service +spec: + selector: + app: nginx + env: prod + ports: + - protocol: TCP + port: 80 + targetPort: 80 +``` +### 旧Deployment +```yaml +apiVersion: apps/v1 +kind: Deployment +metadata: + name: web-nginx-v1 + labels: + app: nginx + env: prod + release: v1 +spec: + replicas: 10 + selector: + matchLabels: + app: nginx + env: prod + release: v1 + template: + metadata: + labels: + app: nginx + env: prod + release: v1 + spec: + containers: + - name: nginx + image: nginx:1.14.2 + ports: + - containerPort: 80 +``` +### 新Deplyment +```yaml +apiVersion: apps/v1 +kind: Deployment +metadata: + name: web-nginx-v2 + labels: + app: nginx + env: prod + release: v2 +spec: + replicas: 1 + selector: + matchLabels: + app: nginx + env: prod + release: v2 + template: + metadata: + labels: + app: nginx + env: prod + release: v2 + spec: + containers: + - name: nginx + image: nginx:1.20.1 + ports: + - containerPort: 80 +``` + +## 具体操作 +运行svc 和deployment +```yaml +kubectl apply -f canary-dp-old.yaml -f canary-svc.yaml +``` + +查看SVC的CLUSTER-IP +```yaml +kubectl get svc +``` + +查看运行状态并测试服务可用性 +```yaml +kubectl get pod +curl SVC的CLUSTER-IP/net +``` + +开始金丝雀部署 +```yaml +kubectl apply -f canary-dp-new.yaml +``` + +查看运行状态，并测试金丝雀的服务情况 +```yaml +kubectl get pod +curl SVC的CLUSTER-IP/net +``` + +逐步扩容金丝雀的副本数量，减少v1版本的副本数量 +```yaml +kubectl scale deployment web-nginx-v2 --replicas 数量（建议逐步加大） +kubectl scale deployment web-nginx-v1 --replicas 数量（建议逐步减小） +``` + diff --git a/运维/容器/Kubernetes/笔记/1.引入K8S后业务部署的变化.md b/运维/容器/Kubernetes/笔记/1.引入K8S后业务部署的变化.md new file mode 100644 index 0000000..aceeabf --- /dev/null +++ b/运维/容器/Kubernetes/笔记/1.引入K8S后业务部署的变化.md @@ -0,0 +1,24 @@ +![image.png](https://cdn.nlark.com/yuque/0/2023/png/35086385/1691486689411-b93423c4-ed1a-4171-b5d9-6066ee8c8225.png#averageHue=%23545329&clientId=u839e9698-903a-4&from=paste&height=284&id=ubabeecb3&originHeight=709&originWidth=1969&originalType=binary&ratio=2.5&rotation=0&showTitle=false&size=113143&status=done&style=none&taskId=u1ab50bda-bc69-4ffe-bd1e-07b6e4b7355&title=&width=787.6) +## 互联网业务部署大致分为三个时代 + +1. 传统部署时代（托管时代）：早期将业务程序直接部署在物理服务器中，这种部署方式的优点是部署和运维都很简单。同样缺点也很致命， 如：每个应用程序都运行在不同的物理服务器上， 但可能会因为部分应用程序资源利用率不足而浪费资源。为了提高资源利用率，在同一台物理服务器上运行多个应用程序， 则可能会出现一个应用程序占用大部分资源的情况，从而导致其他应用程序的性能下降。在这个时代里服务器租赁、托管业务快速发展。 +2. 虚拟化部署时代（云时代）：为解决托管时代服务器利用率问题，IBM研发出虚拟化技术，虚拟化技术允许用户在一台物理服务器中同时运行多台虚拟服务器，每台虚拟服务器都有自己独立的操作系统，且操作系统内的应用程序互不干扰。虚拟化技术提升了服务器资源利用率及进程安全性，但也存在一定的缺点，如业务程序难部署、启动速度慢、操作系统占用空间等。在这个时代里云厂商业务快速发展。 +3. 容器部署时代（云原生时代）：为了解决难部署、操作系统占用空间等问题、docker公司研发了容器技术。容器相较于云服务器具有更宽松的隔离特性，多容器共享主机的操作系统、内核等。目前互联网即处于云原生时代，各个互联网巨头业务已经容器化。 + +Kubernetes 就是目前主流的容器管理平台。（曾经还存在过很多容器管理平台，但是最后还是被谷歌的K8S打败了） + +## 容器和虚拟机对比 + +- VM之间共享硬件，而容器之间共享硬件和内核，启动容器就相当于启动一个进程，速度更快。 +- VM需要安装操作系统镜像及依赖等，占用GB级别磁盘空间，而容器不需要，通常为MB +- 单机支持几千个容器，几十个VM +| **虚拟机** | **容器** | +| --- | --- | +| 重量级 | 轻量级 | +| 性能有限 | 本机性能 | +| 每个VM都在自己的OS中运行 | 所有容器共享主机操作系统 | +| 硬件级别虚拟化 | 操作系统虚拟化 | +| 启动时间（分钟级别） | 启动时间（秒级别） | +| 分配操作系统需要的内存 | 分配较少的内存 | +| 完全隔离，更安全 | 进程级别隔离，安全性相对较差 | + diff --git a/运维/容器/Kubernetes/笔记/2.Kubernetes架构.md b/运维/容器/Kubernetes/笔记/2.Kubernetes架构.md new file mode 100644 index 0000000..dd8a24c --- /dev/null +++ b/运维/容器/Kubernetes/笔记/2.Kubernetes架构.md @@ -0,0 +1,28 @@ +Kubernetes 集群主要分为两个平面，分别是控制组件、计算组件、扩展组件。 + +![image.png](https://cdn.nlark.com/yuque/0/2023/png/35086385/1691491505977-53133197-2297-4524-87c0-c39be34ca65d.png#averageHue=%23efefef&clientId=u17cf3253-f6c0-4&from=paste&height=651&id=u2903635a&originHeight=1360&originWidth=1576&originalType=binary&ratio=2.5&rotation=0&showTitle=false&size=147562&status=done&style=none&taskId=u0125885e-cdf6-483f-9e77-12ec1864534&title=&width=754.4000244140625) + +## 控制面组件 +| **组件** | **说明** | +| --- | --- | +| kube-apiserver（其他模块通过API Server查询或者修改数据，只有API Server才能直接操作etcd） | 对外提供RESTful API接口、集群管理事件的统一入口，负责集群的监听、认证、授权、准入控制。对内负责协调kube-controller-manager、kube-scheduler、kubelet、kube-proxy，所有的对象资源的增删改查都交给APIServer处理后再提交给etcd做持久化存储。 | +| kube-controller-manager（渊博的学者，功能类都由它实现，可以自动补全yaml文件） | 从逻辑上讲，每个控制器都是一个单独的进程，但是为了降低复杂性，它们都被编译到同一个可执行文件，并在一个进程中运行。负责管理集群各种资源，保证资源处于预期的状态。ControllerManager由多种controller组成，包括Node Controller、Job controller、Endpoints Controller、Service Account & Token Controllers等。 | +| kube-scheduler | kube-scheduler，在预选阶段首先过滤掉不满足当前Pod请求的Nodes。在优选阶段，根据一系列函数对剩余可承接本次调度的Nodes评分，选出其中得分最高的 Node，并将调度决定告知kube-apiserver，这个过程叫做绑定(Binding)。 | +| etcd | etcd是一个高可用的分布式键值数据库，可用于服务发现。etcd采用raft一致性算法，基于Go语言实现。Eted作为一个高可用键值存储系统，天生就是为集群化而设计的。用于保存Kubernetes资源状态数据。 | + +## 计算面组件 +| **组件** | **作用** | +| --- | --- | +| kubelet | 每个Nodes都以systemd 服务的形式运行着软件包安装的kubelet。kubelet是kube-apiserver在node上的容器运行时代理，当Scheduler确定在某个Node上运行Pod后，会将Pod的具体配置信息(image、volume等)发送给该节点的 kubelet，kubelet会根据这些信息调用该节点上的容器运行时创建和维护容器的生命周期，并默认每隔10s向kube-apiserver 报告当前节点的运行状态。 | +| kube-proxy | 集群出厂使用DaemonSet控制器在每个Nodes上运行kube-proxy Pod，kube-proxy配合service做服务发现，负责维护每个Nodes上iptables NAT表的自定义链或LvS的路由规则表。将访问的service的TCP/UDP数据流转发到后端Pod的真实私有IP地址。 | +| container Runtime | 容器运行时是负责运行容器的软件。Kubernetes支持多个容器运行环境: Docker (+ cri-dockerd)、 Containerd、CRI-O以及任何其它实现Kubernetes CRI(容器运行环境接口)。 | + +## 扩展组件 +| 组件 | 作用 | +| --- | --- | +| CroeDNS | 为集群提供DNS解析能力 | +| Dashborad | 提供web管理界面 | +| Metrics-Server | 集群监控指标服务 | +| Calico | 网络插件，提供集群内网络能力 | +| Ingress | 提供七层访问能力 | + diff --git a/运维/容器/Kubernetes/笔记/3.Docker架构.md b/运维/容器/Kubernetes/笔记/3.Docker架构.md new file mode 100644 index 0000000..cfbf2c3 --- /dev/null +++ b/运维/容器/Kubernetes/笔记/3.Docker架构.md @@ -0,0 +1,4 @@ +![image.png](https://cdn.nlark.com/yuque/0/2023/png/35086385/1691497821928-8a806ee6-0b25-4275-919a-4905d223e059.png#averageHue=%238fd390&clientId=u574f41bb-1e9b-4&from=paste&id=u30992a61&originHeight=1048&originWidth=1946&originalType=binary&ratio=2.25&rotation=0&showTitle=false&size=134652&status=done&style=none&taskId=u2f9ad9a1-aa2a-4131-9f18-f609739c9a5&title=) +docker client：docker 客户端程序，主要执行一些命令。 +docker daemon：docker的守护进程，服务端 +images：docker 镜像，类似于 diff --git a/运维/容器/Kubernetes/笔记/4.CRI、OCI.md b/运维/容器/Kubernetes/笔记/4.CRI、OCI.md new file mode 100644 index 0000000..34fcec4 --- /dev/null +++ b/运维/容器/Kubernetes/笔记/4.CRI、OCI.md @@ -0,0 +1,12 @@ +![6b068551624ba576b69e39d30ee3ec3d.png](https://cdn.nlark.com/yuque/0/2024/png/35086385/1711349613476-171504fe-390a-4596-a450-0617e69f92cc.png#averageHue=%23c3b2ac&clientId=ua6d9ca95-9a0c-4&from=paste&height=174&id=ue2c22fdf&originHeight=318&originWidth=1080&originalType=binary&ratio=2.5&rotation=0&showTitle=false&size=123177&status=done&style=none&taskId=u1f326055-700c-4d3b-9d7c-3fb902f9f28&title=&width=592) +当kubelet要创建一个容器时，需要以下几步： + +1. Kubelet 通过 CRI 接口（gRPC）调用 dockershim，请求创建一个容器。CRI 即容器运行时接口（Container Runtime Interface），这一步中，Kubelet 可以视作一个简单的 CRI Client，而 dockershim 就是接收请求的 Server。目前 dockershim 的代码其实是内嵌在 Kubelet 中的，所以接收调用的凑巧就是 Kubelet 进程； +2. dockershim 收到请求后，转化成 Docker Daemon 能听懂的请求，发到 Docker Daemon 上请求创建一个容器。 +3. Docker Daemon 早在 1.12 版本中就已经将针对容器的操作移到另一个守护进程——containerd 中了，因此 Docker Daemon 仍然不能帮我们创建容器，而是要请求 containerd 创建一个容器； +4. containerd 收到请求后，并不会自己直接去操作容器，而是创建一个叫做 containerd-shim 的进程，让 containerd-shim 去操作容器。这是因为容器进程需要一个父进程来做诸如收集状态，维持 stdin 等 fd 打开等工作。而假如这个父进程就是 containerd，那每次 containerd 挂掉或升级，整个宿主机上所有的容器都得退出了。而引入了 containerd-shim 就规避了这个问题（containerd 和 shim 并不是父子进程关系）； +5. 我们知道创建容器需要做一些设置 namespaces 和 cgroups，挂载 root filesystem 等等操作，而这些事该怎么做已经有了公开的规范了，那就是 OCI（Open Container Initiative，开放容器标准）。它的一个参考实现叫做 runC。于是，containerd-shim 在这一步需要调用 runC 这个命令行工具，来启动容器； +6. runC 启动完容器后本身会直接退出，containerd-shim 则会成为容器进程的父进程，负责收集容器进程的状态，上报给 containerd，并在容器中 pid 为 1 的进程退出后接管容器中的子进程进行清理，确保不会出现僵尸进程。 + +为了减少各组件之间的交互（主要还是为了干掉docker）。已经演进为如下架构 +![085608e9f71da356f59393906d5baa93.png](https://cdn.nlark.com/yuque/0/2024/png/35086385/1711349875416-7e3a2d49-4152-40da-ae5d-38f6fe785483.png#averageHue=%239aa693&clientId=udeff3111-0da8-4&from=paste&height=124&id=ub4118c9b&originHeight=311&originWidth=1080&originalType=binary&ratio=2.5&rotation=0&showTitle=false&size=107900&status=done&style=none&taskId=u7a19e3b0-86e9-444a-9467-768b2bc08a5&title=&width=432) diff --git a/运维/微服务/Consul/Consul.md b/运维/微服务/Consul/Consul.md new file mode 100644 index 0000000..b9aaa08 --- /dev/null +++ b/运维/微服务/Consul/Consul.md @@ -0,0 +1,586 @@ +# Consul + +![](../images/Consul/consul-architecture.png) + +上图是官网提供的一个事例系统图，图中的Server是consul服务端高可用集群，Client是consul客户端。consul客户端不保存数据，客户端将接收到的请求转发给响应的Server端。Server之间通过局域网或广域网通信实现数据一致性。每个Server或Client都是一个consul agent。 + +Consul集群间使用了GOSSIP协议通信和raft一致性算法。上面这张图涉及到了很多术语： + +- Agent——agent是一直运行在Consul集群中每个成员上的守护进程。通过运行consul agent来启动。agent可以运行在client或者server模式。指定节点作为client或者server是非常简单的，除非有其他agent实例。所有的agent都能运行DNS或者HTTP接口，并负责运行时检查和保持服务同步。 +- Client——一个Client是一个转发所有RPC到server的代理。这个client是相对无状态的。client唯一执行的后台活动是加入LAN gossip池。这有一个最低的资源开销并且仅消耗少量的网络带宽。 +- Server——一个server是一个有一组扩展功能的代理，这些功能包括参与Raft选举，维护集群状态，响应RPC查询，与其他数据中心交互WAN gossip和转发查询给leader或者远程数据中心。 +- DataCenter——虽然数据中心的定义是显而易见的，但是有一些细微的细节必须考虑。例如，在EC2中，多个可用区域被认为组成一个数据中心。我们定义数据中心为一个私有的，低延迟和高带宽的一个网络环境。这不包括访问公共网络，但是对于我们而言，同一个EC2中的多个可用区域可以被认为是一个数据中心的一部分。 +- Consensus——一致性，使用Consensus来表明就leader选举和事务的顺序达成一致。为了以容错方式达成一致，一般有超过半数一致则可以认为整体一致。Consul使用Raft实现一致性，进行leader选举，在consul中的使用bootstrap时，可以进行自选，其他server加入进来后bootstrap就可以取消。 +- Gossip——Consul建立在Serf的基础之上，它提供了一个用于多播目的的完整的gossip协议。Serf提供成员关系，故障检测和事件广播。Serf是去中心化的服务发现和编制的解决方案，节点失败侦测与发现，具有容错、轻量、高可用的特点。 +- LAN Gossip——它包含所有位于同一个局域网或者数据中心的所有节点。 +- WAN Gossip——它只包含Server。这些server主要分布在不同的数据中心并且通常通过因特网或者广域网通信。 +- RPC——远程过程调用。这是一个允许client请求server的请求/响应机制。 + +在每个数据中心，client和server是混合的。一般建议有3-5台server。这是基于有故障情况下的可用性和性能之间的权衡结果，因为越多的机器加入达成共识越慢。然而，并不限制client的数量，它们可以很容易的扩展到数千或者数万台。 + +同一个数据中心的所有节点都必须加入gossip协议。这意味着gossip协议包含一个给定数据中心的所有节点。这服务于几个目的：第一，不需要在client上配置server地址。发现都是自动完成的。第二，检测节点故障的工作不是放在server上，而是分布式的。这使的故障检测相比心跳机制有更高的可扩展性。第三：它用来作为一个消息层来通知事件，比如leader选举发生时。 + +每个数据中心的server都是Raft节点集合的一部分。这意味着它们一起工作并选出一个leader，一个有额外工作的server。leader负责处理所有的查询和事务。作为一致性协议的一部分，事务也必须被复制到所有其他的节点。因为这一要求，当一个非leader得server收到一个RPC请求时，它将请求转发给集群leader。 + +server节点也作为WAN gossip Pool的一部分。这个Pool不同于LAN Pool，因为它是为了优化互联网更高的延迟，并且它只包含其他Consul server节点。这个Pool的目的是为了允许数据中心能够以low-touch的方式发现彼此。这使得一个新的数据中心可以很容易的加入现存的WAN gossip。因为server都运行在这个pool中，它也支持跨数据中心请求。当一个server收到来自另一个数据中心的请求时，它随即转发给正确数据中心一个server。该server再转发给本地leader。 + +这使得数据中心之间只有一个很低的耦合，但是由于故障检测，连接缓存和复用，跨数据中心的请求都是相对快速和可靠的。 + +### Consul集群安装环境 + +此处启动的是单实例多端口，如果你是多实例，请自行更改相关配置 + +| ServerName | IP Addr & Port | Consul Roles | +| :------------ | :----------------- | :------------ | +| server1 | 192.168.1.153:8500 | Server1 | +| server2 | 192.168.1.154:8500 | Server2 | +| server3 | 192.168.1.155:8500 | Server3 | +| node-exporter | 192.168.1.151:9100 | Node-Exporter | + +#### 二进制安装Consul 1.7.7 + +配置为systemd启动 + +```bash +# 下载consul +CONSUL_VERSION='1.7.7' +wget https://releases.hashicorp.com/consul/${CONSUL_VERSION}/consul_${CONSUL_VERSION}_linux_amd64.zip + +# 解压安装 +unzip consul_${CONSUL_VERSION}_linux_amd64.zip +chown root:root consul +mv consul /usr/local/bin/ +consul --version + +# 启用自动补全 +consul -autocomplete-install +complete -C /usr/local/bin/consul consul + +# 创建用户和目录 +useradd -M -s /sbin/nologin consul +mkdir -p /data/consul/server/{data,config} +chown -R consul.consul /data/consul/ + +# 配置Systemd + +# consul-server1 +cat > /lib/systemd/system/consul-server1.service << EOF +[Unit] +Description="consul server1" +Requires=network-online.target +After=network-online.target + +[Service] +User=consul +Group=consul +ExecStart=/usr/local/bin/consul agent -config-dir=/data/consul/server/config +ExecReload=/usr/local/bin/consul reload +KillMode=process +Restart=on-failure +LimitNOFILE=65536 + +[Install] +WantedBy=multi-user.target +EOF + +# consul-server2 +cat > /lib/systemd/system/consul-server2.service << EOF +[Unit] +Description="consul server2" +Requires=network-online.target +After=network-online.target + +[Service] +User=consul +Group=consul +ExecStart=/usr/local/bin/consul agent -config-dir=/data/consul/server/config +ExecReload=/usr/local/bin/consul reload +KillMode=process +Restart=on-failure +LimitNOFILE=65536 + +[Install] +WantedBy=multi-user.target +EOF + +# consul-server3 +cat > /lib/systemd/system/consul-server3.service << EOF +[Unit] +Description="consul server3" +Requires=network-online.target +After=network-online.target + +[Service] +User=consul +Group=consul +ExecStart=/usr/local/bin/consul agent -config-dir=/data/consul/server/config +ExecReload=/usr/local/bin/consul reload +KillMode=process +Restart=on-failure +LimitNOFILE=65536 + +[Install] +WantedBy=multi-user.target +EOF +``` + +#### 创建Server{1-3}配置文件 + +```bash +# 生成密钥 +CONSUL_KEY=`consul keygen` + +# node_id 一定不可以重复,server name可以随便定义 + +# 创建server1配置文件 +cat > /data/consul/server/config/config.json << EOF +{ + "datacenter": "prometheus", + "bind_addr":"192.168.1.153", + "log_level": "INFO", + "node_id":"09d82408-bc4f-49e0-1111-61ef1d4842f7", + "node_name": "server1", + "data_dir":"/data/consul/server/data", + "server": true, + "bootstrap_expect": 3, + "encrypt": "${CONSUL_KEY}", + "ui":true, + "client_addr":"0.0.0.0", + "retry_join":["192.168.1.153:8301","192.168.1.154:8301","192.168.1.155:8301"], + "ports": { + "http": 8500, + "dns": 8600, + "serf_lan":8301, + "serf_wan":8302, + "server":8300, + "grpc":8400 + }, + "acl": { + "enabled": true, + "default_policy": "deny", + "down_policy": "extend-cache", + "tokens":{ + "master":"${CONSUL_HTTP_TOKEN}", + "agent":"${CONSUL_HTTP_TOKEN}" + } + } +} +EOF + +# 创建server2配置文件 +cat > /data/consul/server/config/config.json << EOF +{ + "datacenter": "prometheus", + "bind_addr":"192.168.1.154", + "log_level": "INFO", + "node_id":"613ccd6e-68d1-3bbd-2222-3cbc450f019d", + "node_name": "server2", + "data_dir":"/data/consul/server/data", + "server": true, + "bootstrap_expect": 3, + "encrypt": "${CONSUL_KEY}", + "ui":true, + "client_addr":"0.0.0.0", + "retry_join":["192.168.1.153:8301","192.168.1.154:8301","192.168.1.155:8301"], + "ports": { + "http": 8500, + "dns": 8600, + "serf_lan":8301, + "serf_wan":8302, + "server":8300, + "grpc":8400 + }, + "acl": { + "enabled": true, + "default_policy": "deny", + "down_policy": "extend-cache", + "tokens":{ + "master":"${CONSUL_HTTP_TOKEN}", + "agent":"${CONSUL_HTTP_TOKEN}" + } + } +} +EOF + +# 创建server3配置文件 +cat > /data/consul/server/config/config.json << EOF +{ + "datacenter": "prometheus", + "bind_addr":"192.168.1.155", + "log_level": "INFO", + "node_id":"d8a09ffd-7ccb-84bd-3333-8d8b7a01951e", + "node_name": "server3", + "data_dir":"/data/consul/server/data", + "server": true, + "bootstrap_expect": 3, + "encrypt": "${CONSUL_KEY}", + "ui":true, + "client_addr":"0.0.0.0", + "retry_join":["192.168.1.153:8301","192.168.1.154:8301","192.168.1.155:8301"], + "ports": { + "http": 8500, + "dns": 8600, + "serf_lan":8301, + "serf_wan":8302, + "server":8300, + "grpc":8400 + }, + "acl": { + "enabled": true, + "default_policy": "deny", + "down_policy": "extend-cache", + "tokens":{ + "master":"${CONSUL_HTTP_TOKEN}", + "agent":"${CONSUL_HTTP_TOKEN}" + } + } +} +EOF +``` + +#### 启动服务 + +```bash +systemctl enable consul-server1 && systemctl start consul-server1 +systemctl enable consul-server2 && systemctl start consul-server2 +systemctl enable consul-server3 && systemctl start consul-server3 +systemctl status consul-server1 +``` + +生成http_acl_token，写入config.jso中的tokens数组中的master与agent。`注意，consul acl bootstrap只能执行一次.` + +```bash +consul acl bootstrap +AccessorID: ae4f5026-73e7-ff56-548c-3ae0fc76022f +SecretID: 08ad8862-f702-eb26-0276-d8255b11267e +Description: Bootstrap Token (Global Management) +Local: false +Create Time: 2020-09-02 23:25:47.533701389 +0800 CST +Policies: + 00000000-0000-0000-0000-000000000001 - global-management +AccessorID: ae4f5026-73e7-ff56-548c-3ae0fc76022f +SecretID: 08ad8862-f702-eb26-0276-d8255b11267e +export CONSUL_HTTP_TOKEN='your_token' +``` + +#### 查看集群 + +返回空节点是正常的，因为开启了ACL，所以访问的时候需要加入token，如果`CONSUL_HTTP_TOKEN`变量已经加入profile，不需要在指定token。 + +```bash +# 环境变量 +cat >> /etc/profile << EOF +export CONSUL_HTTP_TOKEN='08ad8862-f702-eb26-0276-d8255b11267e' +EOF + +# consul members --token='08ad8862-f702-eb26-0276-d8255b11267e' +Node Address Status Type Build Protocol DC Segment +server1 192.168.1.153:8301 alive server 1.7.7 2 prometheus +server2 192.168.1.154:8301 alive server 1.7.7 2 prometheus +server3 192.168.1.155:8301 alive server 1.7.7 2 prometheus + +# 验证集群UI +在页面http://127.0.0.1:8500/ui/prometheus/acls/tokens 输入配置中的 master token，再刷新界面可以在services和nodes中查看到信息 + +# 验证API，通过在header中增加x-consul-token则可返回节点列表 +curl http://127.0.0.1:8500/v1/catalog/nodes -H 'x-consul-token: ${CONSUL_HTTP_TOKEN}' +``` + +#### 将Consul日志加入Syslog + +此处为可选项，如果你需要单独将日志输出到ELK，那么此项配置非常有必要，因为默认的日志都打到syslog中了。 + +```bash +# 创建目录&赋权 +mkdir -p /var/log/consul/ +chown -R syslog.syslog /var/log/consul/ + +# 创建日志配置文件 +cat >/etc/rsyslog.d/consul.conf </etc/logrotate.d/consul <> /data/prometheus/conf/prometheus.yml < # 设置基本的认证用户名和密码。 +-consul-addr=
# 设置Consul实例的地址。 +-max-stale= # 查询过期的最大频率，默认是1s。 +-dedup # 启用重复数据删除，当许多consul template实例渲染一个模板的时候可以降低consul的负载。 +-consul-ssl # 使用https连接Consul。 +-consul-ssl-verify # 通过SSL连接的时候检查证书。 +-consul-ssl-cert # SSL客户端证书发送给服务器。 +-consul-ssl-key # 客户端认证时使用的SSL/TLS私钥。 +-consul-ssl-ca-cert # 验证服务器的CA证书列表。 +-consul-token= # 设置Consul API的token。 +-syslog # 把标准输出和标准错误重定向到syslog，syslog的默认级别是local0。 +-syslog-facility= # 设置syslog级别，默认是local0，必须和-syslog配合使用。 +-template=