为什么要了解这个知识

因为笔者参与了学校的一个服务外包项目，我们选用的技术栈是springboot+vue的；又要考虑前后端分离，所谓适应时代的步伐。然而笔者是个菜鸡，所有笔者查看了一些博客，并将其进行总结。

那什么是前后端分离呢？

传统的web应用开发中，大多数将浏览器当做前后端的分界线。浏览器中为用户进行页面展示的部分称为前端。而将运行在服务器上，为前端提供业务逻辑和数据准备的所有代码称为后端。

前后端分离

前后端分离并不只是开发模式，而是web应用的一种架构模式。开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署。

简单来说，前后端分离就是把数据操作和显示分离出来，前端专注做数据显示（可通过文字，图片，或者图标等让数据形象直观的显示出来），后端专注于做数据的操作，前端把数据开放给后端，后端对数据进行修改，后端提供接口给前端调用，来开发对数据的操作。

前后端分离大概可以从四个方面来理解

1、交互形式
在前后端分离架构中后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。

2、代码组织方式
前后端分离代码组织方式有两种。

半分离：前后端共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少关心前端元素的输出情况，前端不能独立开发和测试，项目中缺乏前后端交互的测试用例。
分离：前后端代码库分离，前端代码中有可以进行mock测试（通过构造虚拟测试对象以简化测试环境的方法）的伪后端，能支持前端的独立开发和测试。而后端代码中除了功能实现外，还有着详细的测试用例，以保证API 的可用性。降低集成风险。

3、开发模式
前后端分离中，前端工程师只需要编写HTML、js、css等前端资源，然后通过http请求调用后端提供的服务即可。除了开发期的分离，在运行期前后端资源也会进行分离部署。
前后端分离之后。
开发流程：提出需求->设计接口约定数据->前后端并行开发->前后端集成->前端调整页面->集成成功->交互上线
前后端分离不仅仅是工程师的分工开发，更重要的意义在于实现了前后端的并行开发，简化了开发流程。

4、数据接口规范流程
在开发期间前后端共同商定好数据接口的交互形式和数据格式。然后实现前后端的并行开发，其中前端工程师在开发完成之后可以独自进行mock测试，而后端也可以使用接口测试平台进行接口测试，然后前后端一起进行功能联调并验证格式，最终进行自动化测试。
定制接口->前端开发、后端开发->连调->提测

总结

前后端分离并非只是前后端开发的分工，而是在开发期进行代码存放分离、前后端开发职责分离，前后端能独立进行开发测试；在运行期进行应用部署分离，前后端之间通过HTTP请求进行通讯。前后端分离的开发模式与传统模式相比，能为我们提升开发效率，增强代码可维护性，让我们有规划地打造一个前后端并重的精益开发团队，更好地应对越来越多复杂多变的web应用开发需求。

好处

为优质产品打造精英团队、提升开发效率、完美应对复杂多变的前端需求、增强代码可维护性

Nginx------前端会部署在这个服务器上

Nginx特点：

是一个高性能的HTTP和反向代理服务器
稳定性高、丰富的功能集、示例配置文件和低系统资源的消耗
轻量级的web服务器/反向代理服务器及电子邮件代理服务器
占用内存小，并发能力强、nginx的并发能力确实在同类型的网页服务器中表现较好
Nginx作为负载均衡服务器：Nginx既可以在内部直接支持Rails和PHP程序对外进行服务，也可以支持作为HTTP代理服务器对外进行服务。 Nginx采用C进行编写，不论是系统资源开销还是CPU使用效率都比Perlbal要好很多。已经移植到许多体系结构和操作系统，包括：Linux、FreeBSD、Solaris、Mac OS、AIX以及Microsoft Windows。Nginx有自己的函数库，并且除了zlib、PCRE和OpenSSL之外，标准模块只使用系统C库函数，并且，如果不需要或者考虑到潜在的授权冲突，可以不使用这些第三方库。
Nginx是一个安装非常的简单、配置文件非常简洁（还能支持perl语法）、bug非常少的服务器。Nginx启动特别容易，并且几乎可以做到7*24不间断运行，即使运行数个月也不需要重新启动。

中国大陆使用nginx网站用户有：BAT、京东、新浪、网易等等；

# 启动Nginx
# 打开Nginx安装目录下的sbin 
# 如果找不到可以输入命令： whereis nginx
cd /user/local/nginx/sbin    
# 以root权限启动
sudo ./nginx

# 强制杀死Nginx的命令
sudo kill (id)

# 查看Nginx进程
ps -ef | grep nginx

来源：CSDN

作者：书一文，解一惑

链接：https://blog.csdn.net/weixin_44350891/article/details/103939495

标签

前后端分离