本文适用于初学者和希望在现代Web应用程序的术语和技术方面获得一些指导的人。 本文介绍了Web应用程序与站点的不同之处，Web应用程序的组成，它们的组成以及工作方式。
1. Web应用程序与站点有何不同
对我来说，网站主要是内容丰富且静态的东西：公司的名片，食谱网站，城市门户网站或Wiki。 一组预先准备的HTML文件，它们位于远程服务器上，并根据请求提供给浏览器。
网站包含各种静态信息，例如HTML文件不会即时生成。 最常见的是图片，CSS文件，JS脚本，但是可以有其他文件：mp3，mov，csv，pdf。
博客，带有联系表单的名片，具有一系列效果的登录页面，为简单起见，我也引用网站。 尽管与完全静态的站点不同，它们已经包含了某种业务逻辑。
从技术上讲，Web应用程序更复杂。 HTML页面是根据用户的请求即时生成的。 电子邮件客户端，社交网络，搜索引擎，在线商店，在线业务程序，这些都是Web应用程序。
2.什么是Web应用程序
Web应用程序可以分为几种类型，具体取决于其主要组件的不同组合：
- 后端（应用程序的后端或服务器端）在远程计算机上运行，该计算机可以位于任何地方。 它可以用不同的编程语言编写：PHP，Python，Ruby，C＃等。 如果仅使用服务器端创建应用程序，则由于各部分之间的转换，表单提交，数据更新，服务器将生成一个新的HTML文件，并且浏览器中的页面将重新加载。
- 前端（应用程序的前端或客户端）在用户的浏览器中运行。 这部分是用Javascript编程语言编写的。 如果不需要将用户数据存储超过一个会话，则应用程序只能由客户端部分组成。 例如，可以是照片编辑器或简单的玩具。
- 单页应用程序（SPA或单页应用程序）。 一个更有趣的选项是同时使用后端和前端。 使用它们的交互作用，您可以创建一个无需在浏览器中重新加载任何页面即可运行的应用程序。 或在简化版本中，当分区之间的转换导致重新引导时，分区中的任何操作都将没有它们。
3. Pyhon框架Django又名后端
在开发中，框架是一组现成的库和工具，可帮助您创建Web应用程序。 例如，我将描述用Python编程语言编写的Django框架的操作原理。
第一步是从用户到路由器（URL分配器）的请求，后者决定处理哪个函数来处理要调用的请求。 该决定是基于由正则表达式和函数名称组成的规则列表进行的：如果是此类url，则为此类函数。
路由器调用的功能称为视图。 任何业务逻辑都可以包含在内部，但是最常见的是两件事之一：要么从数据库中获取数据，将数据准备好并返回到前端； 或来自某种形式的数据的请求，将检查此数据并将其存储在数据库中。
应用程序数据存储在数据库（DB）中。 最常用的关系数据库。 这是在存在带有预定义列的表并且这些表通过列之一互连的情况下。
可以创建，读取，修改和删除数据库中的数据。 有时，为了表示这些操作，可能会遇到首字母缩写CRUD（创建读取更新删除）。 为了查询数据库中的数据，使用了一种特殊的SQL语言（结构化查询语言）。
在Django中，模型用于处理数据库。 它们允许您描述表并在通常的python开发人员上进行查询，这更加方便。 您必须为此付出代价：与使用纯SQL相比，此类查询速度较慢且功能有限。
从数据库接收的数据已准备好发送给前端。 可以将它们替换为模板并作为HTML文件发送。 但是对于单页应用程序，在生成HTML页面（所有JS脚本都连接到该页面）时，这种情况只会发生一次。 在其他情况下，数据将序列化并以JSON格式发送。
4. Javascript框架又称前端
该应用程序的客户端部分是用Javascript（JS）编程语言编写并在用户浏览器中执行的脚本。 以前，所有客户端逻辑都基于JQuery库的使用，该库允许您使用DOM，页面上的动画以及发出AJAX请求。
DOM（文档对象模型）是HTML页面的结构。 使用DOM意味着查找，添加，修改，移动和删除HTML标签。
AJAX（异步javascript和XML）是允许您向服务器发出异步（无需重新加载页面）请求并交换数据的技术的通用名称。 由于Web应用程序的客户端和服务器部分是用不同的编程语言编写的，因此为了交换信息，有必要将存储它的数据结构（例如，列表和字典）转换为JSON格式。
JSON（JavaScript对象表示法）是一种通用格式，用于在客户端和服务器之间交换数据。 它是一个简单的字符串，可以在任何编程语言中使用。
序列化是将列表或字典转换为JSON字符串。 例如：
字典：
{ 'id': 1, 'email': 'mail@example.com' }
序列化字符串：
'{"id": 1, "email": "mail@example.com"}'
反序列化是将字符串逆转换为列表或字典。
通过操作DOM，您可以完全控制页面的内容。 使用AJAX，可以在客户端和服务器之间交换数据。 使用这些技术，您已经可以创建SPA。 但是，当创建复杂的应用程序时，基于jQuery的前端代码很快就会变得混乱且难以维护。
幸运的是，Javascript框架已经取代了JQuery：Backbone Marionette，Angular，React，Vue等。 它们具有不同的理念和语法，但是它们都使您可以更加方便地管理前端数据，它们具有用于在页面之间创建导航的模板引擎和工具。
HTML模板是一个智能HTML页面，其中使用变量而不是特定值，并且可以使用各种运算符：
if ，
for循环和其他。 当替换变量并应用运算符时，从模板获取HTML页面的过程称为模板渲染。
结果页面显示给用户。 切换到SPA中的另一部分正在使用其他模板。 如果您需要使用模板中的其他数据，则从服务器请求它们。 所有带有数据的表单提交都是对服务器的AJAX请求。
5.客户端和服务器之间如何通信
客户端通过HTTP与服务器通信。 该协议的基础是客户端对服务器的请求以及服务器对客户端的响应。
对于查询，如果我们要获取数据，它们通常使用GET方法，如果我们要更改数据，则通常使用POST方法。 该请求还指示主机（站点域），请求正文（如果它是POST请求）以及许多其他技术信息。
现代的Web应用程序使用HTTPS协议，HTTPS协议是HTTP的扩展版本，支持SSL / TLS加密。 无论数据的重要性如何，使用加密的数据传输通道已成为Internet上的一种很好的形式。
在HTTP之前还有另一个请求。 这是一个DNS（域名系统）查询。 需要获取所请求域绑定到的IP地址。 此信息存储在浏览器中，我们不再花时间在此上。
当来自浏览器的请求到达服务器时，它不会立即到达Django。 首先，它由Nginx Web服务器处理。 如果请求了一个静态文件（例如图片），则Nginx本身会将其发送给客户端。 如果请求不是静态的，则Nginx必须将其代理（传输）到Django。
不幸的是，他不知道如何。 因此，使用了另一个层程序-应用程序服务器。 例如，对于python应用程序，它可以是uWSGI或Gunicorn。 现在，他们将请求发送给Django。
Django处理完请求后，他返回带有HTML页面或数据的响应以及响应代码。 如果一切正常，则响应代码为200；否则，返回值为200。 如果找不到该页面，则-404; 如果发生错误并且服务器无法处理该请求，则-500。这是最常见的代码。
6. Web应用程序中的缓存
我们经常遇到的另一项技术同时存在于Web应用程序和软件中以及计算机和智能手机中的处理器级别。
缓存是开发中的一个概念，当频繁使用的数据（而不是每次以其他方式计算或准备的）每次从数据库中取出时，都将其存储在可快速访问的位置。 缓存使用情况的一些示例：
- 在Django中，要求接收报告中图表的数据。 我们从数据库中获取数据，进行准备并将其放入具有快速访问权限的数据库中，例如memcached 1小时。 在下一个请求时，我们将立即从memcached中获取它们并将其发送到前端。 如果发现数据不再相关，则将其无效（从缓存中删除）。
- 为了缓存静态文件，使用CDN（内容传递网络）提供程序。 这些是遍布全球的服务器，针对静态分布进行了优化。 有时，将图片，视频，JS脚本放在CDN而不是服务器上会更有效率。
- 默认情况下，所有浏览器都启用静态文件缓存。 因此，打开网站不是第一次，所有内容的加载速度明显加快。 对于开发人员来说，缺点是打开缓存后，代码中所做的更改并不总是立即可见。