从后端的角度来说 Vue 做了哪些事情？

Question

作为一个没有前后端分离开发经验的人，我有几个问题：

• 加入 vue 之后一共有三个角色是吗？浏览器、vue 服务器、后端服务器？
• html 文件从哪里来？vue 服务器？还是后端服务器？
• 浏览器请求 json 数据是直接向后端服务器请求还是向 vue 服务器请求再由 vue 服务器请求后端服务器？
• vue 相当于把原本后端负责的模板渲染剥离了是吗？那模板的渲染工作是不是变成了从 vue 服务器获取 html 文件，再从后端服务器获取 json 文件，然后再浏览器渲染拼凑在一起？

Answer 1

从后端的角度来讲，我发给浏览器的是一个空白的 HTML 和一堆 JS，但是 Vue 这小子从 JS 里苏醒之后，积极响应用户操作，时不时从我这要点数据，硬是把这个空白的 HTML 给玩出花儿来了。

Answer 2

• 加入 vue 之后一共有三个角色是吗？浏览器、vue 服务器、后端服务器？

不是，仍然是浏览器和后端服务器，vue只是编译前端代码

• html 文件从哪里来？vue 服务器？还是后端服务器？

后端服务器，是vue编译出来的，后端服务器处理这个静态文件

• 浏览器请求数据是直接向后端服务器请求还是向 vue 服务器请求再由 vue 服务器请求后端服务器？

直接向后端

• vue 相当于把原本后端负责的模板渲染剥离了是吗？那模板的渲染工作是不是变成了从 vue 服务器获取 html 文件，再从后端服务器获取 json 文件，然后再浏览器渲染拼凑在一起？

后端只提供 HTTP 接口，vue编译前端js代码，浏览器通过js构造页面，当页面事件发生时，例如点击，浏览器会通过js请求后端HTTP接口，浏览器拿到数据后，更新页面元素

Answer 3

这事儿没法完全从后端的角度来说啊。关于前后端分离，要不参阅几篇文章

• 前后端分离实践 - SegmentFault 思否
• 前后分离模型之封装 Api 调用 - SegmentFault 思否
• 前后端分离：分离开发，一体发布 - SegmentFault 思否

---

关于问题，回答如下：

• 加入 vue 之后一共有三个角色是吗？浏览器、vue 服务器、后端服务器？

  如果从发布后的角色来看，是浏览器和后端服务器

  vue-cli 在<u>开发期</u>会提供一个服务器用于预览 Vue 渲染的效果，也许这就是你理解的「Vue 服务器」吧。

• html 文件从哪里来？vue 服务器？还是后端服务器？

  先理解源 (src) 和目标 (dist)，Vue 编写的是源文件，通过构建过程生成目标文件，发布的是目标文件。

  Vue 的源文件包括 .vue、.less/.css、.ts/.js 等，通过构建，最终生成 .js。一个 Vue 项目通常会有一个入口 HTML，通常也只有一个。这个 HTML 内容很简单，构建过程一般只是拷贝，不会修改它。

  所以 HTML 在编辑期来源是手写（或工具生成），在运行期是可以由静态 HTTP/S 服务向浏览器提供。

• 浏览器请求数据是直接向后端服务器请求还是向 vue 服务器请求再由 vue 服务器请求后端服务器？

  前面提到 Vue 服务器只在开发期供调试用。所以答案不言而喻。

• vue 相当于把原本后端负责的模板渲染剥离了是吗？那模板的渲染工作是不是变成了从 vue 服务器获取 html 文件，再从后端服务器获取 json 文件，然后再浏览器渲染拼凑在一起？

  可以认为是你理解的这样。Vue 会进行前端渲染，在浏览器中进行。后端服务器分两个角色：静态文件服务提供用于渲染的静态资源，动态 API 服务根据请求提供数据，通常是 JSON，也可以是其他的。

  另外，Vue 也可以进行服务器端渲染 ，具体参阅 Vue.js 服务器端渲染指南

---

我觉得你需要了解一下前端工程相关的知识，要不来学习一下JavaScript全栈工程师养成记

Answer 4

前后端分离主要是分离了模板渲染这个环节，以前做web页面的时候是不是你用某一个后端语言把渲染模板最终渲染成了静态html文件，html文件里加一些js代码使其能在浏览器执行一些脚本。现在分离之后后端不用管模板渲染了，把以前后端渲染需要的数据做成接口通过http请求发送给浏览器，然后渲染逻辑放在用js编写的浏览器端里。

