Headless CMS 开发实践：构建访问热度监测工具-JavaScript中文网-JavaScript教程资源分享门户

在传统的网站开发中，前后端的耦合度较高，因此修改页面布局需要操作页面代码，修改展示内容需要操作后端数据库。这种开发模式效率较低，且难以应对快速变化的业务需求。

Headless CMS 是一种分离前后端的开发模式，将内容管理部分与前端页面展示部分分离，使得前后端开发能够并行进行，降低开发难度和成本。本文将介绍 Headless CMS 的开发实践，并以构建访问热度监测工具为例进行讲解。

什么是 Headless CMS

Headless CMS 是一种将内容管理部分与前端页面展示部分分离的开发模式。传统 CMS 通过提供一个页面编辑器，将页面布局和内容展示逻辑耦合在一起，使得前后端开发难以并行进行。

Headless CMS 将内容管理部分作为一个独立的服务，通过提供一组 API 在前端页面上进行数据展示。这样一来，前端页面不再需要关心内容管理部分，只需要通过 API 获取数据进行展示即可。这种开发模式使得前后端开发能够并行进行，降低了开发难度和成本。

Headless CMS 的优点是显而易见的：

分离前后端：Headless CMS 将内容管理与前端页面展示分离，使得前后端开发能够并行进行，降低了开发成本和难度。
更加灵活：前端开发人员可以灵活地使用各种技术和框架，无需受 CMS 限制，提高了开发效率和质量。
更好的安全性：由于内容管理部分与前端页面展示部分分离，使得页面展示没有后台权限，从而提高了安全性。

Headless CMS 实践：构建访问热度监测工具

下面我们以构建一个访问热度监测工具为例，来介绍 Headless CMS 的开发实践。

项目需求

构建一个访问热度监测工具，实时监测系统中文章的访问量，并通过图表展示给管理员进行参考和决策。

技术栈

Headless CMS：Strapi
数据库：MongoDB
前端库：React
可视化库：Highcharts

实现步骤

1. 搭建 Strapi 后端

首先安装和启动 Strapi 后端：

// www.javascriptcn.com code example
# 安装 Strapi
npm install strapi@beta -g

# 创建一个 Strapi 项目
strapi new my-project
cd my-project

# 启动 Strapi 服务
strapi start

Strapi 可以随时使用 GraphQL 和 REST API 服务。在创建 Strapi 项目时，你可以选择你想要使用的服务类型。

2. 创建文章模型

创建文章模型，定义文章所需要的字段：

标题
内容
作者
创建时间

在 Strapi 中，你可以使用 GraphiQL 查询编辑器来创建模型。首先启动 Strapi 服务，然后访问 http://localhost:1337/graphql。使用以下代码来创建“Post”类型：

type Post {
  id: ID!
  title: String!
  content: String!
  author: String!
  created_at: String!
}

运行上面的代码，你就创建了一个“Post”类型。现在你可以将文章信息存储在 MongoDB 上。

3. 监听文章访问事件

为了监测文章的访问量，我们需要监听文章的访问事件。在 Strapi 服务里，我们可以绑定事件监听器来实现这个功能。

在 Strapi 服务中，可以使用以下命令生成监听器组件：

# 生成 Post 前置处理函数
strapi generate:middleware listener

# 生成 Post 控制器
strapi generate:controller Post

首先，在 listener.js 文件中，你需要实现一个“before”方法，使它可以监听 HTTP 请求并增加文章的访问量：

// www.javascriptcn.com code example
module.exports = (strapi) => ({
  async before(ctx) {
    // 判断请求是否是 GET 请求，并且判断是否仅作用于 /posts 路径
    if (ctx.method === 'GET' && ctx.url.startsWith('/posts')) {
      // 获取文章的 ID
      const post_id = ctx.params._id;

      // 从 MongoDB 中获取文章记录 
      const post = await strapi.services.post.findOne({
        id: post_id
      });

      // 如果文章存在，增加文章的访问量
      if (post) {
        await strapi.services.post.update({
          id: post_id
        }, {
          views: post.views + 1
        });
      }
    }
  }
});

在上面的代码中，监听器会检查请求是否是 GET 请求，并且检查请求是否来自 /posts 路径，如果是，则增加文章的访问量。

然后，在 Post.js 文件中，你需要使用以下代码来查询带有访问量的所有文章：

// www.javascriptcn.com code example
module.exports = {
  /**
   * 查询带有访问量的所有文章。
   */
  async findWithViews() {
    return strapi.query('post')
      .model.query(function(qb) {
        qb.orderBy('views', 'desc');
      })
      .fetchAll();
  }
};

4. 使用 React 将文章展示为表格

现在，我们需要使用 React 将包含文章访问量的表格展示给管理员。

在 src/App.js 文件中，你需要使用以下代码来设置 GraphQL 客户端和查询：

// www.javascriptcn.com code example
import React from 'react';
import { gql, useQuery } from '@apollo/client';
import Highcharts from 'highcharts';
import HighchartsReact from 'highcharts-react-official';

// 创建一个 GraphQL 查询
const GET_POSTS = gql`
  query {
    posts {
      id
      title
      content
      author
      created_at
      views
    }
  }
`;

function App() {
  // 使用 useQuery 钩子处理 GraphQL 查询
  const { loading, error, data } = useQuery(GET_POSTS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  // 利用文章的访问量创建数据表
  const tableData = data.posts.map(post => ({
    title: post.title,
    views: post.views
  }));

  // 渲染 Highcharts 图表
  const options = {
    title: {
      text: '文章访问量'
    },
    xAxis: {
      type: 'category'
    },
    yAxis: {
      title: {
        text: '访问量'
      }
    },
    series: [{
      name: '文章访问量',
      data: tableData
    }]
  };

  return (
    <HighchartsReact highcharts={Highcharts} options={options} />
  );
}

export default App;

上面的代码中，我们使用 Apollo Client 发出 GraphQL 查询，然后使用 Highcharts 将文章访问量数据转换为图表中的数据。

结语

通过上面的学习，希望你已经掌握了 Headless CMS 的开发实践，并成功构建了一个访问热度监测工具。Headless CMS 的开发模式是一种高效、灵活、安全的开发模式，在实际开发中也得到了广泛应用，并对于前后端团队协作也有着非常积极的促进作用。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cffb56e46428fe9ec5fd92

Headless CMS 开发实践：构建访问热度监测工具