在现代化的 Web 应用程序中，美观的用户界面和管理后台是非常重要的，它们不仅可以提高用户沟通和交互的效率，还可以增加用户的黏性。本文将介绍如何使用 Express.js 和 BootstrapVue 构建一个美观的管理后台，让您的应用程序更具吸引力和实用性。
1. Express.js 简介
Express.js 是一种基于 Node.js 平台的 Web 开发框架，它可以轻松地创建基于 Web 的应用程序。Express.js 不需要太多的模板代码，即可高效地处理路由、中间件和 HTTP 请求。
2. BootstrapVue 简介
BootstrapVue 是一个基于 Bootstrap 4、Vue.js 和 JavaScript 的一套开源 UI 组件库，提供了多种常用的 UI 元素和控件，包括表格、按钮、表单、导航等等。BootstrapVue 的响应式布局可以自适应不同尺寸的屏幕，并支持不同主题的自定制。
3. 构建前端的开发环境
在开始构建我们的管理后台之前，我们需要先配置并运行我们的开发环境。
步骤1：安装 Node.js
首先需要安装 Node.js，Node.js 将在本地计算机上运行我们的 Express 应用程序。下载安装程序后，按照提示进行操作并验证是否安装成功。
步骤2：初始化 Express.js 项目
打开命令行工具，输入以下命令创建一个新的 Express.js 项目：
- --- ----
按照提示完成项目初始化，接着运行以下命令安装必要的依赖：
- --- ------- ------- ----------- ----
步骤3：安装 BootstrapVue
BootstrapVue 可以通过 cdn 或者包管理工具进行安装，我们选择使用 npm 进行安装。在项目目录下运行以下命令：
- --- ------- ------------- --------- ------ ---------
步骤4：创建并配置 Express.js 应用程序
在项目根目录下创建一个名为 index.js 的文件，输入以下代码：
----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- ---------------- --------------------------- ------------------------------- --------- ---- ---- -------------------------------- - ------------ ---------------- -------- -- - ------------------- --------- -- ---- - - ------ ---
这段代码用于创建服务器并监听端口，还设置了 CORS 和 bodyParser 中间件和 public 文件夹的静态文件服务。
步骤5：创建 BootstrapVue 开发示例
在项目根目录下创建一个名为 index.html 的文件，并加入以下代码：
--------- -----
------
------
------------------- ------------
----- ---------------- -------------------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------
----- ---------------- -----------------------------------------------------------------------------------------
-------
------
---- ---------
-------------
--------- --------
------- -- ------------ ---------
-----------
--------- ------
---- -- -- ------- -- ----- ------------ -- - --------
-----------
--- -------------
--------------- -- - --- -- ---- ------ -- ---------- ----- -- ------ --- --------- ------
------ --- ----- ---- -- --- ------- --------------------------------- ---------------------------- ---------------------
--------------
------
------- ------------------------------------------------------------
------- ------------------------------------------------------------------------------------
------- -------------------------------------------------------------------------------------
------- ------------------------------------------------------------------------------
--------
--- -----
--- ------
--
---------
-------
-------这段代码用于创建一个简单的 BootstrapVue 示例。运行以下命令启动 Express.js 服务器：
- ---- --------
在浏览器中打开 http://localhost:3000/，则可以看到一个带有标题、描述、内容链接的页面，并带有 Bootstrap 样式化的组件。
4. 进阶示例
我们现在将展示如何通过 Express.js 和 BootstrapVue 创建和管理文章。
步骤1：创建文章模型
在项目目录下创建一个名为 models.js 的文件，并输入以下代码：
----- -------- - -------------------- ----- ------------- - --- ----------------- ------ ------- -------- ------- ----- -- ----- ------------------------------- ---- ----- --- ---------- - ----- ----- -------- -------- -- ---------- - ----- ----- -------- -------- -- --- ----- ------- - ------------------------- --------------- -------------- - --------
这段代码用于定义文章模型并导出，包括文章标题、内容、标签、创建时间和更新时间等属性。
步骤2：创建路由器
在项目目录下创建一个名为 routes.js 的文件，并输入以下代码：
----- ------- - -------------------
----- ------- - --------------------
----- ------ - -----------------
----------------------- ----- -------- ----- ---- ----- -
--- -
----- -------- - ----- --------------------------------
-------------------------------
- ----- ------- -
------------
-
---
------------------------ ----- -------- ----- ---- ----- -
--- -
----- ------- - --- ---------
------ ---------------
-------- -----------------
----- --------------
---
----- ---------------
------------------------------
- ----- ------- -
------------
-
---
--------------------------- ----- -------- ----- ---- ----- -
--- -
----- -- - --------------
----- ------- - ----- ---------------------
-- ---------- -
----------------------------- --- --------
- ---- -
------------- - -------------- -- --------------
--------------- - ---------------- -- ----------------
------------ - ------------- -- -------------
----------------- - -----------
----- ---------------
------------------------------
-
- ----- ------- -
------------
-
---
------------------------------ ----- -------- ----- ---- ----- -
--- -
----- -- - --------------
----- ------- - ----- ---------------------
-- ---------- -
----------------------------- --- --------
- ---- -
----- -----------------
----------------------
-
- ----- ------- -
------------
-
---
-------------- - -------这段代码用于定义 Express.js 路由器并导出，包括获取、创建、更新和删除文章等路由。
步骤3：修改主文件
修改主文件 index.js，加入以下代码：
----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- -------- - -------------------- ----- ------ - -------------------- ------------------------------------------------------ - ---------------- ----- ------------------- ----- ----------------- ------ --------------- ----- --- ----- -- - -------------------- -------------- --------------------------- ----------- ---------- --------------- -------- -- - --------------------- ------------ --- ----- --- - ---------- ----- ---- - ---------------- -- ----- ---------------- --------------------------- ------------------------------- --------- ---- ---- -------------------------------- - ------------ ---------------- ---------------- -------- -- - ------------------- --------- -- ---- - - ------ ---
这段代码用于连接到 MongoDB 数据库并将路由加入 Express.js 应用程序。
步骤4：创建前端页面
在 public 文件夹下创建一个名为 index.html 的文件，并输入以下代码：
--------- -----
------
------
-------------- ---------------
----- ---------------- ------------------------------------------------------------------------------------------
------- ------------------------------------------------------------
------- --------------------------------------------------------------------
-------
------
---- ---------
---- ------------------
---- ------------
---- ------------- ------
-------------
------
------
---- ------------
---- ---------------
------- ------------- ---------- ----------- ----- ------------------- ----------------------------------------
------ ------------ ----------------
-------
----
-----------
-----------
-----------
-------------
-------------
---------
-----
--------
-------
--- -------------- -- ----------
------ ------------- -------
------ --------------- -------
--------- ---------- -- ------------- ------------ ------------- -------- -------- --------------
------ ----------------- - -------------- -------
------ ----------------- - -------------- -------
----
------- ------------- ---------- ------ ----------- ----- ------------------- --------------------------------------
------- ------------- ---------- ------ ----------- ----------------------------------------
-----
-----
--------
--------
------
------
---- ------------ ----- ---------------- ------------- ------------- ---------------------------------- -------------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
--- ------------------- -------------------------------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
---- -------------------
------ -----------------------------
------ ----------- -------------------- ----------------- ---------------------------
------
---- -------------------
------ -------------------------------
--------- -------------------- ------------------- -------- ----------------------------------------
------
---- -------------------
------ --------------------------------
---- ----------------- ------------------ ---------- -- ------
------ ------------------------ --------------- ---------------- --------------------------
------ --------------------------- -------- ----------
------
------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------
------- ------------- ---------- ------------ ---------------------------------
------
------
------
------
---- ------------ ----- -------------- ------------- ------------- -------------------------------- -------------------
---- -------------------- ----------------
---- ----------------------
---- ---------------------
--- ------------------- -----------------------------
------- ------------- ------------- -------------------- -------------------
----- ---------------------------------
---------
------
---- -------------------
---- -------------------
------ ---------------------------
------ ----------- -------------------- --------------- -------------------------
------
---- -------------------
------ -----------------------------
--------- -------------------- ----------------- -------- --------------------------------------
------
---- -------------------
------ ------------------------------
---- ----------------- ------------------ ---------- -- ------
------ ------------------------ --------------- ---------------- ------------------------
------ --------------------------- -------- ----------
------
------
------
---- ---------------------
------- ------------- ---------- -------------- --------------------------------
------- ------------- ---------- ------------ ---------------------------------
------
------
------
------
------
------
--------
---------------------------- -------- ------- -
----- ---- - --- -----------
----- ---- - ------------------
----- ----- - --------------- - -
----- --- - --------------
----- ---- - ---------------
----- ------ - -----------------
----- ------ - -----------------
------ ------------------------ ----------------------------
--
----- ------ - -----------------------
--- -----
--- -------
----- -
--------- ---
----- ---
----------- -
------ ---
-------- ---
----- --
--
--------- -
--- ---
------ ---
-------- ---
----- --
-
--
------- -- -
------------------
--------------
--
-------- -
----- ----------- -- -
--- -
----- -------- - ----- -------------------------------
------------- - -------------
- ----- ------- -
--------------------
-
--
----- ------- -- -
--- -
----- -------- - ----- ---------------------------
--------- - -------------
- ----- ------- -
--------------------
-
--
----- ---------- -- -
--- -
----- -------- - ----- -------------------------------- ----------------
---------------------------------
-------------------------------
- ----- ------- -
--------------------
-
--
-------- ------ -
---------------- - --------
------------------- - ----------
--------------------- - ------------
------------------ - ----------------- -- --------
-----------------------------
--
----- ---------- -- -
--- -
----- -------- - ----- --------------------------------------------------- --------------
----- ------------ - ------------------------------- -- ----------- --- ------------------
---------------------------------- -- --------------
-----------------------------
- ----- ------- -
--------------------
-
--
----- ---------- ------ -
-- -------------------- -
--- -
----- ----------------------------------------------
----- ------------ - ------------------------------- -- ----------- --- ---------
---------------------------------- --
- ----- ------- -
--------------------
-
-
-
-
--
---------
-------
-------这段代码用于创建一个带有表格、新增和编辑modal框、插件、标签和标签选择器的BootstrapVue页面，并与我们的路由器和数据模型进行连接。
现在启动 Express.js 服务器，打开 http://localhost:3000/ 就可以看到我们的页面，测试其可行性。
结论
本文介绍了如何使用 Express.js 和 BootstrapVue 构建一个美观的管理后台，具体步骤包括构建开发环境、配置 MongoDB 数据库、创建模型和路由器、和创建前端页面等。这份指南可以用于范围广泛的应用程序，只需将示例代码和思路与应用程序的需要整合即可。
我们希望这篇文章对您有所帮助，可以为您的应用程序增加一些新的特性和亮点，也让您的用户更加喜欢您的产品。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6730068beedcc8a97c90dff0