本章将展示如何初始化Angular、Spring Boot,并使用二者相结合的方式输出我们熟悉的Hello World! # 前后台分离 在正式开始前先了解下什么是前后端分离以及为什么要前后端分离,我们先看看日常生活中离不开的火车票相关系统: ![](https://img.kancloud.cn/0b/8e/0b8eb84f24a8594b5c76fb6334def270_784x562.png) 虽然我们还不太清楚应该用什么语言来开发自助购(取)票终端、自动闸机以及火车票人工售票终端,但我们可以确认的是:无论使用哪种语言进行开发,都离不开用户交互(v层)、数据转发(C层)以及逻辑处理(M层)。CV层的功能由于交互界质、数据格式的不同会有所不同,但逻辑处理的思想却必然相同。比如购票时都需要校验车票的余额及完成支付。在前后端不分离的情况下,对于不同的终端我们可能需要在不同的语言下实现逻辑完全相同的功能,这无疑在增加了开发工作量的同时,也增大了出错的概率。更重要的是它将使得整套系统变得不可维护。所以我们急需一种方法来将逻辑相同的M层部分进行剥离,进而达到统一开发统一维护的目的。 ![](https://img.kancloud.cn/51/03/510335f0fba2c9c7d81ad6332fdde669_763x550.png) 我想这应该便是前后端分离的理由吧。 # WEB前后端分离 手机APP是前后端分离的最典型的应用,在使用某个APP前我们首先要来个软件市场来下载这个应用。这个下载到手机中的应用便是APP前端。不同的用户启动相同的app应用看到的界面`骨架`都是一样的,相同的用户在不同的时间启动该APP看到的界面骨架也是一样的。但应用展示的`内容`却会随着用户不同、时间不同而不尽相同。这是由于`骨架`存在于APP前端应用中,大家下载的都一样;而`内容`存在于APP后端服务中,不同用户、不同条件请求后端服务得到的内容是不相同的。我们把这个无论对谁都一样、固定不变的`骨架`称为前端应用,把提供`内容`的称为后端应用。前端与后端应用配置工作,最终向用户展现了APP功能,则称为前后端分离的应用架构。 WEB的前后端分与手机APP应用前后端分离基本一致。在前后端分离的WEB应用中,也需要先下载一个`前端应用`到用户的浏览器中,然后浏览器自动的运行这个`前端应用`。`前端应用`依自己的设定或用户的操作来请求WEB后端,后端按请求条件将特定的内容发送给`前端应用`。 ![](https://img.kancloud.cn/39/7e/397e61a1087b53873166fdc2ba69d0cb_706x541.png) 如图所示,浏览器在访问前后端分离的WEB应用时,首先请求并获取前端应用,然后前端应用再依次访问后端应用来获取对应的数据。前后端分离的WEB应用由于前后端可以直接的部署到不同的服务器上,所以可以将请求压力进行分离;由于前端应用在整个用户访问过程中仅请求一次,可以有效的降低冗余的数据的传输,近而减少用户请求次数、发送数据量,近一步的降低了服务器的压力;前后端分离后,前后端可以有不同的团队进行开发,系统被近一步地模块化,这有助于加快系统开发的速度;前后端分离要求在进行整体的系统开发前,规则好前后端的数据传输内容及格式,这使得开发团队在开发系统前必须对系统有个整体的认识,这将降低需求偏差。 ## 前端 在前后端分离的架构中,由于前端被近一步的模块化,使得我们在思索问题时,可以单独围绕该模块化的前端进行。摒弃一些后端复杂的业务逻辑后,我们有更多的脑容量来思索如何优化前端的问题。