由于数据不直接用后端渲染了，这样原本的静态html就可灵活放置，就像以前的static静态文件一样，随便放到哪个服务器里都可以去请求别的服务器。你说的vue服务器其实感觉上是这一块，但是没有vue服务器这一说法，因为这些vue文件可以随便放在哪个服务器都行。

vue利用了本地浏览器效率来编译模板，实现了其他一些更加灵活的功能

Answer 5

浏览器->web服务器(nginx, apache)->静态资源(html, js, css)
浏览器->web服务器(nginx, apache)->WSGI server(gunicron, uWSGI )-> app -> 动态数据
浏览器将动态数据和静态资源渲染生成页面
从上述过程可以看出, 你理解的vue服务器其实就是web服务器, 和后端服务放一起叫后端服务器也没问题但是:
(1) 通过web服务器获取的不是vue源代码, 而是已经构建好的目标文件(html, js, css)
(2) html通常由nginx返回, 当然也有通过后端指定返回已经构建好的html, json请求则会经nginx转发给后端
(3)以上是生产运行的示例, 开发模式下, 前端构建通常由cli提供, 后端请求则由框架自带的server处理
(4) WSGI是python Web服务器网关接口协议, 异步代码通常不走这个, java这个位置是tomcat
(5) nginx不是必须的, 请求都可以直接从后端返回(生产环境不建议这么做), 这种将vue构建好的目标文件由后端返回的情况不能算真正的前后端分离(分离开发和分离部署)

Answer 6

从后端角度来说，把vue当作jq或模板引擎就好了

Answer 7

建议你看B站这个视频，讲了从单体项目到前后端分离的演进，并详细介绍了使用vue的前后端分离项目的请求过程和加载过程，是怎么样请求流转加载渲染的：https://www.bilibili.com/vide...

Answer 8

可以简单理解为基于js的freeMarker。但是功能更强大。

Answer 9

vue 服务器.....兄弟你是不是想太多了

Answer 10

vue项目文件本质上其实静态文件，只不过是根据后端的接口做好了对应的页面渲染和交互逻辑而已(页面渲染渲染与你无关，你只需要提供他需要的数据即可)，vue可以单独部署，也可以放在后端的静态目录中运行(一般是你放JS和CSS的地方，因为VUE本质上是静态文件)。

Answer 11

1. 角色还是两个, vue与后端接口服务, 只不过就像app一样, vue可以一下加载全部或者大部分的js代码, 接口这些都保存在项目里面了, 当你触发某一些按钮是就会从接口获取数据
2. 没有vue服务器的说法, 估计你的意思是vue怎么部署, 与vue服务器意思感觉字面意思也挺像的, vue这种项目确实需要单独部署, 会将域名直接解析到vue项目.第一次访问的时候, 会加载前端项目的绝大部分代码, 后续就是浏览器直接请求接口了, 当然服务端渲染, 懒加载可能还有部分接口也需要vue部署的这个项目处理
3. 差不多是这样. 反正都是根据 数据控制显示的内容. 但是vue这些组件化能够让前端好开发更负载的页面, 逻辑更清楚, 简单来说就是工程化.

Answer 12

前后端分离在我的眼里就是：
1.前端负责项目的框架，只是一个架子没有内容的，拿网页来说就是只有HTML标签这些（你看到的内容，比如文章标题，文章内容等等都是后端API提供的），但是没有填充的内容。
2.后端则是提供填充内容（API）。
3.后端的数据通过异步ajax传递给前端，前端通过JS来拿到数据渲染页面。

作为一个没有前后端分离开发经验的人，我有几个问题：
加入 vue 之后一共有三个角色是吗？浏览器、vue 服务器、后端服务器？
html 文件从哪里来？vue 服务器？还是后端服务器？
浏览器请求 json 数据是直接向后端服务器请求还是向 vue 服务器请求再由 vue 服务器请求后端服务器？
vue 相当于把原本后端负责的模板渲染剥离了是吗？那模板的渲染工作是不是变成了从 vue 服务器获取 html 文件，再从后端服务器获取 json 文件，然后再浏览器渲染拼凑在一起？

所以针对你的问题，Vue只是负责搭建了项目的“框架”，当然针对“架子”可以单独部署一个服务器来发布“架子”，在没有后端数据的情况下访问这个页面，会发现网页是空的。JSON数据的请求一般使用的是axios（一个HTTP 库，可以运行在node金和浏览器的），因为在前端vue+axios属于主流使用方法。页面的渲染就是Vue负责的了，也就是JS负责渲染，最终是浏览器来渲染页面。

Answer 13

小白入门嘛，自己实现个。demo 就啥都明白了。。。