前端和后端之间的区别

迈不过友情╰ 2022-12-07 13:22 106阅读 0赞

There always been a lot of buzz especially among the people who are novice to the field of programming stuff about the two terms **Frontend** and **Backend.** Although these two are the most fundamental and basic terms in the design and development world, people more often fail to understand the fine line between the two and yeah we can’t solely blame people for this.

尤其是对于**前端**和**后端**这两个术语的编程领域的新手来说，总是有很多嗡嗡声**。** 尽管这两个是设计和开发领域中最基本和最基本的术语，但是人们经常不理解这两者之间的界限，是的，我们不能为此而完全责怪人们。

If you too are beginner in the field, or eager to understand the difference between front-end and back-end in a much simpler way than ever before, then stay tuned with us through the article and we can ensure you getting a better and a clearer understanding of the terminologies. So yes, without investing much of our time buzzing, let’s get straight to the point.

如果您也是该领域的初学者，或者希望以比以往任何时候都简单的方式来了解前端和后端之间的区别，请在本文中与我们保持联系，我们可以确保您获得更好的体验更清晰地理解术语。 因此，是的，无需花很多时间在嗡嗡声上，让我们直接说清楚。

![Difference between Frontend and Backend][]

[Image Source][]

[图片来源][Image Source]

The frontend is also termed as *client-side* and accounts for web design (*not really- we’ll sort this out later*), whereas the backend is considered to be *server-side.* No matter how much we say these two terms to be distinct and discrete, both are equally important and responsible for providing best experience and functionality to the web users. You can see them as two sides of the same coin, one is always incomplete without the other, they always need to be in conjugation to work effectively. In more common words, if frontend is the outer appearance of human body then backend is certainly the inner part which is not visible but supports the body in one way or the other.

前端也被称为*客户端* ，用于Web设计( *不是真的-我们稍后将对其进行分类* )，而后端被视为*服务器端。* 无论我们说这两个术语是不同的还是离散的，两者都是同等重要，并负责为Web用户提供最佳体验和功能。 您可以将它们视为同一枚硬币的两个侧面，一个总是没有另一个就不完整，它们总是需要共同作用才能有效地工作。 用更常见的话说，如果前端是人体的外观，那么后端当然是不可见的内部部件，而是以一种或另一种方式支撑人体的部件。

We hope the illustrations above have portrayed a rough image of the two terms in your mind. We now start by explaining these terms in detail for your better understanding followed by a comparative study for more clear instinct.

我们希望上面的插图在您的脑海中描绘出这两个术语的大致图像。 现在，我们先详细解释这些术语以使您更好地理解，然后再进行比较研究以更清楚地了解其本能。

### 什么是前端？ **(**What is Frontend?**)** ###

Frontend is everything a web user see when visiting any website from fonts, buttons to dropdowns, forms, images and menus. Also referred to as client-side and consist of everything that a user see and experiences while visiting a website. Everything you see on a website from texts and images to dropdown and animations comprises of  HTML, CSS and Javascript which are controlled and displayed the way they are by the browsers.

前端是网络用户从字体，按钮到下拉菜单，表单，图像和菜单访问任何网站时看到的一切。 也称为客户端，包括用户在访问网站时看到和体验的所有内容。 您在网站上看到的所有内容，包括文本，图像，下拉列表和动画，均包含HTML，CSS和Javascript，这些内容由浏览器控制和显示。

Suppose you have a business of say restaurants, now you want to create an awareness among the people regarding your restaurant, you beautifully design a website, upload savouring photos of your dishes, list your menu, give information on where you are located along with your contact is all frontend as people can now interact with your site to collect information about your business. But remember people are still not be able to post a comment/query or order food from you as there is no such technology used to store the information provided by the customers as their name, address, credit card details etc. To accomplish this too via your website, the backend development comes into the picture.

假设您经营一家餐馆，现在您想在人们之间对餐馆有一种认识，您可以设计一个精美的网站，上传美食照片，列出菜单，提供有关您所在位置以及您所在位置的信息联系人是所有前端，因为人们现在可以与您的网站进行交互以收集有关您的业务的信息。 但是请记住，人们仍然无法发表评论/查询或从您那里订购食物，因为没有用于存储客户提供的姓名，地址，信用卡详细信息等信息的技术。您的网站，后端开发就应运而生。

The basic three technologies HTML, CSS and JavaScript are all responsible for a user friendly interface of the website. They are used for the purpose given below:

HTML，CSS和JavaScript这三种基本技术均负责网站的用户友好界面。 它们用于以下目的：

