关于前后端分离的理解。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3112 天前的主题，其中的信息可能已经有所发展或是发生改变。

大家好，我是一个刚入门的后端程序员（算是吧）。使用 django 开发了两个简单的网站，最近实验室有一个小任务，我想借着这个机会了解一下前后端分离的技术，要不然就真的太落伍了。

关于前后端分离，我一直没有一个清楚的概念，自己心里有一些想法，但是非常不自信。

所以，我在下面说一下自己的理解，希望有经验的大哥帮忙指教一下。

第一类，通过 nodejs 作为一个中转站， nodejs 虽然运行在服务器上，但是它处理的是前端显示的业务，例如路由，所以它是前端的一部分，后端使用其他的语言来处理数据问题，然后与 nodejs 通信。第二类，通过前端框架来实现显示逻辑，例如路由，读取 api 等，这些任务都是浏览器来完成的。然后后端用其他任何语言来提供前端所需要的 api 。

上面是我自己的理解，望指正。

第 1 条附言 · 2016-05-25 12:44:33 +08:00

真不是跟大家抬杠，我是小白，我没必要为自己不懂的东西瞎扯淡，我就是对自己不明白的东西直白的问了出来而已，有的朋友不太满意，那可能是你理解我问问题是假设的立场不一样。

有的朋友说 node 无论如何都不能算是前端的东西。我没用过 node ，我提 node 就是为了搞清楚前后端分离这件事请，这里我贴一篇博客，好像还挺出名的，以前就看过，在 segmentfalut 上面提问的时候也有朋友让我看着篇加深了解， http://blog.jobbole.com/65509/ 。

说到底，我在这方面没实践，基础不劳，导致了对这个问题不容易明白，希望大家多多包涵。

第 2 条附言 · 2016-05-25 12:49:24 +08:00

上面的博客出处在这里， https://github.com/lifesinger/blog/issues/184 。好像还是个大牛

Nodejs

API

分离

路由

64 条回复 • 2016-05-26 10:32:06 +08:00

changwei

2016-05-25 10:42:31 +08:00

我理解的前端就是负责所有和用户交互有关的模块都可以视为前端，他就像餐馆里面的前台服务生直接和客户打交道的人。
后端就是负责处理用户的请求，进行数据的处理，用户几乎所有操作都可以抽象为对数据的增删改查，就像餐馆里面的厨师接收服务生告诉他要炒哪些菜，厨师把菜处理好再给服务生（后端处理数据返回给前端表现层）服务生最后输出给客户。

但是目前由于很多情况下业务比较简单，比如说一个内容发布系统 CMS ，用户交互，请求查看文章和管理员新增文章都是很简单的业务逻辑，所以前后端都用 php 这门主要用于表现层的语言来实现，而本身在用 MVC 模式把用户交互部分（ V 和 C ）以及数据处理（主要是 M ），否则的话就得用 java 等非脚本语言来实现保证效率，甚至高并发环境下还要用到消息队列，缓存等等。

个人理解，有误请指出。

chairuosen

2016-05-25 10:46:12 +08:00

后端只给 http 接口，前端只调接口渲染一下页面，互相只有接口的依赖

CtrlSpace

2016-05-25 10:54:16 +08:00

最近也想了解一下这些，前后端之间只剩下 HTTP ？

hxtheone

2016-05-25 11:10:57 +08:00

现在的前后端分离, 后端服务器的角色更像是一个 API Server, 接收请求并且只是以数据的形式返回, 而怎么渲染和表现数据, 都交给更前端的表现层来做, 实现前后端的解耦

aksoft

2016-05-25 11:13:59 +08:00

分久必合合久必分

BOYPT

2016-05-25 11:14:52 +08:00

node 为什么要跑前端显示的业务……莫名其妙…… node 本来就是后端服务器，只不过恰好跟浏览器跑的是同一个语言，跟浏览器压根没有关系

Ouyangan

2016-05-25 11:16:16 +08:00

固定 json 就 ok.

hujianxin

2016-05-25 11:18:19 +08:00

