【前端经典面试题】前后端分离(说一说你理解的前后端分离?)

前言:昨晚面试遇到了这个问题,既然遇到了,找些资料来一起做个总结吧。

1.对前后端分离的误解
  在回答这个问题的时候不要钻到某个具体的技术 ,或者某个具体的框架上面→比如ajax异步请求、vue或react等组件化的开发框架、再或者rest接口规范、API接口数据约定等。从某个具体的技术切入来回答对前后端分离的理解本身就是一种局限的看法,所以在回答这个问题的时候应该从以下几个方面展开。

2.为什么要分离?
  在以往的很长一段时间里,后端开发才是开发团队里的核心,前端开发往往仅由一小撮人甚至交给后端人员兼任。比如JSP开发,大部分是前后端高耦合的,前后端代码放在一起写,各种繁琐的套模板。这种开发方式在以前互联网服务不那么繁荣,web化趋势还不那么明显的年代发挥着巨大作用。随着各种社会服务的信息化程度加深,前端需要展示的内容越来越复杂(比如淘宝页面),JSP这种套模板的技术(仅仅依靠html、css、js、jq等技术的堆积来完成一个复杂的页面展示也变得非常繁杂)再也无法高效的开发。究其本质原因:前端开发没有像后端开发那样实现工程化、模块化、可复用化的思想。所以就会出现前后端开发不协调、效率低、扯皮的问题,这很不利于项目开发。因此项目管理者就想办法来解决这种问题,如何解决?→解耦。在软件领域,任何复杂的问题面前,高内聚、低耦合这种原则几乎总是能见效。所以前后端分离开发出现了,把前端开发的责任从后端开发人员身上拿掉,给前端开发工程师一个单独的岗位和责任领域,将前端也工程化、模块化、项目化。这才是前后端分离开发最开始的来源。这些与vue、react框架没有什么关系,它们充其量只是一种具体实现方式而已。从本质上来看,前后端分离并不是一个技术问题,而是一个工程化考量和项目管理的问题。

3.什么是前后端分离?
  在学习前端开发的时候,会发现前端开发的知识非常琐碎,前端往往是靠东平西凑(面向复制粘贴变成)来试图完成页面效果,开发过程没有java后端开发有逻辑,代码也很难管理。后端开发有各种各样的工具类、jar包、maven依赖、spring框架等,具有工程化模块化思维,可以满足长期演进和迭代的目标。而前端那时候并没有,所以vue.js和react.js等这些前端框架的出现,它们从本质上打破了以前前端开发的游戏规则,这就是前端开发组件化框架(也叫前端开发工程化框架)。这些框架出现后,前端开发也开始像后端一样,遵循一套体系来进行约束性的开发,越来越工程化、组件化、迭代化,变得有章可循。前后端分离核心思想是前端HTML页面通过AJAX调用后端的RESTFUL API接口并使用JSON数据进行交互。

4.如何做到前后端分离?
  从软件开发的四大步说起:设计、开发、测试、部署,真正的前后端分离需要渗透到以上的每一步中。
第一阶段:设计阶段。设计阶段的第一个层面是系统设计,后端系统设计包括后端架构:数据库、中间件、缓存等架构的设计,主要是考虑性能、容量、扩展性、可维护性。前端也应该如此,尤其是当一个网站页面多、复杂的时候,前端架构就也需要做好充分的规划和准备,以满足长期可演进、可迭代的目标。设计阶段的第二个层面是接口设计,前后端交互是通过接口来实现的,所以model层面上的接口约定也就极其重要,包括:接口的请求方式、数据类型、返回数据格式等。接口设计一定要评审到位,避免前后端开发人员因为某个没有约定好的接口扯来扯去。
第二阶段:开发阶段。前后端开发人员按照先前约定好的接口独立开发,互相透明(一旦出现扯皮现象,那就不算是严格独立的前后端开发,因为必定会有一方需要被迫妥协,去修改代码,这就算是还未完全实现解耦)。前端开发用来测试的数据都是从mock中模拟出来的,并不是从后端拿的;而后端开发仅提供一套接口,按照先前提供的评审好的接口约定来提供数据,这一套接口可以提供给很多的前端使用,比如web网页、h5页面、app、微信小程序等。
第三阶段:测试阶段。要保证前后端独立可测试,前端测试包括:页面、跳转、展示、输入、传参、响应等;后端则包括:数据接口的提供、数据格式、校验、异常、数据一致性、权限问题等。
第四阶段:部署阶段。要保证前后端独立可部署。(JSP时代前端html页面、css样式、js效果等都是由后台驱动,即前端都是塞到后端中,然后项目部署。当前端人员需要修改、发版本的时候就需要去求着后端人员帮忙)。前后端分离之后,就不再这样了,前后端发布上线可以完全独立,互相透明。

5.不要盲目使用该技术
  前后端分离确实是很合适复杂项目。但是不能为了做前后端分离而做前后端分离。一个完全的前后端分离需要相当的人力成本、开发成本、工具成本、部署成本等。所以小项目小团队就不合适这种前后端开发,一旦某一点做的不彻底,它就会带来很多负担,所以并不是所有的项目都适合前后端分离。

