三分钟让你了解什么是Web开发？

本文将通过探索web开发的起源和发展方式来解释web开发。这并不是一个关于网络进化的精确编年史，而是更多地关注这个进化的需求，这样我们就能理解这项技术。

一切都是从信息开始的。人类总是需要找到方法与他人分享信息。如你所知，在互联网出现之前，信息是通过信件、报纸、广播和电视分享的。每个人都有自己的缺点，这使得互联网的信息高速公路走到了最前线。

1、网络是什么?

如果你可以在一个感兴趣的地方发布信息并阅读这些信息，那该怎么办?这正是网络所做的。您将信息保存在web服务器上，人们可以使用客户机(浏览器)读取该信息。这种架构称为“服务器-客户端架构”。

为什么HTTP ?

最初，这些信息都是作为文本存储的——这就是为什么在现在文本、媒体和文件都通过该协议进行交换的情况下，名称超文本传输协议仍然存在。

2、如何保存、检索和保存信息?

在web上存储信息的最基本和最长久的方式是在HTML文件中。为了更好的理解，让我们举一个公司发布价格信息的简单例子，这样它的供应商就可以下载并查看这个列表，它包含有价格和生效日期的产品。这在服务器上作为HTML文件保存，可以使用web浏览器查看。浏览器从服务器请求文件，服务器端起它并关闭连接。

HTML是一种用于创建web页面的标准标记语言。换句话说，它是一个带有标记的简单文本文件，帮助浏览器找到如何显示信息的方法。

CSS

层叠样式表(Cascading Style Sheets, CSS)是一种样式表语言，用于描述用标记语言编写的文档的表示。基本的格式和样式可以通过HTML来完成，但是最好是使用CSS。

web应用程序包含许多页面，无论是动态的还是静态的。如果我们使用HTML标签来设计信息，我们必须在每个页面中重复这些信息。假设我们想要改变背景颜色——我们必须为网站的每一个页面编辑HTML。

相反，我们可以使用CSS在一个位置存储我们的样式定义，并将每个HTML页面引用到该位置。通过改变CSS文件，我们可以改变每个页面的背景颜色，样式定义的样式表。

CSS不仅仅是设置背景颜色，当然，它还允许我们为各种元素、字体、页面布局等等设置颜色。

我们使用CSS设计了前面的示例。假设我们在不同的页面上使用表，但是使用相同的CSS样式。我们可以将所有这些样式信息转移到它自己的文件中。

JavaScript

JavaScript是web的第三个支柱，除了HTML和CSS之外，它通常用于使web页面具有交互性。要理解JavaScript (JS)，我们需要知道DOM是什么。

文档对象模型(DOM)是一种独立于语言的应用程序编程接口，它将HTML文档转换为树结构。每个文档的节点都被组织在树结构中，称为DOM树，其中最顶层的节点称为“文档对象”。

样本DOM树(来源:Wikimedia Commons)

当在浏览器中呈现HTML页面时，浏览器将HTML下载到本地内存中，并创建一个DOM树来显示屏幕上的页面。

使用JS，我们可以通过几种方式操作DOM树:

JS可以通过添加、更改和删除页面中的所有HTML元素和属性来修改DOM树。

JS可以改变页面上的所有CSS样式。

JS可以对页面上的所有现有事件作出反应。

JS可以在页面中创建新的事件，然后对所有这些事件作出反应。

在我们的JavaScript示例中，我们继续以我们的价格列表为例，添加另一个列——特殊价格——默认情况下是隐藏的。我们会在用户点击它的时候显示它。在技术术语中，我们使用附加到web元素的click事件(锚标记)，并更改web元素的现有文本，换句话说就是操作DOM。要做到这一点，我们必须使用浏览器所接受的脚本语言，它始终是JavaScript。

Forms表单

到目前为止，我们只讨论从服务器获取数据。表单是HTML的另一个方面，它允许我们向服务器发送信息。我们可以使用表单更新现有信息或添加新信息。HTML表单中最常用的方法是GET和POST。

服务器端脚本可以读取浏览器通过POST发送的值，然后处理它或将其存储到文件或数据库中。简单地说，这就是数据如何被推送到服务器，然后最终存储在一个文件或数据库中。