@BOYPT 我跟几个学长问的时候，他们这样解答，说 node 可以作为后端数据处理方面的应用，但是大多数人并不这么做，而更多的使用它来处理显示业务，例如路由，例如模板生成。当然，如果你的 api 使用 node 写的话，它就是后端。否则，前端的定义界限不应该是浏览器，而是与前端显示有关的都是前端部分。

hujianxin

2016-05-25 11:18:46 +08:00

@BOYPT 第一条回复就是这个意思。

hujianxin

2016-05-25 11:21:15 +08:00

@changwei 那前端框架是什么角色呢？例如如果优乐 reactjs ，前端部分还需要 php 或者 node 这样的东西吗？它能直接通过浏览器解释来读取后端 api 吗？

hujianxin

2016-05-25 11:23:42 +08:00

@hxtheone 你好，你这里指的前端需要使用 node 吗？只使用前端框架可以实现吗？

BOYPT

2016-05-25 11:28:27 +08:00

@hujianxin 这么说来， express.js 属于“前端框架”, laravel 属于“前端框架”……

你的界定有道理，不过我觉得别人会不想和你说话了。

fds

2016-05-25 11:29:13 +08:00

@hujianxin 是的，浏览器上运行的 js 代码可以直接用 http 或其他协议访问后端的接口。

hujianxin

2016-05-25 11:30:57 +08:00

@fds 好的，谢谢，你这样说我就明白了。

RoshanWu

2016-05-25 11:34:00 +08:00

前后端分别独立布署是分离的必要前提

gimp

2016-05-25 11:59:20 +08:00

连接彼此的只有接口，提供接口的为后端，使用接口的为前端。 Node 的作用就是让 Javascript 也能在服务器上跑了，让这门前端语言也能处理一些后端工作，仅此而已。把 Node 归到前端很让人不能接受

你在 8L 回复“路由”， “模板生成”，然而这并不是 Node 的什么新兴概念，返回给用户的页面无非是后端渲染完成直接返回 HTML ，或者后端返回一堆数据，然后浏览器选进行渲染

最开始的时候大多数 web 框架都是这样做的，后来人们觉得后端渲染比较浪费服务器资源，何不利用用户的浏览器呢，这样服务器的开销会降低很多，于是把渲染的工作交给了前端，后来逐渐发现这样做会在一定程度上影响用户体验，并且对 SEO 也不好，所以又有不少人开始重新拾起后端渲染。就像 react ，刚出来还是普遍前端渲染的，几个月后后端渲染的呼声越来越高。已然最佳事件

然而回到最开始我想说的，前后端分离的标准我认为就是根据接口划分的。为什么需要前后端分离，我觉得有这些好处， 1 ，方便重构，只要接口保持一致，前后端想怎么玩就怎么玩。 2 ，适合快速开发，接口定下后，前后端可以独立进行开发，最后对接即可。 3 ，方便找到问题，先看接口，二分法，出现问题直接定位是前端问题还是后端问题（方便甩锅）

最后，无论 Node 在后端做了什么他都属于后端，更何况“路由”，“模板渲染”这些已经是所有后端 web 开发框架标配的东西...

hujianxin

2016-05-25 12:07:28 +08:00

@gimp 多谢耐心的解答，我对你上面说的有一点不能理解，还想继续请教一下。

你在上面说，前后端分离适合快速开发，接口定了下来之后，前后端就可以独立进行开发了。我这样理解对吗，在这里，后端就是只提供 api ，前端使用 api ，这里的前端只是浏览器的工作了，无论是使用纯 js 还是 react ，都与服务器没有关系了？

gimp

2016-05-25 12:13:16 +08:00

@hujianxin 是的，前端无论使用什么技术，只要能请求接口获得数据即可，前后端分离就是用接口来交换数据的。
如果使用模板，这就打破分离了，因为写模板是前端的工作。而且模板也是要放在后端。

gimp

2016-05-25 12:16:34 +08:00

对了，我也不知道模板应该是谁写... 是前端写最终页面，后端开发人员切割成模板还是前端工作者直接就提供给后端模板...

morethansean

2016-05-25 12:21:04 +08:00

