在当前的互联网时代，Web 应用已经成为了重要的软件开发领域之一。构建现代 Web 应用需要使用多种技术来完成，其中前端开发就是其中非常重要的领域之一。在本教程中，我们将介绍如何使用 Express.js 和 Vue.js 构建现代 Web 应用。
Express.js 简介
Express.js 是一个开源、灵活、简洁的 Node.js Web 应用框架，可以用于创建各种类型的 Web 应用程序和 API。Express.js 提供了许多功能，例如：
- 简化了 Node.js 的操作和功能；
- 可以用于处理 HTTP 请求和响应；
- 可以轻松地处理 URL 路由；
- 支持多种模板引擎。
Vue.js 简介
Vue.js 是一个流行的 JavaScript 前端框架，用于构建现代 Web 应用程序的用户界面。Vue.js 具有以下功能：
- 轻量级框架，易于学习使用；
- 双向数据绑定；
- 组件化开发；
- 支持虚拟 DOM。
使用 Express.js 和 Vue.js 构建现代 Web 应用
在我们的示例中，我们将使用 Express.js 和 Vue.js 构建一个使用 MongoDB 数据库存储数据的 Web 应用程序。
第一步：创建 Express 项目
首先，我们需要在本地计算机上安装 Node.js 和 Express.js。接下来，我们可以使用以下命令在命令行中创建一个 Express 项目：
npx express-generator --view=ejs test
这将创建一个名为 test 的新项目，并使用 EJS 模板引擎。在项目文件夹中，我们可以看到以下文件和文件夹：
app.js bin/ node_modules/ package-lock.json package.json public/ routes/ views/
其中，app.js 是 Express 项目的主要 JavaScript 文件。
第二步：构建 API
接下来，我们将创建一个简单的 API 路径，该路径可以存储用户数据并在浏览器中显示。在 app.js 文件中，添加以下代码：
-- -------------------- ---- -------
--- ------- - -------------------
--- ---------- - -----------------------
--- -------- - --------------------
--- ---- - -----------------------------
--- --- - ----------
--- ------ - -----------------
---------------------------
-------------------------------------------------------- -- ----------------------- ------------------------- -- --------------------
--------------- ------------- ---- -
---------- -------- ---- ----------------
---
----------------------
------------------ ---- -
----------------------- ------ -
-- -----
--------------
----------------
---
--
------------------- ---- -
--- ---- - --- -------
------------- - ------------------
---------- - ---------------
------------- - ------------------
----------------------- -
-- -----
--------------
---------- -------- ----- --------- ---
---
---
--------------- --------
---------------- ---------- -
---------------------- -- -------
---第三步：创建 Vue.js 项目
接下来，我们将创建一个 Vue.js 项目。在命令行中运行以下命令：
vue create client
在创建项目时，我们可以选择使用哪些功能和插件。默认情况下，我们将选择 Babel、Router、Vuex 和 Linter。安装完成后，我们可以使用以下命令在 localhost:8080 中运行项目：
npm run serve
在项目中，我们将使用以下目录结构：
src/
components/
UserForm.vue
UserList.vue
App.vue
main.js第四步：创建用户界面
现在我们将创建一个用户界面，该界面允许用户输入和存储新用户。我们将创建两个组件，一个用于显示用户列表，另一个用于创建新用户。
在 UserForm.vue 中，添加以下代码：
-- -------------------- ---- -------
----------
-----
---------- ---------
----- -----------------------------
-----
---------------- --------
------ ----------- ------------------ ---------
------
-----
------------- --------
------ ------------ --------------- ---------
------
-----
---------------- --------
------ --------------- ------------------ ------------- ---------
------
------- -----------------------------
-------
------
-----------
--------
------ ------- -
------ -
------ -
--------- ---
------ ---
--------- --
-
--
-------- -
------------ -
----- ---- - -
--------- --------------
------ -----------
--------- -------------
-
---------------------------------- -----
------------- - ---
---------- - ---
------------- - ---
-
-
-
---------在 UserList.vue 中，添加以下代码：
-- -------------------- ---- -------
----------
-----
-------- ---------
----
--- ----------- -- ------ ----------------
------ ------------- -------
----- ---------- ------
-----
-----
------
-----------
--------
------ ------- -
--------- -
------- -
------ ------------------------
-
--
--------- -
-----------------------------------
-
-
---------在 App.vue 中，添加以下代码：
-- -------------------- ---- -------
----------
-----
--------- --
--------- --
------
-----------
--------
------ -------- ---- ----------------------------
------ -------- ---- ----------------------------
------ ------- -
----------- -
---------
--------
-
-
---------第五步：连接 API 和 Vue.js
最后，我们需要将我们刚刚创建的 Web 应用程序的前端和后端部分连接起来。我们可以使用 axios 发出请求并处理响应。在 store.js 文件中，添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -
------ --
-
----- ------- - --
----- --------- - -
---------------- ------ -
----------- - ------
-
-
----- ------- - -
-------------------- -
-----------------------
-------------- -- -
------------------- ---------------
--
--
-------------- ----- -
------------------------ -----
-------------- -- -
----------------------
--
-
-
------ ------- -
------
--------
----------
--------
-现在我们可以在浏览器中查看我们的 Web 应用程序，使用以下命令运行 Vue.js 项目：
npm run serve
在浏览器中键入 localhost:8080，将会看到一个用户表格，您可以在其中添加新用户并查看所有用户。
总结
在本文中，我们已经介绍了如何使用 Express.js 和 Vue.js 构建现代 Web 应用。我们已经了解了如何使用 Express.js 构建一个简单的 API，以及如何使用 Vue.js 构建一个用户界面并将其连接到我们的 API。这个示例应该可以作为一个好的起点，以便您可以开始构建您自己的应用程序。无论您是新手还是有经验的开发人员，Express.js 和 Vue.js 都是高效、优秀的工具，可以帮助您设计和构建出色的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/652a2b1a7d4982a6ebc84790