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

面试官：小伙子，你的代码为什么这么丝滑？

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

阅读全文

猜你喜欢

  • 在 GraphQL 中使用事务隔离技术的技巧及实现方法

    前言 在现代 Web 应用程序中，GraphQL 已经成为了很多开发者的首选技术栈之一。它使得前端和后端可以更加灵活地交互数据和进行查询操作，同时还可以有效地优化数据请求和响应的速度。

    8 天前
  • 如何在 Enzyme 测试中模拟 React Native 的平台 API？

    简介 Enzyme 是 React 应用程序的 JavaScript 测试实用程序，它专注于测试 React 组件的输出。这意味着它并不能模拟 React Native 提供的许多平台 API，这对于...

    8 天前
  • 使用 Mocha 和 Chai 测试 GraphQL 服务器

    GraphQL 是一种用于 API 构建的查询语言和运行时。它的优点之一是能够提供一个强大的类型系统，让开发者能够精确描述数据，并使 API 更加可发现并且易于使用。

    8 天前
  • 如何应用无障碍技术优化银行网站的用户体验

    银行网站是人们日常生活中不可缺少的一部分，它们提供了各种金融服务和信息，但很多银行网站缺乏无障碍技术，给残障人士等特殊人群带来了使用上的困难。为了满足无障碍要求，本文介绍如何应用无障碍技术，优化银行网...

    8 天前
  • Jest 在 Angular 项目中的使用方法

    Jest 是一个流行的 JavaScript 测试框架，它是由 Facebook 开源的，并且被广泛用于 React 和 Node.js 项目中。在 Angular 项目中使用 Jest 能够提高我们...

    8 天前
  • 如何在 Express.js 环境下使用 Webpack

    简介 Express.js 是一个基于 Node.js 的开源轻量级 web 开发框架，它被广泛使用于开发 RESTful API。Webpack 是一个强大的打包工具，可以将多个 JavaScrip...

    8 天前
  • 响应式设计中的跨浏览器兼容性解决方案

    随着移动设备和桌面设备日益增多，响应式设计已经成为了现代Web开发中必不可少的技能。但是，在实现响应式设计的过程中，遇到各种浏览器兼容性问题也是不可避免的。本文将为您介绍一些跨浏览器兼容性解决方案，以...

    8 天前
  • 在 React 中使用 Immutable.js 提高性能

    在开发 React 应用程序时，性能是关键因素之一。一个普遍的问题是在应用程序状态中进行更新的同时不会触发不必要的重新渲染。这正是 Immutable.js 所擅长的，它提供了一种不可变数据结构，从而...

    8 天前
  • 区分 webpack-dev-server 与 webpack-dev-middleware

    介绍 在前端开发中，使用webpack来构建项目已经非常常见。为了提高开发效率，webpack社区提供了webpack-dev-server和webpack-dev-middleware两种工具。

    8 天前
  • 使用 Next.js 优化用户体验的最佳实践

    对于现代 Web 应用程序，优化用户体验是至关重要的。许多现代应用程序都采用了前端框架，这些框架通常需要大量的配置和系统配置来为用户提供最佳体验。Next.js 是一个非常流行的 React 框架，它...

    8 天前
  • SASS 遇到 “Mixin not found” 错误解决方法

    在前端开发中，SASS（Syntactically Awesome Style Sheets）已经成为了很多开发人员的首选样式表语言。SASS 可以帮助我们更方便、更高效地编写 CSS，但是在使用 S...

    8 天前
  • Serverless: 如何构建基于 REST API 的前端应用程序

    Serverless 是一种新兴的架构模式，它将应用程序的部署和运行从服务器转移到了云服务提供商的托管环境中。使用 Serverless 架构，我们可以将应用程序以函数的形式部署在云上，无需自己维护服...

    8 天前
  • 如何使用 ES10 中新增的 catch 的可选绑定功能

    在 ES10 中，新增了 catch 的可选绑定功能，可以方便地捕获异常并进行处理，让代码更加简洁，这对于前端开发来说是一个很重要的功能。本文将介绍如何使用这个新功能，让代码更加优秀，提高开发效率。

    8 天前
  • 如何使用 Sequelize 实现跨库事务？

    如果你是一名前端工程师并且正在考虑如何处理跨库事务，那么你可能已经听说了 Sequelize。Sequelize 是一款流行的 JavaScript ORM（对象关系映射）框架，它为 Node.js ...

    8 天前
  • ES12 中的 Web Audio API：使用 AudioContext 创建 Web Audio 流

    Web Audio API 是一种在 Web 上创建、操纵、合成和处理音频的功能强大的接口。ES12 引入了新的 Web Audio API 特性，使开发者能够更灵活地创建音频应用程序。

    8 天前
  • 如何在 GraphQL 中使用全文搜索

    在现代的 Web 开发中，GraphQL 已经成为了许多开发者的首选技术。与传统的 RESTful API 相比，GraphQL 更加灵活、强大、易用，并且能够更好地支持前端应用的需求。

    8 天前
  • 在使用 Enzyme 测试 React 组件时如何模拟 React.lazy 和 React.Suspense 组件的图像加载？

    简介 React 是一个流行的前端框架，它允许我们通过组件化的方式来构建用户界面。在 React 应用中，我们通常会使用 React.lazy 和 React.Suspense 组件来优化代码的加载。

    8 天前
  • 在 Gulp 中使用 Babel 编译 ES6+ - 一个详细的示例代码分享

    引言 随着 JavaScript 变得越来越流行，前端工程师们越来越喜欢使用ES6+语法。ES6+ 代码相比于传统 JavaScript，更加简洁、易读、易用。但是，ES6+ 尚未被所有浏览器支持，使...

    8 天前
  • PWA 技术实现的本地推送功能

    什么是 PWA？ PWA（Progressive Web App）是一种新兴的 Web 应用程序类型，其目标是通过现代 Web 技术与应用程序类似地提供高级用户体验。

    8 天前
  • React 中使用 Axios 进行网络请求的完整教程

    使用 Ajax 进行网络请求已经成为前端领域必不可少的技能。如果你正在使用 React，你需要一个可靠、易于使用的库，帮助你完成这项任务。在这篇文章中，我们将介绍 Axios，一个流行的网络请求库，并...

    8 天前

相关推荐

    暂无文章