前言
Vue.js 和 Express.js 是当前非常流行的前端和后端技术。Vue.js 是由尤雨溪开发的一款渐进式 JavaScript 框架，可以轻松构建交互性强、性能优异的 Web 应用程序。Express.js 则是基于 Node.js 平台的 Web 应用程序框架，可以快速搭建高性能、可扩展的 Web 应用程序。
本文将介绍如何使用 Vue.js 和 Express.js 构建全栈应用，包括前端和后端的搭建和连接，以及如何使用 RESTful API 和 MongoDB 数据库进行数据交互。本文适合有一定 Vue.js 和 Express.js 基础的开发人员阅读。
环境准备
在开始构建全栈应用之前，需要先准备好以下环境：
- Node.js 和 npm
- MongoDB 数据库
前端搭建
创建 Vue.js 项目
首先，我们需要创建一个 Vue.js 项目。可以使用 Vue CLI 快速创建一个新项目，具体步骤如下：
安装 Vue CLI
npm install -g @vue/cli
创建新项目
vue create my-project
在创建项目的过程中，可以选择需要的插件和配置项。
启动开发服务器
cd my-project npm run serve
启动开发服务器后，可以在浏览器中访问 http://localhost:8080 查看应用程序。
编写前端代码
接下来，我们需要编写前端代码。在本例中，我们将创建一个简单的 TodoList 应用程序，用于演示前后端如何交互。
首先，在 src/components 目录下创建一个名为 TodoList.vue 的组件，用于显示 TodoList：
-- -------------------- ---- -------
----------
-----
-----------------
----- --------------------------
------ ----------- ----------------- --
------- --------------------------
-------
----
--- ----------- -- ------ ----------------
-- ------------ --
------- ---------------------------------------------
-----
-----
------
-----------
--------
------ ------- -
------ -
------ -
------ ---
-------- ---
--
--
--------- -
------------------
--
-------- -
------------ -
-- ----- ----- ----- ---- ------- ---
--
--------- -
-- ----- --- --- ---- -- ------- ---
--
-------------- -
-- ----- ------ ---- ---- ------- ---
--
--
--
---------其中，data 属性用于存储 TodoList 数据，created 生命周期钩子用于在组件创建时调用 fetchTodos 方法获取数据，methods 属性用于定义方法，包括获取数据、添加新数据和删除数据。
接下来，我们需要编写前端代码与后端 API 进行交互。在 src/api 目录下创建一个名为 todos.js 的文件，用于定义与 TodoList 相关的 API：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- - ----------------------------
----- ------- - --------------
--------
-------- -
------- -------------------
--------------- -------------------
--
---
------ ----- ---------- - ----- -- -- -
----- -------- - ----- ----------------------
------ --------------
--
------ ----- ------- - ----- --------- -- -
----- -------- - ----- ---------------------- - ------- ---
------ --------------
--
------ ----- ---------- - ----- ---- -- -
----- -------- - ----- -------------------------------
------ --------------
--其中，baseURL 为后端 API 的地址，todoAPI 为使用 Axios 创建的 API 实例，fetchTodos、addTodo 和 deleteTodo 分别为获取数据、添加新数据和删除数据的方法。
最后，我们需要将 TodoList.vue 组件中的方法与 API 进行关联。修改 methods 属性如下：
-- -------------------- ---- -------
-------- -
----- ------------ -
----- ----- - ----- -------------
---------- - ------
--
----- --------- -
-- -------------- -
----- ---- - ----- ----------------------
----------------------
------------ - ---
-
--
----- -------------- -
----- ---------------
---------- - ------------------------ -- -------- --- ----
--
--现在，前端代码已经编写完成。可以在浏览器中查看应用程序，如果一切正常，应该能够看到一个空的 TodoList，可以添加和删除 Todo 项。
后端搭建
创建 Express.js 应用程序
接下来，我们需要创建一个 Express.js 应用程序。可以使用 Express Generator 快速创建一个新应用程序，具体步骤如下：
安装 Express Generator
npm install -g express-generator
创建新应用程序
express my-app --no-view
在创建应用程序的过程中，可以选择需要的插件和配置项。
安装依赖项
cd my-app npm install
启动开发服务器
npm start
启动开发服务器后，可以在浏览器中访问 http://localhost:3000 查看应用程序。
编写后端代码
接下来，我们需要编写后端代码。在 routes 目录下创建一个名为 todos.js 的路由文件，用于定义与 TodoList 相关的 API：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ------ - ----------------- ----- ---- - -------------------------- --------------- ----- ----- ---- -- - ----- ----- - ----- ------------ ---------------- --- ---------------- ----- ----- ---- -- - ----- - ------- - - --------- ----- ---- - --- ------ ------- --- ----- ------------ --------------- --- --------------------- ----- ----- ---- -- - ----- - -- - - ----------- ----- --------------------------- ---------- -------- ----- -------- --- --- -------------- - -------
其中，Todo 为使用 Mongoose 创建的数据模型，get、post 和 delete 分别为获取数据、添加新数据和删除数据的路由处理程序。
接下来，我们需要将路由与应用程序进行关联。在 app.js 文件中添加以下代码：
const todosRouter = require("./routes/todos");
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use("/api/todos", todosRouter);其中，express.json() 和 express.urlencoded() 用于解析请求体中的 JSON 和 URL 编码数据，/api/todos 为 TodoList 相关的 API 路由前缀。
最后，我们需要连接到 MongoDB 数据库。在 app.js 文件中添加以下代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ---------------------------------------------------- - ---------------- ----- ------------------- ----- --- ----- -- - -------------------- -------------- --------------------------- ----------- ---------- --------------- -------- -- - ---------------------- -- ---------- ---
其中，mongoose.connect() 用于连接到 MongoDB 数据库，db 为数据库连接对象，db.on() 和 db.once() 用于监听数据库连接状态。
现在，后端代码已经编写完成。可以在浏览器中查看应用程序，如果一切正常，应该能够使用前端代码添加和删除 Todo 项，并查看后端数据库中的数据。
总结
本文介绍了如何使用 Vue.js 和 Express.js 构建全栈应用，包括前端和后端的搭建和连接，以及如何使用 RESTful API 和 MongoDB 数据库进行数据交互。通过本文的学习，读者可以了解如何使用 Vue.js 和 Express.js 构建全栈应用，并掌握相关的开发技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657af207d2f5e1655d571cdf