注意:假设我们想在提交之前添加验证——例如，产品应该包含至少5个字符，或者SKU字段不应该是空的。我们可以使用JavaScript进行这些验证。我们需要对提交的Click事件作出反应，并检查web元素是否有我们需要的数据。如果有任何遗漏，我们可以显示错误消息并停止将数据发送到服务器。

数据库

一旦信息开始增长，从文件中获取正确的信息可能会成为真正的痛苦，更不用说痛苦的缓慢了。例如，让我们以同样的价格文件为例，假设公司有数千个产品，我们想知道列表中最后一个产品的信息，这意味着我们需要阅读所有的产品直到找到我们想要的产品。这不是检索信息的最佳方式，因此为了解决这个问题，数据库就诞生了。

在数据库(DB)中，我们将数据存储在表中(一组结构化的数据)，这样我们就可以轻松地执行搜索、排序和其他操作。

服务器端脚本语言和框架

我们需要编程语言:

从数据库或文件中存储和读取。

通过进行某些处理从服务器获取信息。

从客户端读取POST信息，并进行一些处理以存储/推送该信息。

像C和Java这样的典型编程语言可以从数据库中写入和读取，但是它们不能直接在web服务器上运行。这就产生了服务器端脚本语言。

服务器端脚本语言执行所有常规处理，可以与数据库对话，并且可以直接在web服务器上运行。流行的服务器端脚本语言是PHP、Perl、JSP、Ruby on Rails等等。

开发人员开始使用这些语言，很快他们意识到他们正在为所有的项目编写相同的样板代码，，这使得开发web应用程序变得更加容易和快速。

一些著名的框架:

PHP: Zend, YII, Symfony, CakePHP, Laravel

PHP products also used as frameworks: Drupal, Joomla, SugarCRM, WordPress

Java: J2EE, Hibernate, Struts, Spring

JavaScript: Node.js

MVC体系结构和Session

MVC架构帮助我们将代码划分为多个文件，并让我们将业务和表示逻辑分开，以便在以后的阶段更容易地修改。

通过以博客平台为例，我们将重新讨论到目前为止讨论过的所有主题，并了解如何使用MVC架构来编写代码。

一个博客平台管理动态内容，可以包含一些模块，例如:

Users

Blog posts

Tags

Categories

在讨论其他功能之前，让我们为Blog Posts表创建基本的数据库设计。

重要的字段是:

tbl_blog_post

如您所见，我们正在存储重复的用户信息，如“First Name”和“Last Name”。如果我们有1万篇博客文章，我们将把所有的重复用户信息存储在10000个博客日志记录中。可能会有更多关于用户存储的信息，例如他的指定，最后登录的时间等等。

您可能已经猜到，另一种选择是将“用户”信息存储在另一个表中，并将其与下面的“Related”Id关联在一起。

tbl_user

tbl_blog_post

将数据划分为多个表是数据标准化的众多原则之一。

下一个重要部分是让用户通过HTML表单在这些表中创建数据。请记住，我们正在做这个解剖来理解这些概念——这并不是一个完整的编程教程。

通过认证用户创建新的博客

为此，我们需要一个带有两个输入字段(标题、内容)的HTML表单，用户可以通过该表单创建一个博客帖子。

在用户输入信息并单击submit按钮后，“创建Post”，这些表单值将通过Post发送到web服务器。可以使用任何服务器端脚本语言读取POST值。服务器脚本(PHP、Ruby on Rails、Python等)从表单读取值并将其推送到数据库。

该脚本还可以进行处理，可以从获取服务器日期和时间，也可以是基于从另一个表或web服务检索的值来计算字段。

另一个注意事项:脚本也可以执行验证，也称为服务器端验证，以确保数据是有效的。如果数据是有效的，那么只有表单数据被持久化到tbl_blog_post中，或者它将消息发送回客户端，以输入丢失的信息，并且进程继续。

在我们的表tbl_blog_post中，除了标题和内容，我们还有一个名为created_by的字段。如何得到这个字段的值?

用户登录

通常，大多数web应用程序都有登录功能。当用户成功地进行身份验证时，用户信息将存储在会话中，以便稍后可以重用该信息。

一个会话是什么?