原文地址:https://www.cnblogs.com/shijianblog/p/12579410.html

时间: 2024-08-25 06:24:54

【前端经典面试题】前后端分离(说一说你理解的前后端分离?)的相关文章

Web前端经典面试试题(三)

一. 什么是Ajax??? 术语Ajax用来描述一组技术,它使浏览器可以为用户提供更为自然的浏览体验. Ajax它是"Asynchronous JavaScript + XML的简写" 定义Ajax: Ajax不是一种技术.实际上,它由几种蓬勃发展的技术以新的强大方式组合而成.Ajax包含: * 基于XHTML和CSS标准的表示: * 使用Document Object Model进行动态显示和交互: * 使用XMLHttpRequest与服务器进行异步通信: * 使用JavaScri

前端经典面试题:如何理解 HTML 语义化?

本文最初于 2018-09-21 发布于 知乎 ,后在 <重学前端> 专栏的学习中,重新复习整理,发布于 Github 上,并计划写一系列前端学习相关的文章.欢迎 star . HTML 语义化 简单来说,我们可以理解为:用正确的标签做正确的事情. 例如: 段落用 p 标签,标题用 h 系列标签,边栏用 aside 标签,主要内容用 main 标签.正确使用语义标签可以带来很多好处. 为什么要关注 HTML 语义化?(为什么要使用语义类标签?) 对人: 增强可读性,对开发者更友好,在没有 CS

前端经典面试题解密:JS的new关键字都干了什么?

前言 new关键字在实例化获取对象时都做了什么?是一道经常出现在前端面试时的问题.如果只是简单的了解new关键字是实例化构造函数获取对象,是万万不能够的.更深入的层级发生了什么呢?同时面试官想从这道题里面考察什么呢?下面胡哥为各位小伙伴一一来解密. 一.new关键字 new关键字的作用:通过new关键字实例化构造函数,获取对象.说一千道一万,不如来段代码看一看 // 定义构造函数 function Person (name, age) { this.name = name this.age =

微信牛牛平台日租搭建技巧 web前端经典面试题如何应对

一.javascript 基础(es5) 1.原型:这里可以谈很多,只要围绕 [[ prototype ]] 谈,都没啥问题2.闭包:牵扯作用域,可以两者联系起来一起谈3.作用域:词法作用域,动态作用域(微信牛牛平台日租搭建Q-2189563389 代码<?13182926751>)4.this:不同情况的调用,this 指向分别如何.顺带可以提一下 es6 中箭头函数没有 this, arguments, super 等,这些只依赖包含箭头函数最接近的函数5.call,apply,bind

前端经典面试题-代码

1.检测变量类型. // 此方法不仅可检测出6种基本数据类型,还能检测出Array.Function Object.prototype.toString.call(Array) // ['Object','Array'] 2.去除字符串中的空格,可使用trim()方法或正则表达式. // trim()用于去除字符串左右两端的所有空格 // trimLeft().trimRight()用于去除字符串左边和右边的空格 ' today is Monday '.trim() // "today is M

前端经典面试题

1.请说出==和===的区别? 答:== 判断内容是否相等 不比较类型 console.log (1 == "1") ;  true ===判断内容相等  且类型也相等 console.log (1 === "1") ;  false 2.行级元素有哪些?块级元素有哪些?行级元素如何转换成块级元素? 块级元素:div, dl, form, h1, h2, h3, h4, h5, h6, hr, p, ul, table 行内元素:br, em, i, img, in

Linux下C语言的几道经典面试题

本篇文章整理了几道Linux下C语言的经典面试题,相信对大家更好的理解Linux下的C语言会有很大的帮助,欢迎大家探讨指正. 1.如果在Linux下使用GCC编译器执行下列程序,输出结果是什么? 答案如下: 2.C语言程序不使用任何条件运算符,打印出十次"Hello"? 答案如下: 或是: 3.如果在Linux下使用GCC编译器执行下列程序,输出结果是什么? 答案如下: 4.如果在Linux下使用GCC编译器执行下列程序,输出结果是什么? 答案如下: 5.如果在Linux下使用GCC编

前后端分离(二)淘宝基于NODEJS的前后端分离

FRONT-END SKILLS 中间件定制平台 "中间件定制平台"项目中用到的SKILLS 前端工程 1,纯静态的前台工程,不依赖web server,可独立工程.独立开发 2.开发过程使用JSON file/MockJS,通过配置切换Angular Service数据源 12345 window.__service.factory('templateRES',function($resource) {var url = framework.getFinalURL('api/temp

【web前端面试题整理07】我不理解表现与数据分离。。。(转)

拜师传说 今天老夫拜师了,老夫有幸认识一个JS高手,在此推荐其博客,悄悄告诉你,我拜他为师了,他承诺我只收我一个男弟子..... 师尊刚注册的账号,现在博客数量还不多,但是后面点会有干货哦,值得期待. http://www.cnblogs.com/aaronjs/ 前言 上周回到了成都,这周就准备找工作了,对成都的聚美优品其实比较有好感的,所以昨天就先去 面试了,感觉技术面试的还不错啦,结果最后HR说经理不在,让我等经理反馈. 我当时相信了,但是回来想想感觉可能失败了,但是我不知道哪里出了问题.