这是一个创建于 1692 天前的主题，其中的信息可能已经有所发展或是发生改变。
本人属于 web 开发新人，最近接触一些内容，有些认知，不知正确与否。
现在所谓的前后端分离，本质是不是都在组织和解析 json ? 或者说序列化和反序列化 json 显得更专业一点？
前端，是不是本质还是读取 api 出来的 json，然后控制显示隐藏啥的。
与后台交互这块，前端处理好 json，一把推给 api 。
而现在流行的啥框架，vuejs 和 angular 之类的，是不是把原生 js 做了一些封装，可以“便捷”地进行 json 处理，甚至有些时候 json 对前端开发者都是一种“不可见”状态。
而早期的 jQuery 和原生 js 都能实现这样的功能，无非是繁琐一些。
不知道理解的对不对？
 |
1
shintendo 2020-04-07 14:42:30 +08:00
本质在于后端是输出页面还是输出数据，json 只不过是数据的一种形式而已。
至于“vuejs 和 angular 之类的，是不是把原生 js 做了一些封装，可以便捷地进行 json 处理”，则是完全不沾边的理解，不知道从何而来。 |
 |
2
also24 2020-04-07 14:46:11 +08:00  1
要想了解什么是『前后端分离』，应当先了解什么是『前后端不分离』。
猜猜为什么 php 支持和 html 混写？ |
 |
3
orzorzorzorz 2020-04-07 14:57:03 +08:00
总不能给客户直接看数据库那一行行的数据吧？行，那把数据搞到浏览器上。
要增加就业？行，前后端分离。 那么前后端该不交互了？行，约定下规范开始干活吧。 你一套我一套累不累？行，业界共识 json 好，那按 json 来。 还要增加就业？行，你懒得写请求啊渲染啊这类模版代码，我(ng)给你们写好了，甚至还在三年后等你们。 |
 |
4
libasten OP |
 |
6
acthtml 2020-04-07 15:21:34 +08:00
你说的本质我觉得是一种形式。
本质是两种不同系统进行解耦开发。 |
 |
8
learningman 2020-04-07 15:25:26 +08:00 via Android
就是在约定好了交换数据的格式之后。前端和后端就算一句话都不说，也能把开发完成。
当然这只是一种夸张的说法。 |
 |
9
agdhole 2020-04-07 15:25:32 +08:00 1
原生 JS 和 jQuery 可以实现同样的功能，但是不是繁琐一点，是非常繁琐。
现在的框架把数据和 DOM 隔离开来，只需要操作数据变动 DOM 就能自动更新，然后再根据业务的需求衍生出了很多解决方案 /组件 |
 |
10
luckyrayyy 2020-04-07 15:28:25 +08:00
区别是页面在前端渲染还是后端渲染。
原生 js 当然也可以，不过累死个人。 |
|
11
libasten OP @agdhole 看来自动化变动 dom 是前端框架组件最大的功效了吧？我现在一个系统用 jquery 一把梭，真是感觉越来越烦。无数的 ajax 请求，无数的变动页面 dom 操作。
不过你说的这种“自动更新”的前提，也是有一个数据绑定动作吧？能否理解成绑定后，框架自动去读取 api，刷新页面了？ |
 |
12
stabc 2020-04-07 15:34:11 +08:00
不是。如果仅仅是组织处理 JSON，那就不需要后端了。
|
|
13
agdhole 2020-04-07 15:37:49 +08:00 1
@libasten #11
早期框架确实是这样的卖点，不用操作 dom 。 例如 vue，数据只需要放进 v-model 或者 v-for 之类的，然后母数据变动，组件自动变动，不需要手动操作 DOM 。 举个例子： ``` <li v-for="(item, i) in items" :key="i">{{ item.title }}</li> data: () => ({ items: ['a', 'b', 'c'] }) ``` 然后只要你的 itmes 随便变成啥，<li> 这个组件的数据也会自动更新。 再后来随着工程化和前端项目越来越大型，管理越来越麻烦，周边的轮子也就起来了，比如 typescript，或者 rxjs 之类的。 如果是后端，Java C# 来写前端，推荐 angular 。 初学者或者 PHP 系的，推荐 vue |
|
14
agdhole 2020-04-07 15:38:36 +08:00
上面打错了 {{ item.title }} -> {{ item }}
|
|
15
also24 2020-04-07 15:43:39 +08:00 1
越说越歪，感觉有些朋友可能把 SPA （ Single Page Application ）和『前后端分离』搞混了吧。
『前后端分离』的对立面是 『前后端不分离』。 为什么会 『不分离』，因为早期 Web 开发，HTML 页面都是由后端语言直接输出的。 php 为什么支持 HTML 混写？看看 php 官网的简介： https://www.php.net/manual/en/intro-whatis.php php 对自身的定位就是 "Hypertext Preprocessor" ，天生就是嵌在 HTML 里的。 Hypertext 是什么？ HTML 是 Hypertext Markup Language 的简称。 Hypertext Preprocessor 是什么？对 Hypertext 进行预处理的程序。 除了语言自身对输出 HTML 的支持，为此还产生了一个专门的中间件『模板引擎』，用来辅助高效输出页面，比如下面这些，都是很常见的模板引擎： https://twig.symfony.com/ https://www.thymeleaf.org/ https://jinja.palletsprojects.com/ https://docs.djangoproject.com/en/3.0/ref/templates/language/ 于此相对应的，则是将页面的 HTML 内容静态化，通过 Ajax / JSONP 等方式获取数据，使用 JS 将数据渲染至页面的方式。 当整个页面的 HTML 都不再依赖后端输出，也就是前端页面自身的『 HTML 部分』不再依赖后端代码，我们就称之为『前后端分离』。 |
|
16
also24 2020-04-07 15:47:18 +08:00 1
至于 SPA 和 『前后端分离』的关系。
在绝大部分情况下，SPA 都是前后端分离的。 但是两者并没有任何绑定关系。 我完全可以将一个 SPA 的代码嵌入某后端程序的模板引擎内，将某些变量与后端程序关联，并使用后端程序输出。 虽然正常情况下没有几个人会这么干，但是这样制作出前后端不分离的 SPA 是完全没问题的。 |
 |
