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

关于前后端分离的一些疑问

  •  
  •   yezheyu · 2022-06-09 13:23:50 +08:00 · 3373 次点击
    这是一个创建于 898 天前的主题,其中的信息可能已经有所发展或是发生改变。

    以前没写过前后端分离的项目,想请教下架构怎么设计


    例如未分离时,像登录成功后的页面跳转到首页的功能

    是在后端校验完,后端重定向到首页接口,再由首页接口返回首页的 html 页面

    页面的跳转是由后端负责的



    那如果项目改成前后端分离,页面的重定向是由前端负责吗?

    前端页面使用 ajax 向后端发送请求

    后端校验后,不进行重定向,只返回状态码和 json 数据

    前端根据状态码决定是在当前页面提示登录错误信息,还是登录成功跳转到首页


    是这样设计吗?前后端分离后所有的页面的跳转都是由前端负责,后端只负责返回数据

    24 条回复    2022-06-10 11:15:52 +08:00
    molvqingtai
        1
    molvqingtai  
       2022-06-09 13:27:12 +08:00
    理解正确
    shabbyin
        2
    shabbyin  
       2022-06-09 13:29:25 +08:00
    重定向谁做都可以
    后端做的话 可以直接返回 301 302
    前端做的话就加拦截器 发现接口返回对应的响应码 就重定向到登录页
    zhuweiyou
        3
    zhuweiyou  
       2022-06-09 13:30:05 +08:00
    重定向肯定是客户端负责. 你想象一下你的 API 如果给 APP 用,你能控制 APP 的跳转吗?
    ChefIsAwesome
        4
    ChefIsAwesome  
       2022-06-09 13:31:09 +08:00 via Android
    楼上说的没错。你就想着是写原生 app 的后端,自然就没有以前的包袱了。
    yezheyu
        5
    yezheyu  
    OP
       2022-06-09 13:32:00 +08:00
    @molvqingtai

    那以前前后端未分离时,对于密码等参数的校验,前端需要校验一次,后端也要校验一次

    改成前后端分离后,是不是前端可以不用再校验,只用后端校验一次就可以
    fiypig
        6
    fiypig  
       2022-06-09 13:34:33 +08:00
    @yezheyu 一样要做校验
    dcsuibian
        7
    dcsuibian  
       2022-06-09 13:34:38 +08:00   ❤️ 1
    以前是后端直接给 html 页面的,差不多是这样,他来告诉你跳到哪儿,所以叫后端路由。去到不同的页面就是给你不同的 html 页面,所以就是多页的。

    现在前端应该多是单页应用,前端根据拿来的数据决定跳到哪儿。后端只负责提供数据。
    说是跳转,实际上就是网页内容的替换,配合浏览器的 history api 变更地址栏,看起来就像跳到了新页面。所以叫前端路由。
    一个明显的地方就是浏览器的刷新按钮根本没动过,因为就是原来那一个页面,所以叫单页应用。
    Erroad
        8
    Erroad  
       2022-06-09 13:36:03 +08:00
    @yezheyu #5 前端校验是为了验证参数本身格式是否有问题,并且给用户提示;后端是登录鉴权等登录逻辑,也可能有格式校验。要从功能本身出发啊
    lyusantu
        9
    lyusantu  
       2022-06-09 13:41:13 +08:00
    @yezheyu
    前端效验是减轻服务器压力,如果不效验并且参数不符合要求的话,会导致频率请求接口,白白浪费资源

    不过无论前端效验不效验,后端都是要效验的,毕竟
    yezheyu
        10
    yezheyu  
    OP
       2022-06-09 13:45:34 +08:00
    @fiypig
    为啥呢?

    以前是:
    前端:校验数据 ——> 后端:校验数据

    前端提前校验数据是为了让用户知道输入错误
    后端校验是保证存到数据库的数据的正确性

    </br>

    现在是:
    前端 ——> 后端:校验数据 ——> 前端:取出参数错误信息加载到页面上

    前段不加校验的话,不是可以从后端返回的参数错误信息取数据加载到页面上吗?
    一样可以提醒用户输入错误

    为啥还要校验呢?
    yezheyu
        11
    yezheyu  
    OP
       2022-06-09 13:47:58 +08:00
    @lyusantu

    是为了减轻后端接口的压力,减少接口请求的次数

    明白了,多谢老哥
    fiypig
        12
    fiypig  
       2022-06-09 13:49:16 +08:00
    @yezheyu 前端校验减轻服务器压力, 后端校验防止有些是通过工具请求的
    yezheyu
        13
    yezheyu  
    OP
       2022-06-09 14:18:09 +08:00
    还有个问题想请教下各位老哥


    以前 html 页面由后端服务器直接生成,返回给浏览器

    现在改成前后端分离了,html 页面是由谁返回给浏览器呢?是前端自己有个单独的服务器吗?

    如 nginx ?前端页面开发好后直接把所有的 html 页面当做静态资源交给 nginx 管理是吗?

    后端的接口再单独部署一台服务器,再交给 nginx 反向代理


    </br>


    所以对于一个 url ,如果是请求 html 页面,则直接由 nginx 路由处理

    如果是个接口,则由 nginx 转发给后端服务器


    是这样吗 ?
    yezheyu
        14
    yezheyu  
    OP
       2022-06-09 14:19:15 +08:00
    yyfearth
        15
    yyfearth  
       2022-06-09 14:23:28 +08:00
    @yezheyu @fiypig 不仅仅是减少压力 而且也改进用户体验呀
    你想想 如果全部都给后端校验 一来一回怎么样也要半秒钟以上吧
    前端校验可以做到边输入边校验

    更高级的 前端可以预处理数据 进一步减轻后端的压力 或者增大爆破的难度

    后端校验 因为你不能相信前端 用户或者黑客可以劫持网络 或者 打开浏览器 console 直接请求服务器 跳你的前端代码
    而且前端不仅数据没办法保证 连代码都没办法完全保证 可以通过劫持网络 注入 或者 浏览器扩展 轻松提起修改数据 和篡改代码
    yyfearth
        16
    yyfearth  
       2022-06-09 14:29:54 +08:00
    @yezheyu html 页面 现在都是推荐直接使用 CDN
    CDN 后面连一个云存储 比如 S3 之类的

    如果非要用自己的服务器 直接一个静态服务器就可以了

    如果要用 cookie 那需要 CDN 或者负载均衡可以转发后端 用 nginx 的话 就和你说的一样
    如果用 jwt 的话 可以前后端服务器都分离 用不同的域名
    做好服务器的 CORS 跨域认证就没问题了
    yyfearth
        17
    yyfearth  
       2022-06-09 14:32:19 +08:00
    @yezheyu 现在 除非是内部服务 或者使用者非常小的服务 否则都不推荐直接服务器 连虚拟机都不是很推荐了
    有能力直接上 K8n 或者 Docker
    yyfearth
        18
    yyfearth  
       2022-06-09 14:33:03 +08:00
    k8s 或者 docker
    就算是内部服务 用 docker 部署起来也方便不少
    dcsuibian
        19
    dcsuibian  
       2022-06-09 14:40:53 +08:00
    @yezheyu
    单页应用的话,可以参考 vue router 的说明:
    https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E6%9C%8D%E5%8A%A1%E5%99%A8%E9%85%8D%E7%BD%AE%E7%A4%BA%E4%BE%8B

    拿 Spring Boot 举例,直接 build 到后端 src/main/resources/static 里然后和后台程序一起打成 jar 包就可以直接跑了
    但其实更多的应该是 Nginx ,好扩展,而且前后端分离的比较彻底,比较推荐

    原理上就跟你想的一样,把请求 api 的和请求页面的分开处理。api 的话,主要有两种,api.xxx.comxxx.com/api 这样的。
    单页应用应该只有一个 index.html 。注意如果客户端直接访问一个地址 xxx.com/user-center/advance ,也要把 index.html 返回去,xxx.com/user-center/advance 这个链接到底有没有还得前端 js 执行了再说,没有就跳到前端做的 404 页面。
    libook
        20
    libook  
       2022-06-09 14:42:17 +08:00
    跟用户交互有关的尽可能都放在前端,后端只为前端提供数据、核心业务功能、安全性。

    同为前后端分离,不同需求用不同重定向方式;如果是 HTTP 协议层的原因需要重定向,如为转移位置的资源进行重定向,或由 HTTP 协议升级成 HTTPS 协议的重定向,可以由后端来完成;虽然是后端完成,但用户不一定会有感知,比如一个页面请求的一张图片从一个 URL 移动到另一个 URL 了,后端返回了重定向,然后浏览器去新 URL 获取资源了,这个过程用户可能只看到了一张图片加载出来,并没有感知到中间经过了一次重定向;跟用户交互有关的页面跳转,可以使用前端重定向,比如可以在前端登录页面判断服务器返回的登录结果信息,成功就跳转到功能页面。
    wu67
        21
    wu67  
       2022-06-09 15:48:09 +08:00
    一般来说, 后端只提供接口和数据、校验, 其余全部都在前端完成. 一般就需要判断一个问题, 就是身份失效 /过期时的统一处理, 需要协调好数据格式告知前端让其重定向登录.
    elboble
        22
    elboble  
       2022-06-09 18:30:46 +08:00
    @yezheyu 我自己做的小项目前后端分离,基本如你所说,前端打包后,js,html,static 当成静态文件通过 nginx 访问,然后 nginx 反代后端,可以是一个 nginx ,也可以是不同机器上的 nginx ,要注意 cors 。
    ration
        23
    ration  
       2022-06-09 18:52:26 +08:00 via Android
    前后端分离。用前端跳转,不要用后端,后端只提供授权接口。不然维护很麻烦,而且会多跳几次
    ychost
        24
    ychost  
       2022-06-10 11:15:52 +08:00
    现在 Web 支持 H5 路由和 Hash 路由,前端可以完全控制页面跳转而不重载页面
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1537 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 17:19 · PVG 01:19 · LAX 09:19 · JFK 12:19
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.