基于 GraphQL 实现 HTML 报表生成器-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，常常需要生成各种各样的报表。而传统的报表生成方式往往需要通过后端接口来获取数据，然后再用模板引擎等工具生成 HTML 页面。这种方式存在一些问题，比如需要前后端协作、数据传输量大等。而基于 GraphQL 实现的 HTML 报表生成器可以有效解决这些问题。

GraphQL 是一种由 Facebook 开发的数据查询和操作语言，它可以让客户端精确地获取需要的数据，避免了传统 RESTful API 中的 over-fetching 和 under-fetching 问题。而基于 GraphQL 实现的 HTML 报表生成器可以将前端与后端解耦，让前端可以自己定义需要的数据结构，并且可以在客户端直接生成 HTML 页面。

本文将介绍如何基于 GraphQL 实现 HTML 报表生成器，包括如何定义 GraphQL schema、如何实现 GraphQL resolvers、如何生成 HTML 页面等。

GraphQL schema

首先需要定义 GraphQL schema，它描述了客户端可以查询的数据结构。以下是一个简单的示例：

// javascriptcn.com 代码示例
type Query {
  report(id: ID!): Report
}

type Report {
  id: ID!
  title: String!
  data: [ReportData!]!
}

type ReportData {
  label: String!
  value: Float!
}

以上 schema 定义了一个 Query 类型，它包含一个 report 字段，可以通过传入 id 参数来查询一个报表。报表包含 id 和 title 两个字段，以及一个 data 数组，其中每个元素都包含一个 label 和一个 value 字段。

GraphQL resolvers

接下来需要实现 GraphQL resolvers，它们负责从数据源中获取数据并返回给客户端。以下是一个简单的示例：

// javascriptcn.com 代码示例
const resolvers = {
  Query: {
    report: (root, { id }) => {
      const report = getReportById(id);
      return report;
    }
  },
  Report: {
    data: (report) => {
      const data = getDataByReportId(report.id);
      return data;
    }
  }
};

以上 resolvers 实现了 Query.report 和 Report.data 两个字段的查询逻辑。Query.report 接收一个 id 参数，调用 getReportById 函数获取报表数据并返回。Report.data 接收一个 report 参数，调用 getDataByReportId 函数获取报表数据，并返回给客户端。

生成 HTML 页面

最后需要将获取到的数据渲染成 HTML 页面并返回给客户端。以下是一个简单的示例：

// javascriptcn.com 代码示例
const createReportHtml = (report) => {
  const title = `<h1>${report.title}</h1>`;
  const dataRows = report.data.map((data) => {
    return `<tr><td>${data.label}</td><td>${data.value}</td></tr>`;
  }).join('');
  const table = `<table>${dataRows}</table>`;
  const html = `<html><head><title>${report.title}</title></head><body>${title}${table}</body></html>`;
  return html;
};

app.use('/graphql', graphqlHTTP({
  schema: schema,
  rootValue: rootValue,
  graphiql: true,
  customFormatErrorFn: (err) => {
    console.error(err);
    return { message: err.message };
  },
  extensions: ({ document, variables, operationName, result }) => {
    const report = result.data && result.data.report;
    if (report) {
      const html = createReportHtml(report);
      return { html };
    }
  }
}));

以上代码使用了 graphqlHTTP 中间件来实现 GraphQL API，并且将 graphiql 参数设置为 true，这样可以在浏览器中打开 GraphQL Playground 来测试 API。在 extensions 中间件中，如果查询结果中包含了报表数据，则调用 createReportHtml 函数生成 HTML 页面，并将结果添加到返回结果中。

总结

本文介绍了如何基于 GraphQL 实现 HTML 报表生成器，包括如何定义 GraphQL schema、如何实现 GraphQL resolvers、如何生成 HTML 页面等。通过使用 GraphQL，可以将前端与后端解耦，让前端可以自己定义需要的数据结构，并且可以在客户端直接生成 HTML 页面。这种方式可以提高开发效率，减少数据传输量，是一种非常值得尝试的技术。

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