17
rnicrosoft 2020-04-07 15:55:01 +08:00 via Android 1
前后端不分离，电脑手机 app 小程序都要后端来输出页面，加个功能全都得改，后端不得暴走
|
 |
18
hronro 2020-04-07 16:05:48 +08:00 1
@libasten #4
〉您说的完全不沾边，那 vuejs 这类框架是做什么工作的？我理解的就是组织渲染数据到页面中呀。 我记得 15 年我刚开始看 React.js 文档那会儿，整个文档完全没提该如何和服务端交互，官方的说法是，和服务端交互并不属于 React.js 该管的范围。现在 2020 年了，文档比当年完善了许多，或许有了和服务端交互的部分，不过这并不影响 React.js/Vue.js 这类框架本身的定位。 其实你可以理解成现代网页前端开发，和桌面应用开发差不多，都是在做一种 GUI 应用开发，只不过网页开发是基于 browser 的，桌面应用是基于 OS 提供的 native widgets 的（但其实现在很多桌面应用也是基于 Electron 的了）。你想想看，想 Windows 上的记事本或者计算器这类应用，很明显它们并不需要和后端进行交互。虽然 Web App 中需要和后端交互的比例要比桌面应用高一些，但也不是必要条件。所以 React.js/Vue.js 这些框架 /库，它们做的其实只是把一些数据结构渲染成 UI 而已，至于这些数据结构是从后端来的，还是客户端自己定义生成的，其实这些框架并不关心。以我的经验看来，一个前后端分离比较彻底的应用，客户端自己定义生成的数据结构，应该占大多数才对。 |
 |
19
passerbytiny 2020-04-07 16:19:59 +08:00 via Android
在你对 MVC 、MVVM 、MVP 甚至连 Model 都不了解的情况下，去学习前后端分离，无异于还不会走路就去跑
|
|
20
libasten OP @hronro 感谢讲解这么多。
那么后端 api 供出的数据和浏览器页面中数据传输的工作不是 react.js 他们的工作，那么这事是“谁”在做呢？ |
 |
22
windychen0 2020-04-07 16:32:55 +08:00
@libasten 那你还不考虑用 vue 那些框架，数据双向绑定香的一批
|
|
23
windychen0 2020-04-07 16:42:31 +08:00
前后端分离来说，本质上就是由前端绘制不变的部分，然后向后端提供或者请求会变的数据，所以其实做前后端分离的其实只要会 ajax 和基本的 js，html 就行了，然后 vue 框架这类，不仅仅是便捷的处理数据，更多的是代表一种设计理念，让前端开发从不停的更改 dom 和获取表单中解脱出来，同时组件化和 solt 插槽之类的就是“高内聚,低耦合”的实现。
|
 |
24
lewinlan 2020-04-07 18:07:30 +08:00 via Android
为什么楼上连『前后端分离』这个概念也有得黑？
术业有专攻，前端专注表现，后端专注性能，这是行业发展对效率的自然追求。 什么叫为了增加就业？？您是找不到工作了还是新知识学不会了？ |
 |
25
whatisnew 2020-04-07 18:18:32 +08:00
response content-type: application/json;
response content-type: text/html 的区别。 直接 response text/html 少了到少一次 http request 。但是增加了大型项目维护的复杂度。 |
 |
26
woodensail 2020-04-07 18:26:59 +08:00
@libasten react.js 比较特殊，vue 或 ng 都是完整的 MVX 类型框架。
而 react.js 则只负责 View 层工作，其他部分的工作则交由生态链内的其他库完成，比如 Redux |
 |
