차이점 : 프론트엔드와 백엔드가 분리되지 않은 경우 프론트엔드 페이지에 보이는 효과는 백엔드에서 제어하고, 백엔드는 페이지를 렌더링하거나 리다이렉트 즉 백엔드를 수행한다. -end는 프런트엔드의 디스플레이를 제어해야 하며 프런트엔드와 백엔드 간의 결합도가 매우 높습니다. 프런트엔드와 백엔드를 분리하면 백엔드는 프런트엔드에 필요한 데이터만 반환하고 더 이상 HTML 페이지를 렌더링하지 않으며 더 이상 프런트엔드 간의 결합을 제어하지 않습니다. -엔드와 백엔드는 상대적으로 낮습니다.
이 기사의 운영 환경: windows10 시스템, thinkpad t480 컴퓨터.
관련 추천: "프로그래밍 영상"
1. 프론트엔드와 백엔드 분리의 개념
1. 프론트엔드와 백엔드 분리
(JSP | HTML)
페이지를 볼 수 없습니다. 프런트엔드는 백엔드에서 제공하는 REST
스타일 인터페이스를 호출합니다. 프런트엔드는 페이지 (html|jsp) 작성에 중점을 둡니다. code> 및 렌더링 <code>(JS|CSS|다양한 프런트엔드 프레임워크)
; 백엔드는 코드 작성에만 집중하면 됩니다. (JSP | HTML)
,后端给前端提供接口,前端调用后端提供的 REST
风格接口就行,前端专注写页面(html|jsp)
和渲染(JS|CSS|各种前端框架)
;后端专注写代码就行。
1、软件架构模式
最熟悉MVC
设计模式,Model—View-Controller
模型-视图-控制器
(请求-Request)
,这个网址跑到哪里去了呢?就去调用接口(REST风格)
,这个接口其实就是访问后端的一段代码(方法),后端有很多方法。177.25.26.7/idp/user/login
,这里面的idp
就表示一user
表示一个类,login
表示具体要调用的那个方法,你一旦回车,就直接调用了后端这个方法,后端这个方法就去数据库(MySQL|Oracle|其他)
取数据,数据库表中每一行数据就表示一个对象,也就是一个JavaBean
,最终用pojo
方式存到集合框架 (List|Map|Set|等)
中,方法把这个集合返回,那么调用这个接口的结果就是会响(Response)
给你一个结果集,前端就拿到了这个数据,然后通过页面(html|Jsp)
展现出来,这个用户看到的就是View
层做的事情。2、前后端分离的原因
在以前,听说 TDD (Test-driven development,测试驱动开发)
可以改善代码的质量,我们便实施了 TDD
;接着,听说 BDD (Behavior-driven development,行为驱动开发)
可以交付符合业务需求的软件,我们便实施了 BDD;后来,听说 DDD (Domain-driven design,领域驱动设计)
可以分离业务代码与基础代码,我们便实施了 DDD
。今天,听说了前后端分离很流行,于是我们就实施了前后端分离——这就是传说中的 HDD(Hype-driven Development,热闹驱动开发)
。
过程: TDD -》 BDD -》 DDD =》 HDD
3、前后端分离的优点
前后端分离则可以很好的解决前后端分工不均的问题,将更多的交互逻辑分配给前端来处理,而后端则可以专注于其本职工作,比如提供API
接口,进行权限控制以及进行运算工作。而前端开发人员则可以利用nodejs
来搭建自己的本地服务器,直接在本地开发,然后通过一些插件来将api
백그라운드는 데이터를 제공하고, 프론트엔드는 표시를 담당합니다
Model—View -Controller
Model-View-Controller (요청)
을 입력하면 이 URL은 어디로 가나요? 인터페이스(REST 스타일)
를 호출하면 됩니다. 이 인터페이스는 실제로 백엔드에 액세스하는 코드(메서드)입니다. 어떤 방법에 액세스하는지 어떻게 확인하나요? 인터페이스는 다음과 같이 정의됩니다. 예: 177.25.26.7/idp/user/login
, 여기서 idp
는
서비스(프로젝트), user를 나타냅니다.
는 클래스를 나타내고 login
은 호출할 특정 메소드를 나타냅니다. Enter를 누르면 백엔드 메소드가 직접 호출되고 백엔드 메소드는 데이터베이스(MySQL| Oracle|Others)
데이터를 가져옵니다. 데이터베이스 테이블의 각 데이터 행은 개체, 즉 JavaBean
을 나타내며 마지막으로 pojo
메서드를 사용합니다. 컬렉션 프레임워크 (List|Map|Set|, etc.)
에 추가하고 메서드는 이 컬렉션을 반환합니다. 그러면 이 인터페이스를 호출한 결과는 (Response)
가 됩니다. 결과 집합에서 프런트 엔드는 이 데이터를 가져와 (html|Jsp)
페이지를 통해 표시합니다. 사용자에게 표시되는 것은 View
레이어입니다. 하다.
2. 프론트엔드와 백엔드를 분리하는 이유 예전에는 TDD(Test-driven development, 테스트 주도 개발)
를 개선할 수 있다고 들었습니다. 코드의 품질이 좋아서 구현했습니다TDD 그러다가 BDD(행동 중심 개발, 행동 중심 개발)
가 비즈니스 요구 사항을 충족하는 소프트웨어를 제공할 수 있다고 들었습니다. , 그래서 BDD를 구현했는데, 나중에 DDD(Domain-driven design, domain-driven design)
가 비즈니스 코드와 기본 코드를 분리할 수 있다고 해서 DDD
를 구현했습니다. 오늘 프론트엔드와 백엔드 분리가 많이 유행한다고 해서 프론트엔드와 백엔드 분리를 구현했는데, 이것이 바로 전설적인 HDD(Hype-driven Development)
입니다.
TDD -》 BDD -》 DDD =》 HDD
🎜🎜🎜🎜3. 프론트엔드와 백엔드 분리의 장점 🎜🎜🎜🎜프런트엔드와 프론트 분리 -end는 프론트엔드와 리어엔드 간의 업무 분담을 해결할 수 있으며, 불균일한 문제를 해결하기 위해 프런트엔드에 더 많은 상호작용 로직을 할당하여 처리하고, 백엔드는 를 제공하는 등 자체 작업에 집중할 수 있습니다. API 인터페이스, 권한 제어 및 계산 수행. 프런트엔드 개발자는 nodejs
를 사용하여 자체 로컬 서버를 구축하고 로컬에서 직접 개발한 다음 일부 플러그인을 통해 api
요청을 백그라운드로 전달할 수 있습니다. 온라인 시나리오를 완전히 시뮬레이션하고 이를 백엔드에서 분리합니다. 프런트 엔드는 사용자와 상호 작용하는 전체 프로세스를 독립적으로 완료할 수 있으며, 둘 다 서로 의존하지 않고 동시에 작업을 시작할 수 있으며 개발 효율성이 더 빠르고 노동 분업이 상대적으로 균형을 이루고 있습니다. 🎜🎜🎜🎜장점을 정리하면 🎜🎜🎜🎜🎜개발 효율성 향상 🎜🎜복잡하고 변화하는 프론트엔드 요구사항 완벽 대응 🎜🎜코드 유지관리성 향상🎜🎜🎜🎜🎜 2. 프론트엔드와 프론트엔드의 차이점 백엔드 분리와 프론트엔드와 프론트엔드 비분리 🎜🎜🎜🎜🎜🎜1. 프론트엔드와 백엔드가 분리되지 않습니다🎜🎜🎜앱
에 연결된 경우 앱
은 HTML웹 페이지이지만 데이터 자체이므로 웹 페이지를 반환하기 위한 백엔드의 원래 인터페이스는 <code>에 연결하기 위해 더 이상 프런트엔드 <code>앱
애플리케이션에 적용할 수 없습니다. >App 백엔드, 또 다른 인터페이스를 개발해야 합니다. App
时,App
可能并不需要后端返回一个HTML
网页,而仅仅是数据本身,所以后端原本返回网页的接口不再适用于前端App
应用,为了对接App
后端还需再开发一套接口。
2、前后端分离
HTML
页面,不再控制前端的效果。至于前端用户看到什么效果,从后端请求的数据如何加载到前端中,都由前端自己决定,网页有网页的处理方式,App
有App
的处理方式,但无论哪种前端,所需的数据基本相同,后端仅需开发一套逻辑对外提供数据即可。API
프론트 분리 애플리케이션 모드에서- end 및 front-end, back-end는 front-end의 내용만 반환합니다. 필요한 데이터는 더 이상 렌더링되지 않으며, HTML
페이지는 더 이상 렌더링되지 않으며, front-end 효과는 더 이상 제어되지 않습니다. . 프런트엔드 사용자가 어떤 효과를 보게 되는지, 백엔드에서 요청한 데이터가 어떻게 프런트엔드에 로드되는지는 웹페이지 자체에 달려 있으며, App은 자체적으로 처리합니다.
에는 앱
처리 방법이 있지만 어떤 프런트엔드에 관계없이 필요한 데이터는 기본적으로 동일하며 백엔드는 데이터를 제공하는 로직 세트만 개발하면 됩니다. 외부 세계.
API
라고 부릅니다. 프론트엔드는 이를 통해 데이터를 추가, 삭제, 수정 및 확인합니다. 인터페이스에 액세스 중입니다. 🎜🎜🎜더 많은 관련 글을 읽고 싶으시면 🎜PHP 중국어 홈페이지🎜를 방문해 주세요! ! 🎜위 내용은 프런트엔드와 백엔드 분리와 비분리의 차이점은 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!