深入浅出前端入门介绍

内容说明

本记录描述本人了解网站开发的心路历程

只记录个人对于网站知识结构的理解认知,还未涉及开发的具体知识。
本记录无法告诉你如何去做网站开发,但是或许可以告诉你要做网站开发都需要做什么事

本记录内容为三不产品:

  • 不完整:仅记录我当前的知道的内容;
  • 不准确:仅记录我对于当前知道的内容的理解,不能保证正确;
  • 不详细:及时是我能够正确理解的内容,也不能保证详细的描述。

本记录的目的:

  • 记录:记录和整理我认知网站知识的过程;
  • 完善:吸收专家对我记录的内容的指正和详细说明;
  • 互助:帮助小白(含自己)理解网站结构。

适合的读者

本记录适合对网站开发一窍不通的初学者认知网站基本结构和概念、学习网站开发如何入门,不适合对追求技术深度的大神。

背景

本记录的起源,来自我想做一个小网站的念想,却无奈自己悟性太差,参悟了几年的web编 程,面对大量知识点,依然无从下手。具体过程如下:

大量全新名词

在接触网站开发之处,我的眼前首先面对的是大量的新名词:
如JS、Html、JSP、Java、Tomcat、CSS、XML、servlet、PHP、CGI、框架、前端、服务器、http……
请忽略以上名词的杂乱无章……因为这是此时我的脑海真实写照……

杂乱网络结构

看着上面那一堆名词,我实在无从下手,思考了大约1秒钟,我决定先放弃具体知识的学习,转而先搜索网站开发的结构体系,然后准备从体系中入手逐个技术点的学习,于是,我得到以下开发结构体系:
LAMP组合拳、DIV+CSS+JS前端+JQuery技术、J2EE开发、各种模板组件……
甚至有些论坛直接就为争论哪个语言好,就打起来了……

总之,看了这么多建议,我心里一阵清凉,觉得原来那些零散的知识点,组合成了一个个巨无霸,更加难理解了……

迷茫中尝试

此时我不止一次怀疑过自己的智商,为什么网上的同胞们都那么轻松的聊着那么复杂的内容,而我却连你们给我的某个技术的解释的解释的解释都看不懂。

在这个迷茫阶段,我选择了不抵抗,决定先不去搞清每个部分是做什么用的,直接选择人家设计好的架构,用就行了,本来设计那些架构就是为了方便我们的嘛。

于是,我架起了一个个不同的网站,看似一切良好,但是……这些网站全都停留在“hello world”的状态!对于我自己的想法,完全不知道怎么去实现…

一怒入坑

网络大量信息对于像我一样网络开发白痴的如此“友好性”。 想简单偷个懒直接使用现成架构,却被自己的无知无情的戏谑。

一怒之下,我决定将所有名词全部认识一遍,然后逐个归类,自己归纳出整个网络开发结构。全面的了解做网站需要学哪部分知识,为什么需要这部分知识,要实现什么功能需要什么工具,使用工具时需要配置哪些内容等。

于是,就出现了下面这一堆误人误己的,自认为是整个网络开发结构认知的一篇记录。 不管怎样,有了以下或对或错的认识,自我感觉良好多了,心中的迷茫也少多了,感觉自己的白痴级别降低了一级,心情也好多了。

以下是本篇记录的正文,请根据以上背景,酌情考虑是否适合你观看。 观看本记录出现的不良反应,本人概不负责。当然,如果对你产生了正面效果,我也不会打劫你。

正文:网站开发结构认知

网站,对于很多用户而言,可能认为眼前浏览器中的东西就是网站的全部。其实,那只是冰山一角。

网站基本结构

首先,我们来认识一下网站的结构,看看自己在什么位置,看看我们还不知道的冰山下层有什么景象。

Created with Raphaël 2.1.2 用户 用户 前端 前端 网站服务器 网站服务器 我需要看某网页(1.用户操作) 用户要看那个网页(2.前端请求) 组成请求的网页内容 (3.后台处理) 给你网页(4.后台反馈) 我将网页展示给你看(5.前端显示)

