完整的 Vue.js 单页应用

在本课程中，展示了一个完整的 MEVN 栈应用程序。前端基于 Vue.js，后端由 Node.js 服务器和 MongoDB 数据库组成。深入探讨该应用程序的细节。

Vue.js 应用执行架构

Vue.js 并不会在后端服务器上执行全部应用代码。相反，它将负责管理前端界面的应用逻辑部分发送到客户端。在向客户端提供所有前端代码之后，仅通过客户端机器进行数据的发送与接收。所有基于这些数据的处理操作都在客户端机器上完成。运行在客户端机器上的前端代码需负责向后端服务器请求数据并发送数据。此外，它还执行其他所有操作，例如切换视图、切换应用的不同组件，而无需与后端服务器通信。这种架构具有两个优势：

1. 它利用客户端机器的计算资源来运行应用，减轻了服务器负载，使后端服务器更加简单。
2. 显著提升了用户体验，因为并非每个操作都需要向后端服务器发送请求，从而节省了时间。

Vue.js 前端服务器

当客户端通过互联网访问一个基于 Vue.js 的网页应用时，实际上是在与主机上运行的 Vue.js 服务器通信。Vue.js 服务器会向客户端提供运行该网页应用所需的所有文件和资源。它不仅提供前端（浏览器端）代码和资源，还会编译所有的模块和依赖项，使客户端无需安装任何内容即可运行应用。前端服务器将所有代码文件编译为高度优化的模块，可在客户端浏览器中直接运行。

开发模式与生产模式

Vue.js 提供了开发模式和生产模式两种服务器环境，分别用于调试和正式发布应用。顾名思义，开发模式用于开发者（如你）在创建网站时频繁测试代码更改。开发服务器提供了诸如 热重载 和 详细错误日志 等功能，以帮助开发者高效工作。而生产模式则用于应用完全开发完成后，将其编译为高度优化的模块，准备部署上线。

在本课程所使用的示例中，使用的是 开发模式 来运行前端服务器，以便你在学习 Vue.js 开发的过程中可以自由尝试应用，并实时查看修改效果。

AskAnon 应用

为了演示本课程所教授的大部分 Vue.js 概念，我们展示了一个基于 Vue.js 前端的简单应用，名为“AskAnon”。这是一个公开的问答平台，任何人都可以匿名提问或回答问题。在本课中，完整展示了 AskAnon 应用的代码，包括前端服务器和后端服务器（连接数据库）。同时提供了前后端的终端界面截图，帮助你全面了解应用内部运行机制。

AskAnon 应用结构

AskAnon 应用分为两个主要部分：App 文件夹和 backend 文件夹。App 文件夹包含应用的前端部分，backend 文件夹包含后端部分。App 文件夹中包含一个 src 文件夹，存放所有 Vue.js 文件和应用组件。backend 文件夹中包含一个 server 文件夹，其中存放后端服务器文件和数据库结构定义。

App（前端部分）

在前端部分，一个名为 App.vue 的主 Vue.js 文件负责挂载整个应用。它还包含两个组件：Question.vue 和 Answer.vue，分别代表应用中显示的问题及其答案。从组件名称可以直观理解：App.vue 在第 12 行使用 v-for 指令渲染一组 Question 组件；而每个 Question 组件内部又包含一组 Answer 组件（见 Question.vue 第 8 行）。

backend 后端部分

app2.js 文件包含了后端服务器的代码。该服务器主要完成以下任务：设置数据库、从数据库获取数据并发送给前端，同时将前端发送的数据保存到数据库中。

请运行下方提供的 AskAnon 应用，亲身体验前后端协同工作的全过程！

注意：首次运行应用时，我们已在后端服务器（app2.js 文件第 102 至 104 行）中添加了一些示例问题和答案，自动填充到数据库中。再次运行应用时，这些初始数据会被重复插入，导致它们出现两次。这说明数据库在前后端服务器重启后仍能保持其状态。

在发布问题和答案后，再次点击 运行 按钮重新启动应用。应用将重新启动，你之前发布的所有问题及答案都会再次显示。这是因为问题和答案被存储在数据库中，即使前后端服务器重启，数据依然保留。

注意：数据库每 15 分钟会自动清除一次，这是由于我们的平台对实时应用的托管时长限制。若遇到此情况，请再次点击 运行 按钮重新启动应用，并重新开始发布问题！

理解 App.vue 及其组件

App.vue 的 <template> 部分包含应用标题和一个用于发布问题的文本框。它使用 v-for 指令（位于 App.vue 第 12 行）渲染 Question.vue 组件列表。在 data 中，包含一个名为 questions 的数组，用于存储问题对象的集合。在 methods 部分，有两个核心方法：getAllQueries() 和 postQuery()。getAllQueries() 函数在 created 生命周期钩子中被调用——该钩子在 Vue 实例创建后立即执行（在挂载前），确保应用启动时即刻获取所有问题数据并赋值给 data 中的 questions。postQuery() 函数则将新问题添加到 questions 数组中，并同步发送至数据库。

makeid() 函数（位于 App.vue 第 63 行）为每个问题生成一个随机唯一 ID，命名为 myid。该 ID 用于在数据库中唯一标识每个问题，以便后续为该问题添加回答。

Question.vue 与 Answer.vue

Question.vue 组件接收一个问题作为 prop 并进行展示。它还包含一个 postAnswer() 方法，用于将回答添加到传入的 question 对象的 answers 数组中，并同时将回答发送至数据库。toggleVisibilty() 函数（位于 Question.vue 第 35 行）在点击问题时切换其对应答案的显示或隐藏状态。

Answer.vue 是一个较为简单的组件，接收一个回答作为 slot 并进行展示。它仅被 Question 组件使用，不被 App.vue 直接调用。虽然目前功能简单，但将其设计为独立组件，是为了未来便于扩展功能。