V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
ESP
V2EX  ›  问与答

前后端分离项目是如何请求一个页面的?

  •  
  •   ESP · 2021-09-07 20:54:46 +08:00 · 1625 次点击
    这是一个创建于 1158 天前的主题,其中的信息可能已经有所发展或是发生改变。

    比如说请求网站首页 /home/login,而网站是前后端分离开发的,后端只提供接口,没有 /home/login 对应的处理函数。只有 /api/sys/login 这种接口。 那么当用户请求 /home/login 的时候,是走了什么流程呢?难道前端也有服务器吗?是请求前端服务器的函数,再发起接口请求吗?

    10 条回复    2021-09-08 11:05:33 +08:00
    cmdOptionKana
        1
    cmdOptionKana  
       2021-09-07 21:05:55 +08:00
    ESP
        2
    ESP  
    OP
       2021-09-07 21:32:18 +08:00
    @cmdOptionKana 非常感谢
    learnshare
        3
    learnshare  
       2021-09-07 21:32:32 +08:00
    一般用 Nginx 处理。
    前端页面一律返回 index.html (因为只有一个页面入口),路径由前端路由处理(根据路径判断该显示什么)
    接口转发到后端服务

    参考 https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx
    yeqizhang
        4
    yeqizhang  
       2021-09-07 21:57:22 +08:00 via Android
    异步呀
    ESP
        5
    ESP  
    OP
       2021-09-07 22:22:07 +08:00
    @learnshare 感谢,我了解到是先请求静态资源,再根据路由去匹配组件,由 ajax 发送 api 请求,拿到后端数据,最后完成页面的渲染。那么 nginx 在这里相当于什么角色呢?
    cydysm
        6
    cydysm  
       2021-09-07 22:45:49 +08:00 via iPhone
    @ESP 静态服务器
    Jacky23333
        7
    Jacky23333  
       2021-09-07 23:34:50 +08:00 via Android   ❤️ 3
    就 React 为例,包含了多种路由模式,在 HashRouter 下,你的网页 url 为 http://xxx.com/index.html/#/home/login,可以注意到,#后面的 path 已经不属于 url 中的 path 了,对后端而言,你只是访问了 index.html,而#后面的 path 是由 js 在前端中自行处理并重新渲染页面的,和服务端没有关系了~,当然 index.html 一般会省略掉,也就是网页 url 变成 http://xxx.com/index.html/#/home/login 。而 react 还支持另外一种模式 BrowserRouter,在这种模式下,你的浏览器 url 是 http://xxx.com/home/login,看起来很普通的 url 是不是?这种情况就需要前端提供 nodejs 服务器来进行解析了也就是你说到的情况。
    iseki
        8
    iseki  
       2021-09-08 04:17:58 +08:00 via Android
    不需要哦,nginx 不管啥路径一律返回 index 文件就行了,前端自己去维护路由
    murmur
        9
    murmur  
       2021-09-08 08:24:52 +08:00
    不习惯可以用 hash 模式,index.html?#/home/login 这样的形式,不需要改 nginx 配置
    waiaan
        10
    waiaan  
       2021-09-08 11:05:33 +08:00
    页面只有一个,根据 url 在当前页面渲染不同的内容。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2530 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 01:25 · PVG 09:25 · LAX 17:25 · JFK 20:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.