以上是一个最简单的概念,用户、前端和网站服务器三大部分,构成的网站最基本结构。 其中开发人员要关心的就是前端和网站服务器的相关开发。

当然,对用户而言,其脑海中对前端的概念通常简单的理解为浏览器…

网站前端

返回顶部
接下来,我们来拆解一下前端开发的结构。前端常用的开发语言和运行环境如下表所示。

前端开发
开发语言:HTML CSS JS
运行终端:浏览器

要知道前端是网站和用户交互的主要接口,用户不需要管服务器是否靠谱,只需要任性的要求前端给自己展示自己要的东西就行了。这些用户要的东西就是有这几种开发语言写出来的。

HTML 超文本标记语言 1989

一种文本、图片、链接等多元素编辑语言。
通过这种语言以网站页面为编辑区域,任意指定页面具有哪些元素,包括文字、图片、多媒体等。
并任意指定不同元素在页面的基本格式。如文字字体、大小、位置,图片大小、位置,链接颜色、状态变化等等。

这种语言利用标签标记,将多种不同类别的元素、甚至不同位置的文件关联在一起,因此叫做超文本标记语言。 并且通过定义元素的属性,设置元素的格式,最终形成整体页面效果,这种语言可以利用多种文本编辑工具编辑,例如记事本。只需扩展名修改为.html或.htm即可(这两种扩展名不是简单的缩写关系,详细本文不讨论)形成HTML文件。

HTML5就是HTML语言的最新标准,这种标准制定使页面可以表现的内容更加强大(至于具体如何强大,我不知道,目前我只知道HTML5是用来定义页面内容的就足够了)。 好像HTML5标准相关的两大的权威机构W3C和WHATWG之间对这个标准的细节确定存在巨大分歧,W3C背后有微软支持,而WHATWG背后有Mozilla、apple等公司的支持,这部分会涉及到网页程序和原生APP之间的纠缠,太过复杂,本文就不细说了。

最初的HTML只含有较少的元素属性,只能简单规定元素的基本格式,随着网站开发的发展,前端可以展现的元素格式越来越丰富,代码也越来越臃肿。因此逐渐形成了另一种新的语言CSS,将HTML语言中描述各元素属性的代码从HTML文件中抽离出来,使HTML专门描述前端页面具有什么内容,CSS语言编写的CSS文件专门描述HTML中的每个元素以什么格式在页面展示。

css 层叠样式表 1996

CSS专门用于描述HTML中各元素用什么样式展示。HTML+CSS组合完成页面内容和格式的设计。

很多人喜欢使用HTML中的一种标签格式<DIV>来规定页面内容,再利用CSS规定DIV标签在页面摆放格式形成页面布局,因此很多网站会提到DIV+CSS前端开发这个概念。

CSS主要实现了页面内容的静态布局效果。虽然目前的CSS3标准的出现,使CSS强大到可以实现很多元素动态变化效果。 但是,更复杂的动态变化还是需要另一种专门的语言来实现,这就是JS语言。

JavaScript 脚本语言 简称JS

js语言当前普遍被用于网站开发前端编程,在html提供的内容和css提供的格式之外,由js提供更复杂的界面展示效果和逻辑处理。在此存在很多可以直接使用的代码库,如jQuery等。

js语言可以实现对页面元素的复杂功能编程,例如页面的时钟数字变化效果,图片的走马灯轮换效果,粒子动画效果等。 也就是我们经常看到的炫目的页面动画基本都是js语言编写的。

除了可以看到的动态效果之外,js还可以实现用户看不到页面数据处理工作。例如数据加解密、文字过滤分析等。 这些内容都需要编码实现。

以上的html、css、js文件都会下载到用户的终端设备(计算机、手机、平板灯)上,在用户设备上被执行,因此,我们称它们在前端运行,这里的“前”是与后台服务器的“后”相对而言的。

以上3种语言可以通过一种更形象的比喻进行描述。HTML语言相当于名词,记录页面有什么内容;CSS语言相当于形容词,描述页面内容的形态;脚本语言相当于动词,定义页面内容动态的行为。

脚本语言