HTTP协议是无状态协议，这意味着客户端使用GET或POST发送到web服务器的任何请求都不会被跟踪。如果客户机(浏览器)发出两个请求，则web服务器不知道或关心它们是否来自同一个用户。这也意味着，例如，如果您登录到一个电子商务应用程序，并且您正在将产品添加到购物车中，那么服务器并不知道您都是同一用户。

为了克服这种无状态性，客户需要在每个请求中发送额外的信息，以在多个请求期间保留会话信息。这些额外的信息存储在cookie的客户端，在会话的服务器端。

会话是一个数组变量，它存储跨多个页面使用的信息。会话由惟一ID标识，其名称依赖于编程语言——在PHP中称为“PHP会话ID”。在客户端浏览器中，需要将相同的会话ID存储为cookie。

显示个人博客

我们的下一个项目是展示个人博客帖子。我们需要根据所请求的blog post ID读取数据库中的数据，然后显示标题和内容字段的内容。

显示单个博客文章的高级伪代码:

从数据库读取数据以获取博客文章ID。

与CSS和JS一起将数据插入到HTML模板中。

以上所有代码都可以写在一个文件中。这是早期的做法，但是发展联盟意识到这不是最优的。要添加任何新特性，需要更改整个代码，在多开发环境中工作并不容易。

这导致web开发人员采用了MVC架构，该架构本质上将代码分解为下面列出的三个组件。

Model:模型是域/业务逻辑，独立于用户界面。在我们的示例中，从数据库获取单个帖子的代码可以保存在这里。

View:视图可以是任何输出的信息表示。我们的HTML代码显示在这里，所以数据来自模型，但是HTML在视图中。

Controller:第三部分，如果我们点击视图后链接，控制器将被调用。它从模型获取数据，并使用该数据呈现视图。

这里的blogpost是控制器名称，视图是控制器中的一个操作(方法)。id是博客文章的id。如果我们在浏览器中输入这个，请求就会转到“BlogPost”控制器的动作“视图”，在这里它调用这个模型来获取BlogPost ID“1”作为模型对象的内容。这个对象被传递给“视图”来呈现它。

Ajax & Single Page Applications (SPA)

如果你出生在上个世纪，你可能会记得在90年代和00年代，Hotmail和Yahoo!是非常流行的网络电子邮件提供商。如果你点击收件箱或收件箱中的一封邮件，整个页面就会焕然一新。大约在2004年，Gmail有一个重要的特性:Ajax。使用Ajax时，整个页面并没有刷新—只是需要更改的部分。所以，如果你有了新的邮件，而不是刷新整个页面，你只是看到了一个新的电子邮件在上面。这给用户提供了类似桌面的体验，并且成为了一种非常流行的应用程序。

Ajax是什么?

Ajax这个术语已经代表了一组广泛的web技术，它们可以在与服务器在后台进行通信的应用程序中实现，而不会影响页面的当前状态。

使用Ajax，您将一个GET请求发送到服务器，服务器将其响应作为输出发送，而不阻塞当前的web页面，这意味着用户可以继续做任何他们正在做的事情，而不会被打断。输出被追加或添加到当前网页。

在非ajax网站中，每个用户操作都需要从服务器加载完整的完整页面。这个过程是低效的，并且创建了一个糟糕的用户体验。所有的页面内容都消失了，然后重新出现。

Ajax是构建单页应用程序(SPAs)的技术之一。顾名思义，整个应用程序在一个页面中，所有内容都是动态加载的。JavaScript框架，如Angular, React, and Backbone.js可以用来构建SPAs。

Web服务器和浏览器

浏览器是网络的解释器。浏览器请求来自web服务器的数据，web服务器处理该请求并将响应发送到HTML(包括CSS、JS、图像等)，然后显示出来。

我们可以使用以下三种重要的方法来请求web服务器:

GET:获取请求的资源作为响应。

POST:向服务器提交表单数据，或者通过Ajax提交任何数据。

例如，当你在浏览器中输入google.com时，浏览器会将这个命令发送到google.com服务器。

得到:http://google.com

谷歌web服务器将处理其主/索引文件，并将响应发送回客户机。它通常会发送HTML内容和CSS文件，以及其他任何媒体文件。