【译】类比餐厅桌前就餐来解释前端和后端

简介: 如果你曾去过坐式餐厅,那么你就能理解web开发中前端和后端的区别。

如果你曾去过坐式餐厅,那么你就能理解web开发中前端和后端的区别。


在开始学习web开发,你会遇到一系列使你迷迷糊糊的概念。


数据库?服务器?客户端?服务端?AJAX?


幸运的是,你只需要了解HTML和CSS就可以去创建你的第一个站点了,它可以在你本地电脑上运行起来。但是,如果你想让你的站点能在线上运行起来,你需要了解下前端和后端的概念。


这里有个一般的想法:类比餐厅里面的服务员和厨房员工,前端和后端在你的站点上也是分工合作。在它们擅长的领域为站点服务。


对厨房员工来说,这意味着高效地制作出美味的食物。而服务员是与客户合作并创造良好客户体验方面的专家。


image.png


在web开发中,前端有时被称为客户端,而后端有时被称为服务端。


以下是不同技术在web应用程序的前端和后端中扮演的角色。为了能理解这篇教程,你需要掌握基本的HTML和CSS知识。


介绍前端


我们先来介绍下前端。前端代码创建用户界面,这是web访问者与代码交互的组织方式。在我们的举例中,类似餐厅的餐桌,这是个提供顾客和服务员可控交流的地方。所以,想象一下,网站就好比餐桌,比如http://mysite.com网站。


image.png


首先,用户(客户)需要些可以浏览的东西。在设定的餐厅的场景里面,很明显,对应的就是菜单了。这是一段静态的内容,应该让客户更加容易理解他们的选择。


从一个前端开发者的视觉来看,这类似于HTML和CSS。这两种语言允许你创建静态内容。


image.png


很明显,我们缺失了一样东西。你不可能对这菜单大喊大叫,期待发生些什么事情。你需要一种方式将你的订单传达给厨房人员。


这时候,服务员就登场了。服务员能帮助你了解菜单,回答你提出的任何问题,然后将你的订单交给厨房人员。服务员是互动方面的专家,明白你的需求。这正是Javascript的用武之地了。


作为一个开发者,Javascript将帮助你实现各种目标。它能够为用户带来更好的页面体验,帮助用户找到适合的信息。它也是一种能用来发送用户请求到后端的语言。换言之,当你写Javascript,它并不意味着你正在和后端发生了什么交互。(因为)Javascrip只是前端的一部分,可以不用和后端交互就能解决很多问题。


image.png


通过上面选择膳食的过程,我总结了(HTML/CSS和Javascrip 或者 菜单和服务员)两方面。当用户访问你的站点时,他们是带有目的的。你的代码必须帮助他们来达成目标。


  1. 用户能够很快的浏览并知道提供了什么(HTML/CSS)
  2. 用户能够很快的找到更多的帮助他们下决心的资源(Interactivity/JavaScript)
  3. 用户能够采取措施去接近自己的目标(User Request/ JavaScript)


介绍后端


你是否进过餐厅的厨房?至少可以说,那是个高压的地方。它与客户看到的环境完全不同。你甚至可以说,服务员和菜单提供了发生在厨房的事件的友好、完美的呈现(场景),而厨房(对客户来说)并没有呈现什么制作过程。


这好比web应用程序中的后端,或者运行在服务端的代码。类似厨房,服务器位于与用户界面不同的位置。它是使用不同语言进行交流的。


image.png


由于服务器实际上是远程的计算机,因此它比任何给定的计算机上面的浏览器具有更多的计算能力。就像厨房的员工,重点在于效率和生产力。


想象一下复杂的餐厅厨房。它必须在正确的时间和正确的位置将食材准备好。厨房的员工必须知道在特定的时间做他们的工作。他们必须重复地生产同等质量饭菜。相似的,服务器必须组织web应用程序中的数据,以便在适当的时候发送正确的内容。


image.png


服务器必须在接收到请求的时候,发送响应


在餐厅的场景中,响应可能是下面几种:


  • 佳肴
  • 厨房对您要吃的饭制作材料已被用光的反馈
  • 服务员并未对问题的跟进


不管是什么,回应是通过服务员传达给客户的。在web中,那就是Javascript代码了。


比较流行的后端语言和框架包括Ruby, Ruby on Rail, node.js, PHP和其他。


为什么我们需要前端和后端


一个比较实际的原因是,我们必须在客户端和服务端运行不同的代码。全部的现代浏览器只能理解HTML, CSS 和 JavaScript。所以,这是我们不能在浏览器上使用服务端语言的一个简单原因。


另一个原因是,我们允许每边都专注在他们擅长的地方去迎接挑战。你能想象下,如果厨师去当服务员,那将给客户的用户体验带来多大灾难。所以,我们很幸运,我们有一方专门从事用户界面,另一方专门研究服务器方面的挑战。


纯前端网站


想象一下,你拥有一家不在网上销售任何东西的企业。假设你拥有一家当地的花店。


在那种情景下,你不需要后端,因为那场景不复杂。你只需要前端,也许是一个表格,可以将任何查询指向你的电子邮箱。