**HTML:** This is the backbone and the basic required markup language to create the contents that can be displayed to the users by the browsers. This mark-up language is meant for writing basic texts and some functionalities to the website.

**HTML：**这是创建可以由浏览器显示给用户的内容的基础和基本的标记语言。 此标记语言用于向网站编写基本文本和某些功能。

**CSS:** This along with HTML is required for the styling of website so that the site looks pretty to its users. Subjects like font, color, graphics, etc. are taken cared by CSS scripts.

**CSS：**网站样式必须与HTML一起使用，以使网站对其用户看起来很漂亮。 CSS脚本负责处理字体，颜色，图形等主题。

**JavaScript:** This adds a more to the beauty of any website and is well known for providing good looking modal windows, dropdowns and contact forms.

**JavaScript：**这为任何网站增添了更多美感，并以提供美观的模态窗口，下拉菜单和联系表而闻名。

**Bootstrap:** This framework uses all three above mentioned technologies to make your website responsive. You can familiarize yourself with it in this [Bootstrap tutorial][].

**Bootstrap：**此框架使用上述所有三种技术来使您的网站具有响应能力。 您可以在此[Bootstrap教程中][Bootstrap tutorial]熟悉它。

### 前端和网页设计之间有一条细线 **(**There is a fine line between frontend and web designing**)** ###

It is important to quote here that frontend and web designing are no way the same. People more often take these two as a whole but there is a fine line that needs to be taken into consideration when talking of the two, let’s see how.

重要的是在这里引用前端和网页设计是不一样的。 人们更经常将这两个部分作为一个整体，但是在谈论这两个部分时，有一条细线需要考虑，让我们看看如何。

Though the frontend development is known for handling the visual aspects of any website that is being displayed to the users but it is not the same as web-design. Think it in the way that if these two were the same then why would market ever required frontend developers and web designers as two different professionals.

尽管前端开发以处理显示给用户的任何网站的视觉方面而闻名，但它与网页设计并不相同。 以这样的方式思考，如果这两个相同，那么为什么市场需要前端开发人员和网页设计师作为两个不同的专业人员。

A web designer is one who designs the layout and appearance of a website and decides the way it will be portrayed to the users. Whereas, the frontend developer is the one who brings this design to life, into an interactive website with the help of technologies discussed above.

网站设计师是设计网站的布局和外观并决定将其呈现给用户的方式的设计师。 而前端开发人员则是在上述技术的帮助下将这种设计付诸实践的一个交互式网站。

### 什么是后端？ **(**What is Backend?**)** ###

To understand this let’s go back to our example of restaurant business’s website, you have created a website showcasing your business now you want to add functionality that the customers should be able to order their food online. Now to accomplish this you will have to design your website in a way that it could be able to store the information provided by the customers and can interact with your customers as well. Here is the time when backend development comes into action, solution to all your needs to establish an interactive site.

为了理解这一点，让我们回到我们餐馆业务网站的示例中，您已经创建了一个展示您的业务的网站，现在您想要添加功能，使客户能够在线订购食物。 现在，要做到这一点，您将必须以一种可以存储客户提供的信息并且可以与您的客户互动的方式来设计您的网站。 现在是时候进行后端开发了，这是您建立交互式站点所需的所有解决方案。

Usually the websites without backend deployment are considered as static websites that can be used for the showcasing your business, while to make it interactive you are going to need the backend as well. A database is set behind the scene that is responsible for storing and retrieving the data as per the users need and request. The backend is equally responsible for a dynamic site as the frontend is.

通常，没有后端部署的网站被视为静态网站，可用于展示您的业务，而要使其互动，您也将需要后端。 在后台设置了一个数据库，该数据库负责根据用户的需要和要求存储和检索数据。 后端与前端同样负责动态站点。

The backend is also referred to as ‘server-side’, is the part of an interactive site which is not visible to the users or not visible to the client side. The backend is as we’ve discussed above is responsible for storing and retrieving data and supports the frontend or client-side for smooth functioning. In an interactive site, when a user stores information or fills out a form, the browser sends a request to the server asking for the required information, in response the information thus received from the server is interpreted by the browser and displayed to the user with the help of frontend. So yes, a website that remains the same throughout and is used for portraying some information only, do not need the involvement of the backend, on the other hand the sites which are interactive and changes its content in accordance with the database also deploys backend to work.

后端也称为“服务器端”，是交互式站点的一部分，对用户不可见或对客户端不可见。 正如我们上面讨论的那样，后端负责存储和检索数据，并支持前端或客户端以实现平稳运行。 在交互式站点中，当用户存储信息或填写表格时，浏览器向服务器发送请求所需信息的请求，作为响应，从服务器接收到的信息由浏览器解释并显示给用户前端的帮助。 因此，是的，一个网站始终保持不变，仅用于描述某些信息，不需要后端的参与，另一方面，交互性网站并根据数据库更改其内容的站点也可以将后端部署到工作。

