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

简介: 如果你曾去过坐式餐厅,那么你就能理解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将你的纯前端网站放到网上。



相关文章
|
2月前
|
存储 前端开发 安全
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
实现“永久登录”:针对蜻蜓Q系统的用户体验优化方案(前端uni-app+后端Laravel详解)-优雅草卓伊凡
183 5
|
6月前
|
JavaScript 前端开发 Java
制造业ERP源码,工厂ERP管理系统,前端框架:Vue,后端框架:SpringBoot
这是一套基于SpringBoot+Vue技术栈开发的ERP企业管理系统,采用Java语言与vscode工具。系统涵盖采购/销售、出入库、生产、品质管理等功能,整合客户与供应商数据,支持在线协同和业务全流程管控。同时提供主数据管理、权限控制、工作流审批、报表自定义及打印、在线报表开发和自定义表单功能,助力企业实现高效自动化管理,并通过UniAPP实现移动端支持,满足多场景应用需求。
602 1
|
7月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
465 70
|
6月前
|
存储 消息中间件 前端开发
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
校园圈子系统校园论坛小程序采用uni-app前端框架,支持多端运行,结合PHP后端(如ThinkPHP/Laravel),实现用户认证、社交关系管理、动态发布与实时聊天功能。前端通过组件化开发和uni.request与后端交互,后端提供RESTful API处理业务逻辑并存储数据于MySQL。同时引入Redis缓存热点数据,RabbitMQ处理异步任务,优化系统性能。核心功能包括JWT身份验证、好友系统、WebSocket实时聊天及活动管理,确保高效稳定的用户体验。
405 4
PHP后端与uni-app前端协同的校园圈子系统:校园社交场景的跨端开发实践
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
422 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
5月前
|
人工智能 监控 前端开发
AI工具:前端与后端的终极对决?谁将成为新时代的宠儿?
深入探讨AI工具对前端和后端开发的具体影响、各自的机遇与挑战,并分析未来开发者如何驾驭AI,实现能力跃迁。
257 0
|
8月前
|
前端开发 算法 NoSQL
前端uin后端php社交软件源码,快速构建属于你的交友平台
这是一款功能全面的社交软件解决方案,覆盖多种场景需求。支持即时通讯(一对一聊天、群聊、文件传输、语音/视频通话)、内容动态(发布、点赞、评论)以及红包模块(接入支付宝、微信等第三方支付)。系统采用前后端分离架构,前端基于 UniApp,后端使用 PHP 框架(如 Laravel/Symfony),配合 MySQL/Redis 和自建 Socket 服务实现高效实时通信。提供用户认证(JWT 集成)、智能匹配算法等功能,助力快速上线,显著节约开发成本。
227 1
前端uin后端php社交软件源码,快速构建属于你的交友平台
|
7月前
|
监控 前端开发 小程序
陪练,代练,护航,代打小程序源码/前端UNIAPP-VUE2.0开发 后端Thinkphp6管理/具备家政服务的综合型平台
这款APP通过技术创新,将代练、家政、娱乐社交等场景融合,打造“全能型生活服务生态圈”。以代练为切入点,提供模块化代码支持快速搭建平台,结合智能匹配与技能审核机制,拓展家政服务和商业管理功能。技术架构具备高安全性和扩展性,支持多业务复用,如押金冻结、录屏监控等功能跨领域应用。商业模式多元,包括交易抽成、增值服务及广告联名,同时设计跨领域积分体系提升用户粘性,实现生态共生与B端赋能。
678 12
|
9月前
|
监控 前端开发 Java
构建高效Java后端与前端交互的定时任务调度系统
通过以上步骤,我们构建了一个高效的Java后端与前端交互的定时任务调度系统。该系统使用Spring Boot作为后端框架,Quartz作为任务调度器,并通过前端界面实现用户交互。此系统可以应用于各种需要定时任务调度的业务场景,如数据同步、报告生成和系统监控等。
351 9
|
4月前
|
人工智能 Java API
后端开发必看:零代码实现存量服务改造成MCP服务
本文介绍如何通过 **Nacos** 和 **Higress** 实现存量 Spring Boot 服务的零代码改造,使其支持 MCP 协议,供 AI Agent 调用。全程无需修改业务代码,仅通过配置完成服务注册、协议转换与工具映射,显著降低改造成本,提升服务的可集成性与智能化能力。
1206 1

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
  • 2
    前端工程化演进之路:从手工作坊到AI驱动的智能化开发
  • 3
    Vue 3 + TypeScript 现代前端开发最佳实践(2025版指南)
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式