HapiJS 视图插件搭建独立的 HTML / CSS / JS 应用程序

如果你是前端开发者,可能已经熟悉了 HTML、CSS、JavaScript 等技术。但是,当需要搭建一个后端应用程序时,你可能需要学习新的技术,例如 Node.js、Express、Koa 等。今天,我们将介绍一款既能够搭建后端应用程序,又能够使用纯粹的 HTML、CSS、JavaScript 的框架:HapiJS。

HapiJS 简介

HapiJS 是一个使用 Node.js 构建的 Web 框架,旨在提供强大可靠的服务端应用程序。它的主要特点包括支持插件式开发、自定义插件以及完备的测试工具等。在 HapiJS 中,除了使用传统的 MVC 模式来搭建应用,你还可以基于插件来开发自己的应用。这意味着,你可以从一个比较基础的模板开始,逐渐添加不同的插件来定制自己的应用。这样设计的好处在于,代码结构层次分明,易于拓展,也更加容易维护。

HapiJS 视图插件:Vision

在 HapiJS 中,视图插件是一个重要的工具。借助于视图插件,我们可以在不同的路由处理器中渲染出 HTML 页面。HapiJS 自带了一个视图插件叫做 Vision。在使用 Vision 时,你需要先安装 Handlebars 或 EJS 等支持模板语言的依赖。

安装依赖

在本文中我们以 Handlebars 为例,这里列出安装依赖的命令:

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

注意:如果你使用的是 EJS,则需要安装 ejs 包,同时在服务端代码中指定 EJS 渲染器。

引入插件

在安装好依赖之后,我们需要在服务程序中先引入插件。示例代码如下:

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

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

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

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

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

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

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

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

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

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

-------

上述代码中,我们注册了 Vision 的插件,然后指定了 Handlebars 作为 HTML 模板引擎。在 server.views() 的 options 中,我们指定了路径为 views,这是因为我们在 views 目录中存放了页面渲染的模板文件。

创建模板

views 目录下创建一个名为 index.html 的文件,示例代码如下:

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

这是一个非常基础的 HTML 页面。在 <title><h1> 标签中,我们插入了变量 title,这个变量将在服务器端通过视图引擎进行渲染。

运行程序

通过上面的步骤,我们已经成功搭建了一个基于 HapiJS 的视图引擎应用程序。接下来,我们可以在终端中执行以下命令,启动我们的服务器:

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

在浏览器中输入 http://localhost:3000,你将会看到渲染后的页面。页面的 <title><h1> 标签都显示了我们期望的值。

总结

在本文中,我们介绍了 HapiJS 框架以及其与视图插件 Vision 相关的知识。借助于 Vision 插件,我们可以轻松地将自己的 HTML / CSS / JavaScript 应用程序搭建在 HapiJS 服务器上。通过动态渲染 HTML 页面,我们能够更好地控制用户端的响应,将数据呈现得更加鲜活。如果你想从零开始搭建一个自己的服务器应用程序,HapiJS 将是一个不错的选择。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/6486593648841e98944ee786


