在当前的网络时代，内容已成为网站或应用程序中最重要的组成部分之一。大量的网站和应用程序都需要一个创作内容管理系统（CMS）来帮助他们组织和管理内容，让内容更具可访问性和更易于制作。
本文介绍如何使用基于 Node.js 的后端框架 Hapi.js 和前端框架 Vue.js 创建一个简单而强大的 CMS。我们将涵盖创建这个 CMS 的过程，并展示如何处理页面渲染、路由、用户认证和安全性等方面。
准备工作
在开始之前，我们需要确保计算机上安装了 Node.js 和 NPM。可以使用以下命令来检查是否已安装：
- ---- -- - --- --
还需要安装 Hapi.js 和 Vue.js。我们可以使用以下命令来安装他们：
- --- ------- ---- - --- ------- ---
后端设置
首先，我们需要创建一个基于 Hapi.js 的后端服务器，它将负责管理 CMS 的诸多方面。我们将创建一个简单的路由和一个用于身份验证的认证策略。
创建服务器
在创建服务器之前，我们需要安装 hapi-auth-basic 插件以支持身份验证。使用以下命令进行安装：
- --- ------- ---------------
然后，我们将创建一个 server.js 文件并添加以下内容：
----- ---- - ----------------
----- ------------- - ---------------------------
----- ------ - --- -------------
----- -----
----- ------------
---
----- -------- ------- -
----- -------------------------------
--------------
-
------- ------
----- ----
-------- --------- -- -- -
------ ------ -------
--
--
---
----- ---------------
------------------- ------- --- ---------------------
-
--------此代码将启动一个在本地主机的端口3000上运行的服务器，路由设置为处理根路径。访问 http://localhost:3000 现在将显示 "Hello world"。
添加身份验证
现在我们添加一个简单的身份验证机制，以防止未经授权的用户访问我们的 CMS。我们将使用 Hapi.js 的 hapi-auth-basic 插件来提供基本身份验证功能。
我们首先要定义一个内存用户库，以便在验证请求时执行基本验证。可以通过创建一个数组来实现这一点。
----- ----- - -
----- -
--------- -------
--------- --------------
----- ----- -----
--- -----------
--
--接下来，我们添加一个策略来验证用户。可以将基本策略配置为使用上述用户库进行基本身份验证。
----- -------- - ----- -------- --------- --------- --------- -- -
----- ---- - ----------------
-- ------- -
------ - ------------ ----- -------- ----- --
-
----- ------- - -------- --- --------------
----- ----------- - - --- -------- ----- --------- --
------ - -------- ----------- --
--
----- -------------------------------
------------------------------ -------- - -------- ---最后，我们可以将认证设置为根路由的配置，代码如下：
--------------
-
------- ------
----- ----
------- - ----- -------- --
-------- --------- -- -- -
------ -------- -- -- -----
--
--
---现在，我们已经添加了基本的身份验证机制，所有路由都需要用户名和密码的验证。您还可以使用其他策略来使身份验证更加安全和灵活。
前端设置
现在我们将创建一个基于 Vue.js 的前端应用程序，他将与我们的后端 API 交互以显示内容和进行创作操作。
我们将使用 Vue.js CLI 来生成项目骨架。如果您还没有安装 Vue CLI，请使用以下命令在全局范围内安装：
- --- ------- -- --------
使用以下命令创建一个新项目：
- --- ------ ------
创建完毕后，打开 my-cms 目录中的 package.json 文件，增加第三方依赖项，以便在应用程序中编写样式：
-
------- ---------
--------------- -
-------- ----------
-------- --------
-
-将 SCSS 文件作为应用程序的主要样式文件。你可以通过 Vue CLI 创建的 my-cms/src/main.js 文件中的样式引入 my-cms/src/assets/scss/main.scss 实现此目的。
创建路由
我们将使用 Vue Router 为应用程序创建路由并导航到不同的视图。首先，我们创建一个视图目录，包含两个视图：Home.vue 和 Dashboard.vue。
在 my-cms/src/views 目录中，我们声明以下两个文件：
----------
---- -------------
--- -----------------------
------
-----------
--------
------ ------- -
----- -------
--
---------
------ ------------
----- -
----------- -----
-
------------------
---- ------------------
--- ----------------------------
------
-----------
--------
------ ------- -
----- ------------
--
---------
------ ------------
---------- -
----------- -----
-
--------接下来，我们要配置路由。打开 my-cms/src/router.js 文件并添加以下代码：
------ --- ---- ------
------ ------ ---- -------------
------ ---- ---- -------------------
------ --------- ---- ------------------------
----------------
------ ------- --- --------
------- -
-
----- ----
----- -------
---------- -----
--
-
----- -------------
----- ------------
---------- ----------
--
--
---管理登录和注销
我们使用后端 APi 提供了一些服务，他将处理登录和注销操作。先创建一个 AuthService 负责与服务器进行通信：
------ ----- ---- --------
----- ------------ - ------------------------
------ ------- -
----- --------------- --------- -
----- -------- - ----- -----------
------------------------
- --------- -------- --
- ---------------- ---- -
--
------ --------------
--
----- -------- -
----- -------- - ----- -----------
-------------------------
---
- ---------------- ---- -
--
------ --------------
--
--接下来，在 App.vue 中可以引用 AuthService 并添加以下代码来管理登录和注销：
----------
---- ---------
---- ------------- -------- ----------------- ---------------- ------------
---- ---------------------
------------ ------------------- ------ ----- ------ ---
---------- ------------
--------------
------
---- -------------------
---- -------------
------------ ------------------- ------ ----- ------- ---
-----
--------------
------------ ------------------- ------ ----- ---------- ---
--------
--------------
------
---- ------------
-------- --------- ---------
-- ------------------- ----------------
------
----
------
------
------
-------- ----------------
---- ------------------
------------ --
------
----------
------
-----------
--------
------ ----------- ---- -------------------------
------ ------- -
----- ------
------ -
------ - ----- ---- --
--
--------- -
----------------
--
-------- -
----- ---------- -
--- -
----- -------- - ----- -----------------------
--------- - --------------
- ----- ------- -
-------------------
-
--
----- -------- -
--- -
----- ---------------------
--------- - -----
------------------- ----- ------ ---
- ----- ------- -
-------------------
-
--
--
--
---------在 AuthService 中提供 loadUser 方法，它将检查服务器中是否有活动用户。在 App.vue 中的 created 钩子中调用此方法。在 logout 方法中调用 AuthService 的 logout 方法进行注销。
创建登录和注册页面
接下来，我们添加登录和注册页面。我们将使用 v-model 绑定输入字段，这使用户可以在表单中输入值。您还可以使用 Vue.js 的 v-if 和 v-else 指令来根据当前用户的登录状况动态显示内容。
以下是登录和注册页面的代码：
----------
-----
--- ---------------- ----- -------
---- ------------ ------------------- ------------- ----- --------
----- -------------------------
---- --------------
------ ------------------------------
---- ----------------
------ ------------- ------------------ ----------- -------- --
------
------
---- --------------
------ ------------------------------
---- ----------------
------ ------------- ------------------ --------------- -------- --
------
------
---- --------------
------- ------------- ----------- ----- -----------
------
-------
-- -----------------------
--- --- ----------- ------------ ------ ----- ---------- ----------- ------------------
----
-- -------
------- ----------- ------------ ------ ----- ------- -------- -------------------
----
------
-----------
--------
------ ----------- ---- --------------------------
------ ------- -
----- ------------
------ -
------ - --------- --- --------- --- ------ ---- --
--
--------- -
------- -
------ ---------------- --- ------- - ------- - -----------
--
----------------- -
------ ---------------- --- -----------
--
--
-------- -
----- -------- -
--- -
-- ----------------- --- -------- -
----- -------------------------------- ---------------
- ---- -
----- ----------------------------------- ---------------
-
------------------- ----- ------ ---
- ----- ------- -
---------- - ----------------------------
-
--
--
--
---------结论
现在，我们已经创建了一个简单的 CMS，使用了 Hapi.js 和 Vue.js 支持其后端和前端。在这个教程中，我们了解了如何创建一个基本的后端 API 和前端应用程序，以及如何将二者连接在一起。
我们的 CMS 已包含登录和注销功能，可以管理创建和编辑的内容，但我们仍可以继续改进和完善。我们可以添加一个后台管理页面，确保只有具有适当权限的用户可以创建和编辑内容。我们还可以使用更强大的数据库模板，如 MongoDB 和 PostgreSQL，使 CMS 更具可伸缩性。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670a41d5d91dce0dc87ff67c