MongoDB 是一种非关系型数据库，使用 JSON 风格的文档和动态模式，非常适合处理大量不规则的数据。它可以用于各种应用程序，包括 Web 应用程序。Vue.js 是一种流行的 JavaScript 库，用于构建交互式的 Web 用户界面。在这篇文章中，我们将结合实际案例详细介绍如何在 Vue.js 中使用 MongoDB。
环境设置
在开始之前，您需要确保已安装 MongoDB 和 Vue.js，并熟悉它们的基本使用方法。我们还需要安装 MongoDB 的客户端驱动程序 Mongoose，它是一个对象文档模型库，使得在 Node.js 中使用 MongoDB 变得更加容易。
我们可以使用 npm 进行安装，输入以下命令：
npm install mongoose
连接 MongoDB 数据库
首先，我们需要建立与 MongoDB 数据库的连接。这可以通过以下方式完成：
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/test', { useNewUrlParser: true })
.then(() => console.log('MongoDB connected'))
.catch(err => console.log(err));上面的代码建立了与本地 MongoDB 数据库（指定名称为“test”）之间的连接。如果一切顺利，控制台将显示“MongoDB connected”。
创建 Mongoose 模型
我们可以使用 Mongoose 创建一个新的数据模型，以便存储和检索 MongoDB 中的数据。以下是一个简单的例子：
-- -------------------- ---- -------
----- -------- - --------------------
----- ------ - ----------------
----- ------------- - --- --------
----- -
----- -------
--------- ----
--
------ -
----- -------
--------- ----
--
------------ -
----- -------
--------- ----
-
---
----- ------- - ------------------------- ---------------上面的代码定义了一个名为“Product”的 Mongoose 模型，该模型具有三种属性：名称、价格和描述。这些属性都必须在创建过程中指定，并且只能是字符串或数字类型。通过使用该模型，我们可以将数据存储到 MongoDB 中，并使用基于 Mongoose 的查询语言检索数据。
在 Vue.js 中使用 Mongoose
现在我们已经建立了与 MongoDB 数据库的连接并创建了一个新的 Mongoose 模型，让我们着手在 Vue.js 中使用这些数据。以下是我们将要创建的示例：
- 创建一个 Vue.js 应用程序
- 渲染来自 Mongoose 模型的数据列表
- 允许用户添加和编辑数据
创建 Vue.js 应用程序
在开始之前，我们需要先创建一个简单的 Vue.js 应用程序。以下是一个示例应用程序，用于渲染简单的标头和文本：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
------- ------------------------------------------------------------
-------
------
---- ---------
------ ------- -------
------
--------
--- --- - --- -----
--- -------
----- -
-------- ------ --------
-
---
---------
-------
-------如果您将上面的代码保存为“index.html”文件并在浏览器中打开，您将看到标题为“Hello Vue.js!”的页面。
从 Mongoose 模型渲染数据
现在，让我们修改应用程序，以便从 Mongoose 模型读取数据并将其渲染为列表。以下是一个例子：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ---------------
------- ------------------------------------------------------------
-------
------
---- ---------
------ ------- -------
----
--- -------------- -- ------------ ------------ -- - -- ------------- -------
-----
------
------- ---------------------------------------------------------
--------
--- --- - --- -----
--- -------
----- -
-------- -------- ------
--------- --
--
--------- -
--------------------------
-------------- -- ------------- - --------------
-
---
---------
-------
-------上面的代码将发送请求以从“/api/products”端点获取数据，并使用“v-for”指令将数据渲染为列表项。axios 库用于向服务器发送请求，然后更新 Vue.js 应用程序的状态。
允许用户添加和编辑数据
最后，我们可以添加一个 HTML 表单，以允许用户添加和编辑数据。以下是一个示例表单：
<form v-on:submit.prevent="addProduct"> <input type="text" v-model="newProduct.name"> <input type="text" v-model="newProduct.price"> <input type="text" v-model="newProduct.description"> <button type="submit">Add Product</button> </form>
我们还需要在 Vue.js 中为此表单添加一些逻辑。以下是一个示例处理程序，用于在表单提交时将新数据添加到 Mongoose 模型中：
-- -------------------- ---- -------
-------- -
------------ -
--------------------------- ----------------
-------------- -- -
---------------------------------
-------------------- - --
--------------------- - --
--------------------------- - --
--
-
-上面的代码将新添加的产品发送到“/api/products”端点，然后将响应中的数据添加到 Vue.js 应用程序中。它还将清空表单中的数据。
结论
本文详细介绍了如何在 Vue.js 中使用 MongoDB，并基于 Mongoose 的模型和 Axios 库来读取和写入数据。通过组合这些技术，您可以创建强大的 Web 应用程序，处理大量不规则的数据。希望这篇文章对学习 Vue.js 和 MongoDB 有所帮助。完整的代码示例可在 GitHub 上找到。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6738a326317fbffedf11cf86