三分钟让你了解什么是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应用程序变得更加容易和快速。

一些著名的框架:

  1. PHP: Zend, YII, Symfony, CakePHP, Laravel
  2. PHP products also used as frameworks: Drupal, Joomla, SugarCRM, WordPress
  3. Java: J2EE, Hibernate, Struts, Spring
  4. JavaScript: Node.js

MVC体系结构和Session

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

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

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

  • Users
  • Blog posts
  • Tags
  • Categories

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

重要的字段是:

tbl_blog_post

ID

Title

Content

Created by

First Name

Last name

Created On

1

Hello World 1

Hello World 1

User A

User

A

10 Jan 2016

2

Hello World 2

Hello World 2

User B

User

B

10 Jun 2016

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

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

tbl_user

ID

Username

FirstName

lastname

Created On

101

User A

User

A

10 Jan 2016

102

User B

User

B

10 Jun 2016

tbl_blog_post

ID

Title

Content

Created by

Created On

1

Hello World 1

Hello World 1

101

10 Jan 2016

2

Hello World 2

Hello World 2

102

10 Jun 2016

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

下一个重要部分是让用户通过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文件,以及其他任何媒体文件。

原文发布于微信公众号 - 程序你好(codinghello)

原文发表时间:2018-05-31

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏沈唁志

Windows上的程序员神器Cmder 装逼和提高工作效率两不误

43310
来自专栏自由而无用的灵魂的碎碎念

Windows 8学习总结

可以单独关闭蓝牙和wi-fi,或者使用飞行模式,全局的全部关闭。 需要注意的时,关闭他们后,还是需要从这里启用,否则提示已由用户禁用,无法启用:

10320
来自专栏听雨堂

PowerPoint发布及链接图片的处理

        用PPT做了一个纯播放类的课件,希望发布到CD上,首先想到的是打包,找到一个PowerPoint Slide Show Converter的程序...

20480
来自专栏Fundebug

Vue UI:Vue开发者必不可少的工具

随着最新的稳定版本Vue CLI 3即将发布,是时候来看看有什么新鲜有趣的特性了。基于整个Vue.js开发者社区的反馈而大幅度改良,该版本提供了很多以工作流为中...

24150
来自专栏蘑菇先生的技术笔记

Windows10自适应和交互式toast通知[1]

28360
来自专栏Jerry的SAP技术分享

小技巧:如何突破某些网站只能登陆后才能进行文字拷贝的限制

我写公众号文章时,经常需要从一些网站的文章上查阅一些资料。比如我想把这个网页上的一个标题“SAP Fiori 2.0用户体验设计概念获红点大奖”进行拷贝。

13230
来自专栏企鹅号快讯

雅虎前端优化的35条军规

问题:我怎么才能收到你们公众号平台的推送文章呢? 内容部分 1.尽量减少HTTP请求数 80%的终端用户响应时间都花在了前端上,其中大部分时间都在下载页面上的各...

39250
来自专栏专业duilib使用+业余界面开发

duilib的xml预览工具duilibpreview

61340
来自专栏Samego开发资源

自动化运维之ansible

27670
来自专栏ytkah

小程序开发者工具下载及调试指南

  昨天晚些时候微信团队发布了微信小程序开发者工具、微信小程序开发文档和微信小程序设计指南,全新的开发者工具,集成了开发调试、代码编辑及程序发布等功能,帮助开发...

79070

扫码关注云+社区

领取腾讯云代金券