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

单页应用中服务端是如何响应的?

  •  
  •   yilin12 · 2018-03-13 10:24:00 +08:00 · 2291 次点击
    这是一个创建于 2476 天前的主题,其中的信息可能已经有所发展或是发生改变。

    作为一个前端很少去思考后端响应的问题,这个图就让我陷入了疑问,SPA 初始加载的时候服务端是返回一个 html 页面和所需的脚本、样式表,然后导航到其他页面时客户端发送 ajax 请求服务端返回 json 格式的数据来更新页面,那么服务端是如何判断什么时候返回 html 页面什么时候返回 json 格式的数据的?

    vue-router 里讲实现单页路由需要后端配置,如 nginx 设置
    location / {
    try_files $uri $uri/ /index.html;
    }
    意思是当 URL 匹配不到任何静态资源时都返回同一个 index.html。那么是否是不管 SPA 初始加载和导航到其他页面时都要返回的这一个 html 页面?可是这又和上面的说法相悖了,所以 SPA 初始加载和导航到其他页面时服务端是如何响应的???
    17 条回复    2022-11-08 10:24:18 +08:00
    Garwih
        1
    Garwih  
       2018-03-13 10:44:16 +08:00
    后端路由,了解一下。
    johnniang
        2
    johnniang  
       2018-03-13 10:46:38 +08:00 via Android
    只需要返回 index.html 就可以了,剩下的路由由 vue-router 自己处理就好了
    DT27
        3
    DT27  
       2018-03-13 10:50:49 +08:00
    后端根据前端请求来返回内容啊。。。
    需要返回 json 的时候,前端请求都带参数的。。。
    falcon05
        4
    falcon05  
       2018-03-13 11:02:50 +08:00 via iPhone
    ajax 的请求有一个 header,XMLHttpRequest
    falcon05
        5
    falcon05  
       2018-03-13 11:03:43 +08:00 via iPhone
    @falcon05 x-requested-with
    mokeyjay
        6
    mokeyjay  
       2018-03-13 11:13:26 +08:00
    ajax 请求跟普通的 GET、POST 请求是有区别的,后端可以识别出来
    learnshare
        7
    learnshare  
       2018-03-13 11:18:48 +08:00
    页面请求和 API 请求都有对应的 URL/path,以及 GET/POST 方法,和各种 HTTP 参数
    hardman
        8
    hardman  
       2018-03-13 11:19:17 +08:00 via Android
    路由响应了解下
    yilin12
        9
    yilin12  
    OP
       2018-03-13 13:10:35 +08:00
    @Garwih
    @johnniang
    @DT27
    @learnshare
    所以是匹配到后端路由的 ajax 请求返回 json 数据,前端路由导航到对应页面,未匹配后端路由返回 index.html 这样嘛?
    yilin12
        10
    yilin12  
    OP
       2018-03-13 13:10:59 +08:00
    @falcon05 这样的话 fetch 呢?
    qiayue
        11
    qiayue  
       2018-03-13 13:13:10 +08:00
    书读得太少,想得太多
    都不知道该怎么回答你
    yilin12
        12
    yilin12  
    OP
       2018-03-13 13:14:46 +08:00
    @mokeyjay 你让我费解到了 😂 get 和 post 不是 ajax 请求的方法吗?额你的意思是请求静态资源和 ajax 请求是不一样的吗?话说是怎么请求静态资源的,css js 这些。。。
    yilin12
        13
    yilin12  
    OP
       2018-03-13 13:20:50 +08:00
    @qiayue 我也不知道该怎么回答你,问一个技术问题不知道有什么值得你 diss 的地方
    crysislinux
        14
    crysislinux  
       2018-03-13 13:23:44 +08:00 via Android
    只要不是 /api/xxx 的,全部当静态资源请求,静态 404 了就 index.html
    learnshare
        15
    learnshare  
       2018-03-13 13:35:12 +08:00   ❤️ 1
    @yilin12 不论请求页面还是 API,后端得到的信息结构都一致( request )
    后端解析 request 的内容,再决定返回什么( response )

    response 跟前端路由没有任何关系,只跟 request 有关系

    返回的是页面( html ) js/css,或者 API ( JSON ),取决于 response[content-type] 是什么
    wizardforcel
        16
    wizardforcel  
       2018-03-13 22:33:07 +08:00
    URL 不一样啊。

    /index.html,/static/js/,/static/css/ 和 /api/ 能一样么。

    还有上面那些大神,你们家 controller 是写在一起,然后拿 Content-Type 来判断返回值??还是多写几个 controller 比较舒服吧。。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5796 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 01:53 · PVG 09:53 · LAX 17:53 · JFK 20:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.