上文提到js是一种脚本语言,此处插播一下脚本语言的概念。 脚本语言是一种逐句执行的直译语言,也就是这种语言不需要提前编译,直接由终端(如浏览器)解释运行即可。

脚本语言与其他编程语言的关键区别在于是否需要经过编译链接形成二进制机器语言。

我们知道,其他编程语言完成程序编写后,需要通过编译器的工作,将程序代码转变成二进制形式,windows系统中通常是.exe文件,这种文件可以直接在相应的操作系统中运行。

而脚本语言不需要编译,写完代码保存文件之后,即可立即运行。要实现这种效果需要提前在需要运行该脚本文件的系统中安装相应的脚本软件。

以JS为例,其脚本文件后缀为.js,要运行该脚本文件,需要运行环境中安装js软件。 通常我们的浏览器中已经集成了js解析标准,直接可以解析js脚本文件,因此,js脚本语言通常被用作前端页面特殊效果的编程语言。

当然,只要具有js的解释环境(js软件)就可以运行js文件,因此js并不是局限于前端开发。随着node.js等运行环境的出现,js语言逐渐适用于服务器端、客户端等多种场景。

关于一种语言是否适合某种场景,这取决于这种语言的最主要的特性是否适合该场景最需要功能,属于技术细节,本文不做分析.

同属于脚本语言的还有,PHP/ASP/JSP/python/ruby/VBScript/Perl等.

到目前为止,我好像理解了前端语言的概念(谁知道有多少错误),但是前端的本质对于用户而言并不是那么友好,以下是构成前端内容的html代码示例,css和js的代码也类似。

 
 
  1. <!DOCTYPE html>
  2. <html lang= "zh-CN" dropEffect="none" class="no-js">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title> 前端html示例</title>
  6. </head>
  7. <body>
  8. </body>
  9. </html>

就这种内容,我表示前端用户完全看不懂啊。
于是我们就需要一个翻译,给我们解析一下这花花世界的各种html页面说的都是些什么东西。
因此,普通用户要看到前端页面内容和操作前端页面都需要通过一个翻译载体,即浏览器来实现。

浏览器

浏览器就是对HTML+CSS+JS文件内容进行翻译,并允许用户通过页面与网站进行交互的一种软件。

前面提到的那一堆前端名词都是开发语言,是语言就具有统一的标准,因此,这些语言都有唯一的严格的标准文档可查询。 但是,浏览器就没有严格规定了。只要实现了对以上前端语言的翻译功能,就可以成为网页浏览器。

因此也就产生了各种不同的内核,以及采用不同内核开发的浏览器。

虽然这些内核的目的都是为了解析(翻译)前端语言形成可视化页面,但是由于设计理念等细节的差异性,导致不同的内核体现出不同的特性,例如有的访问速度快、有的扩展性强、有的大而全、有的小而美等等。

浏览器的开发团队和内核的开发团队不一定是一个团队。 例如webkit、chromium等开源内核,其他开发团队或厂商在遵守开源规则的情况下,可以自由使用这些内核,进行二次开发,加上自己的外壳、标志等,形成自己品牌的浏览器,由于开发能力等原因的差异性,而这些浏览器也不可避免的存在各自的优缺点,也就形成我们选择浏览器的理由。

当前主流的浏览器内核如下:

内核浏览器
TridentIE系列 世界之窗 遨游 腾讯TT 360安全浏览器
Webkit
Chromium
chrome Safari opera 遨游3 搜狗浏览器 360极速浏览器 QQ浏览器 猎豹浏览器 百度浏览器
GenkoFirefox Waterfox

上表中仅列出部分产品,其中也存在多种双内核产品,chromium源自Webkit,但是相对原版的Webkit产生了较大的“基因突变”,因此与Webkit并排列出。

表中包含了很多我们日常使用的浏览器,也就是通过这些浏览器,对前端语言写成的文件进行解析,在浏览器中以友好的可视页面的形式展示给用户。 此时就可能出现,页面乱码或错误等情况,可能是前端语言编写错误,也可能是浏览器内核对前端语言的解析出错,当然也可能是网站服务器端出现了问题。