主要还是怎么定义“前端”吧。
我觉得有些人把“前端”太局限了，认为 nodejs 不管怎样都算是“后端”，我不赞同仅仅因为我们对“前端”的理解不同。引擎的人把我们 web 服务端+传统的浏览器前端都叫前端，这也是从他们的视角出发。
从这几年我自己的工作内容来看，我所做的 web 前端也好， nodejs 端也好，我觉得都还属于前端的范畴。因为即便我们写的 nodejs ，也只是跑跑自己业务的任务啦，调调各种各样公司更后台的各种接口，包括但不仅限于各种数据库储存系统、其他线提供的服务等等啦。因为这一切都还是在为展示层服务，包括对更后台接口的合并、缓存等等。
而所谓前后端分离，我这里更经常说数据展示分离。早年说的前后端就是传统意义上的客户端+服务器端，但我觉得随着时代的发展、公司的发展，前后端的定义也在慢慢的变化，而且在不同的场合可以有不同的定义。

dphdjy

2016-05-25 12:25:49 +08:00 via Android

楼上 aksoft 的分久必合合久必分概括的多精炼~
开始全揉在一起，类原生 PHP/JSP 的写法
中间也就是 2k 年到现在推行 SAP 单页应用，前后端分离，把 View 层完全交给浏览器，和 Server 通过 Socket/Ajax 交互
最近由 Nodejs 兴起的是同构(Isomorphic)，由 Server 对 SAP 应用进行预渲染

所以除了同构，均不是 Nodejs 的东西，如果说把模板分离由 Nodejs 单独渲染，这是大型应用架构中的“前端服务器”，并不属于 web 开发的前端方向，例子 Taobao 的部分页面，然后与之对应的后端服务器集群主要做数据和逻辑处理。

然后在游戏服务开发也存在这几类服务器的叫法，最前面的做负载均衡，前端处理 View 相关，后端处理数据和逻辑。

所以这几个问题的前端是跨业务的不同的东西，无需深究，就酱~

hujianxin

2016-05-25 12:48:12 +08:00

@morethansean 你好，这个问题我问的时候就是抱着你所指出的观点来问的。不过有的朋友和我对前端的定义不太一样，所以产生了误会。

ayaseangle

2016-05-25 12:50:18 +08:00

前后端并没有明显分界线。。。

g0thic

2016-05-25 12:52:22 +08:00

前后分离其实和 Node 没啥关系，最简单的前后分离方案，后端提供 HTTP API ，前端通过 Ajax 调用 API 获取数据渲染页面，服务端再配置下 Nginx 基本上就可以实现一个简单的前后分离方案了。

但是这个方案太简单了，不能满足我们日常的需求，所以就引入了 Node 来解决，但这里又有区别，有的只用 Node 做一个中间层，比如做一些简单的登录权限校验，做一些数据处理，模板渲染，也可以做一些简单的路由等等，接口还是后端 Java 等提供；但是也有的人直接用 Node 来写业务提供 API ，这些都可以通过现有的 Node Web 框架 Express 、 Koa 和相关模块来解决。但是后者可能就要招专门的 Node 工程师来开发维护了，前者一般的前端就可以完成了。

hujianxin

2016-05-25 12:52:24 +08:00

@dphdjy 多谢回答，看到你的回答我觉得我知道我问的问题的答案了。上面和其他朋友产生的分歧的原因很多在前端的定义上。我的疑问很大部分是 nodejs 到底是什么角色，什么作用，应该分为前端吗？你的回答很专业，谢谢。

hujianxin

2016-05-25 12:53:42 +08:00

@g0thic 谢谢回复，很收益

dphdjy

2016-05-25 12:59:54 +08:00 via Android