27
areless 2020-04-07 18:29:38 +08:00 via Android
js 被视为不安全并且不启用的 ie4 时代也有前端这个职业。那时候前端主要负责 view 层。模板分离。做图表什么都是后端的事情。现在前端把活全揽了，后端天天坐在办公室嗑瓜子别提有多开心。
|
 |
28
Tink 2020-04-07 18:31:47 +08:00
主要是为了解耦，让前端把页面一直固定不变的东西画出来，后端去更新那些变化的数据。至于 json 只是格式，xml 也可。
|
|
29
woodensail 2020-04-07 18:42:43 +08:00 2
然后，讲下关于 MVVM/MVP/MVC 等 MVX 类型框架为什么会流行起来。
MVX 框架兴起的本质是前端开发从事件驱动向数据驱动的转变。 早期，前端都是用户做了什么操作，或者接口拿到某些数据，就去用 jq 修改页面上某个节点或组件的状态。简单直白而且高效。 但是，随着业务逻辑越来越负责，一个操作或接口可能会需要修改几处甚至更多的地方，同时这些地方也不是只受该操作影响，修改时还需要考虑其他变量来决定是否修改或如何修改。此时，单纯的在回调函数中写 dom 操作由于难度过高已经是不可能的了。 然后很多人会选择改成数据驱动，把用户的各种操作和请求的数据记录在变量中，每次这些变量有变化后，调用一次 refresh 方法，refresh 方法中跟据变量中的数据，重新计算一遍页面应该如何展示，然后渲染到页面中。于是工作量一降低。 不过，这种方式虽然开发难度大大降低，但是这种手动全刷新的逻辑是低效而累赘的。于是，先是各种前端模板工具兴起，然后是 backbone，知道现在 react/vue/ng 。出现了各种框架来降低数据绑定的开发量，并提高数据绑定的性能。 |
 |
30
zqx 2020-04-08 07:48:41 +08:00 via Android
前后端分离后，至少需要两个服务才能让用户使用网站，一个是提供 API 的服务端程序，一个是将域名端口映射到到 html 资源的 Web 服务器，用户加载 HTML 后由浏览器执行脚本进行 API 调用和页面渲染，这中间数据交换的格式可以是 json，也可以是 formdata，二进制，有哪些合法的格式是 HTTP 协议规定的
|
 |
31
fancy111 2020-04-08 09:19:21 +08:00
其实你说的并没有太多错误，本质上就是这样的。 上面那些人可能都没往底层学过。
当然 json 只是一种数据格式，现在比较流行便捷而已，本质上都是解析这些数据，然后渲染到前端。 而前端框架本身就是基于 JS 的封装，这也是框架的定义，而不是独立语言。 |
 |
32
stevenkang 2020-04-09 10:36:31 +08:00
本质是增加就业。
简单的事情复杂化，复杂的事情工程化。这样后端就看不懂前端代码了，老板就需要招更多的人来维护了。 后端只管提供数据的输入输出能力，前端只管拿到数据进行加工处理。 后端面向前端，前端面向用户的交互。 |
 |
33
charlie21 2022-02-28 11:49:31 +08:00
在更早时候，一个网站的主要业务逻辑是服务器端在 “提供服务”，那个时候手机端就是用的 web api 这就是 JSON 数据格式，手机端拿到 JSON 之后在手机 app 里渲染出来（读取列表 显示帖子 更新用户设置 etc. 常见功能网页端可以做 手机端也可以做），点个按钮提交也是发送一个 POST 请求给 web api 。一个流行的服务器端知识是 RESTful API
https://www.ruanyifeng.com/blog/2014/05/restful_api.html 后面就是发展为类似 wordpress WPAPI 这种的。服务器端依然是 api 的提供者，客户端依然是 api 的调用者 /消费者（拿到数据之后自己负责渲染） https://mobile.twitter.com/rleija_/status/1304042756369776641 https://www.jianshu.com/p/293f74ca1f71 基于 MVC 理解 React+Redux 这里以 MVC 架构为切入点给出了 the big picture 就是渲染 JSON 。 虽然实际上准确地说，之前的 backbone.js 是 MVC 架构 https://bbs.huaweicloud.com/blogs/260811 而当代网页端三大框架 react vue angular 是基于组件的架构 https://www.freecodecamp.org/news/is-mvc-dead-for-the-frontend-35b4d1fe39ec |
|
34
charlie21 2022-02-28 12:00:46 +08:00
这是现代框架关注的问题 https://baurine.netlify.app/2019/08/16/website-architectures/
这是 backbone.js 关注的问题 https://vence.github.io/2015/05/14/backbone-info/#很显然，这里没有拆组件什么的 |
Select Language