在说服务器端的功能之前,插播几个前端相关的小知识点:

xml/json

xml是可扩展标记语言,通常用于传输和储存数据,相似的还有json.

前端和服务器之间通常需要一种双方都认可的格式进行数据的传递和存储。
.xml/json或其他格式指定了数据内容的存储格式,使用该数据的双方只需按照规定的格式写入/读出内容即可完成数据的传输和存储.

以json为例,其基本格式为:{标题:内容},根据这个格式,后台从json文件中读出需要的内容,例如{我是标题:我是要被读出的内容},并按照这种格式发送给前端,前端通过js等语言对这些内容进行解析即可。

前端的一些配置信息,如用户登录名称、性别、网页底色等信息都可以暂存在xml/json文件中,根据需要随时读取. 服务器后台也可将前端需要的数据内容,以xml/json的格式发送给前端,达到数据交互的目的。

AJAX (Asynchronous Javascript And XML)

异步JavaScript和XML. 这不是一个全新的技术,而是利用已有的js/css/xml等技术达到前端数据及时更新的效果.

对用户而言,前端页面的刷新就是点击页面刷新按钮 或者F5实现页面内容的刷新。

甚至有很多人不知道页面刷新这个概念…… 页面刷新的目的是让页面从新从服务器获取数据,通常是在页面长时间未更新数据,至于多长时间算长,没有定论,几分钟、半小时、n小时都可以说是长时间。

例如,门户网站的新闻列表,可能1个小时之内,服务器后台已增加了很多条新的新闻,前端可以通过刷新,从新获取最新的新闻展示在页面上。 再如,网页文字直播NBA篮球比赛,可能后台服务器每几秒就会有一条新的动态,需要用户连续刷新页面内容来获取最新动态。

以上的刷新方法是用户手动对整个页面内容进行刷新,针对以上的需求,明显是不合理的,AJAX就是实现了自动更新需要刷新的数据的效果。

其基本思路是前端js与后台不断通讯,及时获取前端某部分数据的变化信息,及时进行自动数据获取更新,使用户无需刷新网页即可保持页面数据最新的状态。例如,球赛文字直播、股票实时信息等。

文档对象模型(Document Object Model,简称DOM)

DOM是一种独立的规范。
浏览器作为前端的展示工具,按照DOM规范将页面划分为不同层次结构,形成多个可操作的对象。例如,window对象、history对象、link对象等。
window对象就是用户看到的页面、history对象就是浏览历史、link对象就是链接等。

例如弹出警告对话框的操作就可以通过window对象实现。

按照这种规范即可直接通过编程操作html页面的各种元素,控制其显示/隐藏等效果。 js中也提供了符合该规范的api函数接口。通过js可以动态操作页面元素的状态。

以上就是对前端的基本认识。有了以上的内容就可以形成前端页面了。我就奇怪了,既然这样就能显示页面,要后台干什么。

经过我“深入”思考,终于明白,如果只有前端,没有后台,你的页面就像一份报纸、一本杂志,内容是固定的,不会“更新”,除非你再买一本新的;有了后台,就可以给前端源源不断输送新鲜的内容,让前端充满活力。

通讯协议

在讲后台之前,我们要考虑一个问题,前端怎么向后台发送请求,总不会是“SOS”吧;后台又如何相应请求并返还前端需要的内容。

这就需要双方按照预先协商好的格式(我们称之为协议,就好像接头暗号一样),发送数据内容。如果双方不按照协议发送信息,则对方就无法知道信息到底是什么内容,就无法进行交流,俗称“不按套路出牌”。

以下几个概念介绍前端和服务器之间通讯的相关知识点。

域名 (Domain) 和域名服务器 (DNS)

我们访问网页时通常会在地址栏输入类似www.zhihu.com这样的网站地址(或者通过搜索跳转),地址栏中的这种地址就是网站的域名,通过这个域名别人就可以找到这个网站。

  • 为什么需要域名

话说一开始的时候,并没有域名的概念,要链接到服务器,只需要知道服务器的IP地址就可以了。例如,在地址栏直接输入60.28.215.70就可以直接访问知乎网站了。关于IP相关的网络知识,内容太大,本文不深入描述。

