（自学/初学者普及）浅谈前后端与前后端分离（别再说你不懂什么是前后端分离）

程序员文章站 2022-07-15 14:12:36

...

程序员都在说前后端分离，开发岗位也被很明确的分成了前后端工程师，很多大学的刚进入计算机专业的小伙伴和打算进入计算机行业的朋友，通常会有这些问题：

究竟什么是前后端呢？
前后端分离又是什么呢？
为什么会有所谓的前后端分离这一概念呢？
如何实现前后端分离呢？
前后端各自该做些什么？

1.1 前端的基本概念：

要理解什么是前后端，

首先让我们从最简单的字面意思来理解，前端指的自然就是我们寻常人所见到的软件界面。
需要注意的是，由于近年来神奇的各种框架，web api的日益完善以及SPA(Single Page Application)等形式的逐渐普及，前端早已不只是单指web的B/S架构，现在的前端已经将“罪恶”的双手伸向了所有的用户体验界面（也就是所谓的Android，ios乃至桌面端）。
除了web常见的Angular（适合后端人员转前端时学习和使用）,Vue,React,Selvet等MVVM框架以外，由于近几年来H5+app以及微信小程序等形式的逐渐出现与流行，还有uniapp等多端方案的渐渐流行，Electron等开源框架的出现，JavaScript逐渐占领了几乎所有用户界面。

前端程序员们津津乐道着这样一句话：

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。——Atwood定律（Jeff Atwood在2007年提出）

虽然吹嘘，但是不得不承认，JavaScript这门语言确实具有其独特的魅力，也深受众多人的喜爱。

前端，从广义上来讲，泛指一切用户界面，即所有直接同用户进行交互的界面。

1.2 后端的基本概念：

后端，就是指的用户无法触碰的位置，也就是服务器所在的位置，用户无法看到的部分
后端通常的任务是存储和检索数据，遵循一定的业务逻辑和规则，同数据库（可能位于另一台服务器）进行相关交互（CRUD 增删改查)，对数据进行业务逻辑相关的处理，并将处理结果返回给前端进行展示。
后端的基本技术通常包括网络请求的接收和解析（即通过URL获知该进行的相关操作），对数据库的增删改查，对各种数据的处理和封装（此部分通常涉及较多的算法知识），主动对其他网络资源的数据进行检索和处理（爬虫）以及其他知识。

相比在前端处于绝对霸主地位的JavaScript，后端的语言多种多样，但就互联网来说，Java，Python，NodeJs最为常见，使用最为广泛。

而就web而言，各种语言有各自各种各样的框架（Java的SSM,Node的Koa2,Python的Django等等）。

1.3 AJAX技术：

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML）

单从名称上看，似乎并不好理解，XML一门数据交换语言，JS是一门编程语言，Asyncchronous是异步的意思。它们有啥关系呢？

其实不必如此关心它的词面意思

最简单的理解：它是一门技术，一门“桥梁”技术，ajax技术使得前后端从此有了交换数据的位置。

也正是它的出现和广泛应用，最后导致了前后端分离的出现。

ajax技术使得JavaScript能在不刷新页面（即保持原页面状态不变化）的情况下，与服务器进行交互，从服务器拿到想要的数据（这种数据，该数据最常见的形式就是XML（没落）与JSON（JavaScript Object Notation）

拿到数据之后，JavaScript通过操作DOM（浏览器节点文档树，也就是html元素）进行数据的修改，从而实现不改变页面却改变了页面的显示内容。

1.4 基本示意图

（自学/初学者普及）浅谈前后端与前后端分离（别再说你不懂什么是前后端分离）

2.1 前后端分离的基本概念与由来：

由于ajax技术的出现，使得用户界面不再需要关心后端是如何实现数据修改（因为不再需要通过刷新界面和改变URL来切换不同的显示界面）

前端只需要关心从哪个URL（后端路由），通过哪种方式（GET/POST等）能够拿到数据或者提示相关数据的变更并返回相应结果（成功，或者失败），而不再需要关心后台如何编写，具体使用什么语言实现，也就是说后端的任何操作，前端都不需要再关心，只需要通过URL拿到相关的数据，就能在用户界面显示想要的效果。

而后端也不再需要关心用户通过URL，需要展示哪张由原本动态渲染出来的界面，只需要编写接口，提供与相关URL对应的http请求的数据，进行相关的操作，将数据转换为JSON并发送对应http请求。

于是为了解耦的更彻底，也为了程序员们能更好的专精于某一项具体的业务，前后端分离就成了不得不进行的任务与趋势。

从此前端人员专门负责用户的交互，维护用户的交互体验，并通过http请求进行相关的数据请求与展示操作。

而后端人员则专门对请求进行解析（对params,query等属性的处理，从而明白自己该干什么），对相关数据进行检索或存储，并在处理过后返回给前端。

这就是前后端分离的内容。

2.2 前后端分离的实现

以一段JavaScript中ES6的fetch函数为例：

 fetch("http://**.***.***.***:3000/api/search?name=kk")
      .then(res => res.json())
      .then(res => {
        console.log(res);
        this.newData = res;

        console.log(this.newData);
      });

前端可以通过这段代码请求到部署在http://**.***.***.***:3000/api/search?name=kk

上的后端项目，并得到相关的请求数据res(response的缩写)

而后端(以一个简单的反向代理服务器为例子)

var Koa = require("koa");
var superagent = require("superagent");
var cors = require('koa2-cors');


var path = "";
var app = new Koa();
app.use(cors());
var ans = {};
function agent(path) {
  superagent
    .get(path)
    .then(res => {
      // console.log(res.text);
      ans = JSON.parse(res.text);
      console.log(ans);
    })
    .then(res => {
      app.use(async (ctx, next) => {
        await next();
        ctx.response.type = "application/javascript";
        ctx.response.body = ans;
      });

      app.listen(3000);
    });
}
console.log("server start at http://localhost:3000");
agent("https://****/**/**");

首先通过框架创建相关网络连接对象，并使其监听对应3000端口，然后将处理后的JSON数据发送到http协议的body部分

这就是ajax交互的大概示例。

2.3 前后端路线的选择

很多小伙伴纠结，我到底是该学前端好呢？还是学后端好呢？

嗯，学术了这么久，那就说句实在话，

脚下的路，如果不是自己的选择，那么旅途的终点在哪儿，也没人知道

—《镇魂街》

其实两边的基础知识，乃至背后涵盖的计算机网络等相关知识，都是必定要学习完成，才能算得上毕业的。

也就是说，大可以都认真接触一番。

实践，才是最好的老师。

感谢阅读，关于前后端路由以及SPA建议看另外一篇博客：

《关于前后端路由与渲染的那些事》