Hapi.js 搭建 Vue.js 前后端分离全栈项目详解-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，前后端分离已经成为一种比较流行的开发模式。Vue.js 作为一种前端框架，可以快速开发出高质量的单页应用程序。而在后端开发中，Hapi.js 是一个功能强大、可扩展的 Node.js 后端框架。本文将详细介绍如何使用 Hapi.js 搭建 Vue.js 前后端分离全栈项目。

Hapi.js 简介

Hapi.js 是一个基于 Node.js 的可扩展、高可靠、适用于大规模应用的 Web 框架。它提供了一系列的工具和插件，帮助开发者快速搭建高性能的 Web 应用。Hapi.js 的核心特点包括：

插件化开发：Hapi.js 提供了丰富的插件机制，可以轻松地扩展应用功能。
高可靠性：Hapi.js 的错误处理和调试机制非常完善，可以保证应用的高可靠性。
路由管理：Hapi.js 提供了一种简单而强大的路由管理机制，可以轻松地定义和管理路由。
缓存管理：Hapi.js 提供了一套完整的缓存管理机制，可以轻松地管理应用的缓存。

Vue.js 简介

Vue.js 是一个轻量级的前端框架，它采用了 MVVM 架构模式，具有以下特点：

简单易用：Vue.js 的 API 设计非常简单，学习成本低。
数据响应式：Vue.js 支持数据响应式，当数据发生变化时，视图会自动更新。
组件化开发：Vue.js 支持组件化开发，可以将应用拆分成多个组件，便于管理和维护。
轻量级：Vue.js 的体积非常小，可以轻松地集成到任何项目中。

前后端分离全栈项目架构

前后端分离全栈项目通常由前端部分和后端部分组成。前端部分主要包括 Web 页面和 JavaScript 代码，后端部分主要包括服务器端程序和数据库。以下是前后端分离全栈项目的架构图：

在这个架构图中，前端部分使用 Vue.js 框架开发单页应用程序，通过 AJAX 请求与后端 API 进行通信。后端部分使用 Hapi.js 框架搭建 Web 服务器，提供 API 接口，与数据库进行交互。

搭建 Hapi.js 后端

安装 Hapi.js

在开始之前，我们需要安装 Node.js 和 npm。安装完成后，使用以下命令安装 Hapi.js：

npm install hapi

创建 Hapi.js 服务器

创建一个名为 server.js 的文件，输入以下代码：

// javascriptcn.com 代码示例
const Hapi = require('hapi');

const server = new Hapi.Server({
  port: 3000,
  host: 'localhost',
});

server.route({
  method: 'GET',
  path: '/',
  handler: (request, h) => {
    return 'Hello, world!';
  },
});

server.start().then(() => {
  console.log(`Server running at: ${server.info.uri}`);
});

这段代码创建了一个 Hapi.js 服务器，监听在 localhost:3000，并定义了一个路由，当请求根路径时返回字符串 'Hello, world!'。

运行 node server.js 命令，可以看到控制台输出 Server running at: http://localhost:3000，表示服务器已经启动。

安装和配置数据库

在本文中，我们将使用 MySQL 作为数据库。首先需要安装 MySQL，然后创建一个名为 test 的数据库，并创建一个名为 users 的表，包含 id、name 和 email 三个字段。

接下来，我们需要安装 MySQL 驱动程序。使用以下命令安装 mysql2 驱动程序：

npm install mysql2

在 server.js 文件中添加以下代码，连接到 MySQL 数据库：

// javascriptcn.com 代码示例
const mysql = require('mysql2/promise');

const connection = await mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'test',
});

const [rows, fields] = await connection.execute('SELECT * FROM users');
console.log(rows);

这段代码创建了一个 MySQL 连接，连接到名为 test 的数据库，然后查询 users 表中的所有数据，并打印到控制台。

创建 Hapi.js API

在 server.js 文件中添加以下代码，创建一个 Hapi.js API：

server.route({
  method: 'GET',
  path: '/api/users',
  handler: async (request, h) => {
    const [rows, fields] = await connection.execute('SELECT * FROM users');
    return rows;
  },
});