后来,网站越来越多,谁能记住这么多没有规律的IP地址啊,于是聪明爱折腾的人们发明了有规律有意义的域名。比如,www.qq.com,www.Lenovo.com.cn,这种内容比纯数字就好记多了。

域名和IP地址是对应的,归根结底,虽然我们在浏览器输入的是域名,也会通过相应手段解析成IP地址,进而确定我们要访问的网页在网络中的位置。 毕竟,虽然我们认识域名,但是计算机认识的确是IP地址。

那么,我们输入的域名由谁来解析呢?这就是DNS的工作了,其作用就是将域名翻译成IP地址,返回给我们。可以简单的认为,每个DNS中存放“一张大表”,其中每一行都是一个IP地址对应一个或多个域名。

全世界各地分布着大量不同级别的DNS,帮我们进行域名和IP之间的解析工作。其中最高级别的DNS有13个,以大写英文字母A~M命名,分布于世界几个主要的城市。

如果你的计算机无法连接到DNS,或者连接到错误的DNS,则无法通过域名访问网页。
为什么很多人可以上qq,却不能打开网页,就是因为网页需要域名解析,而qq直接通过IP地址与服务器交互,无需解析。
此时,如果在浏览器直接输入IP地址,就可以访问网页。

  • 域名的格式

以联想的官网www.Lenovo.com.cn为例进行介绍。

域名分为4个级别,以符号.作为分隔符。从左至右,级别递增。

  • 最右侧,表示国家。如例子中.cn,表示中国,即该域名为中国域名。其他,如美国.us,日本.jp等。
  • 右数第二位,表示网站类别。如例子中.com,表示”商业化”,其他,如.org表示”非盈利机构”,.edu表示”教育机构”等.
  • 左数第二位,表示企业或组织。如例子中的.Lenovo,表示”联想公司”。其他,如.Facebook,.apple分别表示该公司.
  • 左数第一位,表示业务类型.如例子中的www表示该页面为用户提供基本web服务,现在通常作为网站首页使用.其他,如mail表示该页面提供邮箱服务等.

最后2级域名内容是可以自定义的,当前很多人也不会去通过域名去了解页面内容了,更多是通过链接跳转到达指定页面,页面链接的用途更多是给开发人员识别页面用了.

我们经常提到的域名注册,就是这东西。咱们选好域名,把钱(或者免费)交给DNS管理公司/机构,DNS上就有我们选的域名和IP了,别人就可以访问我们的网站了。

所谓备案,是将域名/IP信息在公安系统登记,后期你做了错事,人家好找你。。。

URL (统一资源定位符)

上面介绍了域名的概念,我们知道前端如何定位服务器的地址,那么定位服务器地址之后,前端如何定位服务器中的某个内容呢?即用户在页面点击某文章链接,后台怎么知道你要的是哪篇文章呢?

这仅仅通过域名是无法解决的,在域名之后,还需要加上具体的文章代号,形成完整的访问要求,这就是URL.示例www.zhihu.com/question/30640094#answer-14947967,域名后面加上要访问的问题和答案序号,服务器就知道应该把什么内容反馈给前端了.

好的,有了URL,咱们就要说到本节开头提到的通讯协议了.也就是前端有了URL按照什么格式将其发给后台,后台有了内容按照什么格式反馈给前端.

http/https

在访问网站时,我们经常会在URL之前看到http://这种前缀,这就是前端指定要给后台发送数据时使用的协议格式,此处用的就是http协议.

除了http协议,还有https、ftp、smtp等一系列不同的协议,分别用于不同的场合。 http是超文本传输协议,可以传输文字、图片、多媒体等多种格式内容,适用于网页,smtp更适合邮件的收发。

总之,前端和后台使用相应的协议,双方才可以通讯,否则,双方对不上暗号,就无法交互了。

接下来,继续分析后台内容,想要进一步被我误导的,请继续往下看~

网站后台

返回顶部
接下来,我们来拆解一下后台服务器开发的结构。网站后台常见的组成结构和相关开发语言或工具如下表所示。

