本章将展示如何初始化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应用由于前后端可以直接的部署到不同的服务器上,所以可以将请求压力进行分离;由于前端应用在整个用户访问过程中仅请求一次,可以有效的降低冗余的数据的传输,近而减少用户请求次数、发送数据量,近一步的降低了服务器的压力;前后端分离后,前后端可以有不同的团队进行开发,系统被近一步地模块化,这有助于加快系统开发的速度;前后端分离要求在进行整体的系统开发前,规则好前后端的数据传输内容及格式,这使得开发团队在开发系统前必须对系统有个整体的认识,这将降低需求偏差。
## 前端
在前后端分离的架构中,由于前端被近一步的模块化,使得我们在思索问题时,可以单独围绕该模块化的前端进行。摒弃一些后端复杂的业务逻辑后,我们有更多的脑容量来思索如何优化前端的问题。
- 序言
- 第一章:Hello World
- 第一节:Angular准备工作
- 1 Node.js
- 2 npm
- 3 WebStorm
- 第二节:Hello Angular
- 第三节:Spring Boot准备工作
- 1 JDK
- 2 MAVEN
- 3 IDEA
- 第四节:Hello Spring Boot
- 1 Spring Initializr
- 2 Hello Spring Boot!
- 3 maven国内源配置
- 4 package与import
- 第五节:Hello Spring Boot + Angular
- 1 依赖注入【前】
- 2 HttpClient获取数据【前】
- 3 数据绑定【前】
- 4 回调函数【选学】
- 第二章 教师管理
- 第一节 数据库初始化
- 第二节 CRUD之R查数据
- 1 原型初始化【前】
- 2 连接数据库【后】
- 3 使用JDBC读取数据【后】
- 4 前后台对接
- 5 ng-if【前】
- 6 日期管道【前】
- 第三节 CRUD之C增数据
- 1 新建组件并映射路由【前】
- 2 模板驱动表单【前】
- 3 httpClient post请求【前】
- 4 保存数据【后】
- 5 组件间调用【前】
- 第四节 CRUD之U改数据
- 1 路由参数【前】
- 2 请求映射【后】
- 3 前后台对接【前】
- 4 更新数据【前】
- 5 更新某个教师【后】
- 6 路由器链接【前】
- 7 观察者模式【前】
- 第五节 CRUD之D删数据
- 1 绑定到用户输入事件【前】
- 2 删除某个教师【后】
- 第六节 代码重构
- 1 文件夹化【前】
- 2 优化交互体验【前】
- 3 相对与绝对地址【前】
- 第三章 班级管理
- 第一节 JPA初始化数据表
- 第二节 班级列表
- 1 新建模块【前】
- 2 初识单元测试【前】
- 3 初始化原型【前】
- 4 面向对象【前】
- 5 测试HTTP请求【前】
- 6 测试INPUT【前】
- 7 测试BUTTON【前】
- 8 @RequestParam【后】
- 9 Repository【后】
- 10 前后台对接【前】
- 第三节 新增班级
- 1 初始化【前】
- 2 响应式表单【前】
- 3 测试POST请求【前】
- 4 JPA插入数据【后】
- 5 单元测试【后】
- 6 惰性加载【前】
- 7 对接【前】
- 第四节 编辑班级
- 1 FormGroup【前】
- 2 x、[x]、{{x}}与(x)【前】
- 3 模拟路由服务【前】
- 4 测试间谍spy【前】
- 5 使用JPA更新数据【后】
- 6 分层开发【后】
- 7 前后台对接
- 8 深入imports【前】
- 9 深入exports【前】
- 第五节 选择教师组件
- 1 初始化【前】
- 2 动态数据绑定【前】
- 3 初识泛型
- 4 @Output()【前】
- 5 @Input()【前】
- 6 再识单元测试【前】
- 7 其它问题
- 第六节 删除班级
- 1 TDD【前】
- 2 TDD【后】
- 3 前后台对接
- 第四章 学生管理
- 第一节 引入Bootstrap【前】
- 第二节 NAV导航组件【前】
- 1 初始化
- 2 Bootstrap格式化
- 3 RouterLinkActive
- 第三节 footer组件【前】
- 第四节 欢迎界面【前】
- 第五节 新增学生
- 1 初始化【前】
- 2 选择班级组件【前】
- 3 复用选择组件【前】
- 4 完善功能【前】
- 5 MVC【前】
- 6 非NULL校验【后】
- 7 唯一性校验【后】
- 8 @PrePersist【后】
- 9 CM层开发【后】
- 10 集成测试
- 第六节 学生列表
- 1 分页【后】
- 2 HashMap与LinkedHashMap
- 3 初识综合查询【后】
- 4 综合查询进阶【后】
- 5 小试综合查询【后】
- 6 初始化【前】
- 7 M层【前】
- 8 单元测试与分页【前】
- 9 单选与多选【前】
- 10 集成测试
- 第七节 编辑学生
- 1 初始化【前】
- 2 嵌套组件测试【前】
- 3 功能开发【前】
- 4 JsonPath【后】
- 5 spyOn【后】
- 6 集成测试
- 7 @Input 异步传值【前】
- 8 值传递与引入传递
- 9 @PreUpdate【后】
- 10 表单验证【前】
- 第八节 删除学生
- 1 CSS选择器【前】
- 2 confirm【前】
- 3 功能开发与测试【后】
- 4 集成测试
- 5 定制提示框【前】
- 6 引入图标库【前】
- 第九节 集成测试
- 第五章 登录与注销
- 第一节:普通登录
- 1 原型【前】
- 2 功能设计【前】
- 3 功能设计【后】
- 4 应用登录组件【前】
- 5 注销【前】
- 6 保留登录状态【前】
- 第二节:你是谁
- 1 过滤器【后】
- 2 令牌机制【后】
- 3 装饰器模式【后】
- 4 拦截器【前】
- 5 RxJS操作符【前】
- 6 用户登录与注销【后】
- 7 个人中心【前】
- 8 拦截器【后】
- 9 集成测试
- 10 单例模式
- 第六章 课程管理
- 第一节 新增课程
- 1 初始化【前】
- 2 嵌套组件测试【前】
- 3 async管道【前】
- 4 优雅的测试【前】
- 5 功能开发【前】
- 6 实体监听器【后】
- 7 @ManyToMany【后】
- 8 集成测试【前】
- 9 异步验证器【前】
- 10 详解CORS【前】
- 第二节 课程列表
- 第三节 果断
- 1 初始化【前】
- 2 分页组件【前】
- 2 分页组件【前】
- 3 综合查询【前】
- 4 综合查询【后】
- 4 综合查询【后】
- 第节 班级列表
- 第节 教师列表
- 第节 编辑课程
- TODO返回机制【前】
- 4 弹出框组件【前】
- 5 多路由出口【前】
- 第节 删除课程
- 第七章 权限管理
- 第一节 AOP
- 总结
- 开发规范
- 备用