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

[ESP]

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

[cmdOptionKana]

看这里 https://router.vuejs.org/zh/guide/

[ESP]

@cmdOptionKana 非常感谢

[learnshare]

一般用 Nginx 处理。
前端页面一律返回 index.html （因为只有一个页面入口），路径由前端路由处理（根据路径判断该显示什么）
接口转发到后端服务

参考 https://cli.vuejs.org/zh/guide/deployment.html#docker-nginx

[yeqizhang]

异步呀

[ESP]

@learnshare 感谢，我了解到是先请求静态资源，再根据路由去匹配组件，由 ajax 发送 api 请求，拿到后端数据，最后完成页面的渲染。那么 nginx 在这里相当于什么角色呢？

[cydysm]

@ESP 静态服务器

[Jacky23333]

就 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]

不需要哦，nginx 不管啥路径一律返回 index 文件就行了，前端自己去维护路由

[murmur]

不习惯可以用 hash 模式，index.html?#/home/login 这样的形式，不需要改 nginx 配置

[waiaan]

页面只有一个，根据 url 在当前页面渲染不同的内容。