在现代 Web 开发中，前端工程师经常需要与后端开发人员合作，实现数据的获取和展示。传统的方式是通过后端提供的 API 接口来获取数据，但是这种方式存在一些问题，比如接口不够灵活、数据结构无法满足前端需求、后端改动会对前端造成影响等。为了解决这些问题，出现了 Headless CMS。
Headless CMS 是一种将内容管理与前端展示分离的方式。它提供了一种可视化的管理界面，让内容编辑者可以方便地创建、编辑和发布内容。同时，它也提供了一套 API 接口，让开发者可以自由地调用数据。
本文将介绍如何利用 Headless CMS 自定义 API 调用，以及如何在前端中使用这些 API。
Headless CMS 简介
Headless CMS 是一种新型的内容管理系统，它将内容管理与前端展示分离。与传统 CMS 不同，Headless CMS 不会生成 HTML 页面，而是提供了一套 API 接口，让开发者可以自由地调用数据。
Headless CMS 的优点在于：
- 灵活性：开发者可以自由地调用数据，无需受到后端的限制。
- 可扩展性：开发者可以根据需要自由地添加字段和类型。
- 可定制性：开发者可以自定义数据结构和 API 接口，以适应不同的需求。
常见的 Headless CMS 包括 Strapi、Contentful 和 Prismic 等。
Headless CMS 提供了一套 API 接口，让开发者可以自由地调用数据。但是，由于每个项目的需求不同，API 接口也需要根据项目需求进行定制。
以下是利用 Strapi 自定义 API 调用的示例代码：
// javascriptcn.com 代码示例
// 定义自定义 API
module.exports = {
async find(ctx) {
// 获取数据库连接
const db = strapi.connections.default;
// 获取参数
const { page = 1, perPage = 10 } = ctx.query;
// 查询数据
const data = await db('articles')
.select('id', 'title', 'content')
.limit(perPage)
.offset((page - 1) * perPage);
// 返回数据
return { data };
},
};在上面的代码中，我们定义了一个自定义 API，用于查询文章列表。其中，我们通过 ctx.query 获取传递的参数，然后通过 Knex.js 查询数据库，最后返回查询结果。
在前端中使用自定义 API
在前端中使用自定义 API 很简单，只需要发起 HTTP 请求即可。以下是使用 Axios 发起请求的示例代码：
// javascriptcn.com 代码示例
// 发起 HTTP 请求
axios.get('/api/articles', {
params: {
page: 1,
perPage: 10,
},
}).then(response => {
// 处理返回数据
console.log(response.data);
}).catch(error => {
// 处理错误
console.error(error);
});在上面的代码中，我们使用 Axios 发起了一个 GET 请求，请求地址为 /api/articles，并传递了参数 page 和 perPage。请求成功后，我们可以通过 response.data 获取返回数据。
总结
本文介绍了利用 Headless CMS 自定义 API 调用的方法，以及在前端中如何使用这些 API。通过使用 Headless CMS，我们可以实现更灵活、可扩展和可定制的数据调用方式，提高开发效率和代码质量。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6581078ad2f5e1655dc3aedc