换言之,一些网站只是用于浏览和采取某种浏览器不需要处理的行为。你不需要为每个类型的网站编写后端。你可以使用Github Pages将你的纯前端网站放到网上。



相关文章
|
13天前
|
存储 缓存 NoSQL
Redis多级缓存指南:从前端到后端全方位优化!
本文探讨了现代互联网应用中,多级缓存的重要性,特别是Redis在缓存中间件的角色。多级缓存能提升数据访问速度、系统稳定性和可扩展性,减少数据库压力,并允许灵活的缓存策略。浏览器本地内存缓存和磁盘缓存分别优化了短期数据和静态资源的存储,而服务端本地内存缓存和网络内存缓存(如Redis)则提供了高速访问和分布式系统的解决方案。服务器本地磁盘缓存因I/O性能瓶颈和复杂管理而不推荐用于缓存,强调了内存和网络缓存的优越性。
40 1
|
2天前
|
存储 安全 前端开发
PHP医院安全不良事件管理系统源码(AEMS)前端vue2+element+后端laravel8不良事件上报与闭环管理
医院不良事件上报与管理系统结合现代医院管理思路,遵照PDCA全面质量循环管理方法而设计,并在多家大型三甲医院成熟运用。系统从事件上报、基于人、机、料、法 、环的RCA分析、事件整改、效果评估实现了结构化、标准化、智能化的管理和分析,满足医院可追溯化、全流程闭环管理要求,满足等级医院评审细则要求,大力提高医院不良事件上报的效率,保障事件分析的准确性,促进医疗安全的提高,避免同类事件再次发生,改善整个医院医疗安全,从而实现医院安全医疗的目标。
19 3
|
7天前
|
移动开发 前端开发 JavaScript
前端和后端限制文件大小的具体实现方式
【5月更文挑战第3天】前端限制文件大小可使用HTML5的"accept"和"maxSize"属性或JavaScript的File API,后端则可通过判断文件字节大小、使用第三方库如Apache Commons FileUpload,或者在服务器框架如Flask、Spring中设置限制。Nginx也可作为反向代理设定上传限制,但可能影响用户体验。
16 3
|
8天前
|
JSON JavaScript Java
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
从前端Vue到后端Spring Boot:接收JSON数据的正确姿势
21 0
|
11天前
|
JavaScript 前端开发 数据安全/隐私保护
【好用】推荐10套后端管理系统前端模板
选择合适的模板可以大大提高开发效率,减少重复劳动,让开发者能够专注于业务逻辑的实现和功能的优化。开发者应根据项目的具体需求、团队的技术栈熟悉度以及产品的长远规划来选择最合适的模板,问题来了,这10款模板你更喜欢用哪个呢,欢迎交流。
|
11天前
|
存储 前端开发 JavaScript
从前端到后端:构建全栈应用的关键技术探究
在当今互联网时代,全栈开发已经成为了越来越多开发者的追求目标。本文将深入探讨从前端到后端构建全栈应用所需的关键技术,涵盖了前端框架选择、后端语言与框架、数据库设计以及前后端通信等方面,帮助读者全面了解全栈开发的必备技能和工具。
|
11天前
|
JSON 前端开发 Java
管理系统总结(前端:Vue-cli, 后端Jdbc连接mysql数据库,项目部署tomcat里)
管理系统总结(前端:Vue-cli, 后端Jdbc连接mysql数据库,项目部署tomcat里)
|
1天前
|
存储 监控 API
构建高效微服务架构:后端开发的现代实践
【5月更文挑战第9天】 在本文中,我们将深入探讨如何在后端开发中构建一个高效的微服务架构。通过分析不同的设计模式和最佳实践,我们将展示如何提升系统的可扩展性、弹性和维护性。我们还将讨论微服务架构在处理复杂业务逻辑和高并发场景下的优势。最后,我们将分享一些实用的工具和技术,以帮助开发者实现这一目标。
|
2天前
|
Kubernetes 持续交付 开发者
构建高效微服务架构:后端开发的新趋势
【5月更文挑战第8天】 随着现代软件开发的不断演进,微服务架构已成为众多企业解决复杂系统问题的首选方案。本文深入探讨了微服务架构的核心概念、设计原则以及实施策略,旨在为后端开发者提供一种清晰、高效的技术路径。通过分析微服务的优势与挑战,结合具体的应用实例,文章将展示如何通过容器化、服务网格和持续集成/持续部署(CI/CD)等先进技术手段,实现后端服务的高可用性、可扩展性和敏捷性。
|
2天前
|
消息中间件 监控 Java
构建高效微服务架构:后端开发的新趋势
【5月更文挑战第8天】随着现代软件开发的复杂性日益增加,传统的单体应用架构逐渐难以满足快速迭代和灵活部署的需求。微服务架构作为一种新的解决方案,以其模块化、独立性强和易于扩展的特点,正在成为后端开发领域的重要趋势。本文将深入探讨如何构建一个高效的微服务架构,并分析其对后端开发实践的影响。