在现代化的 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 项目:
$ npm init
按照提示完成项目初始化,接着运行以下命令安装必要的依赖:
$ npm install express body-parser cors
步骤3:安装 BootstrapVue
BootstrapVue 可以通过 cdn 或者包管理工具进行安装,我们选择使用 npm 进行安装。在项目目录下运行以下命令:
$ npm install bootstrap-vue bootstrap jquery popper.js
步骤4:创建并配置 Express.js 应用程序
在项目根目录下创建一个名为 index.js
的文件,输入以下代码:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------- - ----------------------- ----- ---- - ---------------- ----- --- - ---------- ----- ---- - ---------------- -- ----- ---------------- --------------------------- ------------------------------- --------- ---- ---- -------------------------------- - ------------ ---------------- -------- -- - ------------------- --------- -- ---- - - ------ ---
这段代码用于创建服务器并监听端口,还设置了 CORS 和 bodyParser 中间件和 public 文件夹的静态文件服务。
步骤5:创建 BootstrapVue 开发示例
在项目根目录下创建一个名为 index.html
的文件,并加入以下代码:
-- -------------------- ---- ------- --------- ----- ------ ------ ------------------- ------------ ----- ---------------- ------------------------------------------------------------------------------- ----- ---------------- ----------------------------------------------------------------------- ----- ---------------- ----------------------------------------------------------------------------------------- ------- ------ ---- --------- ------------- --------- -------- ------- -- ------------ --------- ----------- --------- ------ ---- -- -- ------- -- ----- ------------ -- - -------- ----------- --- ------------- --------------- -- - --- -- ---- ------ -- ---------- ----- -- ------ --- --------- ------ ------ --- ----- ---- -- --- ------- --------------------------------- ---------------------------- --------------------- -------------- ------ ------- ------------------------------------------------------------ ------- ------------------------------------------------------------------------------------ ------- ------------------------------------------------------------------------------------- ------- ------------------------------------------------------------------------------ -------- --- ----- --- ------ -- --------- ------- -------
这段代码用于创建一个简单的 BootstrapVue 示例。运行以下命令启动 Express.js 服务器:
$ node index.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