如何使用 Express.js 和 BootstrapVue 构建美观的管理后台

阅读时长 25 分钟读完

在现代化的 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

纠错
反馈