前端、后端、数据交互的认识

一、前端、后端、数据三者的关系

1. 前端 通常是html，css，js 三者构成的页面的总称。运行在客户端。以浏览器为例。
2. 后端 是指后端程序。比如java，php等编写的一些服务。用来操作服务器。
3. 数据 都存放在服务器上。
4. 服务器上的数据大多会放在数据库中，比如mysql数据库；部分数据会缓存在文件或redis中，比如一些配置文件，以加快响应速度。
5. 有两个比较有趣的缓存数据，cookie和session，它们通常用来记录请求者的身份。cookie常常加密储存在客户端里。session常常储存在服务器上。
6. 前端不能直接操作数据库，必须通过后端来进行操作。因此，就产生了前后端数据交互（通过接口）的问题。

---

二、前后端数据交互的原理

基于BS模式下的前后端交互方式，遵循 请求&响应 原理。

• 输入网址，打开网页，这本身就是一次基本的数据交互模式。

 - 前端发送请求，后端返回数据

• 常见的前后端交互的基本模式如下：

1) URL地址（没有url就无法发起一次请求）
2) 请求参数（请求一个url，然后发送请求参数，达到更精细化的请求）
3) 前端的触发方式
    - 用 a标签 可以发 get 请求，但是也会刷新页面或新开页面；
    - 用 img 可以发 get 请求，但是只能以图片的形式展示；
    - 用 link 可以发 get 请求，但是只能以 css、favicon 的形式展示；
    - 用 script 可以发 get 请求，但是只能以脚本的形式运行；
    - 用 form表单 可以发请求，但是会刷新页面或新开页面；
    - 用 jsonp 实现请求，支持跨域请求；
    - 用 ajax 实现页面无刷新的请求。
4) 前端触发以后，前端请求的方式

序号	方法	描述
1	GET	请求指定的页面信息，并返回实体主体。
2	HEAD	类似于 GET 请求，只不过返回的响应中没有具体的内容，用于获取报头。
3	POST	向指定资源提交数据进行处理请求（例如提交表单或者上传文件）。数据被包含在请求体中。POST 请求可能会导致新的资源的建立和/或已有资源的修改。
4	PUT	从客户端向服务器传送的数据取代指定的文档的内容。
5	DELETE	请求服务器删除指定的页面。
6	CONNECT	HTTP/1.1 协议中预留给能够将连接改为管道方式的代理服务器。
7	OPTIONS	允许客户端查看服务器的性能。
8	TRACE	回显服务器收到的请求，主要用于测试或诊断。
9	PATCH	是对 PUT 方法的补充，用来对已知资源进行局部更新 。

5) 前端请求的数据格式
    - 对于请求参数和返回的数据，前后端会统一起来，使用同一个数据格式，一般有xml和json两种。JOSN会更常用。
    - 请求的参数，可以被封装成json格式，传入到后端，后端获取后，解析请求数据，操作数据库，获得数据库数据，打包成json格式，传给前端。
这里，json是以小型数据库的形式出现了。js对json进行了编码和解码，java/php等也对json进行了编码和解码。

---

PS：前端、后端是从技术的角度划分，还有一种前台、后台的说法，这个是从产品业务的角度划分的。面向终端客户的应用一般称为前台，而公司运营/财务/客服等使用的系统一般称为后台。