后台组成结构相关开发语言相关工具软件
web server通常为C/C++之类底层语言Nginx Apache IIS lighttpd
交互协议fastCG等
后台开发框架J2EE django
后台处理程序java PHP Python Ruby JSP
数据库SQLOracle MySQL

网站后台开发目前而言是百家争鸣,各种语言、多种框架互相角逐,争论不休。

本记录当前不会参与那种高深的讨论,本记录只来说一下后台都有哪些东西,至于具体怎么选,以后再说……

反向代理服务(web server)

首先,说一下web server。

服务器端,需要接收前端访问请求,根据请求类型分发给指定模块进行处理,并完成将处理结果返回给前端的工作,这就是反向代理,也就是web server,例如Nginx/Apache等.

web server本身不做网站内容的解析和生成工作,重点在于处理复杂的网络请求,应对海量的网络连接。起到后台与前端之间搭建网络桥梁的作用,通过通讯协议,与前端进行数据交互,而数据来源,由后台其他处理程序和数据库等提供。

web server的独立,使后台处理程序只需专注每个请求的细节处理,而无需关注请求的来去和排队管理等机制.对网站开发人员而言,也大大减少了工作量。

web server作为前端后台之间的衔接工具而存在,其中只有与开发项目相关的部分配置信息,并不存在我们编写的数据处理程序内容,因此可以根据项目需要(性能)随时更换代理,当然,这种随时更换可能存在代价.

web server可以使用Nginx/Apache/tomcat/IIS/lighttpd等现成的工具,也可利用node.js等平台添加模块自己形成满足自己要求的代理工具,甚至自己动手从头开发也可以,完全依据自己喜好和水平.

对于我这种菜鸟,就直接选择Nginx得了.毕竟,我编写代码的水平还不足以达到讨论哪个代理优秀的程度,更不用说自己写代理了,这点自知之明我还是有的.

cgi/fastcgi 通讯接口

web server接收到前端请求之后,需要将这些请求的内容分发给具体的处理程序进行数据处理。与前端和后台之间的通讯协议相似,此处两者之间也需要定义双方的通讯协议。毕竟,web server种类那么多,后台处理程序的种类也那么多,不统一交流暗号,怎么进行交互呢。

cgi就是早期的双方交互协议,称之为通用网关接口。 web server接收到前端请求之后,按照cgi的规则将数据进行整理后发送给后台处理程序,后台处理程序接受到数据之后,按照cgi的规则进行解析/处理,然后再次按照cgi规则将处理好的数据返回给web server,完成交互.

当然,目前来看cgi存在很多不足,因此出现了fastcgi等改进版,这就需要我们在web server和后台处理程序上分别配置通讯方式,使两者统一,就可以完成双方的通讯了。例如,Apache配置为fastCGI模式,php安装插件如php-fpm或php-cgi,双方就可以通讯了。

这种配置过程可能很复杂,除了知道这些知识之外,还要考虑服务器的系统(windows or linux等)是否支持某插件安装等。 如何配置就不在本记录讨论范围了,这里只要知道需要配置这些东西和为什么需要配置这些东西就可以了。

这里可以提一下python这个语言,因为其不像PHP一样,它不支持fastcgi接口,而是支持wsgi接口。 因此,我们需要一个中间工具,如flup一边接受来自web server的fastcgi格式的数据,另一边通过wsgi与python处理程序进行交互,达到交互效果。

平台/引擎/运行环境

在编程语言发展初期,几乎每个功能都需要重新编码实现,相同的工作在不同的人手中重复着同样的事情,并且只有高级开发人员能够掌握高深的编码知识.

慢慢的,大家意识到这一点,随之开发人员将编码中核心部分和经常重复利用的部分抽离出来,做成一个个模块/库等形式,最终封装成一个个开发平台.例如前面提到的node.js,以及经常见到的.net等.

开发平台中集成了大量核心或者经常被用到的功能,不需要新的开发人员重复开发,只需要安装开发平台,并在自己的代码中调用平台提供的功能即可.这也是为什么我们安装很多软件的时候,总是提醒我们安装.net平台,因为这些软件调用了.net平台中提供的功能.