We hope this has given a clear understating of the terms to our users. Let us quickly now see a brief comparison of the two, what are the similarities and what are the differences among frontend and the backend are mentioned in the table below.

我们希望这对我们的用户而言明显低估了这些条款。 现在让我们快速看一下两者的简要比较，下表中提到了前端和后端之间的相似之处和不同之处。

## 前端与后端–前端和后端之间的区别 **(**Frontend vs Backend – Difference between Frontend and Backend**)** ##

<table> 
 <tbody> 
  <tr> 
   <td><strong>Frontend</strong></td> 
   <td><strong>Backend</strong></td> 
  </tr> 
  <tr> 
   <td>Also referred to as Client-Side.</td> 
   <td>Also referred to as Server-Side.</td> 
  </tr> 
  <tr> 
   <td>This is what visibly available to users.</td> 
   <td>This is all that happens behind the scenes.</td> 
  </tr> 
  <tr> 
   <td>Users can experience and touch the contents.</td> 
   <td>Inner portion or brain of the website.</td> 
  </tr> 
  <tr> 
   <td>Cannot used to store and retrieve.</td> 
   <td>Is used to store and retrieve the information needed.</td> 
  </tr> 
  <tr> 
   <td>This is all portrayed by the browser.</td> 
   <td>Requests are processed and passed on to the browser for interpretation by the databases.</td> 
  </tr> 
  <tr> 
   <td>Developer works together with a web designer to provide better results.</td> 
   <td>Backend developer is sufficient for the task.</td> 
  </tr> 
  <tr> 
   <td>This includes design and testing.</td> 
   <td>This consist of development and fabrication.</td> 
  </tr> 
  <tr> 
   <td>HTML, CSS and JavaScript are the basic foundations of a frontend development.</td> 
   <td>The programming languages like Ruby, Python, Java, .Net, etc. are used for backend development.</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <strong>前端</strong> </td> 
   <td> <strong>后端</strong> </td> 
  </tr> 
  <tr> 
   <td> 也称为客户端。 </td> 
   <td> 也称为服务器端。 </td> 
  </tr> 
  <tr> 
   <td> 这是用户可见的内容。 </td> 
   <td> 这就是幕后发生的一切。 </td> 
  </tr> 
  <tr> 
   <td> 用户可以体验和触摸内容。 </td> 
   <td> 网站的内部或大脑。 </td> 
  </tr> 
  <tr> 
   <td> 无法用于存储和检索。 </td> 
   <td> 用于存储和检索所需的信息。 </td> 
  </tr> 
  <tr> 
   <td> 这都是浏览器所描绘的。 </td> 
   <td> 处理请求并将其传递给浏览器，以供数据库解释。 </td> 
  </tr> 
  <tr> 
   <td> 开发人员与网页设计师一起提供更好的结果。 </td> 
   <td> 后端开发人员足以完成任务。 </td> 
  </tr> 
  <tr> 
   <td> 这包括设计和测试。 </td> 
   <td> 这包括开发和制造。 </td> 
  </tr> 
  <tr> 
   <td> HTML，CSS和JavaScript是前端开发的基本基础。 </td> 
   <td> 诸如Ruby，Python，Java，.Net等的编程语言用于后端开发。 </td> 
  </tr> 
 </tbody> 
</table>

That is all about the topic. We intended to impart a knowledge to help our readers to understand difference between Frontend and Backend. We hope we were able to make you guys understand. Any queries and suggestions are always welcomed at our end.

这就是全部话题。 我们打算传授知识，以帮助我们的读者理解前端和后端之间的区别。 我们希望我们能够使你们理解。 如有任何疑问和建议，我们始终欢迎您。

> 翻译自: [https://www.thecrazyprogrammer.com/2018/07/difference-between-frontend-and-backend.html][https_www.thecrazyprogrammer.com_2018_07_difference-between-frontend-and-backend.html]

[Difference between Frontend and Backend]: /images/20221123/bd24941cb1f84076ab9faa87ee57f772.png
[Image Source]: https://www.konstantinfo.com/blog/frontend-and-backend-web-development-all-you-need-to-know/
[Bootstrap tutorial]: https://www.bitdegree.org/course/bootstrap-tutorial
[https_www.thecrazyprogrammer.com_2018_07_difference-between-frontend-and-backend.html]: https://www.thecrazyprogrammer.com/2018/07/difference-between-frontend-and-backend.html