WEB前端、后端的说明

原创

柳鲲鹏泰山 2022-02-04 09:22:30 ©著作权

©著作权归作者所有：来自51CTO博客作者柳鲲鹏泰山的原创作品，请联系作者获取转载授权，否则将追究法律责任

　　这个问题，吾其实认为很简单：

　　用户看到的部分，就是前端。主要指页面内容。

　　用户看不到的部分，就是后端。比如数据库、业务逻辑等。

　　这个说法是不是对的呢？吾上网搜索了一些说法，供大家参考：

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

前端：是网民在上网页时第一眼看到的页面或是分支点信息页面等。或者是页面中的图片、文字、框架分配、视频、语音等整体布局都是web的前端。
后端：是网民第一眼是看不到的，一般只有部分专业人员才能大致看到。像语言编写、创建方式、改写或优化网站的方式这些操作则为web的后端。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

1、网站前端

网站前端就是网站的页面设计或者是静态的网页设计，简单的说我们访问一个网站看到的所有页面网页上的内容和版式样式都属于网站前端，网站前端工作就是设计网站的静态页面，所谓的静态页面就是网站前端不包括后端，简单的例子说一下，静态页面就像一张报纸，上面有文字图片和内容，并排好版，之所以称之为静态是因为这些内容不能动态的改变，也就是所有人看到的静态页面都是一模一样的，没有任何区别，这是因为这个页面是静态的，不会改变。总之，网站前端就是指的网站的静态页面设计，网站前端工作使用的是html、css、js等技术设计网站页面的样式和排版布局，这就是网站前端。

2、网站后端

网站后端也叫网站后台技术或者动态网站技术，上面我们也说了静态页面的缺点就是不能动态的改变页面上的内容和实现一些代码逻辑，比如我们要实现用户的注册登录验证、或者购物结算等，这些都是要代码逻辑来实现的，还有我们需要一个后台来往我们的网页添加一些消息新闻通知等，因为不是每一个网站的使用者都懂前端技术来来改变页面内容，而且这样也太不方便了，所以需要网站后台来实现这些功能，这些东西都是需要网站后台技术来实现的。常见的网站后端开发语言有asp、asp.net、jsp、php等。同时网站后台技术还包括数据库如MySQL、sqlserver等，数据库是用来存储后台数据的。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

网站前端和后台的工作是完全不同的，前端的工作是设计静态页面，后台是结合数据库实现一些代码的逻辑如验证用户登录等，后台更加偏重与逻辑思维。

使用html、Javascript写的是Web前端，它不用向服务器(比如apache、nginx、tomcat等)交互在浏览器端就执行完了，比如使用Javascript弹出一个警告框的效果。

而php、Python等是后台语言，当通过浏览器向服务器发送访问php文件的请求时（比如：http://localhost:63342/php_basic/helloworld.php），由web服务器收到请求，发现是php代码则交给php解析器完成解析，然后发回给web服务器，最后返回给浏览器。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

一个追求任何场景下都美丽动人，

一个追求巨大压力下举重若轻。

但两者又必须密切分工合作，才能使得项目顺利进行。分工的核心在于在哪里渲染页面。不同的渲染位置决定了不同分工模式。

在服务器端渲染

这个模式有一个问题——不能实现部分更新。即使用户点了一个按钮，产生了很细微的数据变动，也需要后端重新渲染整个页面再将页面发往浏览器端。如果页面存在大量的静态的部分，这种方式无疑不是高效的。

同时，前端工程师们需要用模板定义展现形式，后端工程师们需要用模板输出数据。久而久之，模板就会越来越复杂，越来越不可维护。

在浏览器端渲染

浏览器端发送请求后从服务器端接受到了模板和 J S代码。浏览器执行接受到的 JS 代码，JS 代码会从服务器请求数据，并将数据填充到模板中。

利用运行在浏览器端的Javascript语言，前端工程师能够从后端服务器获取数据，进而按照业务逻辑渲染页面。这时候后端工程师只需要开发稳定的 API 提供数据就可以了。这种模式虽然依然是B/S模式，但开发的场景却和C/S模式比较相近。在浏览器端渲染的好处在于前端完全控制了模板，后端只需要开发相应的 API, 分工比较明确。并且支持部分页面更新。同时同一套后端服务可以同时支持不同的展示模式，比如同一套后端服务还可以支持移动开发。

当然啦，浏览器渲染也存在一些问题。其中最大的问题是对 SEO 不友好。搜索引擎的爬虫程序必须像浏览器一样执行 JS 代码才能获得页面的内容，从而提高了爬虫爬取页面的难度。

大前端模式

借助神器Node.js，前端工程师终于把磨爪伸进服务器了。Node.js是一个来自老毛子的高性能异步服务器。如果只是一个服务器，Node.js并不出奇。一般服务器需要提供一种编程语言的runtime，方便开发者进行开发。Node.js因为异步的关系选择了异步性能很好的Javascript，就是前端工程师经常在页面上写的那个Javascript。这时前端工程师们一看，呀，这玩意我会呀。因此利用Node.js，前端工程师不再局限在浏览器，可以在服务器写Javascript代码了。这时前端工程师可以按需要，选择在浏览器端或者服务器端完成渲染。这个模式我们可以称之为大前端模式。

大前端模式下，前端工程师有更大的灵活性进行开发，从而可以避免前面两种模式的弊端，发挥他们的长处。但是，世间无十全十美之事，大前端模式也有自己的弊端。前端工程师们被赋予了服务器写代码的能力，也就需要承担服务器编程的责任。能力越大责任也就越大嘛。在服务器写代码，前端工程师必须承担日志、安全和负载均衡等后端工程师才需要承担的责任。大前端攻城狮相当于把前端攻城狮和后端攻城狮两种物种的基因杂揉在一起创造出来的混元体，其稀有程度可想而知。这也就是现在精通Node.js程序员少的原因。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Tomcat是Application Server，Apache和Nginx则是Web Server，这两者有区别。

Web Server一般是完整实现了HTTP协议的服务器，负责接收用户的HTTP请求，然后响应请求，至于这么处理这个请求，就要交给Application Server去处理了，Application Server里面跑着像PHP，Python的脚本。Web Server和Application Server之间需要通过协议沟通，比如CGI、WSGI这类东西。虽然一些Application Server也能充当Web Server，但是它们对HTTP协议的实现并不完整，因此生产环境下不会这么用。

像node这种本身自带Web Server的，就不需要额外弄一个Web Server了。SSR的情况下，直接服务端渲染返回，这个理解起来应该不难。如果非SSR，后端返回一个页面，前端要加去载。至于前端资源要放哪，可以有很多选择，直接放在项目静态资源目录下，或者上传到CDN，或者在nginx下开一个静态目录存放都可以。

------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------