正文

在以前传统的网站开发中，前端一般扮演的只是切图的工作，简单地将UI设计师提供的原型图实现成静态的HTML页面，而具体的页面交互逻辑，比如与后台的数据交互工作等，可能都是由后台的开发人员来实现，这也就导致了前后端工作分配不均。这样做不仅仅开发效率慢，代码也难以维护。而前后端分离的话，则可以很好的解决前后端分工不均的问题，将更多的交互逻辑分配给前端来处理，而后端则可以专注于其本职工作，像提供API接口，进行权限控制以及进行运算工作。前端可以独立完成与用户交互的整一个过程，两者都可以同时开工，不互相依赖，开发效率更快，而且分工比较均衡。

数据接口规范流程

HTTP协议

理解：

HTTP是一个客户端终端（用户）和服务器（网站）请求和应答的标准（TCP）。通过使用网页浏览器、网络爬虫或者其它的工具，客户端发起一个HTTP请求到服务器上指定端口（默认端口为80）。

通常，由HTTP客服端发起一个请求，创建一个到服务器指定端口（默认是80端口）的TCP连接。HTTP服务器则在那个端口监听客户端的请求。一旦收到请求，服务器会向客户端返回一个状态，比如”HTTP/1.1 200 OK”, 以及返回的内容，如请求的文件、错误信息、或者其它信息。

工作原理

HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。

知识补充：

websocket 双向通讯的协议

http 通信只能由客户端发起

基于请求-响应的模式

HTTP协议规定，请求从客户端发出，最后服务器端响应该请求并返回。换句话说，肯定是先从客户端开始建立通信的，服务器端在没有接收到请求之前不会发送响应

无状态保存

HTTP 是一种不保存状态，即无状态（stateless）协议。HTTP协议自身不对请求和响应之间的通信状态进行保存。也就是说在HTTP这个级别，协议对于发送过的请求或响应不做持久化处理。

HTTP请求方法

HTTP协议中共定义了八种方法（也叫“动作”）来以不同方式操作指定的资源:

GET

向指定的资源发出“显示”请求。使用GET方法应该只用在读取数据，而不应当被用于产生“副作用”的操作中，例如在Web Application中。其中一个原因是GET可能会被网络蜘蛛等随意访问。

HEAD

与GET方法一样，都是向服务器发出指定资源的请求。只不过服务器将不传回资源的文本部分。它的好处在于，使用这个方法可以在不必传输前部内容的情况下，就可以获取其中“关于该资源的信息”（元信息或称元数据）。

POST

向指定资源提交数据，请求服务器进行处理（例如提交表单或者上传文件）。数据被包含在请求文本中。这个请求可能会创建新的资源或修改现有资源，或二者皆有。

PUT

向指定资源位置上传其最新内容。

DLELTE

请求服务器删除Request-URI所表示的资源。

TRACE

回显服务器收到的请求，主要用于测试或诊断。

OPTIONS（域请求，域检测）

这个方法可使服务器传回该资源所支持的所有HTTP请求方法。用“*”来代替资源名称，向Web服务器发送OPTIONS请求，可以测试服务器功能是否正常运作。

CONNECT

HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。通常用于SSL加密服务器的链接（经由非加密的HTTP代理服务器）。

get与post请求的区别：

· GET 提交的数据会放在URL之后，也就是请求行里面，以？分割URL和传输数据，参数之间&相连，如EditBook?name=test1&id=123456; POST方法是把提交的数据放在HTTP包的请求体中。因此，GET提交的数据会在地址栏中显示出来，而POST提交，地址栏不会改变

·GET提交的数据大小有限制（因为浏览器对URL的长度有限制），而POST方法提交的数据没有限制。

状态代码的第一个数字代表当前响应的类型:

类别原因短语

1XX Informational(信息性状态码) 接收的请求正在处理

2XX Success(成功状态码) 请求正常处理完毕

3XX Redireation(重定向状态码) 需要进行附加操作以完成请求

4XX Client Error(客户端错误状态码) 服务器无法处理请求

5XX Server Error(服务器错误状态码) 服务器处理请求出错

常见状态码：

OK // 客户端请求成功

Bad Request // 客户端请求有语法错误，不能被服务器所理解
Unauthorized // 请求未经授权，这个状态代码必须和 WWW-Authenticate 报头域一起使用

403 Forbidden // 服务器收到请求，但是拒绝提供服务

404 Not Found // 请求资源不存在，eg: 输入了错误的URL

500 Interval Server Error // 服务器发生不可预期的错误

503 Server Unavailable // 服务器当前不能处理客户端的请求，一段时间后可能恢复正常

浏览器调试工具

以chrome为例

箭头按钮

用于在页面选择一个元素来审查和查看它的相关信息，当我们在Elements这个按钮页面下点击某个Dom元素时，箭头按钮会变成选择状态。

设备图标

可以切换到不同的终端进行开发模式，移动端和pc端的一个切换，可以选择不同的移动终端设备，同时可以选择不同的尺寸比例。

Elements

该面板显示了渲染完毕后的全部HTML源代码，用来查看、修改页面上的元素，包括DOM标签，以及css样式，方便对静态网页进行调试。

Console

该面板用来显示网页加载过程中的日志信息，包括打印，警告，错误及其他可显示的信息等，同时也是一个js交互控制台。

