介绍
随着互联网的迅速发展，Web 应用程序的开发变得越来越复杂。为了提高用户体验、增强应用性能和易用性，前端技术也得到了长足的发展。Vue.js 是一款渐进式 JavaScript 框架，可帮助我们构建出高效、灵活且易用的单页面应用（SPA）。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，可利用事件驱动和非阻塞 I/O 的模型构建高扩展性和高性能的网络和服务器应用程序。MongoDB 是一个面向文档的 NoSQL 数据库管理系统，由于它的高可用性和可扩展性，它已成为 Web 开发领域中最流行的数据库之一。本文将介绍如何使用 Vue.js、Node.js 和 MongoDB 构建一个基于单页面应用程序的 Web 应用程序。
技术栈
你需要的前置技能：
- 熟悉基本的 JavaScript、HTML 和 CSS。
- 熟悉 Vue.js 和 Node.js 的基础。
我们将使用以下技术：
- Vue.js：客户端渲染框架。
- Node.js：服务器端运行时。
- Express.js：Web 应用程序框架。
- MongoDB：文档型 NoSQL 数据库。
步骤
在开始编码之前，请确保在本地安装了以上列出的所有技术。接下来，我们将完成以下步骤：
- 创建一个 Express.js 的 Web 应用程序和一个 MongoDB 数据库。
- 配置 Express.js 和 MongoDB。
- 使用 Vue.js 构建客户端应用程序。
- 将客户端和服务器端进行连接。
- 编写外观和响应式页面。
- 将数据存储在 MongoDB 中，并通过服务器 API 发送和接收数据。
1. 创建一个 Express.js 的 Web 应用程序和一个 MongoDB 数据库
首先，让我们建立一个基于 Express.js 的 Web 应用程序和一个 MongoDB 数据库。你可以使用以下命令来安装 Express.js 和 MongoDB：
npm install express mongodb --save
创建一个名为 "server.js" 的服务器文件，并初始化 Express.js 应用程序，如下所示：
-- -------------------- ---- ------- -- -- ---------- - ----- ------- - ------------------- -- -- ---------- ---- ----- --- - ---------- -- -------- ----- ---- - ---------------- -- ----- -- -- --- --- ---------------- -- -- - ------------------- ------- -- ---- ---------- ---
接下来，我们将创建一个基于 MongoDB 的数据库。你可以使用以下命令安装 MongoDB：
npm install mongodb --save
然后，请创建一个名为 "db.js" 的文件，并编写以下代码以连接到 MongoDB 数据库：
-- -------------------- ---- ------- -- -- ------- ---- ----- ----------- - ------------------------------- -- ----- ----- --- - ---------------------------- -- ----- ----- ------ - -------- -- --- ------- --- ------------------------ ----- ------- -- - -- ----- ----- ---- ---------------------- -- ------- --------- ----- -- - ------------------ -- ------- --------------- ---
现在，我们已创建了一个 Express.js 的 Web 应用程序和一个 MongoDB 数据库。
2. 配置 Express.js 和 MongoDB
在将 Express.js 和 MongoDB 进行结合之前，我们需要进行一些配置。为了实现这一点，我们将使用第三方库。请确保安装以下依赖：
npm install cors body-parser --save
现在，我们可以将以下代码添加到 "server.js" 中以启用 CORS 支持，并配置 body-parser 中间件：
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ---------- - ----------------------- -- -- ---- ------ ---------------- -- ------- --------------------------- ------------------------------- --------- ---- ---- -- -- ------- --------- ------------ ----- ---- -- - --------------- -------- ---
3. 使用 Vue.js 构建客户端应用程序
现在，让我们使用 Vue.js 构建基于客户端的应用程序。同样，请确保安装了 Vue.js：
npm install vue --save
在此项目中，我们将使用 Vue CLI 自动化工具，使用以下命令全局安装它：
npm install -g vue-cli
接下来，请使用以下命令创建基于 Vue.js 的 Web 应用程序：
vue init webpack myapp
该命令将创建名为 "myapp" 的新目录，其中包含生成的应用程序模板。现在，切换到新创建的应用程序文件夹，并使用以下命令安装依赖项：
cd myapp npm install
以下是 Vue.js 应用程序的主要文件：
- "src/main.js" - 主 JavaScript 文件。
- "src/App.vue" - 主 Vue 应用程序文件。
- "src/components" - Vue 组件目录。
在 "src/main.js" 文件中添加以下代码，启动 Vue 应用程序：
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')4. 将客户端和服务器端进行连接。
现在，我们已准备好连接客户端和服务器端。为此，请添加以下代码到 "server.js" 文件中：
// 公开静态资源，这里是 dist 目录
app.use(express.static("myapp/dist"));调用 API
我们可以使用以下代码在客户端和服务器之间进行交流，该代码使用 Axios：
- 首先，请安装 Axios：
npm install axios --save
- 然后，请在 "package.json" 文件中添加以下内容：
-- -------------------- ---- -------
-
------- --------
---------- --------
-------------- ------- --- --- ------- -----
------- ------------
---------- -
------ ----- -----------
-------- ---------------- ----- -- ---- ----------
--
--------------- -
-------- ----------
-------------- ----------
------- ---------
---------- ----------
---------- ----------
--------------- ---------
-
-- 最后，请在 "App.vue" 中添加以下代码，以调用服务器端 API：
-- -------------------- ---- -------
----------
---- --------------
--- ------------------ -------- -------
----- ---------------- -------------------------
------ ----------- -------------- ------------------- --
------- -------------------------
-------
------
-----------
--------
------ ----- ---- --------
------ ------- -
------ -
------ -
----- ---
--------- ---
--
--
-------- -
-------- -
-----
---------------------------------------- - ----- --------- --
--------- -- -
------------- - -----------------
--
---------- -- -
-----------------
---
--
--
--
---------5. 编写外观和响应式页面
在这一步中，我们将使用 Materialize CSS 框架来设计 UI。我们将在 Vue.js 应用程序中使用 Materialize Vue 插件。首先，请安装 Materialize CSS：
npm install materialize-css --save
接下来，请使用以下命令安装 Materialize Vue 插件：
npm install vue-materialize --save
要连接 Materialize Vue，请添加以下代码到 "src/main.js" 中：
import 'materialize-css/dist/css/materialize.min.css'; import 'materialize-css/dist/js/materialize.min.js'; import VueMaterial from 'vue-materialize'; Vue.use(VueMaterial);
还需要按照 Materialize Vue 官网中的话，舍去Vue-cli自动生成的/App.vue 和/components目录，重新写一个App.vue，写法如下：
-- -------------------- ---- -------
----------
-----
-----
---- ------------------ --------- ----------
-- -------- ----------------- ---------------
--- --------------- ------------ ----------------------
---------------- ------------------------------
---------------- ------------------------------------
---------------- ------------------------------------
-----
------
------
---------------------------
------
-----------同时，不要忘记修改 "src/main.js" 文件中的代码：
-- -------------------- ---- ------- ------ --- ---- ------ ------ ------ ---- ----------- ------ - ------------- ----------- - ---- ---------------- ------ --- ---- ------------ ------ ----------------------------------- ------ --------------------------------------- ------------------------ - ------ ---------------------- --------------------- --- ----- ------- ------- - -- ------- ------------------
我们可以使用以下代码在 "src/components" 目录中创建组件：
-- -------------------- ---- -------
----------
-----
----
--- ----------- -- ------ ----------------
-------- --------- --------- - -------- ---------- ---------
-----
-----
------
-----------
--------
------ ----- ---- --------
------ ------- -
----- -- -- --
------ ---
---
--------- -
-----
---------------------------------------
--------- -- ----------- - ----------
---------- -- ------------------
--
--
---------接下来，在 "router.js" 中添加以下代码：
-- -------------------- ---- -------
------ --- ---- ------
------ ------ ---- -------------
------ ---- ---- ------------------------
------ ----- ---- -------------------------
------ ----- ---- -------------------------
----------------
----- ------ - --- --------
----- ----------
------- -
-
----- ----
----- -------
---------- -----
--
-
----- ---------
----- --------
---------- ------
--
-
----- ---------
----- --------
---------- ------
--
--
---
------ ------- -------我们已经编写了外观和响应式页面，我们的 Web 应用程序现在看起来非常漂亮。
6. 将数据存储在 MongoDB 中，并通过服务器 API 发送和接收数据
现在，我们将使用以下代码连接到 MongoDB 数据库并存储数据：
-- -------------------- ---- -------
----- ----------- - -------------------------------
----- -------- - ----------------------------
-- ----- --- ---
----- --- - ----------------------------------
----- ------ - --------
-- --- ------- ---
------------------------ - ---------------- ---- -- ----- ------- -- -
-- ----- ----- ----
----- -- - ------------------
-- - --- --------- -------
---------------------- ----- ---- -- -
----- - ---- - - ---------
----- ---------- - -----------------------
---------------------- ---- -- ----- ---- -- -
-- ----- ----- ----
----- ------- - ------- - - ---- - -- --- ---- ------------ ------ -----
---------- ------- ---
---
---
-- - --- -- ------- ------
--------------------- ----- ---- -- -
----- ---------- - -----------------------
------------------------------- ----- -- -
-- ----- ----- ----
---------------
---
---
---------------- -- -- -
------------------- ------- -- ---- ----------
---
---我们已成功将数据存储在 MongoDB 中，并将其发送和接收到客户端。
结论
在本教程中，我们使用了 Vue.js、Node.js 和 MongoDB 构建出了一个简单的 Web 应用程序。Vue.js 是一款非常受欢迎的客户端渲染框架，可帮助您创建快速、灵活且易用的单页面应用程序。Node.js 则是一个高度灵活和可扩展的 JavaScript 运行时，它支持非阻塞 I/O、跨平台开发和事件驱动架构。MongoDB 是一种高性能、弹性和高可用性的数据库，支持面向文档的 NoSQL 数据库管理。通过结合这些技术，我们可以轻松构建出现代化的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67390ba0317fbffedf14d406