创作内容管理系统:使用 Hapi.js 和 Vue.js

阅读时长 14 分钟读完

在当前的网络时代,内容已成为网站或应用程序中最重要的组成部分之一。大量的网站和应用程序都需要一个创作内容管理系统(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.vueDashboard.vue

my-cms/src/views 目录中,我们声明以下两个文件:

-- -------------------- ---- -------
----------
  ---- -------------
    --- -----------------------
  ------
-----------

--------
------ ------- -
  ----- -------
--
---------

------ ------------
----- -
  ----------- -----
-
--------
-- -------------------- ---- -------
----------
  ---- ------------------
    --- ----------------------------
  ------
-----------

--------
------ ------- -
  ----- ------------
--
---------

------ ------------
---------- -
  ----------- -----
-
--------

接下来,我们要配置路由。打开 my-cms/src/router.js 文件并添加以下代码:

-- -------------------- ---- -------
------ --- ---- ------
------ ------ ---- -------------
------ ---- ---- -------------------
------ --------- ---- ------------------------

----------------

------ ------- --- --------
  ------- -
    -
      ----- ----
      ----- -------
      ---------- -----
    --
    -
      ----- -------------
      ----- ------------
      ---------- ----------
    --
  --
---

管理登录和注销

我们使用后端 APi 提供了一些服务,他将处理登录和注销操作。先创建一个 AuthService 负责与服务器进行通信:

-- -------------------- ---- -------
------ ----- ---- --------

----- ------------ - ------------------------

------ ------- -
  ----- --------------- --------- -
    ----- -------- - ----- -----------
      ------------------------
      - --------- -------- --
      - ---------------- ---- -
    --
    ------ --------------
  --

  ----- -------- -
    ----- -------- - ----- -----------
      -------------------------
      ---
      - ---------------- ---- -
    --
    ------ --------------
  --
--

接下来,在 App.vue 中可以引用 AuthService 并添加以下代码来管理登录和注销:

-- -------------------- ---- -------
----------
  ---- ---------
    ---- ------------- -------- ----------------- ---------------- ------------
      ---- ---------------------
        ------------ ------------------- ------ ----- ------ ---
          ---------- ------------
        --------------
      ------

      ---- -------------------
        ---- -------------
          ------------ ------------------- ------ ----- ------- ---
            -----
          --------------
          ------------ ------------------- ------ ----- ---------- ---
            --------
          --------------
        ------

        ---- ------------
          -------- --------- ---------
          -- ------------------- ----------------
            ------
          ----
        ------
      ------
    ------

    -------- ----------------
      ---- ------------------
        ------------ --
      ------
    ----------
  ------
-----------

--------
------ ----------- ---- -------------------------

------ ------- -
  ----- ------
  ------ -
    ------ - ----- ---- --
  --
  --------- -
    ----------------
  --
  -------- -
    ----- ---------- -
      --- -
        ----- -------- - ----- -----------------------
        --------- - --------------
      - ----- ------- -
        -------------------
      -
    --
    ----- -------- -
      --- -
        ----- ---------------------
        --------- - -----
        ------------------- ----- ------ ---
      - ----- ------- -
        -------------------
      -
    --
  --
--
---------

AuthService 中提供 loadUser 方法,它将检查服务器中是否有活动用户。在 App.vue 中的 created 钩子中调用此方法。在 logout 方法中调用 AuthServicelogout 方法进行注销。

创建登录和注册页面

接下来,我们添加登录和注册页面。我们将使用 v-model 绑定输入字段,这使用户可以在表单中输入值。您还可以使用 Vue.js 的 v-ifv-else 指令来根据当前用户的登录状况动态显示内容。

以下是登录和注册页面的代码:

-- -------------------- ---- -------
----------
  -----
    --- ---------------- ----- -------

    ---- ------------ ------------------- ------------- ----- --------

    ----- -------------------------
      ---- --------------
        ------ ------------------------------
        ---- ----------------
          ------ ------------- ------------------ ----------- -------- --
        ------
      ------

      ---- --------------
        ------ ------------------------------
        ---- ----------------
          ------ ------------- ------------------ --------------- -------- --
        ------
      ------

      ---- --------------
        ------- ------------- ----------- ----- -----------
      ------
    -------

    -- -----------------------
      --- --- ----------- ------------ ------ ----- ---------- ----------- ------------------
    ----

    -- -------
      ------- ----------- ------------ ------ ----- ------- -------- -------------------
    ----
  ------
-----------

--------
------ ----------- ---- --------------------------

------ ------- -
  ----- ------------
  ------ -
    ------ - --------- --- --------- --- ------ ---- --
  --
  --------- -
    ------- -
      ------ ---------------- --- ------- - ------- - -----------
    --
    ----------------- -
      ------ ---------------- --- -----------
    --
  --
  -------- -
    ----- -------- -
      --- -
        -- ----------------- --- -------- -
          ----- -------------------------------- ---------------
        - ---- -
          ----- ----------------------------------- ---------------
        -
        ------------------- ----- ------ ---
      - ----- ------- -
        ---------- - ----------------------------
      -
    --
  --
--
---------

结论

现在,我们已经创建了一个简单的 CMS,使用了 Hapi.js 和 Vue.js 支持其后端和前端。在这个教程中,我们了解了如何创建一个基本的后端 API 和前端应用程序,以及如何将二者连接在一起。

我们的 CMS 已包含登录和注销功能,可以管理创建和编辑的内容,但我们仍可以继续改进和完善。我们可以添加一个后台管理页面,确保只有具有适当权限的用户可以创建和编辑内容。我们还可以使用更强大的数据库模板,如 MongoDB 和 PostgreSQL,使 CMS 更具可伸缩性。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/670a41d5d91dce0dc87ff67c

纠错
反馈