开发平台在一定程度上强化了某些语言的功能,例如node.js.本来js语言适合于前端应用开发(此时js采用了浏览器内置的解释功能),node.js对js语言高效的解释效果取代了原有js解释器的工作,使js语言可以应对服务器端的需求,即node.js平台强化了js语言的功能.

当然,开发平台具备何种功能,与对应的语言并没有直接关系;开发平台利用何种语言编写,与对应的语言也没有直接关系.还是以node.js为例,其采用的是c++语言编写,并不是js语言,因此它才能强化js语言原来没有的功能.

类似开发平台还有移动端的CM.游戏开发类的各种引擎其实也可算作开发平台这种形式.

框架

服务器后台存在多种多样的框架.例如java的SSH/python的django、web.py等等. 框架将大量需要重复的编码工作实现在框架中,减少二次开发的复杂度,这点与平台有点类似。

框架与平台的不同在于: 框架实现了完成该功能的整体架构搭建,例如网站后台框架就实现了各种session会话处理等机制,只需开发人员在整体架构预留的自定义空隙添加个人代码,与框架互补形成完整的网站后台;

平台实现了具体细节处理代码的编写,并没有实现整体的功能,需要开发人员自己利用平台中提供的零件组装完整的功能.

平台就像一个大零件箱,里面有各种型号的小零件,是最基本的组件。
框架是一个大功能的骨架,可以借助某些平台提供的小零件进行开发。
框架中非公共部分,也就是网站个性化功能实现的部分,就是开发人员下一步需要自己实现的后台处理程序了。

框架往往和后台处理程序选择的语言相关,也就是说框架通常是针对某种语言而开发的,用于减轻该种语言开发网站的复杂度.

服务端后台程序

服务端后台程序就是对前端发起的具体请求进行个性化处理的最终场所。 例如,前端向后端发起登录要求,后台程序是否允许对方登录就完全看开发人员的心情了(–!)。

这部分内容往往需要访问服务端的数据库资料、配置文件、程序算法处理等工作,可以选择多种能够完成这类工作的编程语言完成这些功能。 例如常见的PHP/JSP/ASP/Python/Ruby等。

这部分也就是我们经常见到讨论最火热的部分,论不同语言之间的优劣。还是那句话,对一个白痴菜鸟而言,任何一个流行的语言的设计思路都可以碾压我大脑那一点点可怜的编程知识,因此,抓阄吧骚年,不要再纠结了。唯一的选择标准应该是该语言能否实现我们的需要,完全不需要考虑性能、复杂度(还没开始干就考虑安逸了?不客气的说,就算你选了一个最简单的语言,你都不知道它哪里简单!也就是说,它最大的优点你已经感受不到了,那种感觉,肯定很爽)

选了某种语言之后,就可以选择用哪种框架了.

此时,问题出现了,还记得web服务器与后台程序之间通讯用的cgi么?
当我们选择了web服务器工具和后台开发语言之后,突然发现这两者可能不支持统一的通讯协议!
例如,web服务器只提供cgi插件,而后台开发语言不支持cgi.
咋办?

以python为例,支持wsgi,因此我们需要给python一个翻译,像flup这种工具/插件什么的,可以将web服务器的cgi格式与python的wsgi格式进行互相转换,达到通讯的目的.

开发工具 (编辑软件/IDE)

所谓开发工具,就是适合于某种开发语言的编辑/管理等方面的工具软件。例如,我们编写文本文档常用notepad、ue、sublime text等,我们做幻灯片可能会用ppt、Keynote等。这就是适合该种“语言”的开发工具。

以VS/Eclipse为例,他们风格方面存在区别,但都属于IDE(Integrated Development Environment,集成开发环境),也就是这一个软件中集成了编辑功能、编译功能、文件管理功能、项目管理功能,甚至集成了很多插件、模板等内容。拥有这种IDE环境,基本不需要额外的工具,即可完成整个开发过程。

