Web前端框架

Web运行原理

Web过程原理图

HTML

1. HTML文件一般由head标签、body标签组成，head头标签一般表明文档结构的相关属性。

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yVqIFtx3-1634872742916)(https://i.loli.net/2021/04/06/YXLKa7km48gQUV1.png)]

2. body内容标签一般用来放网页的具体内容，其内还包括\<h\>、\<p\>、\<img\>等众多内容标签组成。

3. HTML5还提供了对原生浏览器的支持。除此之外，HTML还有例如Canvas、WebGL这些图形API的支持，通过他们我们可以在浏览器中实现一些三维游戏。

   

CSS层叠样式表

1. 使用样式选择器来指定css修饰的对象，然后通过css的固定属性来修饰相关的html元素的样式。例如字体的大小、字体、边框、字间距、行间距等，

   

2. 在实际开发过程中，我们一般不需要自己写过多的css代码，我们一般选择现成的CSS框架，例如Bootstrap（实现移动端有好的相应布局）、Materialize（实现统一的materialize界面风格）、Pure（轻量框架）。

   

   

   

3. 除此之外，CSS还提供原生的补间动画支持，例如我们使用animation来定义使用动画的种类和时长、使用@keyframes定义动画中所用到的所有关键帧。

   

4. CSS3中加入了FLexBox（弹性盒布局）原生实现导航栏等类似效果

   

Javascript （页面的脚本语言之一）

1. 使用DOM树修改HTML文档内容\

   

2. 使用Javascript对鼠标键盘事件做出响应

   

3. 请求远程服务器数据XHR、AJAX`（根据需要向服务器请求数据，根性页面数据）

   

4. 利用Javascript，通过WebSocket、WebRTC代替HTTP请求，用于实现更低时延的网络通信，一般用作即时聊天、在线游戏等

5. 通过WebGL，实现在线的实时图像渲染

   

TypeScript （Javascript的一个超集）

1. 为Javascript中的每个对象加入了可选的类型标注，可以在编译时做到类型的检查，减少程序错误

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bZyvUXzr-1634872742935)(https://i.loli.net/2021/04/06/i76GLNrEmZIA8sb.png)]

NOde（服务端Javascript）

1. 用处：

   1. 编写控制台程序
      

   2. 原生桌面应用

   3. 服务器程序

   4. ·····

2. npm：可以使用npm安装第三方库

   

React、Angular、Vue（前端框架）

1. 界面元素组件化，提高代码复用

   [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gyxYLZLM-1634872742939)(https://i.loli.net/2021/04/06/wVh2gdMJQjWS5ot.png)]

后端

1. 后端主要是响应前端的请求，并向前端提供数据。

2. 现代Web主要使用API(应用程序接口)通信

3. API：预先商定好的通信协议或者数据模式

4. 通过API实现前后端逻辑的完全分离，同时android、ios可以复用API

API架构

1. REST架构：根据不同的HTTP请求类型对数据做对应的增删改查操作

   

2. GraphQL架构：比REST架构的灵活性和可扩展性高出很多，适合大型项目的API设计

   

数据库管理系统

1. 需求：大规模的对数据进行并发的读取和修改,坚固数据的完整性和安全性.

$$数据库\{\begin{array}{l}SQL\\ NoSQL\end{array}$$

2. SQL: 关系型数据库,能够使用结构化查询语言(SQL)对数据进行查询和修改

   

3. NoSQL:非关系型数据库,减少了许多强制性的检查，拥有更优的读写性能，对数据的格式要求更
   加松散

4. 入门选择：推荐PostgreSQL和MongoDB

5. 使用示例
   使用Javascript对MongoDB数据进行访问
   

DevOps(开发+运维）

1. 主要工作内容：部署应用程序运行到最终的服务器并让所有人访问

MERN技术栈

分别是

1. 数据库：MongoDB
2. 后端服务器框架：Express
3. 前端框架：Ract
4. 服务器运行环境：Node

Web开发资源

1. Web开发路线图：https://github.com/ccloli/developer-roadmap-zh-CN
2. 现代Web开发魔法全书：https://github.com/dexteryy/spellbook-of-modern-webdev
3. 成为Web全栈工程师：https://github.com/bmorelli25/Beome-A-Full-Stack-Web-Developer
4. Awesome列表系列：https://github.com/sindresorhus/awesome