V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
KunMinX
V2EX  ›  程序员

前后端分离示例代码推荐

  •  
  •   KunMinX · 2020-07-24 11:47:01 +08:00 · 3892 次点击
    这是一个创建于 1583 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在了解 Web 开发,其中谈到了一个 “前后端分离” 的设计,

    网上的文章大致都表示,分离前,都是后端 “渲染” 好页面,再返回给前端,那么它这里所说的 “渲染”,究竟是指什么呢?

    这种含糊其辞、脱离特定背景的表述,实在无法理解,想听听 “说人话” 对此是怎么表述的,或者如果有分离前和分离后两种架构的最小精简代码示例就更好了。

    (我暂且猜测,分离前是 html 代码由后端根据业务逻辑拼接,然后把拼接好的 html 返回给浏览器,让浏览器 “渲染”,可见我说的渲染和大部分文章说的渲染可能根本不是一个东西 … 就想听听是不是真的有所谓的 “渲染” 发生在后端,然后丢一个所谓的渲染完的结果给浏览器,浏览器什么也不用做直接展示?)

    这里给个说是在后端 “渲染” 的网文:

    https://www.infoq.cn/article/mNfTT4UBk5PQl3JpNt6M

    24 条回复    2020-09-04 13:14:45 +08:00
    Orenoid
        1
    Orenoid  
       2020-07-24 12:02:01 +08:00   ❤️ 1
    没详细了解过这个概念的严格定义,按我的理解就是:
    分离前,后端渲染是指将动态数据整合到静态 HTML 文件里,也就是你说的拼接,然后把拼接后的 HTML 文件返回给前端,前端直接负责展示。
    分离后,前端先直接从服务器拿到静态 HTML 文件,并进行加载,随后再通过 ajax 异步向后端接口请求业务数据,然后再通过 JavaScript 将数据加载到网页上,实质上就是修改和操作 DOM,这种情况下就是前端负责渲染。
    按我的理解,通常讨论的“渲染”(尤其是在讨论前后端分离这个语境下)是指数据和 HTML 的整合,而不是浏览器将文档转为 DOM 树再转化为像素点这一操作。
    tomczhen
        2
    tomczhen  
       2020-07-24 12:12:07 +08:00 via Android
    浏览器页面显示效果是通过 HTML,CSS 来控制的,那么控制网页的显示效果就有两种手段。

    1. 获取时决定,就是后端根据需求生成 HTML 和 CSS,这时影响页面的 HTML,CSS 完全由后端代码生成。

    2. 获取后决定,即浏览器读取到 HTML CSS 之后通过在浏览器运行环境的语言,调用浏览器提供的 API 操作已经加载的 HTML,CSS,然后浏览器再绘制。

    现实场景是,即便所谓的后端渲染页面,也会用到 JavaScript 去修改已经渲染好的页面,比如最常见的通过 jQuery 操作。而前端渲染也需要一个入口 HTML,可以是一个纯静态文件,也可以由后端输出。
    KunMinX
        3
    KunMinX  
    OP
       2020-07-24 12:12:12 +08:00
    @Orenoid

    感谢分享,清晰了,我明白了。
    ChanKc
        4
    ChanKc  
       2020-07-24 12:17:16 +08:00 via Android
    服务端渲染的渲染确实是“生成 html”而不是“把图画出来”的意思。
    我一开始也懵,希望能有人发明出更好的词
    ChanKc
        5
    ChanKc  
       2020-07-24 12:29:51 +08:00   ❤️ 1
    netnr
        6
    netnr  
       2020-07-24 12:35:54 +08:00
    服务端渲染有利于 SEO
    KunMinX
        7
    KunMinX  
    OP
       2020-07-24 13:44:06 +08:00
    @ChanKc

    谢谢分享,我想明白了,这里的渲染其实是一个动词,表达为 “去渲染” 更合适一些(比如 for-Rendening ),

    我是结合 react 等函数式编程框架理解到这一点的,

    因为这些框架都有 render 函数,当 setState 的时候,重新触发这个函数,来动态构造布局树。

    由于它本质上是函数式编程,view 的实例是内部生成的,因而取名 render 方法,假装跳过中间环节,直奔最终的 render 操作。

    然而毕竟 render 就是 render,广泛意义上就是指从代码到像素点的转换,因而对 “渲染” 这个概念的滥用,让交流变得非常不舒服。

    我情愿用 “布局拼装” 来人如其名地概括这个现象。分离前,后端静态布局拼装,分离后,前端动态布局拼装。
    ChanKc
        8
    ChanKc  
       2020-07-24 13:46:06 +08:00 via Android
    @KunMinX 所以在 Web 中,代码到像素点的转换用了另一个词:Paint,中文应该是绘制吧
    KunMinX
        9
    KunMinX  
    OP
       2020-07-24 13:47:08 +08:00
    @KunMinX

    或者说数据绑定、页面生成也行,后端数据静态绑定,和前端数据动态绑定。后端页面静态生成,前端页面动态生成。
    skrjscom
        10
    skrjscom  
       2020-07-24 14:42:21 +08:00
    ASP PHP 时代经历过没??? web 设计师设计好 HTML 页面,ASP PHP 拿过去拆散 把代码塞进去。
    gantleman
        11
    gantleman  
       2020-07-24 15:26:47 +08:00
    最初 html 时代是没有前端程序猿的。后端动态调整样式使用服务器过滤的方式。随着 JS,CSS 的流行,后端不再负责前端样式。
    KunMinX
        12
    KunMinX  
    OP
       2020-07-24 15:30:00 +08:00
    @ChanKc

    哈哈,那可能刚好和 android 以及计算机科学中对 render 和 paint 的定义反过来了。

    android 中 draw 表示的是绘制、排版的意思,也即构建视图模型,然后把这个模型结果统一交给 render 机制去渲染到屏幕。

    https://zh.wikipedia.org/wiki/%E6%B8%B2%E6%9F%93

    百科中对渲染的解释也是如此,指通过模型来生成图像的过程。

    或许 web 开发中关于 “渲染” 和 “绘制” 的定义,是被早期的某个大佬给带歪的 …(除非我们有一天找到了这么称呼的缘由)
    yhxx
        14
    yhxx  
       2020-07-24 16:14:04 +08:00
    后端渲染,浏览器拿到的是<div class="price">128 元</div>

    前端渲染,浏览器拿到的是<div id="container"></div>和<script>insert(`<div class="price">128 元</div>`)</script>
    lower
        15
    lower  
       2020-07-24 16:15:17 +08:00
    名词准不准确我觉得重要性其次
    可能 http 协议 /浏览器请求、响应、展示网页 这些知识点原理什么的,还需要补充了解,不然光看名词很难理解
    sugars
        16
    sugars  
       2020-07-24 16:30:56 +08:00
    我理解的是,不管分离与不分离,两者同样都是渲染 html,但区别就是渲染的时候完整与不完整了
    RedRoute
        17
    RedRoute  
       2020-07-24 16:35:09 +08:00
    我对与后台 ‘渲染’ 的理解是:后端(服务器端)对页面上的数据进行填充,请求服务器时,是一个数据处理完毕的 html,此时浏览器进行显示。
    1.前后端不分离:这种做法往往是前端人员编写好静态页面,后端人员通过修改 html 文件,动态的在 html 进行一些数据的处理。当请求过来是,此时通过浏览器访问先请求到服务器,后端先进行处理,返回处理完毕的 html 。
    2.前后端分离:此时前端人员完成页面,并通过请求后端提供的接口获取数据,同时完成数据的展示。后端不需要去对页面提供任何操作。此时通过浏览器访问先请求到服务器,直接返回 html 页面,页面中的 js 再去获取数据并显示。
    KunMinX
        18
    KunMinX  
    OP
       2020-07-24 16:42:53 +08:00
    @ChanKc

    谢谢分享,文档中强行将 “渲染” 描述为 “绘制”,让人觉得不适:

    The last step is paint, which takes in the final render tree and renders the pixels to the screen.

    —— 最后一步是 “绘制”,基于最终渲染树 去把像素点 “渲染” 到屏幕 …

    @lower

    这不是精不精确的问题,而是与普适的约定存在冲突,人为造成了代沟,没法交流。

    就好比,一个人强行把 “红色” 说成 “蓝色”,把 “爸爸” 说成 “妈妈”,然后完全意识不到与公约存在的冲突,而不停地拿这些概念自嗨,这样的沟通绝不会让人愉快。
    a132811
        19
    a132811  
       2020-07-24 17:14:05 +08:00
    @netnr 其实,结合 pushState, 搜索引擎 已经可以很好的 SEO ajax 页面。
    2kCS5c0b0ITXE5k2
        20
    2kCS5c0b0ITXE5k2  
       2020-07-24 17:26:02 +08:00
    一个再请求结束的时候就渲染完了 一个在请求结束才开始渲染 大概意思
    lllllliu
        21
    lllllliu  
       2020-07-24 17:55:55 +08:00
    其实不能单纯的从页面说呢。
    前后分离之后,后端更注重数据和功能的处理了,更多时间去把架构做好。
    前端可以更注重项目的工程化了,也可以做很多其他的时间,比如用 nodejs 来渲染需要动态生成的页面,这个其实属于前端的事情了。
    lllllliu
        22
    lllllliu  
       2020-07-24 17:58:03 +08:00
    再从大的方面讲,前后端分离之后,前端部署架构就可以脱离后端的限制了。后端也一样。
    前端负载也更好做了呢。后端服务也更好分配和管理了。
    lllllliu
        23
    lllllliu  
       2020-07-24 17:58:52 +08:00
    不要被前端就是只写页面来局限住了。。
    no1xsyzy
        24
    no1xsyzy  
       2020-09-04 13:14:45 +08:00   ❤️ 1
    来自 Collins:
    You can use render with an adjective that describes a particular state to say that someone or something is changed into that state. For example, if someone or something makes a thing harmless, you can say that they render it harmless.

    引申计算机,是指状态(即数据)与客体(比如结构或者模板)结合形成表现。
    比如 DOM + Gecko -> 像素点
    AJAX 结果 + React -> DOM
    数据库 query 结果 + HTML 模板 -> 完整的 HTML

    渲染可以是多层次的,比如
    DOM + Gecko -> 像素点
    AJAX 结果 + React -> DOM
    结合一下就是
    AJAX 结果 + React + Gecko -> 像素点
    其实更偏哲学认知论范畴。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1052 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 19:24 · PVG 03:24 · LAX 11:24 · JFK 14:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.