这段代码创建了一个 GET 请求，路径为 /api/users，当请求到达时，将查询 users 表中的所有数据，并返回到客户端。

使用 JWT 鉴权

为了保护 API 的安全性，我们需要对 API 进行鉴权。在本文中，我们将使用 JWT（JSON Web Token）进行鉴权。

使用以下命令安装 JWT：

npm install jsonwebtoken

在 server.js 文件中添加以下代码，创建一个 JWT：

const jwt = require('jsonwebtoken');

const token = jwt.sign({ user_id: 1 }, 'secret_key');
console.log(token);

这段代码创建了一个 JWT，包含一个名为 user_id 的字段，值为 1，并使用 secret_key 作为密钥。

在 server.js 文件中添加以下代码，验证 JWT：

// javascriptcn.com 代码示例
server.route({
  method: 'GET',
  path: '/api/users',
  handler: async (request, h) => {
    try {
      const token = request.headers.authorization.split(' ')[1];
      const decoded = jwt.verify(token, 'secret_key');
      const [rows, fields] = await connection.execute('SELECT * FROM users');
      return rows;
    } catch (error) {
      return h.response({ error: 'Invalid token' }).code(401);
    }
  },
});

这段代码从请求头中获取 JWT，然后验证 JWT 的有效性。如果 JWT 无效，则返回 HTTP 401 错误。

搭建 Vue.js 前端

安装 Vue.js

使用以下命令安装 Vue.js：

npm install vue

创建 Vue.js 应用程序

使用以下命令创建一个 Vue.js 应用程序：

vue create my-app

这个命令会创建一个名为 my-app 的 Vue.js 应用程序，并安装所有必要的依赖项。

修改 Vue.js 配置

在 package.json 文件中添加以下代码，使 Vue.js 应用程序可以与 Hapi.js API 进行通信：

{
  "proxy": "http://localhost:3000"
}

这段代码告诉 Vue.js 应用程序将所有 API 请求代理到 http://localhost:3000。

创建 Vue.js 组件

在 src/components 目录下创建一个名为 Users.vue 的文件，输入以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h1>Users</h1>
    <table>
      <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Email</th>
      </tr>
      <tr v-for="user in users" :key="user.id">
        <td>{{ user.id }}</td>
        <td>{{ user.name }}</td>
        <td>{{ user.email }}</td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      users: [],
    };
  },
  async created() {
    const response = await fetch('/api/users');
    const data = await response.json();
    this.users = data;
  },
};
</script>

这段代码定义了一个名为 Users 的 Vue.js 组件，当组件被创建时，它会发起一个 AJAX 请求，获取所有用户的信息，并将数据渲染到页面上。

创建 Vue.js 路由

在 src/router 目录下创建一个名为 index.js 的文件，输入以下代码：

// javascriptcn.com 代码示例
import Vue from 'vue';
import VueRouter from 'vue-router';
import Users from '@/components/Users.vue';

Vue.use(VueRouter);

const routes = [
  {
    path: '/',
    name: 'Users',
    component: Users,
  },
];

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
});

export default router;

这段代码定义了一个 Vue.js 路由，将 / 路径映射到 Users 组件。

运行 Vue.js 应用程序

使用以下命令运行 Vue.js 应用程序：

npm run serve

这个命令会启动一个开发服务器，监听在 http://localhost:8080，并自动打开浏览器。

总结

本文介绍了如何使用 Hapi.js 搭建 Vue.js 前后端分离全栈项目。我们首先创建了一个 Hapi.js 服务器，并连接到 MySQL 数据库。然后我们创建了一个 Hapi.js API，使用 JWT 进行鉴权。最后，我们创建了一个 Vue.js 应用程序，通过 AJAX 请求与 Hapi.js API 进行通信，并将数据渲染到页面上。

Hapi.js 和 Vue.js 都是非常优秀的框架，它们的组合可以让我们快速开发出高质量的前后端分离全栈项目。希望本文能够对大家有所帮助，也希望大家可以在实践中进一步深入学习和掌握这些框架。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/655a708cd2f5e1655d4baebb