diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 00000000..2959201f --- /dev/null +++ b/.gitattributes @@ -0,0 +1,3 @@ +*.js linguist-language=java +*.css linguist-language=java +*.html linguist-language=java diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml new file mode 100644 index 00000000..cfe0b71f --- /dev/null +++ b/.github/FUNDING.yml @@ -0,0 +1,12 @@ +# These are supported funding model platforms + +github: # Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] +patreon: # Replace with a single Patreon username +open_collective: # Replace with a single Open Collective username +ko_fi: # Replace with a single Ko-fi username +tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel +community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry +liberapay: # Replace with a single Liberapay username +issuehunt: # Replace with a single IssueHunt username +otechie: # Replace with a single Otechie username +custom: https://raw.githubusercontent.com/frank-lam/fullstack-tutorial/master/assets/wechat/wx-green.png diff --git a/README.md b/README.md index f084f670..0a492743 100644 --- a/README.md +++ b/README.md @@ -1,77 +1,40 @@ -![full stack developer tutorial](assets/1537592021705.png) - - - -
-

- 嗨,欢迎来做客,即刻开始 CS 学习之旅. -

-

- Hey, welcome to visit and start the computer science learning journey. -

-
- - - +

| I | II | III | IV | V | VI | VII | VIII | IX | X | XI | XII | | :--------------------------: | :-------------------: | :----------------------: | :---------------------: | :--------------: | :---------------: | :----------------------: | :----------------------: | :----------------------: | :----------------------: | :----------------------: | :----------------------: | -| 算法
[📝](#一数据结构与算法) | Java
[☕️](#二java) | Python
[🐍](#三python) | 前端
[🔗](#四前端) | 数据库
[💾](#五数据库) | 操作系统
[💻](#六操作系统) | 网络通信
[☁️](#七网络通信) | 分布式
[📃](#八分布式) | 机器学习
[🔍](#九机器学习) |工具
[🔨](#十工具) |Learn
[📚](#learn-books) |Talking
[💡](#talking-bulb) | +| 算法
[📝](#一数据结构与算法) | Java
[☕️](#二java) | Python
[🐍](#三python) | 前端
[🔗](#四前端) | 数据库
[💾](#五数据库) | 操作系统
[💻](#六操作系统) | 网络通信
[☁️](#七网络通信) | 分布式
[📃](#八分布式) | 机器学习
[🔍](#九机器学习) |工具
[🔨](#十工具) |Learn
[📖](#learn-) |Talking
[💡](#talking-bulb) |

- 📢📢📢 -

-

- 和技术达人们一起交流: - QQ技术交流群 + ✨✨✨

- 欢迎志同道合的小伙伴加入开源小组:⊱ 开源小组,英雄招募令 + 和 500+ 技术达人在线交流: + 🤟 快来吧,和大家一起技术互动交流

-
-
-

- 🔥🔥🔥 -

-

- 为极客打造,阅读体验更好的在线文档(与 GitHub 实时同步) -

-

- 支持手机阅读,目录导航,Gitalk 评论,搜索定位 -

-

- 📖 点击,即刻开始阅读! -

-
-
-
-

- 🔥🔥🔥 -

-

- 也许你特别钟爱 GitHub 的阅读体验,没关系 -

-

- 我也为您打造了一款 Chrome 插件 Chrome Extension:GitHub Markdown -

-

- 方便在 GitHub 长文阅读时,在侧边栏生成标题目录定位 -

-

- 🎅 特别鸣谢共同完成两位小伙伴:@dxiaoqi @dzeze -

+

+ 『技术博客』:www.frankfeekr.cn | 『开源贡献』:⊱ 英雄招募令 | 『微信订阅号』:全栈开发社区 +

+

+ +🔥🔥🔥 +欢迎光临 LinTools 开发者的在线导航: https://tools.frankfeekr.cn +如果你有更好的在线工具,[请点击留言](https://github.com/frank-lam/fullstack-tutorial/issues/65),持续更新! ## 前言 -- [全栈修炼手册:如何选择自己的技术栈?](notes/如何选择自己的技术栈.md) +- [谈谈技术学习的一些方法论](https://www.frankfeekr.cn/2019/05/09/谈谈技术学习的一些方法论/) + + 在学习技术这条路上并不是一帆风顺,也一直在探索一条适合自己的学习方法。从一开始的技术小白,到现在还比较上道的老鸟,在这个过程中走了太多的弯路,想在这里和大家分享一些我的经历和学习方法。 + +- [如何选择自己的技术栈](https://www.frankfeekr.cn/2019/05/27/如何选择自己的技术栈/) 在编程的世界里,该如何选择自己的技术栈呢。学前端?学 APP 开发?对于 Java、C++、C#、Python、PHP 又如何选择呢?人工智能现如今这么火,是不是机器学习、深度学习更高级一些呢?那么程序员又如何修炼内功呢? @@ -85,6 +48,14 @@ +## 技能图谱 + +- [backend skill](notes/SkillTree/backend-skill.md) + + 后台开发技能图谱,从程序员的内功修炼到后台语言,分布式系统架构 + + + ## 一、数据结构与算法 - [数据结构与算法](notes/数据结构与算法.md) @@ -132,27 +103,35 @@ ## 三、Python - [Python 语言基础](notes/Python/Python简介及基础语法.md) -- Scrapy 爬虫框架 -- Flask -- Django ## 四、前端 +- [前端知识体系](notes/Frontend/前端知识体系.md) +- [Angular 基础知识](notes/Frontend/Angular.md) +- [ES6+ 语法全解析](https://notes.frankfeekr.cn/docs/frontend/es6/%E9%A1%B9%E7%9B%AE%E5%87%86%E5%A4%87/%E5%89%8D%E8%A8%80) + + +
TODO LIST -- HTML(5) +- HTML5 + +- CSS3 -- CSS(3) +- CSS 预处理 - sass、scss、stylus + - sass(scss) + - less + - stylus - CSS 框架 - BootStarp、LayUI + - BootStarp + - LayUI - JavaScript @@ -161,7 +140,7 @@ - JavaScript 框架 - Vue - - React + - React - Angular - jQuery @@ -169,22 +148,30 @@ 常用 api、对象池、异常处理、进程通信、高并发 -- 静态编译 - - Flow +- 静态类型检查 + - TypeScript + - Flow + +- 构建/打包工具 -- 打包工具 - webpack - - glup + - gulp - rollup -- 工具 +- 包管理工具 + - npm - yarn + +- 服务端渲染 -
- + - koa2 + - express + - nuxt + - next + @@ -198,14 +185,18 @@ Redis 核心知识 -- MongoDB - - 基于分布式文件存储的数据库 - - [SQL](notes/SQL.md) 常用 SQL 语句 +- [PostgreSQL](notes/PostgreSQL.md) + + 一个开源的关系数据库,是从伯克利写的 POSTGRES 软件包发展而来的 + +- [InfluxDB](https://www.frankfeekr.cn/2019/07/24/influxdb-tutorial-start/) + + 玩转时序数据库 + ## 六、操作系统 @@ -234,7 +225,6 @@ web前后端漏洞分析与防御,XSS 攻击、CSRF 攻击、DDoS 攻击、SQL 注入 -- Socket 网络编程 @@ -248,6 +238,14 @@ 微服务简介、API 网关、服务注册发现、服务通信 +- [Zookeeper](notes/分布式/Zookeeper.md) + + 分布式协调服务,服务注册发现 + +- [Kafka](notes/MicroService/kafka/README.md) + + 深入浅出 Kafka,将用最极简的语言带你走进 Kafka 的消息中间件世界 + 【说明】**分布式专题** 笔者也在学习中,这里列举了一些技能列表,笔者将局部更新。敬请期待 @@ -268,7 +266,7 @@ - Zookeeper - 分布式协调服务 + 分布式协调服务,服务注册发现 - Dubbo、Thrift(RPC 框架) @@ -302,6 +300,15 @@ 自动化运维,持续集成、持续交付、持续部署 + +- 分布式锁 + + 基于 Redis、MySQL、Zookeeper 的分布式锁实现 + +- FastDFS + + 轻量级分布式文件管理系统 + - Go 并发的、带垃圾回收的、快速编译的语言 @@ -311,24 +318,21 @@ ## 九、机器学习 -- 经典机器学习算法 - - K 近邻算法、线性回归、梯度下降法、逻辑回归、支持向量机、决策树、集成学习 -- 基础框架 - - Tensorflow,Scikit-learn +- [深度学习初识](notes/DeepLearning/深度学习初识.md) +- 经典机器学习算法 + K 近邻算法、线性回归、梯度下降法、逻辑回归、支持向量机、决策树、集成学习 ## 十、工具 -- [Git](notes/Git.md) +- [Git](notes/git-tutorial.md) - 基本概念,常见命令,速查表 + 学习指引,将用最极简的语言带你进入 Git 版本控制的世界 - [Git 工作流](notes/Git工作流.md) @@ -342,10 +346,15 @@ 基于 lanproxy 穿透服务,为你定了一键启动的服务端和客户端 Docker 镜像 +- [基于 SpringBoot & IDEA & JRebel 玩转远程热部署与远程调试](https://www.frankfeekr.cn/2019/07/17/springboot-idea-jrebel-hotswap/) + + 手把手带你玩转,远程调试与远程热部署 + - [什么是 TDD 及常见的测试方法](notes/软件测试.md) -## Learn :books: + +## Learn 📖 - [LEARN_LIST](notes/LEARNLIST.md) @@ -357,73 +366,62 @@ ## Talking :bulb: -  本仓库致力于成为一个全栈开发爱好者的学习指南,给初学者一个更明确的学习方向,同时也是对自己技能的强化和巩固。在架构师这条路上,希望和大家一起成长,帮助更多的计算机爱好者能够有一个明确的学习路径。持续不间断的维护本仓库,也欢迎有更多的极客们加入。 +本仓库致力于成为一个全栈开发爱好者的学习指南,给初学者一个更明确的学习方向,同时也是对自己技能的强化和巩固。在架构师这条路上,希望和大家一起成长,帮助更多的计算机爱好者能够有一个明确的学习路径。持续不间断的维护本仓库,也欢迎有更多的极客们加入。 + +都说好记性不如烂笔头,定期的学习和整理必然对学习巩固有所帮助,这里通过索引的方式对全栈开发技术做一个系统分类,方便随时巩固和学习,当然还有面试。在学习这条路上难免会有很多盲点和学不完的知识。有道无术,术尚可求,掌握好思维能力才能应对千变万化的技术。不要把大脑当成硬盘,也不要做高速运转的 CPU,而修行自己的大脑成为一个搜索引擎,学会分析解决问题。 + +Since 20,May,2018 -  都说好记性不如烂笔头,定期的学习和整理必然对学习巩固有所帮助,这里通过索引的方式对全栈开发技术做一个系统分类,方便随时巩固和学习,当然还有面试。在学习这条路上难免会有很多盲点和学不完的知识。有道无术,术尚可求,掌握好思维能力才能应对千变万化的技术。不要把大脑当成硬盘,也不要做高速运转的 CPU,而修行自己的大脑成为一个搜索引擎,学会分析解决问题。 -  Since 20,May,2018 +## Reference +个人的能力有限,在编写的过程中引用了诸多优秀的 GitHub 仓库。本项目的启发来自 [@CyC2018](https://github.com/CyC2018) 的学习笔记,是一个非常优秀的开源项目,在本仓库中部分内容引用文字和图例;引用了 [@计算所的小鼠标](https://github.com/CarpenterLee) 中对于 JCF 的源码分析和理解;引用了 [阿里面试题总结](https://www.nowcoder.com/discuss/5949) 中全部的面试题,并对面经进行了整理勘误,并进行了知识拓展和修改;引用了 [牛客网](https://www.nowcoder.com) 上的面试经验贴。也引用了知乎上的热门回答和优秀博客的回答。在这里特别鸣谢,我将每篇文章中做外链引用说明。 -### Reference +文中我也推荐了学习的书籍和学习课程,都将附着上最高清、最形象的配图进行讲解。在文中的配图都来自自己绘制的、博客、Github、PDF书籍等等,这里没法一一感谢,谢谢你们。 -  个人的能力有限,在编写的过程中引用了诸多优秀的 GitHub 仓库。本项目的启发来自 [@CyC2018](https://github.com/CyC2018) 的学习笔记,是一个非常优秀的开源项目,在本仓库中部分内容引用文字和图例;引用了 [@计算所的小鼠标](https://github.com/CarpenterLee) 中对于 JCF 的源码分析和理解;引用了 [阿里面试题总结](https://www.nowcoder.com/discuss/5949) 中全部的面试题,并对面经进行了整理勘误,并进行了知识拓展和修改;引用了 [牛客网](https://www.nowcoder.com) 上的面试经验贴。也引用了知乎上的热门回答和优秀博客的回答。在这里特别鸣谢,我将每篇文章中做外链引用说明。 +推荐一些优秀的开源项目,供大家参考,[reference](notes/reference.md)。 -  文中我也推荐了学习的书籍和学习课程,都将附着上最高清、最形象的配图进行讲解。在文中的配图都来自自己绘制的、博客、Github、PDF书籍等等,这里没法一一感谢,谢谢你们。 -  推荐一些优秀的开源项目,供大家参考,[reference](notes/reference.md)。 +## Contributors +Thank you to all the people who already contributed to fullstack-tutorial ! -### Contributors +Please make sure to read the [Contributing Guide/如何给我的仓库贡献](notes/docs/如何给我的仓库贡献.md) before making a pull request. -  该项目还在萌芽起步阶段,在编写的过程中难免遇到错误和不足,你可以在 issue 中提出,或是提交你的 contribution。[【开源贡献】如何给我的仓库贡献?](notes/docs/如何给我的仓库贡献.md) + -  感谢以下伙伴们对于本仓库的贡献,如想加入本开源项目,请联系笔者。 -   - - - - - - - - - - - - - - - - - - - - - - - +## Stargazers over time +![Stargazers over time](https://starcharts.herokuapp.com/frank-lam/fullstack-tutorial.svg) -### License -  本作品采用 [知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-sa/4.0/) 进行许可。使用者可以对本创作进行转载、节选、混编、二次创作,但不得运用于商业目的,且使用时须进行署名,采用本创作的内容必须同样采用本协议进行授权。 -  知识共享许可协议 +## License + +知识共享许可协议 + +Copyright (c) 2021-present, Frank Lam ## 关于作者 :boy: +
+

+ 『作者简介』:https://www.frankfeekr.cn/author +

+
+ +

在颠覆世界的同时,也要好好关照自己。

-QQ群 -CSDN +BLOG 邮箱 QQ群

@@ -431,5 +429,5 @@ from zero to hero.

-

+
diff --git a/assets/1537589029422.png b/assets/1537589029422.png deleted file mode 100644 index 7f7b8980..00000000 Binary files a/assets/1537589029422.png and /dev/null differ diff --git a/assets/4yH8v1.png b/assets/4yH8v1.png deleted file mode 100644 index fd9bbb95..00000000 Binary files a/assets/4yH8v1.png and /dev/null differ diff --git a/assets/fullstack-tutorial-2019-2.png b/assets/fullstack-tutorial-2019-2.png new file mode 100644 index 00000000..31646e4e Binary files /dev/null and b/assets/fullstack-tutorial-2019-2.png differ diff --git a/assets/fullstack-tutorial-2019.png b/assets/fullstack-tutorial-2019.png new file mode 100644 index 00000000..205e88c7 Binary files /dev/null and b/assets/fullstack-tutorial-2019.png differ diff --git a/assets/fullstack-tutorial-logo-2019.png b/assets/fullstack-tutorial-logo-2019.png new file mode 100644 index 00000000..3038642b Binary files /dev/null and b/assets/fullstack-tutorial-logo-2019.png differ diff --git a/assets/fullstack-tutorial-logo.png b/assets/fullstack-tutorial-logo.png new file mode 100644 index 00000000..f1fc94d7 Binary files /dev/null and b/assets/fullstack-tutorial-logo.png differ diff --git a/assets/fullstack-tutorial-logo.svg b/assets/fullstack-tutorial-logo.svg new file mode 100644 index 00000000..80396fa2 --- /dev/null +++ b/assets/fullstack-tutorial-logo.svg @@ -0,0 +1,3 @@ + + +
Since 2018/5/20
Since 2018/5/20
Fullstack Tutorial, 2020
Fullstack Tutorial, 2...
Hey, welcome to visit and start the computer science learning journey.
Hey, welcome to visit and start the computer science learning...
Viewer does not support full SVG 1.1
\ No newline at end of file diff --git a/assets/logo-2021.svg b/assets/logo-2021.svg new file mode 100644 index 00000000..9e367ee9 --- /dev/null +++ b/assets/logo-2021.svg @@ -0,0 +1,3 @@ + + +
Since 2018/5/20
Since 2018/5/20
Fullstack Tutorial, 2021
Fullstack Tutorial, 2...
Hey, welcome to visit and start the computer science learning journey.
Hey, welcome to visit and start the computer science learning...
Viewer does not support full SVG 1.1
\ No newline at end of file diff --git a/assets/mind/2019-learning.xmind b/assets/mind/2019-learning.xmind new file mode 100644 index 00000000..b33c2d2d Binary files /dev/null and b/assets/mind/2019-learning.xmind differ diff --git a/assets/wechat/wx-green-raw.png b/assets/wechat/wx-green-raw.png new file mode 100644 index 00000000..db0e96ff Binary files /dev/null and b/assets/wechat/wx-green-raw.png differ diff --git a/assets/wechat/wx-green.png b/assets/wechat/wx-green.png new file mode 100644 index 00000000..0e966a8f Binary files /dev/null and b/assets/wechat/wx-green.png differ diff --git a/assets/wechat/wx-white.png b/assets/wechat/wx-white.png new file mode 100644 index 00000000..f1d94dae Binary files /dev/null and b/assets/wechat/wx-white.png differ diff --git "a/assets/wechat/\346\220\234\347\264\242\346\241\206\344\274\240\346\222\255\346\240\267\345\274\217-\346\240\207\345\207\206\350\211\262\347\211\210.png" "b/assets/wechat/\346\220\234\347\264\242\346\241\206\344\274\240\346\222\255\346\240\267\345\274\217-\346\240\207\345\207\206\350\211\262\347\211\210.png" new file mode 100644 index 00000000..ec9e6501 Binary files /dev/null and "b/assets/wechat/\346\220\234\347\264\242\346\241\206\344\274\240\346\222\255\346\240\267\345\274\217-\346\240\207\345\207\206\350\211\262\347\211\210.png" differ diff --git "a/assets/wechat/\346\220\234\347\264\242\346\241\206\344\274\240\346\222\255\346\240\267\345\274\217-\347\231\275\350\211\262\347\211\210.png" "b/assets/wechat/\346\220\234\347\264\242\346\241\206\344\274\240\346\222\255\346\240\267\345\274\217-\347\231\275\350\211\262\347\211\210.png" new file mode 100644 index 00000000..761365d0 Binary files /dev/null and "b/assets/wechat/\346\220\234\347\264\242\346\241\206\344\274\240\346\222\255\346\240\267\345\274\217-\347\231\275\350\211\262\347\211\210.png" differ diff --git a/assets/wx_group_qrcode.png b/assets/wx_group_qrcode.png new file mode 100644 index 00000000..44479f4d Binary files /dev/null and b/assets/wx_group_qrcode.png differ diff --git a/assets/zhishixingqiu.JPG b/assets/zhishixingqiu.JPG new file mode 100644 index 00000000..afdc791a Binary files /dev/null and b/assets/zhishixingqiu.JPG differ diff --git a/notes/DeepLearning/README.md b/notes/DeepLearning/README.md index c4550737..4430ef94 100644 --- a/notes/DeepLearning/README.md +++ b/notes/DeepLearning/README.md @@ -1 +1,2 @@ -深度学习板块 \ No newline at end of file +深度学习板块 + diff --git a/notes/DeepLearning/assets/1388465484-5b78f514b3a47.png b/notes/DeepLearning/assets/1388465484-5b78f514b3a47.png new file mode 100644 index 00000000..920e64e6 Binary files /dev/null and b/notes/DeepLearning/assets/1388465484-5b78f514b3a47.png differ diff --git a/notes/DeepLearning/assets/1404020359-5b79057c59609.png b/notes/DeepLearning/assets/1404020359-5b79057c59609.png new file mode 100644 index 00000000..9a2c97cb Binary files /dev/null and b/notes/DeepLearning/assets/1404020359-5b79057c59609.png differ diff --git a/notes/DeepLearning/assets/1867956752-5b78fbe0b8f6b.png b/notes/DeepLearning/assets/1867956752-5b78fbe0b8f6b.png new file mode 100644 index 00000000..76a89222 Binary files /dev/null and b/notes/DeepLearning/assets/1867956752-5b78fbe0b8f6b.png differ diff --git a/notes/DeepLearning/assets/2112343587-5b78f2b533cd1.png b/notes/DeepLearning/assets/2112343587-5b78f2b533cd1.png new file mode 100644 index 00000000..8f579002 Binary files /dev/null and b/notes/DeepLearning/assets/2112343587-5b78f2b533cd1.png differ diff --git a/notes/DeepLearning/assets/2845056518-5b790706ce05b.png b/notes/DeepLearning/assets/2845056518-5b790706ce05b.png new file mode 100644 index 00000000..a6b5c8cb Binary files /dev/null and b/notes/DeepLearning/assets/2845056518-5b790706ce05b.png differ diff --git a/notes/DeepLearning/assets/3893839953-5b78f3ea9066e.png b/notes/DeepLearning/assets/3893839953-5b78f3ea9066e.png new file mode 100644 index 00000000..6406afed Binary files /dev/null and b/notes/DeepLearning/assets/3893839953-5b78f3ea9066e.png differ diff --git a/notes/DeepLearning/assets/5c723ebb0001776719201080.jpg b/notes/DeepLearning/assets/5c723ebb0001776719201080.jpg new file mode 100644 index 00000000..9775f5cf Binary files /dev/null and b/notes/DeepLearning/assets/5c723ebb0001776719201080.jpg differ diff --git a/notes/DeepLearning/assets/640.jpeg b/notes/DeepLearning/assets/640.jpeg new file mode 100644 index 00000000..e3159c96 Binary files /dev/null and b/notes/DeepLearning/assets/640.jpeg differ diff --git a/notes/DeepLearning/assets/b248f2b9d659c18808a7b75d7537dea09a886564.jpg b/notes/DeepLearning/assets/b248f2b9d659c18808a7b75d7537dea09a886564.jpg new file mode 100644 index 00000000..73ea5123 Binary files /dev/null and b/notes/DeepLearning/assets/b248f2b9d659c18808a7b75d7537dea09a886564.jpg differ diff --git a/notes/DeepLearning/assets/gradient.png b/notes/DeepLearning/assets/gradient.png new file mode 100644 index 00000000..6460baab Binary files /dev/null and b/notes/DeepLearning/assets/gradient.png differ diff --git a/notes/DeepLearning/assets/image-20190405103241674.png b/notes/DeepLearning/assets/image-20190405103241674.png new file mode 100644 index 00000000..c4dbec2a Binary files /dev/null and b/notes/DeepLearning/assets/image-20190405103241674.png differ diff --git a/notes/DeepLearning/assets/image-20190405111251357.png b/notes/DeepLearning/assets/image-20190405111251357.png new file mode 100644 index 00000000..a0fe82f6 Binary files /dev/null and b/notes/DeepLearning/assets/image-20190405111251357.png differ diff --git a/notes/DeepLearning/assets/image-20190405111638911.png b/notes/DeepLearning/assets/image-20190405111638911.png new file mode 100644 index 00000000..cc3a2d81 Binary files /dev/null and b/notes/DeepLearning/assets/image-20190405111638911.png differ diff --git a/notes/DeepLearning/assets/image-20190405111736469.png b/notes/DeepLearning/assets/image-20190405111736469.png new file mode 100644 index 00000000..1a5a5f1f Binary files /dev/null and b/notes/DeepLearning/assets/image-20190405111736469.png differ diff --git a/notes/DeepLearning/assets/image-20190405111848924.png b/notes/DeepLearning/assets/image-20190405111848924.png new file mode 100644 index 00000000..18af1276 Binary files /dev/null and b/notes/DeepLearning/assets/image-20190405111848924.png differ diff --git a/notes/DeepLearning/assets/image-20190405111934921.png b/notes/DeepLearning/assets/image-20190405111934921.png new file mode 100644 index 00000000..2e69b775 Binary files /dev/null and b/notes/DeepLearning/assets/image-20190405111934921.png differ diff --git a/notes/DeepLearning/assets/image_1_0_0.jpg b/notes/DeepLearning/assets/image_1_0_0.jpg new file mode 100644 index 00000000..410892f4 Binary files /dev/null and b/notes/DeepLearning/assets/image_1_0_0.jpg differ diff --git a/notes/DeepLearning/assets/neural-network-3.png b/notes/DeepLearning/assets/neural-network-3.png new file mode 100644 index 00000000..bb4af819 Binary files /dev/null and b/notes/DeepLearning/assets/neural-network-3.png differ diff --git a/notes/DeepLearning/assets/river-starrynight-combined.png b/notes/DeepLearning/assets/river-starrynight-combined.png new file mode 100644 index 00000000..1a732eb6 Binary files /dev/null and b/notes/DeepLearning/assets/river-starrynight-combined.png differ diff --git a/notes/DeepLearning/assets/v2-4bcf97eff1afd63aab37c95d751f270f_r.jpg b/notes/DeepLearning/assets/v2-4bcf97eff1afd63aab37c95d751f270f_r.jpg new file mode 100644 index 00000000..57d8050e Binary files /dev/null and b/notes/DeepLearning/assets/v2-4bcf97eff1afd63aab37c95d751f270f_r.jpg differ diff --git a/notes/DeepLearning/assets/v2-718f95df083b2d715ee29b018d9eb5c2_1200x500.jpg b/notes/DeepLearning/assets/v2-718f95df083b2d715ee29b018d9eb5c2_1200x500.jpg new file mode 100644 index 00000000..c2dfc49c Binary files /dev/null and b/notes/DeepLearning/assets/v2-718f95df083b2d715ee29b018d9eb5c2_1200x500.jpg differ diff --git "a/notes/DeepLearning/\346\267\261\345\272\246\345\255\246\344\271\240\345\205\245\351\227\250\350\257\276\347\250\213.md" "b/notes/DeepLearning/\346\267\261\345\272\246\345\255\246\344\271\240\345\205\245\351\227\250\350\257\276\347\250\213.md" new file mode 100644 index 00000000..f27474c9 --- /dev/null +++ "b/notes/DeepLearning/\346\267\261\345\272\246\345\255\246\344\271\240\345\205\245\351\227\250\350\257\276\347\250\213.md" @@ -0,0 +1,17 @@ +## 入门课程 + +> 简介:本课程首先介绍机器学习与深度学习,包括机器学习的应用、岗位职责,深度学习的等。然后通过讲解神经元及其衍生模型逻辑斯底回归、目标函数、梯度下降等深度学习基础知识。最后通过Tensorflow来实现课程讲解的模型。 + +深度学习之神经网络入门最佳路径 +https://www.imooc.com/learn/1063 + + + +深度学习-初识 - Corwien - SegmentFault 思否 +https://segmentfault.com/a/1190000016068053 + + + +## 从入门到实战 + +实战课已经上线:https://coding.imooc.com/class/259.html \ No newline at end of file diff --git "a/notes/DeepLearning/\346\267\261\345\272\246\345\255\246\344\271\240\345\210\235\350\257\206.md" "b/notes/DeepLearning/\346\267\261\345\272\246\345\255\246\344\271\240\345\210\235\350\257\206.md" new file mode 100644 index 00000000..89d05b33 --- /dev/null +++ "b/notes/DeepLearning/\346\267\261\345\272\246\345\255\246\344\271\240\345\210\235\350\257\206.md" @@ -0,0 +1,252 @@ + + +- [深度学习初识](#深度学习初识) + - [一、入门基本概念](#一入门基本概念) + - [机器学习简介](#机器学习简介) + - [机器学习应用举例](#机器学习应用举例) + - [机器学习应用流程](#机器学习应用流程) + - [机器学习岗位职责](#机器学习岗位职责) + - [深度学习简介](#深度学习简介) + - [深度学习与机器学习关系](#深度学习与机器学习关系) + - [深度学习算法集合](#深度学习算法集合) + - [深度学习进展](#深度学习进展) + - [二、神经网络](#二神经网络) + - [人体神经元模型](#人体神经元模型) + - [人工神经网络](#人工神经网络) + - [1. 神经元](#1-神经元) + - [2. 逻辑回归模型](#2-逻辑回归模型) + - [目标函数](#目标函数) + - [梯度下降](#梯度下降) + - [三、Tensorflow基础](#三tensorflow基础) + - [Tensorflow简介](#tensorflow简介) + - [计算图模型](#计算图模型) + - [TensorFlow 安装](#tensorflow-安装) + - [参考资料](#参考资料) + + + +# 深度学习初识 + +## 一、入门基本概念 + +### 机器学习简介 + +**机器学习**:无序数据转化为价值的方法 +**机器学习价值**:从数据中抽取规律,并预测未来 + + + +#### 机器学习应用举例 + +- 分类问题:图像识别、垃圾邮件识别 +- 回归问题:股价预测、房价预测 +- 排序问题:点击率预估、推荐 +- 生成问题:图像生成、图像风格转换、图像文字描述生成 + + + +#### 机器学习应用流程 + +![image-20190405103241674](assets/image-20190405103241674.png) + + + +#### 机器学习岗位职责 + +- 数据处理(采集+去噪) +- 模型训练(特征+模型) +- 模型评估与优化(MSE、F1-score、AUC+调参) +- 模型应用(A/B测试) + + + +### 深度学习简介 + +![img](assets/b248f2b9d659c18808a7b75d7537dea09a886564.jpg) + +人工智能、机器学习、深度学习之间的关系 + +``` +人工智能(AI)> 机器学习(Machine Learning)> 深度学习(Deep learning) +``` + + + +#### 深度学习与机器学习关系 + +- 机器学习是实现人工智能的方法 +- 深度学习是实现机器学习算法的技术 + + + +#### 深度学习算法集合 + +- **卷积神经网络**(Convolutional Neural Network, CNN) + - CV 领域使用较多 +- **循环神经网络**(Recurrent Neural Networks,RNNs) + - NLP 领域使用较多 + - 处理不定长数据 +- 自动编码器 +- 稀疏编码 +- 深度信念网络 +- 深度学习 + 强化学习 = **深度强化学习** + - AlphaGo + - AlphaZero + + + +#### 深度学习进展 + +1. 图像分类 + +ImageNet: http://image-net.org/ + +![v2-718f95df083b2d715ee29b018d9eb5c2_1200x500](assets/v2-718f95df083b2d715ee29b018d9eb5c2_1200x500.jpg) + + + +2. 机器翻译 + +![机器翻译](assets/640.jpeg) + +3. 图像生成 + +![image_1_0_0](assets/image_1_0_0.jpg) + +![v2-4bcf97eff1afd63aab37c95d751f270f_r](assets/v2-4bcf97eff1afd63aab37c95d751f270f_r.jpg) + +![river-starrynight-combined](assets/river-starrynight-combined.png) + +- [Implementing Neural Artistic Style Transfer | L2Program](http://l2program.co.uk/945/implementing-neural-artistic-style-transfer) + +4. 字体生成 + +5. AlphaGo + + + +## 二、神经网络 + +### 人体神经元模型 + +神经网络模型是模仿人类的大脑神经构造而构造的。先来看人体神经元模型。 + +![img](assets/neural-network-3.png) + +神经元的可以分为四个区域: + +- 接收区(receptive zone):树突接收到输入信息。 +- 触发区(trigger zone):位于轴突和细胞体交接的地方,决定是否产生神经冲动。 +- 传导区(conducting zone):由轴突进行神经冲动的传递。 +- 输出区(output zone):神经冲动的目的就是要让神经末梢,突触的神经递质或电力释出,才能影响下一个接受的细胞(神经元、肌肉细胞或是腺体细胞),此称为突触传递。 + + + +### 人工神经网络 + +人工神经网络(ANN:Artificial Neural Network),简称神经网络(NN:Neural Network)。迄今为止,人工神经网络尚无统一定义, 其实一种模拟了人体神经元构成的数学模型,依靠系统的复杂程度,通过调整内部大量节点之间相互连接的关系,从而达到处理信息的目的。 + +![img](assets/1*OvTgvr5SNAp579n9kyBzAw.png) + +上图显示了人工神经网络是一个分层模型,逻辑上可以分为三层: + +- 输入层:输入层接收特征向量 x 。 +- 输出层:输出层产出最终的预测 h 。 +- 隐含层:隐含层介于输入层与输出层之间,之所以称之为隐含层,是因为当中产生的值并不像输入层使用的样本矩阵 X 或者输出层用到的标签矩阵 y 那样直接可见。 + + + + + +### 1. 神经元 + +![img](assets/2112343587-5b78f2b533cd1.png) + +![img](assets/3893839953-5b78f3ea9066e.png) + + + +![image-20190405111251357](assets/image-20190405111251357.png) + + + +### 2. 逻辑回归模型 + +``` +神经元 -> 激活函数sigmoid -> 二元类逻辑斯蒂回归模型 +``` + +![img](assets/1388465484-5b78f514b3a47.png) + + + +神经元 -> 多输出 + +- W从向量扩展为矩阵 +- 输出W*x则变成向量 + +![img](https://image-static.segmentfault.com/342/024/3420244370-5b78f5943f6bc) + + + +多输出神经元 -> softmax -> 多分类逻辑斯蒂回归模型 + +![image-20190405111638911](assets/image-20190405111638911.png) + +![image-20190405111848924](assets/image-20190405111848924.png) + +![image-20190405111934921](assets/image-20190405111934921.png) + +### 目标函数 + +也称为损失函数,衡量对数据的拟合程度 + + + +### 梯度下降 + +- 下山算法 + - 找方向 + - 走一步 + +- 梯度下降算法 + +![img](assets/gradient.png) + +## 三、Tensorflow基础 + +### Tensorflow简介 + +Google Brain 第二代机器学习框架 + + + +### 计算图模型 + +- 命令式变成 +- 声明式变成 + +![img](assets/1867956752-5b78fbe0b8f6b.png) + + + +## TensorFlow 安装 + +- [TensorFlow 官方文档](https://tensorflow.google.cn/) + +- [TensorFlow 安装方法](https://tensorflow.google.cn/install) + + + +1. 基于 VirtualEnv 的安装 +2. 原生 pip +3. Docker +4. 从源代码安装 + + + +## 参考资料 + +- [机器学习入门(五) -- 神经网络](https://waltyou.github.io/Neural-Network/#%E7%A5%9E%E7%BB%8F%E7%BD%91%E7%BB%9C%E5%AE%9A%E4%B9%89) + +- [深度学习-初识 - Corwien - SegmentFault 思否](https://segmentfault.com/a/1190000016068053) \ No newline at end of file diff --git a/notes/Docker.md b/notes/Docker.md index e23e01ce..1fa12ee6 100644 --- a/notes/Docker.md +++ b/notes/Docker.md @@ -75,7 +75,10 @@ Docker 容器化引擎,更详细请转向:[Docker_Tutorial: Docker 容器化引擎入门手册](https://github.com/frank-lam/Docker_Tutorial) -> 本文内容均来自:【千锋-李卫民老师博客,推荐大家学习】http://www.funtl.com/ +> 参考资料: +> +> - http://www.funtl.com/ +> - [Docker —— 从入门到实践](https://yeasy.gitbooks.io/docker_practice/content/) > > 基于以上部分内容做一定的修改 diff --git a/notes/EalsticSearch/Untitled.md b/notes/EalsticSearch/Untitled.md new file mode 100644 index 00000000..4f52fe14 --- /dev/null +++ b/notes/EalsticSearch/Untitled.md @@ -0,0 +1,63 @@ +elasticsearch-head的使用 - 仅此而已-远方 - 博客园 +https://www.cnblogs.com/xuwenjin/p/8792919.html + + + + + +tyrival/gitbook: Logstash + Elasticsearch 6.7 用户指南中文版 +https://github.com/tyrival/gitbook + + + + + +Mac下ElasticSearch安装 - 简书 +https://www.jianshu.com/p/df4af12a420a + + + + + +## 安装 + +Logstash在Linux上安装部署 - haw2106 - 博客园 +https://www.cnblogs.com/haw2106/p/10410916.html + +ElasticSearch在linux上安装部署 - socket强 - 博客园 +https://www.cnblogs.com/socketqiang/p/11363024.html + +详解Docker下使用Elasticsearch可视化Kibana_docker_脚本之家 +https://www.jb51.net/article/138582.htm + + + + + +docker下载镜像报net/http: TLS handshake timeout-西风未眠-51CTO博客 +https://blog.51cto.com/10950710/2122702 + + + +Docker安装部署ELK教程 (Elasticsearch+Kibana+Logstash+Filebeat) - 万能付博 - 博客园 +https://www.cnblogs.com/fbtop/p/11005469.html + + + + + +1.拉取镜像 + +``` +docker pull elasticsearch:6.5.4 +docker pull kibana:6.5.4 +``` + + + +2.启动容器 + +``` +docker run -d --name es1 -p 9200:9200 -p 9300:9300 -e "discovery.type=single-node" elasticsearch:6.5.4 +docker run -d -p 5601:5601 --name kibana --link es1:elasticsearch kibana:6.5.4 +``` \ No newline at end of file diff --git a/notes/FastDFS.md b/notes/FastDFS.md new file mode 100644 index 00000000..6b3b6968 --- /dev/null +++ b/notes/FastDFS.md @@ -0,0 +1,9 @@ +# FastDFS + +手把手教你搭建分布式文件存储系统 + + + +用FastDFS一步步搭建文件管理系统 - bojiangzhou - 博客园 +https://www.cnblogs.com/chiangchou/p/fastdfs.html + diff --git a/notes/Frontend/Angular.md b/notes/Frontend/Angular.md new file mode 100644 index 00000000..24315da9 --- /dev/null +++ b/notes/Frontend/Angular.md @@ -0,0 +1,868 @@ +# Angular + +## 1. 框架背景 + +Angular 是一个由 Google维护的开源JavaScript框架,用于在HTML和JavaScript中构建Web应用程序,是三大框架之首。 + +不管是1还是2,Angular最显著的特征就是其**整合性**。涵盖了M、V、C/VM等各个层面,不需要组合、评估其它技术就能完成大部分前端开发任务。这样可以有效降低决策成本,提高决策速度,对需要快速起步的团队是非常有帮助的。 + +由于它是从一个用来做原型的框架演化而来的,加上诞生时间很早(2009年,作为对比,jQuery诞生于2006年),当时生态不完善,连模块化机制都得自己实现。 + +但Angular 2就不同了,发布于2016年9月份,它是基于ES6来开发的,它的起点更高,整合了现代前端的各种先进理念,在框架、文档、工具等各个层面提供了全方位的支持 + +在Angular 中最具特色的就是**依赖注入**系统了,它把后端开发中用来解决复杂问题、实现高弹性设计的技术引入了前端 + + + +## 2. Angular CLI + +### 2.1 安装 + +​ Angular CLI用于简单,快速构建Angular2项目,只要掌握几行命令就能扣减前端架构。依赖于NodeJs和npm。 + +```jsx +//安装脚手架 +npm install -g angular-cli +//创建项目 +ng new project_name(项目名称) +//启动项目 +cd project_name +ng serve --open +``` + + + +### 2.2 主要特性 + +1. Angular CLI 可以快速搭建框架,创建module,service,class,directive等; +2. 具有webpack的功能,代码分割,按需加载; +3. 代码打包压缩; +4. 模块测试; +5. 热部署,有改动立即重新编译,不用刷新浏览器;而且速度很快 +6. 有开发环境,测试环境,生产环境的配置,不用自己操心; +7. sass,less的预编译Angular CLI都会自动识别后缀来编译; +8. typescript的配置,Angular CLI在创建应用时都可以自己配置; +9. 在创建好的工程也可以做一些个性化的配置,webpack的具体配置还不支持,未来可能会增加; +10. Angular CLI创建的工程结构是最佳实践,生产可用; + + + +### 2.3 创建module,component,service,class + + + +​ + +## 3. 架构 + +### 3.1 模块 + +​ 模块组件的特征在于可以用于执行单个任务的代码块。 您可以从代码(类)中导出值。 Angular应用程序被称为模块,并使用许多模块构建您的应用程序。 Angular 的基本构建块是可以从模块导出的**组件**类。 + +```js +export class AppComponent { + title = '朝夕教育'; +} + +``` + +### 3.2 组件 + +组件是拥有模板的控制器类,主要处理页面上的应用程序和逻辑的视图。 组件可以拥有独立的样式。 +注册组件,使用 *@Component* 注释,可以将应用程序拆分为更小的部分。 + +#### 3.2.1 创建组件 + +使用ng命令`ng generate component `创建的组件会自动生成在`app.module`中的引用,推荐使用ng命令生成组件 + +```jsx +//快速创建 +ng g c xxx +``` + +```jsx +@Component({ + selector: 'app-root', + templateUrl: './app.component.html', + styleUrls: ['./app.component.scss'] +}) +``` + +@Component最常用的几个选项: + +**selector**:这个 CSS 选择器用于在模板中标记出该指令,并触发该指令的实例化。 + +**template**:组件的内联模板 + +**templateUrl**:组件模板文件的 URL + +**styleUrls**:组件样式文件 + +**styles**:组件内联样式 + + + +#### 3.2.2 组件生命周期 + +​ Angular 会按以下顺序执行钩子方法。你可以用它来执行以下类型的操作。 + +| 钩子方法 | 用途 | 时机 | +| :------------------------ | :----------------------------------------------------------- | :----------------------------------------------------------- | +| `ngOnChanges()` | 当 Angular 设置或重新设置数据绑定的输入属性时响应。 该方法接受当前和上一属性值的 `SimpleChanges` 对象注意,这发生的非常频繁,所以你在这里执行的任何操作都会显著影响性能。 | 在 `ngOnInit()` 之前以及所绑定的一个或多个输入属性的值发生变化时都会调用。注意,如果你的组件没有输入,或者你使用它时没有提供任何输入,那么框架就不会调用 `ngOnChanges()`。 | +| `ngOnInit()` | 在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。 | 在第一轮 `ngOnChanges()` 完成之后调用,只调用**一次**。 | +| `ngDoCheck()` | 检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。 | 紧跟在每次执行变更检测时的 `ngOnChanges()` 和 首次执行变更检测时的 `ngOnInit()` 后调用。 | +| `ngAfterContentInit()` | 当 Angular 把外部内容投影进组件视图或指令所在的视图之后调用。 | 第一次 `ngDoCheck()` 之后调用,只调用一次。 | +| `ngAfterContentChecked()` | 每当 Angular 检查完被投影到组件或指令中的内容之后调用 | `ngAfterContentInit()` 和每次 `ngDoCheck()` 之后调用 | +| `ngAfterViewInit()` | 当 Angular 初始化完组件视图及其子视图或包含该指令的视图之后调用 | 第一次 `ngAfterContentChecked()` 之后调用,只调用一次。 | +| `ngAfterViewChecked()` | 每当 Angular 做完组件视图和子视图或包含该指令的视图的变更检测之后调用。 | `ngAfterViewInit()` 和每次 `ngAfterContentChecked()` 之后调用。 | +| `ngOnDestroy()` | 每当 Angular 每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器,以防内存泄漏 | 在 Angular 销毁指令或组件之前立即调用。 | + +#### 3.2.3 组件交互 + +1. ​ **@Input** + + 父组件通过`@Input`给子组件绑定属性设置输入类数据 + + ```jsx + //父组件 + + + //子组件 + import { Component, Input } from '@angular/core'; + @Input() + name!: string; + ngOnInit(): void { + console.log(this.name) + } + ``` + +2. ​ **@Output** + + ​ 父组件给子组件传递一个事件,子组件通过`@Output`弹射触发事件 + + ```jsx + //父组件 + + + list:number[] = [1,2,3,4] + addListFun(num:number){ + this.list.push(num) + } + + //子组件 + import { Component, Output,EventEmitter } from '@angular/core'; + @Output() addList = new EventEmitter() + pushList(v:string){ + console.log(this.inpValue) + this.addList.emit(v) + } + ``` + +3. ​ **@ViewChild()** + + 通过`ViewChild`获取子组件实例,获取子组件数据 + + ```jsx + + + + + @ViewChild('myChild') child: any; + constructor() { } + + ngOnInit(): void { + } + getView(e:any){ + console.log(this.child) + this.child.setInpValue('我是一段数据') + } + ``` + + + +### 3.3 模板 + +在 Angular 中,**模板**就是一块 HTML。在模板中,你可以通过一种特殊语法来使用 Angular 的许多功能 + +#### 3.3.1 插值语法 + +​ 所谓 "插值" 是指将表达式嵌入到标记文本中。 默认情况下,插值会用双花括号 `{{` 和 `}}` 作为分隔符 + +```js +

hello {{ name }}

+``` + +​ 花括号之间的文本通常是组件属性的名字。Angular 会把这个名字替换为响应组件属性的字符串值 + +​ 括号间的素材是一个**模板表达式**我们可以在`{{}}`内编写js运算 + +```jsx +

hello {{ 1+1 }}

+``` + +#### 3.3.2 属性绑定 + +1. **Attribute绑定** + + ```jsx +

hello {{ 1+1 }}

+ ``` + +2. **类绑定** + + ```jsx + //单一类绑定 +

hello {{ 1+1 }}

+ + //多重类绑定 +

hello {{ 1+1 }}

+

hello {{ 1+1 }}

+

hello {{ 1+1 }}

+ + //ngClass + export class AppComponent { + isActive = true; + } + +

hello {{ 1+1 }}

+ + ``` + +3. **样式绑定** + + ```jsx + //单一样式绑定 +

hello {{ 1+1 }}

+ + //带单位的单一样式绑定 +

hello {{ 1+1 }}

+ + //多重样式绑定 +

hello {{ 1+1 }}

+

hello {{ 1+1 }}

+ + //ngStyle + export class AppComponent { + isMax = false; + } +

hello {{ 1+1 }}

+

hello {{ 1+1 }}

+ ``` + +#### 3.3.3 条件判断 + +​ ***ngIf**是直接影响元素是否被渲染,而非控制元素的显示和隐藏 + +```jsx +export class AppComponent { + isMax = false; + isMin = false; +} +
Max title
+
Min title
+ +//解析完 + +
Max title
+
+ + + isMax为true + + + isMax为false + +``` + +#### 3.3.4 循环语句 + +​ 解析器会把 `let color`、`let i` 和 `let odd` 翻译成命名变量 `color`、`i` 和 `odd` + +微语法解析器接收of,会将它的首字母大写(Of),然后加上属性的指令名(ngFor)前缀,它最终生成的名字是 ngFor 的输入属性(colors) + +`NgFor` 指令在列表上循环,每个循环中都会设置和重置它自己的上下文对象上的属性。 这些属性包括 `index` 和 `odd` 以及一个特殊的属性名 `$implicit`(隐式变量) + +Angular 将 let-color 设置为此上下文中 $implicit 属性的值, 它是由 NgFor 用当前迭代中的 colors 初始化的 + +```jsx +export class AppComponent { + colors:Array = [ 'red', 'blue', 'yellow', 'green' ]; +} + +
+ {{odd}} + {{i}} + {{color}} +
+ +//解析完 + +
{{odd}} {{i}} {{color}}
+
+``` + +```jsx +export class AppComponent { + status = 1; +} + + +``` + +#### 3.3.5 事件绑定 + +​ Angular 的事件绑定语法由等号左侧括号内的目标事件名和右侧引号内的模板语句组成。目标事件名是 `click` ,模板语句是 `onSave()` + +事件对象通过`$event`传递 + +```jsx +export class AppComponent { + onSave(){ + console.log('点击了按钮') + } +} + + +``` + +#### 3.3.6 双向绑定 + +双向绑定是应用中的组件共享数据的一种方式。使用双向绑定绑定来侦听事件并在父组件和子组件之间同步更新值 + +ngModel指令**只对表单元素有效**,所以在使用之前需要导入`FormsModule`板块 + +```jsx +import { FormsModule } from '@angular/forms'; + +@NgModule({ + // 申明组件内用到的视图 + declarations: [ + AppComponent, + HelloComponent, + ], + //引入模块需要的类 + imports: [ + BrowserModule, + AppRoutingModule, + FormsModule + ], + //全局服务 + providers: [], + //根组件 + bootstrap: [AppComponent] +}) +``` + +```jsx +export class AppComponent { + userName=''; +} +
+ 输入: +

你输入了: {{userName}}

+
+``` + +#### 3.3.7 模板引用变量 + +模板变量可以帮助你在模板的另一部分使用这个部分的数据。使用模板变量,你可以执行某些任务,比如响应用户输入或微调应用的表单 + +在模板中,要使用井号 `#` 来声明一个模板变量。下列模板变量 `#userName` 语法在 `` 元素上声明了一个名为 `userName` 的变量 + +```html + +``` + +可以在组件模板中的任何地方引用某个模板变量 + +```jsx + + + +export class AppComponent { + callUserName(v){ + console.log(v) + } +} +``` + +Angular 根据你所声明的变量的位置给模板变量赋值: + +- 如果在组件上声明变量,该变量就会引用该组件实例。 +- 如果在标准的 HTML 标记上声明变量,该变量就会引用该元素。 +- 如果你在 `` 元素上声明变量,该变量就会引用一个 `TemplateRef` 实例来代表此模板。 + +#### 3.3.8 表单控件 + +使用表单控件有三个步骤。 + +1. 在你的应用中注册响应式表单模块。该模块声明了一些你要用在响应式表单中的指令。 +2. 生成一个新的 `FormControl` 实例,并把它保存在组件中。 +3. 在模板中注册这个 `FormControl`。 + +**注册响应式表单模块** + +要使用响应式表单控件,就要从 `@angular/forms` 包中导入 `ReactiveFormsModule`,并把它添加到你的 NgModule 的 `imports` 数组中。 + +```js +import { ReactiveFormsModule } from '@angular/forms'; + +@NgModule({ + imports: [ + // other imports ... + ReactiveFormsModule + ], +}) +export class AppModule { } +``` + +要注册一个表单控件,就要导入 `FormControl` 类并创建一个 `FormControl` 的新实例,将其保存为类的属性。 + +```js +import { Component } from '@angular/core'; +import { FormControl } from '@angular/forms'; + +@Component({ + selector: 'app-name-editor', + templateUrl: './name-editor.component.html', + styleUrls: ['./name-editor.component.css'] +}) +export class NameEditorComponent { + name = new FormControl(''); +} + +//使用这种模板绑定语法,把该表单控件注册给了模板中名为 name 的输入元素。这样,表单控件和 DOM 元素就可以互相通讯了:视图会反映模型的变化,模型也会反映视图中的变化 + + +

+ Value: {{ name.value }} +

+``` + +修改name值可以通过`FormControl` 提供的 `setValue()` 方法 + +```js +updateName() { + this.name.setValue('Tina'); +} +``` + +#### 3.3.9 表单控件分组 + +表单中通常会包含几个相互关联的控件。响应式表单提供了两种把多个相关控件分组到同一个输入表单中的方法 + +要将表单组添加到此组件中,请执行以下步骤。 + +1. 创建一个 `FormGroup` 实例。 +2. 把这个 `FormGroup` 模型关联到视图。 +3. 保存表单数据。 + +**创建一个 FormGroup 实例** + +在组件类中创建一个名叫 `loginForm` 的属性,并设置为 `FormGroup` 的一个新实例。要初始化这个 `FormGroup`,请为构造函数提供一个由控件组成的对象,对象中的每个名字都要和表单控件的名字一一对应 + +```js +import { Component } from '@angular/core'; +import { FormGroup, FormControl } from '@angular/forms'; + +@Component({ + selector: 'app-profile-editor', + templateUrl: './profile-editor.component.html', + styleUrls: ['./profile-editor.component.css'] +}) +export class ProfileEditorComponent { + loginForm = new FormGroup({ + userName: new FormControl(''), + password: new FormControl(''), + }); +} + +//模板渲染 +
+ + + + + +
+``` + + + +#### 3.3.10 表单验证 + +​ 表单元素添加`required`关键字表示必填,通过绑定`ngModel`的引用可以拿到到当前组件的信息,通过引用获取到验证的信息 + +```jsx +export class AppComponent { + fromData={ + name:'', + password:'' + }; + + subBtnFUn(obj){ + console.log(obj) + } +} + +
+ 账号: +
+ {{nameInp.valid }} +
+ 密码: +
+ {{pasInp.valid }} +
+ +
+``` + +我们还可以通过 **ngModel** 跟踪修改状态与有效性验证,它使用了三个 CSS 类来更新控件,以便反映当前状态。 + +| 状态 | 为 true 时的类 | 为 false 时的类 | +| :--------------- | :------------- | :-------------- | +| 控件已经被访问过 | `ng-touched` | `ng-untouched` | +| 控件值已经变化 | `ng-dirty` | `ng-pristine` | +| 控件值是有效的 | `ng-valid` | `ng-invalid` | + +#### 3.3.11 自定义表单验证 + +​ 先引入表单的一些内置依赖 + +```js +import { FormGroup, FormBuilder,Validators } from '@angular/forms'; + +//构造函数里注入FormBuilder +constructor(private fb:FormBuilder) { } + +//错误提醒数据 +formErrors = { + 'title': '', + 'content': '' +}; + + +//在组件类的初始化函数里对表单中的元素的校验进行定义,并调用表单的valueChanges方法,检测表单的输入的变化 +ngOnInit():void { + this.taskInfo.isComplete = 1; + this.tasksForm = this.fb.group({ + userName: ['', [Validators.required, + Validators.maxLength(18), + Validators.minLength(6) ] ], + password: ['', [this.passWordVal]], + phone: ['', [Validators.required,this.phoneVal],] + }); + + phoneVal(phone: FormControl): object { + const value = phone.value || ''; + if(!value) return {desc:'请输入手机号'} + const valid = /[0-9]{11}/.test(value); + return valid ? {} :{desc:'联系电话必须是11位数字'} + } + passWordVal(password:FormControl):object{ + const value = password.value || ''; + const valid = value.match(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/); + return valid ? {} : {passwordValidator: {desc:'密码至少包含 数字和英文,长度6-20'}} + } +} +``` + +#### 3.3.12 管道 + +​ 管道的作用就是传输。不同的管道具有不同的作用。(其实就是处理数据) + +`angular`中自带的`pipe`函数 + +| 管道 | 功能 | +| ------------- | ------------------------------------------------------------ | +| DatePipe | 日期管道,格式化日期 | +| JsonPipe | 将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串 | +| UpperCasePipe | 将文本所有小写字母转换成大写字母 | +| LowerCasePipe | 将文本所有大写字母转换成小写字母 | +| DecimalPipe | 将数值按照特定的格式显示文本 | +| CurrentcyPipe | 将数值进行货币格式化处理 | +| SlicePipe | 将数组或者字符串裁剪成新子集 | +| PercentPipe | 将数值转百分比格式 | + +`pipe`用法 + +- {{ 输入数据 | 管道 : 管道参数}} (其中‘|’是管道操作符) + +- 链式管道 {{ 输入数据 | date | uppercase}} + +- 管道流通方向自左向右,逐层执行 + + 使用脚手架命令:**ng g p test** + + ```js + import { Pipe, PipeTransform } from '@angular/core'; + + @Pipe({ + name: 'testTitle' + }) + export class TestPipe implements PipeTransform { + + transform(value: unknown, ...args: unknown[]): unknown { + console.log(value) + return 'title'; + } + } + + +

{{ 'Angular' | testTitle }}

+ + ``` + + + +### 3.4 服务 + + angular中,把从组件内抽离出来的代码叫服务,服务的本质就是函数 + + 官方认为组件不应该直接获取或保存数据, 它们应该聚焦于展示数据,而把数据访问的职责委托给某个服务。而服务就充当着数据访问,逻辑处理的功能。把组件和服务区分开,以提高模块性和复用性。通过把组件中和视图有关的功能与其他类型的处理分离开,可以让组件类更加精简、高效。 + +使用命令ng g s xxx创建一个服务,通过**@Injectable()**装饰器标识服务。 + +```js +//导入Injectable装饰器 +import { Injectable } from '@angular/core'; +//使用Injectable装饰器声明服务 +@Injectable({ + //作用域设定,'root'表示默认注入,注入到AppModule里 + providedIn: 'root', +}) +export class TestService { +} + +``` + +组件中如何使用服务呢,必须将服务依赖注入系统、组件或者模块,才能够使用服务。我们可以用**注册提供商**和**根注入器**实现**。** + + 该服务本身是 CLI 创建的一个类,并且加上了 `@Injectable()` 装饰器。默认情况下,该装饰器是用 `providedIn` 属性进行配置的,它会为该服务创建一个提供商。 + + + +### 3.5 依赖注入 + +​ 在这个例子中,`providedIn: 'root'` 指定 Angular 应该在根注入器中提供该服务,从而实现**根注入器**将服务注入,它就在整个应用程序中可用了**。** + +**providedIn**: + +​ 'root' :注入到AppModule,提供该服务,所有子组件都可以使用(推荐) + +​ null : 不设定服务作用域(不推荐) + +​ 组件名:只作用于该组件(懒加载模式) + +```js + +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class TestService { +} + + +import { Component, OnInit } from '@angular/core'; +import {HeroService} from '../hero.service' + +@Component({ + selector: 'app-test', + templateUrl: './test.component.html', + styleUrls: ['./test.component.scss'], +}) +export class TestComponent implements OnInit { + + constructor(private heroService:HeroService) { } + + ngOnInit(): void { + console.log(this.heroService.getHeroList()) + } +} +``` + +​ 也可以使用 `@Component` 或 `@Directive` 内部的 `providers: []`,为特定的组件子树提供服务,这也将导致创建多个服务实例(每个组件使用一个服务实例) + +```js + +import { Injectable } from '@angular/core'; + +@Injectable({ + providedIn: 'root', +}) +export class TestService { +} + + +import { Component, OnInit } from '@angular/core'; +import {HeroService} from '../hero.service' + +@Component({ + selector: 'app-test', + templateUrl: './test.component.html', + styleUrls: ['./test.component.scss'], + providers: [HeroService] +}) +export class TestComponent implements OnInit { + + constructor(private heroService:HeroService) { } + + ngOnInit(): void { + console.log(this.heroService.getHeroList()) + } +} +``` + + + +### 3.6 路由 + +​ 路由就是连接组件的筋络,它也是树形结构的.有了它,就可以在angular中实现路径的导航模式 + +可以把路由看成是一组规则,它决定了url的变化对应着哪一种状态,具体表现就是不同视图的切换 + +在angular中,路由是非常重要的组成部分, 组件的实例化与销毁,模块的加载,组件的某些生命周期钩子的发起,都是与它有关 + +#### 3.6.1 路由基本使用 + +**路由器**是一个调度中心,它是一套规则的列表,能够查询当前URL对应的规则,并呈现出相应的视图. + +**路由**是列表里面的一个规则,即路由定义,它有很多功能字段: + +- **path**字段,表示该路由中的URL路径部分 +- **Component**字段,表示与该路由相关联的组件 + +每个带路由的Angular应用都有一个路由器服务的单例对象,通过路由定义的列表进行配置后使用。 + +```js +import { NgModule } from '@angular/core'; +import { RouterModule, Routes } from '@angular/router'; +import {HomeComponent} from './home/home.component' + +const routes: Routes = [ + {path:'home',component:HomeComponent} +]; + +@NgModule({ + imports: [RouterModule.forRoot(routes)], + exports: [RouterModule] +}) +export class AppRoutingModule { } + +``` + +```jsx +//路由导航 +home + hello + +//组件渲染输出 + +``` + +上述具体的工作流程,可以举例简单描述为: + +- 当浏览器地址栏的URL变化时,路径部分`/home`满足了列表中path为"**home**"的这个路由定义,激活对应**HomeComponent**的实例,显示它的视图 +- 当应用程序请求导航到路径`/hello`时,符合了另外的规则,激活对应视图且展示内容,并将该路径更新到浏览器地址栏和历史 + +#### 3.6.2 路由嵌套 + +​ 父子路由嵌套配置: + +```js +const routes: Routes = [ + {path:'home', + component:HomeComponent, + children:[ + {path:'hello',component:HelloComponent} + ] + }, +]; +``` + +​ 在**home Component**内这是`router-outlet`路由出口,即可在**home** 路由内渲染子级路由 + +```jsx +//home template +

home Component

+hello + +``` + +​ 在非`home Component`内跳转到`/home/hello`路由需要写全路径 + +```jsx +//app template +

app Component

+hello + +``` + +​ + +#### 3.6.3 路由传参 + +- **query** + + 在a标签上添加一个参数queryParams,并通过`this.routerinfo.snapshot.queryParams`获取参数 + + ```jsx + hello + ``` + + ```js + import {ActivatedRoute} from '@angular/router'; + constructor(private routerinfo:ActivatedRoute) { } + + ngOnInit() { + //id为参数名字 + this.id=this.routerinfo.snapshot.queryParams["id"] + } + ``` + + + +- **params** + + 修改路由配置文件`path`,路由导航`a`标签`routerLink`后面数组的第二个参数为传递的值 + + 并且通过`subscribe`请阅的方式获取`name`参数 + + ```js + { + path: 'hello/:name', + component:HelloComponent, + }, + ``` + + ```jsx + //我们在后面添加/:name此时name即为传递的参数名字 + //a标签设置如下 + hello + ``` + + ```js + ngOnInit() { + this.routerinfo.params.subscribe((params:Params)=>{ + this.name=params['name'] + }) + } + ``` + diff --git "a/notes/Frontend/\345\211\215\347\253\257\347\237\245\350\257\206\344\275\223\347\263\273.md" "b/notes/Frontend/\345\211\215\347\253\257\347\237\245\350\257\206\344\275\223\347\263\273.md" new file mode 100644 index 00000000..ddd0e049 --- /dev/null +++ "b/notes/Frontend/\345\211\215\347\253\257\347\237\245\350\257\206\344\275\223\347\263\273.md" @@ -0,0 +1,244 @@ + + +- [前端知识体系](#前端知识体系) + - [前端三要素](#前端三要素) + - [结构层(HTML)](#结构层html) + - [表现层(CSS)](#表现层css) + - [什么是 CSS 预处理器](#什么是-css-预处理器) + - [常用的 CSS 预处理器有哪些](#常用的-css-预处理器有哪些) + - [行为层(JavaScript)](#行为层javascript) + - [Native 原生 JS 开发](#native-原生-js-开发) + - [TypeScript 微软的标准](#typescript-微软的标准) + - [JavaScript 框架](#javascript-框架) + - [UI 框架](#ui-框架) + - [JavaScript 构建工具](#javascript-构建工具) + - [三端统一](#三端统一) + - [混合开发(Hybrid App)](#混合开发hybrid-app) + - [微信小程序](#微信小程序) + - [后端技术](#后端技术) + - [附:当前主流前端框架](#附当前主流前端框架) + - [Angular](#angular) + - [Angular Material](#angular-material) + - [Vue.js](#vuejs) + - [iView](#iview) + - [ElementUI](#elementui) + - [ICE](#ice) + - [VantUI](#vantui) + - [AtUI](#atui) + - [CubeUI](#cubeui) + - [混合开发](#混合开发) + - [Flutter](#flutter) + - [Ionic](#ionic) + - [微信小程序](#微信小程序-1) + - [mpvue](#mpvue) + - [WeUI](#weui) + + + +# 前端知识体系 + +## 前端三要素 + +- HTML(结构):超文本标记语言(Hyper Text Markup Language),决定网页的结构和内容 +- CSS(表现):层叠样式表(Cascading Style Sheets),设定网页的表现样式 +- JavaScript(行为):是一种弱类型脚本语言,其源代码不需经过编译,而是由浏览器解释运行,用于控制网页的行为 + +### 结构层(HTML) + +略 + +### 表现层(CSS) + +CSS 层叠样式表是一门标记语言,并不是编程语言,因此不可以自定义变量,不可以引用等,换句话说就是不具备任何语法支持,它主要缺陷如下: + +- 语法不够强大,比如无法嵌套书写,导致模块化开发中需要书写很多重复的选择器; +- 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护; + +这就导致了我们在工作中无端增加了许多工作量。为了解决这个问题,前端开发人员会使用一种称之为 **【CSS 预处理器】** 的工具,提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。大大提高了前端在样式上的开发效率。 + +#### 什么是 CSS 预处理器 + +CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行 CSS 的编码工作。转化成通俗易懂的话来说就是“**用一种专门的编程语言,进行 Web 页面样式设计,再通过编译器转化为正常的 CSS 文件,以供项目使用**”。 + +#### 常用的 CSS 预处理器有哪些 + +- SASS:基于 Ruby,通过服务端处理,功能强大。解析效率高。需要学习 Ruby 语言,上手难度高于 LESS。 +- LESS:基于 NodeJS,通过客户端处理,使用简单。功能比 SASS 简单,解析效率也低于 SASS,但在实际开发中足够了,所以我们后台人员如果需要的话,建议使用 LESS。 + +### 行为层(JavaScript) + +JavaScript 一门弱类型脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。 + +#### Native 原生 JS 开发 + +原生 JS 开发,也就是让我们按照 **【ECMAScript】** 标准的开发方式,简称是 ES,特点是所有浏览器都支持。截止到当前博客发布时间(2018 年 12 月 04 日),ES 标准已发布如下版本: + +- ES3 +- ES4(内部,未正式发布) +- ES5(全浏览器支持) +- ES6(常用,当前主流版本) +- ES7 +- ES8 +- ES9(草案阶段) + +区别就是逐步增加新特性。 + +#### TypeScript 微软的标准 + +TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。由安德斯·海尔斯伯格(C#、Delphi、TypeScript 之父;.NET 创立者)主导。 + +该语言的特点就是除了具备 ES 的特性之外还纳入了许多不在标准范围内的新特性,所以会导致很多浏览器不能直接支持 TypeScript 语法,需要编译后(编译成 JS)才能被浏览器正确执行。 + +#### JavaScript 框架 + +- jQuery:大家熟知的 JavaScript 框架,优点是简化了 DOM 操作,缺点是 DOM 操作太频繁,影响前端性能;在前端眼里使用它仅仅是为了兼容 IE6、7、8; +- Angular:Google 收购的前端框架,由一群 Java 程序员开发,其特点是将后台的 MVC 模式搬到了前端并增加了模块化开发的理念,与微软合作,采用 TypeScript 语法开发;对后台程序员友好,对前端程序员不太友好;最大的缺点是版本迭代不合理(如:1 代 -> 2 代,除了名字,基本就是两个东西;截止发表博客时已推出了 Angular8)。Angular 作为 Google 推出的一个“重型”的框架,内置包括路由、HTTP 等常用组件,同时深度集成 TypeScript,WebPack,RxJS,angular-cli 等工具,可以方便地进行大型前端项目的开发以及调试。但是由于 Angular 引入了许多概念,增加了新手上手的复杂性。特别是组件、模块、服务、指令、依赖注入的引入,对于新手而言,厘清其中各个概念的作用域是就不是一件容易的事情。同时 RxJS 的引入,也进一步使得学习曲线变得陡峭。 +- React:Facebook 出品,一款高性能的 JS 前端框架;特点是提出了新概念 **【虚拟 DOM】** 用于减少真实 DOM 操作,在内存中模拟 DOM 操作,有效的提升了前端渲染效率;缺点是使用复杂,因为需要额外学习一门 **【JSX】** 语言; +- `Vue`:一款渐进式 JavaScript 框架,所谓渐进式就是逐步实现新特性的意思,如实现模块化开发、路由、状态管理等新特性。其特点是综合了 Angular(模块化) 和 React(虚拟 DOM) 的优点; +- `Axios`:前端通信框架;因为 `Vue` 的边界很明确,就是为了处理 DOM,所以并不具备通信能力,此时就需要额外使用一个通信框架与服务器交互;当然也可以直接选择使用 jQuery 提供的 AJAX 通信功能; + +#### UI 框架 + +- Ant-Design:阿里巴巴出品,基于 React 的 UI 框架 +- ElementUI:饿了么出品,基于 Vue 的 UI 框架 +- Bootstrap:Twitter 推出的一个用于前端开发的开源工具包 +- AmazeUI:又叫“妹子 UI”,一款 HTML5 跨屏前端框架 + +#### JavaScript 构建工具 + +- Babel:JS 编译工具,主要用于浏览器不支持的 ES 新特性,比如用于编译 TypeScript +- WebPack:模块打包器,主要作用是打包、压缩、合并及按序加载 + +**注:以上知识点已将 WebApp 开发所需技能全部梳理完毕** + +## 三端统一 + +### 混合开发(Hybrid App) + +主要目的是实现一套代码三端统一(PC、Android、iOS)并能够调用到设备底层硬件(如:传感器、GPS、摄像头等),打包方式主要有以下两种: + +- 云打包:HBuild -> HBuildX,DCloud 出品;API Cloud +- 本地打包: Cordova(前身是 PhoneGap) + +### 微信小程序 + +详见微信官网,这里就是介绍一个方便微信小程序 UI 开发的框架:WeUI + +## 后端技术 + +前端人员为了方便开发也需要掌握一定的后端技术,但我们 Java 后台人员知道后台知识体系极其庞大复杂,所以为了方便前端人员开发后台应用,就出现了 NodeJS 这样的技术。 + +NodeJS 的作者已经声称放弃 NodeJS(说是架构做的不好再加上笨重的 node_modules,可能让作者不爽了吧),开始开发全新架构的 Deno + +既然是后台技术,那肯定也需要框架和项目管理工具,NodeJS 框架及项目管理工具如下: + +- Express:NodeJS 框架 +- Koa:Express 简化版 +- NPM:项目综合管理工具,类似于 Maven +- YARN:NPM 的替代方案,类似于 Maven 和 Gradle 的关系 + +## 附:当前主流前端框架 + +### Angular + +#### Angular Material + +Angular Material 是 Angular 官方团队维护的一个遵从 Material Design 的 Angular UI 库。它提供了丰富的组件库、CDK、以及内置主题,开箱即用,并且与 Angular 版本同步。 + +- [官网地址](https://material.angular.io/) +- [Github](https://github.com/angular/components) + +#### ngx-admin + +ngx-admin 是一款开源的 Angualr UI 库,目前仍处于维护和活跃状态。它也提供了丰富的开箱即用的组件库、内置主题,并且与 Angular 版本同步。代码风格遵循 Angular 最佳实践,也是一个不错的学习资源。 + +- [Github](https://github.com/akveo/ngx-admin) + +### Vue.js + +#### iView + +iview 是一个强大的基于 Vue 的 UI 库,有很多实用的基础组件比 elementui 的组件更丰富,主要服务于 PC 界面的中后台产品。使用单文件的 Vue 组件化开发模式 基于 npm + webpack + babel 开发,支持 ES2015 高质量、功能丰富 友好的 API ,自由灵活地使用空间。 + +- [官网地址](https://www.iviewui.com/) +- [Github](https://github.com/TalkingData/iview-weapp) +- [iview-admin](https://github.com/iview/iview-admin) + +**备注:属于前端主流框架,选型时可考虑使用,主要特点是移动端支持较多** + +#### ElementUI + +Element 是饿了么前端开源维护的 Vue UI 组件库,组件齐全,基本涵盖后台所需的所有组件,文档讲解详细,例子也很丰富。主要用于开发 PC 端的页面,是一个质量比较高的 Vue UI 组件库。 + +- [官网地址](http://element-cn.eleme.io/#/zh-CN) +- [Github](https://github.com/ElementUI/element-starter) +- [vue-element-admin](https://github.com/PanJiaChen/vue-element-admin) + +**备注:属于前端主流框架,选型时可考虑使用,主要特点是桌面端支持较多** + +#### ICE + +飞冰是阿里巴巴团队基于 React/Angular/Vue 的中后台应用解决方案,在阿里巴巴内部,已经有 270 多个来自几乎所有 BU 的项目在使用。飞冰包含了一条从设计端到开发端的完整链路,帮助用户快速搭建属于自己的中后台应用。 + +- [官网地址](https://alibaba.github.io/ice) +- [Github](https://github.com/alibaba/ice) + +**备注:主要组件还是以 React 为主,截止 2019 年 02 月 17 日更新博客前对 Vue 的支持还不太完善,目前尚处于观望阶段** + +#### VantUI + +Vant UI 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件。通过 Vant,可以快速搭建出风格统一的页面,提升开发效率。 + +- [官网地址](https://youzan.github.io/vant/#/zh-CN/intro) +- [Github](https://github.com/youzan/vant) + +#### AtUI + +at-ui 是一款基于 Vue 2.x 的前端 UI 组件库,主要用于快速开发 PC 网站产品。 它提供了一套 npm + webpack + babel 前端开发工作流程,CSS 样式独立,即使采用不同的框架实现都能保持统一的 UI 风格。 + +- [官网地址](https://at-ui.github.io/at-ui/#/zh) +- [Github](https://github.com/at-ui/at-ui) + +#### CubeUI + +cube-ui 是滴滴团队开发的基于 Vue.js 实现的精致移动端组件库。支持按需引入和后编译,轻量灵活;扩展性强,可以方便地基于现有组件实现二次开发。 + +- [官网地址](https://didi.github.io/cube-ui/#/zh-CN) +- [Github](https://github.com/didi/cube-ui/) + +### 混合开发 + +#### Flutter + +Flutter 是谷歌的移动端 UI 框架,可在极短的时间内构建 Android 和 iOS 上高质量的原生级应用。Flutter 可与现有代码一起工作, 它被世界各地的开发者和组织使用, 并且 Flutter 是免费和开源的。 + +- [官网地址](http://doc.flutter-dev.cn/) +- [Github](https://github.com/flutter/flutter) + +**备注:Google 出品,主要特点是快速构建原生 APP 应用程序,如做混合应用该框架为必选框架** + +#### Ionic + +Ionic 既是一个 CSS 框架也是一个 Javascript UI 库,Ionic 是目前最有潜力的一款 HTML5 手机应用开发框架。通过 SASS 构建应用程序,它提供了很多 UI 组件来帮助开发者开发强大的应用。它使用 JavaScript MVVM 框架和 AngularJS/Vue 来增强应用。提供数据的双向绑定,使用它成为 Web 和移动开发者的共同选择。 + +- [官网地址](https://ionicframework.com/) +- [官网文档](https://ionicframework.com/docs/) +- [Github](https://github.com/ionic-team/ionic) + +### 微信小程序 + +#### mpvue + +mpvue 是美团开发的一个使用 `Vue.js` 开发小程序的前端框架,目前支持 **微信小程序**、**百度智能小程序**,**头条小程序** 和 **支付宝小程序**。 框架基于 `Vue.js`,修改了的运行时框架 `runtime` 和代码编译器 `compiler` 实现,使其可运行在小程序环境中,从而为小程序开发引入了 `Vue.js` 开发体验。 + +- [官网地址](http://mpvue.com/) +- [Github](https://github.com/Meituan-Dianping/mpvue) + +**备注:完备的 Vue 开发体验,并且支持多平台的小程序开发,推荐使用** + +#### WeUI + +WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。包含 button、cell、dialog、toast、article、icon 等各式元素。 + +- [官网地址](https://weui.io/) +- [Github](https://github.com/weui/weui.git) diff --git a/notes/Git.md b/notes/Git.md index 0fa9a7fc..e2ca1f02 100644 --- a/notes/Git.md +++ b/notes/Git.md @@ -374,6 +374,9 @@ The key fingerprint is: # 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db your_e 到此为止,你本地的密钥对就生成了。 +(9+条消息)Mac OS 配置多个ssh-key - maoxinwen1的博客 - CSDN博客 +https://blog.csdn.net/maoxinwen1/article/details/80269299 + ### 2. 添加公钥到你的远程仓库(github) @@ -472,3 +475,17 @@ https://blog.csdn.net/u011478909/article/details/77683754 +## 8. Git 回退到制定版本 + +**回滚到指定的版本** + +```shell +git reset --hard e377f60e28c8b84158 +``` + +**强制提交** + +```shell +git push -f origin master +``` + diff --git "a/notes/Git\345\221\275\344\273\244\351\200\237\346\237\245.md" "b/notes/Git\345\221\275\344\273\244\351\200\237\346\237\245.md" new file mode 100644 index 00000000..eddac09b --- /dev/null +++ "b/notes/Git\345\221\275\344\273\244\351\200\237\346\237\245.md" @@ -0,0 +1,437 @@ +# Git 命令速查 + +> 本文参考极客时间苏玲老师的《玩转Git三剑客》 + + + +## 添加配置 +```bash +git config [--local | --global | --system] user.name 'Your name' +git config [--local | --global | --system] user.email 'Your email' +``` + + + + + +## 查看配置 + +```bash +git config --list [--local | --global | --system] +``` +### 区别 +```bash +local:区域为本仓库 +global: 当前用户的所有仓库 +system: 本系统的所有用户 +``` + + +## `git add .` 和 `git add -u`区别 + +```bash +git add . :将工作空间新增和被修改的文件添加的暂存区 +git add -u :将工作空间被修改和被删除的文件添加到暂存区(不包含没有纳入Git管理的新增文件) +``` + + + +## 创建仓库 + +```bash +git init [project folder name] 初始化 git 仓库 +git add [fileName] 把文件从工作目录添加到暂存区 +git commit -m'some information' 用于提交暂存区的文件 +git commit -am'Some information' 用于提交跟踪过的文件 +git log 查看历史 +git status 查看状态 +``` + +**额外** +git add -u 可以添加所有已经被 git 控制的文件到暂存区 +以前删除文件夹只会用 「-rf」,今天学到了 「-r」,并得知它们两个区别:「-r」 有时候会提示是否确认删除。 + + + +## 给文件重命名的简便方法 + +```bash +git mv [old file name] [new file name] +git commit -m 'some information' +``` + + + +## 通过`git log`查看版本演变历史 + +```bash +git log --all 查看所有分支的历史 +git log --all --graph 查看图形化的 log 地址 +git log --oneline 查看单行的简洁历史。 +git log --oneline -n4 查看最近的4条简洁历史。 +git log --oneline --all -n4 --graph 查看所有分支最近4条单行的图形化历史。 +git help --web log 跳转到git log 的帮助文档网页 +``` + +```bash +git branch -v 查看本地有多少分支 +``` + + + +## 通过图形界面工具来查看版本历史 + +```bash +gitk +``` + + + +## 探密`.git`目录 + +查看`.git`文件夹下的内容: +```bash +ls .git/ -al +``` +如下: +```shell +drwxr-xr-x 1 Andy 197609 0 12月 17 22:38 ./ +drwxr-xr-x 1 Andy 197609 0 12月 17 21:50 ../ +-rw-r--r-- 1 Andy 197609 7 12月 17 22:38 COMMIT_EDITMSG +-rw-r--r-- 1 Andy 197609 301 12月 12 22:55 config +-rw-r--r-- 1 Andy 197609 73 12月 12 22:55 description +-rw-r--r-- 1 Andy 197609 96 12月 19 00:00 FETCH_HEAD +-rw-r--r-- 1 Andy 197609 23 12月 12 22:55 HEAD +drwxr-xr-x 1 Andy 197609 0 12月 12 22:55 hooks/ +-rw-r--r-- 1 Andy 197609 249 12月 17 22:38 index +drwxr-xr-x 1 Andy 197609 0 12月 12 22:55 info/ +drwxr-xr-x 1 Andy 197609 0 12月 12 22:55 logs/ +drwxr-xr-x 1 Andy 197609 0 12月 17 22:38 objects/ +-rw-r--r-- 1 Andy 197609 114 12月 12 22:55 packed-refs +drwxr-xr-x 1 Andy 197609 0 12月 12 22:55 refs/ +``` + +```bash +cat命令主要用来查看文件内容,创建文件,文件合并,追加文件内容等功能。 +cat HEAD 查看HEAD文件的内容 +git cat-file 命令 显示版本库对象的内容、类型及大小信息。 +git cat-file -t b44dd71d62a5a8ed3 显示版本库对象的类型 +git cat-file -s b44dd71d62a5a8ed3 显示版本库对象的大小 +git cat-file -p b44dd71d62a5a8ed3 显示版本库对象的内容 +``` + +`.git`里几个常用的如下: +```bash +HEAD:指向当前的工作路径 +config:存放本地仓库(local)相关的配置信息。 +refs/heads: 存放分支 +refs/heads/master/: 指向master分支最后一次commit +refs/tags: 存放tag,又叫里程牌 (当这次commit是具有里程碑意义的 比如项目1.0的时候 就可以打tag) +objects:核心文件,存储文件 +``` +.git/objects/ 存放所有的 git 对象,对象哈希值前 2 位作为文件夹名称,后 38 位作为对象文件名, 可通过 git cat-file -p 命令,拼接文件夹名称+文件名查看。 + +## `commit`、`tree`和`blob`三个对象之间的关系 +![tree](./images/img1.jpg) + +```bash +commit: 提交时的镜像 +tree: 文件夹 +blob: 文件 +``` + +**【同学问题】** 每次commit,git 都会将当前项目的所有文件夹及文件快照保存到objects目录,如果项目文件比较大,不断迭代,commit无数次后,objects目录中文件大小是不是会变得无限大? +**【老师解答】** Git对于内容相同的文件只会存一个blob,不同的commit的区别是commit、tree和有差异的blob,多数未变更的文件对应的blob都是相同的,这么设计对于版本管理系统来说可以省很多存储空间。其次,Git还有增量存储的机制,我估计是对于差异很小的blob设计的吧。 + + + +## `分离头指针`情况下的注意事项 + +detached HEAD + + + +## 进一步理解`HEAD`和`branch` + +```bash +git checkout -b new_branch [具体分支 或 commit] 创建新分支并切换到新分支 +git diff HEAD HEAD~1 比较最近两次提交 +git diff HEAD HEAD~2 比较最近和倒数第三次提交 +git diff HEAD HEAD^ 比较最近两次提交 +git diff HEAD HEAD^^ 比较最近和倒数第三次提交 +``` + + + +## 怎么删除不需要的分支? + +查看分支: +```bash +git branch -av +``` +删除分支命令: +```bash +git branch -d [branch name] 删除 +git branch -D [branch name] 强制删除 +``` + + + +## 怎么修改最新 commit 的 message? + +```bash +git commit --amend 对最近一次的commit信息进行修改 +``` + + + +## 怎么修改老旧 commit 的 message? + +```bash +git rebase -i [要更改的commit的上一级commit] +``` +接下来就是一个交互过程... +这期间会产生一个detached HEAD,然后将改好的commit指向该detached HEAD,如下图所示: +![rebase](./images/img2.jpg) + +**git rebase工作的过程中,就是用了分离头指针。rebase意味着基于新base的commit来变更部分commits。它处理的时候,把HEAD指向base的commit,此时如果该commit没有对应branch,就处于分离头指针的状态,然后重新一个一个生成新的commit,当rebase创建完最后一个commit后,结束分离头状态,Git让变完基的分支名指向HEAD。** + + + +## 怎样把连续的多个commit整理成1个? + +```bash +git rebase -i [要更改的commit的上一级commit] +``` +```bash +$ git log --graph +* commit 7d3386842a2168ae630b65f687364243139c893c (HEAD -> master, origin/master, origin/HEAD) +| Author: aimuch +| Date: Thu Dec 20 23:34:18 2018 +0800 +| +| update +| +* commit 9eb3188bbc63cae1bfed5f9dfc1593019e360a6a +| Author: aimuch +| Date: Wed Dec 19 20:30:14 2018 +0800 +| +| update +| +* commit bbe6d53e2b477f2d2aa402af7f315ecdfc63459e +| Author: aimuch +| Date: Wed Dec 19 20:12:29 2018 +0800 +| +| update +| +* commit 7735d66ded7f98adeca93d96fb7be12ffb67c76a +| Author: aimuch +| Date: Wed Dec 19 00:27:00 2018 +0800 +| +| update +| +* commit d9f9d115fab425b5654f8ccfec6a996aef35b76b +| Author: aimuch +| Date: Wed Dec 19 00:23:36 2018 +0800 +| +| update + +``` +```bash +pick 7735d66 update #合并到该commit上 +squash bbe6d53 update +squash 9eb3188 update +squash 7d33868 update +# Rebase d9f9d11..7d33868 onto d9f9d11 (4 commands) +# +# Commands: +# p, pick = use commit +# r, reword = use commit, but edit the commit message +# e, edit = use commit, but stop for amending +# s, squash = use commit, but meld into previous commit +# f, fixup = like "squash", but discard this commit's log message +# x, exec = run command (the rest of the line) using shell +# b, break = stop here (continue rebase later with 'git rebase --continue') +# d, drop = remove commit +# l, label