猜你喜欢

  • Android 开发中如何使用 RxJava 和 RxAndroid

    RxJava 是 ReactiveX 的 Java 实现,它提供了一个简单的方式来处理异步和基于事件的编程。RxAndroid 是 RxJava 的 Android 扩展,它为 Android 应用开...

    1 年前
  • ES7 中的正则表达式扩展详解

    在 ES7 中,正则表达式得到了一些非常有用的扩展功能。这些新功能能够提高开发效率,使得我们能够更加方便地编写复杂的正则表达式。本文将对 ES7 中的正则表达式扩展进行详细的介绍和讲解。

    1 年前
  • PWA 实现简单鉴权方案示例

    渐进式 Web 应用(Progressive Web App,PWA)已经逐渐成为了 Web 开发的趋势之一。PWA 拥有了许多 Native 应用的优点,比如离线可访问、快速响应、可安装等,同时仍然...

    1 年前
  • Redis 锁的实现方法总结

    本文将介绍在前端开发中使用 Redis 实现锁的方法,包括悲观锁和乐观锁的实现方式。 前言 在并发处理中,为了避免数据不一致的情况,需要对同一份数据进行保护。常见的数据保护手段有加锁、事务等。

    1 年前
  • Headless CMS 最佳实践:使用静态站点生成器

    在现代 web 开发中,前端和后端的分离越来越被重视。这种趋势也影响到了内容管理系统(CMS)的发展,出现了 Headless CMS 的概念。 Headless CMS 就是只提供数据 API,而不...

    1 年前
  • Mocha 测试中,如何测试 Promise 方法?

    开发过程中,我们经常需要使用 Promise 来处理异步操作,为了保证代码的质量和可靠性,我们需要对这些异步方法进行测试。在 Mocha 测试中,测试 Promise 方法需要一些特殊的技巧和方法。

    1 年前
  • ES9 中 String.prototype.endsWith() 和 String.prototype.startsWith() 的使用指南

    在 ES9 新特性中,JavaScript 新增了两个实例方法:String.prototype.endsWith() 和 String.prototype.startsWith()。

    1 年前
  • Web Components 中如何在子组件中调用父组件的方法?

    什么是 Web Components? Web Components 是一种用于创建可重用组件的标准化框架。Web Components 具有很强的封装性和可组合性,并与现有的 Web 技术(如 HT...

    1 年前
  • Custom Elements 的网络请求缓存机制解析

    随着前端开发技术的不断发展,我们常常需要在 web 应用程序中使用自定义元素,为了使自定义元素更加高效和实用,在该领域中有一种非常重要的概念——网络请求缓存。在本文中,我们将会了解网络请求缓存机制是什...

    1 年前
  • 如何解决 RESTful API 中的跨域请求问题

    在前端开发过程中,经常会遇到跨域请求问题。如果不解决该问题,会导致浏览器禁止跨域请求,使得数据无法正常获取。本文将介绍解决跨域请求问题的方案,并提供详细的指导和示例代码。

    1 年前
  • MongoDB 中数据的分页查询实现方式介绍

    在前端开发中,通常需要从服务器端获取大量的数据,而在展示数据时,常常需要使用分页技术,以提升用户体验。在 MongoDB 中,对数据进行分页查询也是非常简单的,下面本文将详细介绍 MongoDB 中数...

    1 年前
  • ECMAScript 2017 中的 Proxy

    代理是一种新的 ECMAScript 2017 中的特性,它能够允许开发者拦截和定义对象的操作。这个特性为前端开发者带来了一些新的机会,无论是实现特殊的行为或者简化代码。

    1 年前
  • Flexbox 中子元素最小高度问题的解决方法

    在使用 Flexbox 布局时,我们通常会遇到一个问题:当子元素内容过少时,它们将无法填充父容器。这是因为默认情况下,Flexbox 中子元素的最小高度为0,这会导致子元素无法自适应父容器的高度。

    1 年前
  • 前端性能优化:使用 WebP 图片格式

    在现代网站和应用中,图片是不可或缺的一部分。然而,大量的图片也会导致网站加载速度变慢,影响用户体验。为了提高网站的性能,可以考虑使用 WebP 图片格式。 什么是 WebP 图片格式? WebP 是一...

    1 年前
  • TypeScript 中使用函数重载实现不同参数类型的函数调用

    在前端开发中,函数是不可或缺的一部分。函数重载是一种在 TypeScript 中支持的既能够提高代码清晰度,又能够支持不同参数类型的函数调用的机制。在本文中,我们将详细探讨如何使用函数重载,以及它的深...

    1 年前
  • 使用 ES6 中的迭代器遍历数据结构的好方法

    在前端开发中,我们经常需要遍历各种数据结构,如数组、对象等等。在 ES6 中,我们可以使用迭代器来遍历这些数据结构。本文将介绍使用 ES6 中的迭代器遍历数据结构的好方法,包括如何创建迭代器并使用 f...

    1 年前
  • 如何针对 React 项目在 ESLint 中忽略不需要检查的导入

    在 React 项目中,我们经常会使用各种第三方库,但是在处理代码规范的时候,我们往往需要对这些库中的导入进行一些调整,以保证代码的可读性和可维护性。ESLint 是一个非常好用的代码规范工具,它可以...

    1 年前
  • Hapi.js 和 Socket.IO:多种场景下的选择

    前端开发中,常常需要将数据实时更新到页面上。而实时通信是如何实现的?这里推荐两个前端框架——Hapi.js 和 Socket.IO,它们都能让你跨越不同场景的实时通信问题,但针对使用场景不一,选择也不...

    1 年前
  • Promise 中的 then 和 catch 方法的执行顺序问题

    Promise 中的 then 和 catch 方法的执行顺序问题 在前端开发过程中,Promise 是一种非常重要的异步编程解决方案,其优雅的 API 设计以及良好的扩展性使得 Promise 在现...

    1 年前
  • ECMAScript 2019 中的异步迭代器

    异步迭代器的概念 在 ES6 中,引入了原生的迭代器(Iterator)的概念。通过迭代器,我们可以实现自定义的迭代操作。而在 ECMAScript 2019 中,又引入了异步迭代器(Async It...

    1 年前

相关推荐

    暂无文章