Sources

该面板以站点为分组，存放着请求下来的所有资源(html,css,jpg,gif,js等)。正是因为该面板存放了所有的资源，因此在调试js时，目标代码都在此处寻找，方便断点调试

Network

网络请求标签页：可看到所有的资源请求，包括网络请求，图片资源，html，css，js文件等请求，可以根据需求筛选请求项，一般多用于网络请求的查看和分析，分析后端接口是否正确传输，获取的数据是否准确，请求头，请求参数的查看

查看Network基本信息: URL，响应状态码，响应数据类型，响应数据大小，响应时间

请求文件的具体介绍：

Header: 面板列出资源的请求url、HTTP方法、响应状态码、请求头和响应头及它们各自的值、请求参数等等

Preview: 预览面板，用于资源的预览。

Response: 响应信息面板包含资源还未进行格式处理的内容

Timing: 资源请求的详细信息花费时间

前后端分离原理

...算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。核心思想是前端HTML页面通过Ajax调用后端的restufulap 查看详情

《springboot入门及前后端分离项目实践》系列介绍

...企业开发中需要注意的事项并具有使用SpringBoot技术进行基本功能开发的能力；这最后的项目实战为课程的主要部分，我会带着查看详情

node前后端分离基本概括

...分为前端模板（如ejs）和后端模板（如freemarker）分别在浏览器端和服务器端编译。所谓的前端渲染就是当我们去http请求的时候，我们先去请求到的是模版文件，随后数据才会过来，后端渲染是后端模板和数据结合好了以后整个查看详情

前后端分离后，后端师傅们应该知道的一些基本前端知识

...发送出去是否需要刷新页面。比如form表单，比如直接从浏览器地址栏输入地址请求，这样的请求都是伴随着页面刷新查看详情

前后端分离介绍(代码片段)

...：把流程从 PM：“我要这个功能”后端：“这个先找前端做个模板”前端：“模板做完了”后端：“我来对接一下，这里样式不对”前端：“我改完了”后端：“功能交付”PM：“春节要加这个活动”后端：“这个先找前端... 查看详情

浅谈前后端分离。

在传统的web应用开发中，大多数的工作人员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。在前后端不分离的时... 查看详情

前后端分离方案以及技术选型

...前后端不分离后端将数据和页面组装、渲染好了之后，向浏览器输出最终的html；浏览器接收到后会解析html，解析引入的css、执行js脚本，完成最终的页面展示。前后端分离后端只需要和前端约定好接收以及返回的数据格式（一... 查看详情

ruoyi(若依开源框架)-前后端分离版-前端流程简单分析(代码片段)

RuoYi(若依开源框架)-前后端分离版-前端流程简单分析项目结构├──build//构建相关├──bin//执行脚本├──public//公共文件│├──favicon.ico//favicon图标│└──index.html//html模板├──src//源代码│├──api//所有请求│├──... 查看详情

前后端分离及react的一些研究

前言在对英才网企业线前端不断的完善过程中，我们尝试进行了前后端分离，引入Node环境、以及在使用React的过程中，自行开发DOM渲染框架，解决React兼容低版本IE的问题，在这个过程中，我们有了一些经验和体会，希望本文对... 查看详情

5_前后端分离

...前端获取到数据后，进行页面的组装和渲染，最终返回给浏览器。 2代码组织形式在传统架构模式中，前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必... 查看详情

5_前后端分离

你是如何看待前后端分离的？

...组装。　　　　　　前端内容的运行环境和引擎完全基于浏览器本身。　　　　后端数据化　　　　　　后端可以用任何语言,技查看详情

vue发布中的前后端分离和前后端不分离

前后端分离思路:前端和后台完全分离.前端提供静态的css和js,在运行时将css和js给后端，后端进行数据的请求（ajax）前后端分离就是前端和后台在不同的服务器上。基本是前端一个nginx加css和js后端nginx加index.html当用户访问的时候... 查看详情

前后端分离与前后端不分离

前后端不分离　　在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制的，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。　　这种应用模式比较适合纯网页应用，但是当... 查看详情

前后端分离与不分离

前后端不分离　　在前后端不分离的应用模式中，前端页面看到的效果都是由后端控制，由后端渲染页面或重定向，也就是后端需要控制前端的展示，前端与后端的耦合度很高。这种应用模式比较适合纯网... 查看详情

前后端分离中前端dom渲染页面

...数据然后现实在页面上。二、技术详情渲染流程　　1、浏览器解析html源码，然后创建一个DOM树。在DOM树中，每一个H 查看详情

django前后端不分离&前后端分离&模板引擎(代码片段)

...耦合严重返回的是HTML页面，适应性、拓展性差只能用于浏览器，其它终端不匹配前后端分离的特点：当前主流后端只对数据进行处理，只提供数据前端效率、页面好不好看，全由前端负责，前后端完全独立解耦合前后端同时开... 查看详情

浅谈前后端分离与不分离

...　随着不同终端的兴起，对开发人员的要求越来越高，纯浏览器端的响应式已经不能满足用户体验的高要求，我们往往需要针对不同的终端开发定制的版本，为了提升开发效率，前后端分离的需求越来越被重视，前端主要负责页... 查看详情