@hujianxin 并不专业，更多是抖机灵~~
这个才是前端工程师的比较准确的解释(大概
https://zh-cn.facebook.com/notes/10152095506555563/

g0thic

2016-05-25 13:04:12 +08:00

@hujianxin 至于 Node 是不是前端的东西，这个因为它和 JS 的关系所以很多人的看法都不一样，没必要去在意，因为每个人的经历不一样看待的角度也不一样，有的人是从写页面到 Node ，也有的人可能是从 Java 到 Node ，他们处理的问题不一样看待的角度不一样，结论肯定也不一样

neilwong

2016-05-25 13:43:45 +08:00

@BOYPT 请不要这么武断，现在有一种分层模式就是把 web, android 客户端， ios 客户端统称为前端，其中路由和模板逻辑也是需要 web 来实现的，如果 web 使用 nodejs 控制路由和模板,归为前端也是正确的。然后没有后端这个概念，而是称为 server 。

eric6356

2016-05-25 13:44:42 +08:00

前年的 jsconf 有一个淘宝的前后端分离实践讲得挺好的.
http://2014.jsconf.cn/slides/herman-taobaoweb/#/

neilwong

2016-05-25 13:53:11 +08:00

@hujianxin 建议你不要用语言或者技术来划分前后端，而是从做什么的逻辑上来划分，如果你用 nodejs 来构建 react ，压缩代码，使用 express 来负责路由，模板控制，那 nodejs 和 express 就属于前端，如果你用 nodejs 和 express 来写 api 或者消息服务，那 node 和 express 就可以归为后端或者服务端。但是请不要在一个代码库里又做前端代码构建又做 api ，这就属于典型的前后端不分离。

yixiang

2016-05-25 13:55:27 +08:00

这贴看下来还以为是在讨论字典里“前端”这个词条要怎么写。

hujianxin

2016-05-25 14:02:53 +08:00

@neilwong 谢谢你的建议，你回复到了我问的问题的根本，受益匪浅

BOYPT

2016-05-25 14:08:15 +08:00

@neilwong 看了你贴的链接总算明白你说的什么了。
你帖子的内容基本来自《五、 Node 带来的全栈时代》这一节里面，这个的代表就是用 electron 开发原生应用，因此“ node 参与了前端”。

一个例子就是 Atom 编辑器，集成了 Node 和 Chromium 的一整个应用程序，这里面整套 Node+Chromium 才叫做 Frontend ，至于 backend ， apm 插件库算么？哈哈……整个架构都已经是 cs 结构了。

我个人意见，前端后端在中文领域，都是侠义的指 bs 结构的应用，有明确的 browser - server side ；你偏要往大面积来套前后只有混淆概念，没人想跟你说话。

neilwong

2016-05-25 14:40:24 +08:00

@BOYPT 你好像 at 错人了吧...我没有给你贴链接。。。。

另外我也我没有给你大面积套前后来混淆概念，随着 react native, angular 2.0 以及 hybrid app 的火热，现在 web 和移动客户端的界限也越来越模糊， pc ， h5, 微信端， android ， ios 所实现的都是呈现给用户一个可交互的前台，统称为前端有什么问题么？不要动不动就没人想和我说话，以前我的概念也是认为前端就该好好在浏览器这个沙盒里呆着，抵触 scss,coffeescript,jade,webpack 。但是现在时代不同了啊，少年，没必要老守着陈旧的观念不放。

BOYPT

2016-05-25 14:51:23 +08:00

@neilwong 有问题，而且问题蛮大，你去招聘网站找一下“前端”这个词是指什么开发？
你自己理解的“前端”统称交互，但是“ 微信端， android ， ios 所实现的都是呈现给用户一个可交互的前台” 在业内是称作 UI 开发。
你以前是抵触技术，现在是抵触词汇概念了？

rupert

2016-05-25 15:49:30 +08:00 via iPhone

@BOYPT 你老了不想辩不想跟你说话

neilwong

2016-05-25 15:53:18 +08:00

@BOYPT 建议你看下维基百科的词条
Front-end (computing), an interface between the user and the back end. The front and back ends may be distributed amongst one or more systems
前端的定义本来就是用户和后端的 ui 接口，只不过早期没有 app ，所以前端只狭隘的指 web 开发人员。
到底是谁在抵触技术和词汇概念？
另外申明我从没有抵触过技术，只是早期我的错误观念认为 scss,jade 会提高学习成本但是对项目帮助不大才会抵触

hujianxin

2016-05-25 15:57:23 +08:00

@BOYPT 链接的第五条哪里有 electron 的事啊，你没认真看链接就忙着回来反驳了吧？通知，以获取真知为荣，以辩驳争胜为耻啊。你还是别跟我说话了。

neilwong

2016-05-25 15:58:08 +08:00

@BOYPT 现在招个前端写 app 和微信服务号的多了去了，不清楚您老是不是做前端的，都不想和你说话了

BOYPT

2016-05-25 16:02:42 +08:00

好吧你们赢
我原来默认前端=web 前端，你们说的前端是更哲学的前端，我也没反驳过谁，只是在说不同的东西。

visonme

2016-05-25 16:12:37 +08:00

我理解的是
前端是站在用户的角度去思考问题的
后端是站在业务的角度去思考问题的

至于中间怎么去实现，怎么划分层次那就是架构和开发的事情了

node 可以作为中转，但是说前端不合适
类似 web ，我们说前端，到底什么是前端，其实就是依据用户需求架构的一个 view ，是静态的，用于系统和用户的交互以及提供输入输出接口

dphdjy

2016-05-25 16:28:33 +08:00 via Android

各种业务“前端”定义都不一样，加上互联网很多微小初创，前端更趋向于全栈，在规范化的公司里面，前端还是各种 team 的交叉，所以别讨论前端定义了~
看需求能上就行 XD

在此列举一些不完整的交叉范围
1. 设计师(UID/UED 等
2. 程序员(转化设计原案到 Web 语言，并且解决不同环境的兼容性和性能优化
3. 产品经理(服务的整体设计，风格等

楼上的 Android/iOS 等移动平台的前端，也是上述组成，但是一般程序员也同时负责应用其他部分开发和调优，网络服务的客户端，后端应该是服务器，应用整体都属于前端，本地应用来说可能界定就按照模块开发时候的视图层来确定

(一家之言

lyoe

2016-05-25 18:59:20 +08:00

你说的这种叫 Backends For Frontends ，是前后端分离的一种模式。

hujianxin

2016-05-25 19:21:23 +08:00 via Android

@lyoe 那总共有集中模式呢

ooTwToo

2016-05-25 19:46:16 +08:00 via iPhone

@BOYPT 请不要把前端说成前台。变味了

ooTwToo

2016-05-25 19:47:48 +08:00 via iPhone

@chairuosen 借问下，真正前后端分离，前端请求 API 岂不跨域了？

chairuosen

2016-05-25 19:50:16 +08:00

@ooTwToo 恩，可以跨域啊

mactaew

2016-05-25 20:00:29 +08:00

同小白，路由已经是后端了吧。

简单来说就可以这样，后端（框架也好，白手也好）完成业务逻辑之后，全部写成 RESTful 的 API 。然后前端就用 HTML ＋ CSS ＋ JavaScript 来做，前两者用来做视觉，后者用来做互动效果以及调用 API 与后端通信。

自己用过 CI ＋ RESTful 库做后端，然后 Bootstrap 写样式，然后 jQuery 负责互动以及 Ajax 后端通信。供参考

hujianxin

2016-05-25 20:02:08 +08:00 via Android

@mactaew cl 是指 common lisp 吗？

mactaew

2016-05-25 20:04:07 +08:00

@hujianxin Sorry ，没说清楚。 CodeIgniter 。一个 PHP 的 MVC 开发框架，逻辑清晰，个人认为比 ThinkPHP 好上手。如果你是 PHPer ，可以试试。

strayberry

2016-05-25 20:46:29 +08:00

可以多理解下 MVC ?

jin5354

2016-05-25 22:09:34 +08:00

“前后端分离”主要指“浏览器端开发与服务器端开发分离”，意义在于让前端工程师能够最大限度的不依赖后端工程师进行开发，要求前后端解耦彻底，仅依靠 API 使用 JSON 传递数据。

理想情况下：
后端工作仅包括：提供 API ，输出数据（没有更多的职责了）
前端工作包括：渲染与展现数据（数据与 HTML 模板拼接等等其他一切都应该前端来做）

一个关键点： HTML 应由前端渲染而成。使用后端渲染 HTML ，如 Express 框架中默认使用的 ejs 或者 jade 模板，这种都是典型违背了前后端分离思想的行为。

路由与“前后端分离”没啥关系，单页应用自然会把路由放在前端。

jin5354

2016-05-25 22:10:38 +08:00

@ooTwToo 只要 API 与页面都在同一个域名之下，就不会跨域啊。