当然IDE集成具有便利性也就存在自身的缺点,例如IDE软件自身体型庞大,一个VS软件动辄几G大小;IDE对于新手而言存在大量用不到的功能,或者出现莫名其妙的问题后新手也摸不着头脑. 这里不深入分析其优缺点,仅仅使大家了解什么是IDE即可,至于如何选择,这里就不管啦.

数据库

每一个网站上面可能含有大量的数据内容,包括文字、图片、多媒体等,需要按照一定的格式存储在一个地方,在我们通过网页访问这些内容时,可以快速的调用。

数据库就实现了这种功能,我们可以把一堆乱七八糟的东西按照设计好的规则扔进数据库,然后根据需要读写就可以了。

数据库种类很多,有Oracle、SqlServer、MySQL、DB2等,当然到底用不用数据库软件也要看开发人员的心情,你非要新建一个文件夹,把各种东西存在里面管理,谁也管不着。

选了数据库之后,这里又出现同样的问题,如何通讯。 我们知道,数据库是通过后台的程序进行操作的,那么,我们的后台程序如何操作数据库呢,这两个东西直接语言互通么?

这里就要引出下一节的SQL语言概念了。

SQL

SQL语言是专门用来解决各种不同的编程语言和不同的数据库之间进行通讯的结构化查询语言.

任何编程语言都可使用SQL语言来操作任何支持SQL语言的数据库. 也就是无论使用c/java还是python,只要使用”select”这一SQL语言保留字,就可以从指定的数据库中筛选数据.具体SQL语言怎么写,自己去查书了.

当然,这种便利性需要两方面的支持,第一是编程语言提供SQL支持,第二是数据库支持. 庆幸的是,如今绝大部分的编程语言和数据库都很好的支持了SQL语言.

为了进一步使数据库的操作变得简单,不同的语言又存在更便利的封装.例如JDBC/hibernate等,为java语言操作数据库提供了更便捷的API和框架支持. 使开发者更加傻瓜式的不需要深入了解数据库原理,就可以轻松的利用数据库管理数据.

服务器

最后说一句,什么是服务器,整天听到这东西,究竟是什么。答:它就是一台外表不同的计算机。整体结构和家用计算机基本一样,只是根据服务器需求的不同,多配个网口、强化一下CPU等等。

如果对服务器性能要求不高,随便一台家用计算机都可以当做服务器使用,只要计算机上安装了以上提到的这一堆服务器端需要的架构,接入网络能被访问,就可以称作是一台服务器。

安装了web server程序的就是web server服务器,安装了Oracle的就是数据库服务器,安装了应用软件的就是应用服务器,安装了杀毒软件、防火墙等的就是安全服务器,只是个名字而已。

服务器的位置可以在你家中、可以在机房、也可以是网络上的计算机(虚拟主机)。

web services

这东西不是一个单独的软件,而是一个整体的服务系统。

从名字可以了解到,这是通过web网络来实现用户服务的一套系统。

例如,邮件系统web services,就需要实现用户通过该系统可以收发邮件处理邮件内容等功能,这一系列功能需要web server、应用服务器、数据库服务器、安全服务器构成完整的功能架构来支撑功能的实现。

因此,web services是一个较大的应用角度的服务概念,而不是单纯的技术角度的概念。

最后贴上网站整体概念图:

《深入浅出前端入门介绍》
其中,红色部分是需要我们去学习掌握的语言,需要利用这些语言实现网站前后台功能;蓝色部分是我们可以利用的辅助工具、软件架构,只需要了解用法,进行适当配置,使其在合适的位置发挥功能即可。

当然,本文和上图并没有列出全部语言、框架等知识,未列出的知识点请自行定位其用途~

好吧,至此,我需要了解的内容也差不多了,也不知道哪些对哪些错。

如果你看到这篇内容,一定要抱着怀疑的态度去理解,看到你认为可以的部分,一定要告诉我,很可能你就是对的~

如果这篇文字对你有帮助,别忘了给我说一下,让我虚荣一下~

接下来,我就要开始用实践去验证啦。 如果有可能,我再做实践的记录,哈哈~

    原文作者:SQL
    原文地址: https://juejin.im/entry/596f7db3f265da6c317dd7ef
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