内容简介:在开始学习web开发,你会遇到一系列使你迷迷糊糊的概念。数据库?服务器?客户端?服务端?AJAX?幸运的是,你只需要了解
如果你曾去过坐式餐厅,那么你就能理解web开发中前端和后端的区别。
在开始学习web开发,你会遇到一系列使你迷迷糊糊的概念。
数据库?服务器?客户端?服务端?AJAX?
幸运的是,你只需要了解 HTML和CSS
就可以去创建你的第一个站点了,它可以在你本地电脑上运行起来。但是,如果你想让你的站点能在线上运行起来,你需要了解下前端和后端的概念。
这里有个一般的想法:类比餐厅里面的服务员和厨房员工,前端和后端在你的站点上也是分工合作。在它们擅长的领域为站点服务。
对厨房员工来说,这意味着高效地制作出美味的食物。而服务员是与客户合作并创造良好客户体验方面的专家。
在web开发中,前端有时被称为客户端,而后端有时被称为服务端。
以下是不同技术在web应用程序的前端和后端中扮演的角色。为了能理解这篇教程,你需要掌握基本的 HTML和CSS
知识。
介绍前端
我们先来介绍下前端。前端代码创建 用户界面 ,这是web访问者与代码交互的组织方式。在我们的举例中,类似餐厅的餐桌,这是个提供顾客和服务员可控交流的地方。所以,想象一下,网站就好比餐桌,比如 http://mysite.com
网站。
首先,用户(客户)需要些可以浏览的东西。在设定的餐厅的场景里面,很明显,对应的就是菜单了。这是一段静态的内容,应该让客户更加容易理解他们的选择。
从一个前端开发者的视觉来看,这类似于 HTML和CSS
。这两种语言允许你创建静态内容。
很明显,我们缺失了一样东西。你不可能对这菜单大喊大叫,期待发生些什么事情。你需要一种方式将你的订单传达给厨房人员。
这时候,服务员就登场了。服务员能帮助你了解菜单,回答你提出的任何问题,然后将你的订单交给厨房人员。服务员是 互动方面 的专家,明白你的需求。这正是 Javascript
的用武之地了。
作为一个开发者, Javascript
将帮助你实现各种目标。它能够为用户带来更好的页面体验,帮助用户找到适合的信息。它也是一种能用来发送 用户请求 到后端的语言。换言之,当你写 Javascript
,它并不意味着你正在和后端发生了什么交互。(因为) Javascrip
只是前端的一部分,可以不用和后端交互就能解决很多问题。
通过上面选择膳食的过程,我总结了(HTML/CSS和Javascrip 或者 菜单和服务员)两方面。当用户访问你的站点时,他们是带有目的的。你的代码必须帮助他们来达成目标。
- 用户能够很快的浏览并知道提供了什么(HTML/CSS)
- 用户能够很快的找到更多的帮助他们下决心的资源(Interactivity/JavaScript)
- 用户能够采取措施去接近自己的目标(User Request/ JavaScript)
介绍后端
你是否进过餐厅的厨房?至少可以说,那是个高压的地方。它与客户看到的环境完全不同。你甚至可以说,服务员和菜单提供了发生在厨房的事件的友好、完美的呈现(场景),而厨房(对客户来说)并没有呈现什么制作过程。
这好比web应用程序中的后端,或者运行在服务端的代码。类似厨房, 服务器 位于与用户界面不同的位置。它是使用不同语言进行交流的。
由于服务器实际上是远程的 计算机 ,因此它比任何给定的计算机上面的浏览器具有更多的计算能力。就像厨房的员工,重点在于效率和生产力。
想象一下复杂的餐厅厨房。它必须在正确的时间和正确的位置将食材准备好。厨房的员工必须知道在特定的时间做他们的工作。他们必须重复地生产同等质量饭菜。相似的,服务器必须组织web应用程序中的数据,以便在适当的时候发送正确的内容。
服务器必须在接收到 请求 的时候,发送 响应 。
在餐厅的场景中,响应可能是下面几种:
- 佳肴
- 厨房对您要吃的饭制作材料已被用光的反馈
- 服务员并未对问题的跟进
不管是什么,回应是通过服务员传达给客户的。在web中,那就是Javascript代码了。
比较流行的后端语言和框架包括 Ruby, Ruby on Rail, node.js, PHP
和其他。
为什么我们需要前端和后端
一个比较实际的原因是,我们必须在客户端和服务端运行不同的代码。全部的现代浏览器只能理解 HTML, CSS 和 JavaScript
。所以,这是我们不能在浏览器上使用服务端语言的一个简单原因。
另一个原因是,我们允许每边都专注在他们擅长的地方去迎接挑战。你能想象下,如果厨师去当服务员,那将给客户的用户体验带来多大灾难。所以,我们很幸运,我们有一方专门从事用户界面,另一方专门研究服务器方面的挑战。
纯前端网站
想象一下,你拥有一家不在网上销售任何东西的企业。假设你拥有一家当地的花店。
在那种情景下,你不需要后端,因为那场景不复杂。你只需要前端,也许是一个表格,可以将任何查询指向你的电子邮箱。
换言之,一些网站只是用于浏览和采取某种浏览器不需要处理的行为。你不需要为每个类型的网站编写后端。你可以使用 Github Pages 将你的纯前端网站放到网上。
后话
翻译原文 Front End v. Back End Explained by Waiting Tables At A Restaurant
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 【Android多线程】哲学家就餐问题
- FACT:一款固件类比分析测试平台
- docker 里几个基本概念的简单类比
- ICML 最佳论文提名论文:理解词嵌入类比行为新方式
- 研学社 · 入门组 | 第七期:类比推理的最近邻、KNN和SVM算法
- 让机器帮你做行测题,UCLA朱松纯团队提出关系和类比视觉推理数据集RAVEN
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
xHTML+CSS+Dreamweaver CS3标准网站构建实例详解
李晓斌 / 第1版 (2007年9月1日) / 2007-9 / 49.9
《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》特别适合网站美工、网站前端架构师、网页设计爱好者、Wap页面设计师作为学习Web标准网页制作的入门图书,也适合Web标准网站高手作为案头随手查询手册,也适合作为美术院校和培训学校相关专业的培训教材。一起来看看 《xHTML+CSS+Dreamweaver CS3标准网站构建实例详解》 这本书的介绍吧!