cosmic数据库使用说明_使用Cosmic JS为React + Next.js博客提供动力

最新推荐文章于 2024-06-07 15:50:53 发布

dfsgwe1231

最新推荐文章于 2024-06-07 15:50:53 发布

阅读量1.6k

点赞数

文章标签： java python 数据库 github 大数据

原文链接：https://hackernoon.com/powering-a-react-next-js-blog-with-cosmic-js-bc182b2b2c94

版权

cosmic数据库使用说明

TLDR；
Cosmic JS为博客提供了出色的后端。它是功能齐全的内容管理系统（CMS），具有直观的用户界面，非技术客户可以使用该界面来管理其站点内容。

请点击以下链接获取代码和演示：

TL; DR：

介绍

每个博客都需要一个可靠的CMS。这样，内容所有者就可以控制其内容，而不必雇用开发人员来对其网站进行任何单个更改。许多开发人员在考虑CMS时会立即想到WordPress。我想建议使用Cosmic JS作为替代方案。从开发人员的角度进行集成并从客户的角度进行管理非常简单。在本文中，我们将把React + Next.js应用程序连接到Cosmic JS，并介绍一些功能。

入门

首先，您需要使用Cosmic JS创建一个免费帐户。导航至https://cosmicjs.com 。点击标题中的“创建免费帐户”按钮。

然后填写您的信息，或直接单击“使用GitHub注册”。

使用Cosmic JS创建后端的第一步是创建一个Bucket 。可以将Bucket视为Objects的容器。对象是您要存储的任何数据。对象可以是博客文章，图像，任何类型的元数据或实际上任何类型的任何东西。我们将在下一节中讨论对象。现在，只需知道您需要一个Bucket来保存所有项目数据。您现在应该位于https://cosmicjs.com/buckets 。点击“添加新存储桶”。输入项目名称，然后点击“保存存储桶”。

仪表板和设置

您现在应该位于https://cosmicjs.com/****/dashboard，****是一个唯一的字符串，用于标识您的存储桶（也称为slug ）。您网站的所有数据都可以在控制台中进行管理。我们要做的第一件事是定义一个Object Type 。 对象类型定义数据结构。在本教程中，我们将定义4种不同的对象类型： Globals ， Posts ， Authors和Social Links 。让我们从Posts开始。 Post Objects将保存在我们的网站上显示博客文章所需的所有信息。点击“添加对象类型”按钮。

在“唯一名称”字段中键入“发布”。 “复数名称”和“ API端点”字段应自动填充。

然后点击“ Metafields模板”标签。点击“添加元字段”。

选择“图像/文件”。

在“标题”字段中输入“英雄”。 “密钥”字段应自动填充“英雄”。

让我们再添加一个元字段。再次单击“添加元字段”。这次选择“ HTML文本区域”。

给它起名为“ Teaer”。然后点击“保存对象类型”。

太棒了！您已经创建了第一个Object Type 。让我们再做三遍！

创建一个对象类型 Author 。这代表博客作者。添加一个“图像/文件”元字段，并将其称为“图像”。
创建一个对象类型 Global 。这就是我们如何存储有关博客的元数据，例如标题，标签和徽标。不要添加任何元字段。
创建一个对象类型 ， 社交链接 。我们将使用它来存储有关外部社交链接的数据。添加“纯文本输入”元字段并将其称为“网址”。添加一个“图像/文件”元字段，并将其称为“图标”。

我们几乎完成了设置。让我们回到Post Object Type ，再添加一个metafield。我们刚刚定义了另一个对象类型 Author 。如果我们可以将每个帖子都连接到它的作者，那不是很好吗？再次单击“添加元字段”。这次选择“单个对象关系”。在出现的对话框中，为“标题”键入“作者”。然后选择“按对象类型限制搜索”，然后选择“作者”。然后点击“保存”。

安装完成！您刚刚为项目创建了整个后端。无需配置数据库或服务器！ 🎉

添加一些内容

在继续将Cosmic JS连接到我们的应用程序之前，让我们先添加一些数据。单击“仪表盘”菜单中的“全局”。然后点击“添加全局”。

在“标题”字段中，键入“标题”。然后，我们将添加3个元字段。

添加一个“纯文本输入”元字段。在“标题”中键入“网站标题”，在“值”中键入“我的宇宙博客”。选中“必需”复选框。
添加另一个“纯文本输入”元字段。在“标题”中键入“站点标签”，在“值”中键入“一个干净，简约，内容优先的由Cosmic JS支持的博客”。
添加一个“图像/文件”元字段。为“标题”键入“站点徽标”，然后从计算机中选择一个图像。

点击“发布”。

现在，让我们添加一个Author 。单击“作者”，然后单击“添加作者”。输入“标题”的名称。在“内容”部分为自己添加一个简短的简介。选择一个图像。然后点击“发布”。

然后，我们将添加一个Post 。点击“帖子”，然后点击“添加帖子”。输入标题，一些内容，预告片，添加英雄图像，然后从作者下拉菜单中选择您的名字。

希望您现在就可以使用仪表板了。非常直观。

我们要做的最后一件事是添加一些社交链接 。重复与其他对象类型相同的过程。添加至少两个社交链接。

内容✔️，让我们写一些代码

现在我们可以看代码了！克隆，下载或仅在https://github.com/chrisoverstreet/cosmic-blog上签出源代码。

这不是一个React或Next.js教程，所以我只关注/server.js文件。 Next.js允许您通过在项目的根目录中创建server.js文件来实现自己的服务器。我们将创建一个快速服务器。

连接到Cosmic JS后端的最简单方法是使用官方Cosmic JS JavaScript客户端。要安装客户端，请在您的终端中键入：

npmi -S cosmicjs

返回server.js ，导入并初始化cosmicjs：

const Cosmic = require ( 'cosmicjs' ); < br > const api = Cosmic();

现在，我们将实现自己的API以连接到Cosmic JS 。我们这样做是为了在我们的应用程序和数据之间创建一个层。每当我们想在我们的应用程序中获取数据时，我们都可以使用cosmicjs客户端，但是我们敏感的存储桶数据将暴露给客户端（例如API写入访问密钥）。返回Cosmic JS仪表板，找到您的铲斗。在“设置”菜单下，选择“基本设置”。您的“桶塞”应该可见。复制它。

返回server.js ，我们将创建一个API可以使用的存储桶对象。

const bucket = api.bucket({ slug: 5 b7536d0 -59f 8 -11e8 -8958 -e7a8aba9942d });

使用该存储桶对象，我们可以通过以下方式获取并返回数据：

// API endpoint for site metadata (i.e. title, tag, logo)

server.get( '/api/meta' , (req, res) => bucket.getObject({ slug : 'header' })
  .then( object => res.send(object))
  .catch( err => res.status( 404 ).json({
    message : 'Error fetching header data' ,
    error : err,
  })));

bucket.getObject()是用于定义对象的段。您还可以获取对象列表。

// API endpoint for social links

server.get( '/api/social-links' , (req, res) => {
  const params = {
    type : 'social-links' ,
  };
  
  return bucket.getObjects(params)
    .then( objects => res.send(objects))
    .catch( err => res.status( 404 ).json({
      message : 'Error fetching social links' ,
      error : err,
    }));
});

这是完整的server.js代码：

/* eslint-disable no-console */
require ( 'dotenv' ).config({ path : './.env.production' });
const express = require ( 'express' );
const next = require ( 'next' );
const routes = require ( './routes' );
const Cosmic = require ( 'cosmicjs' );

const port = parseInt (process.env.PORT, 10 ) || 3000 ;
const dev = process.env.NODE_ENV !== 'production' ;
const app = next({ dev });
const handler = routes.getRequestHandler(app);
const api = Cosmic();
const bucket = api.bucket({ slug : process.env.BUCKET_SLUG });

app.prepare()
  .then( () => {
    const server = express();

    // API endpoint for site metadata (i.e. title, tag, logo)
    server.get( '/api/meta' , (req, res) => bucket.getObject({ slug : 'header' })
      .then( object => res.send(object))
      .catch( err => res.status( 404 ).json({
        message : 'Error fetching header data' ,
        error : err,
      })));

    // API endpoint for social links
    server.get( '/api/social-links' , (req, res) => {
      const params = {
        type : 'social-links' ,
      };

      return bucket.getObjects(params)
        .then( objects => res.send(objects))
        .catch( err => res.status( 404 ).json({
          message : 'Error fetching social links' ,
          error : err,
        }));
    });

    // API endpoint for a list of posts (by page)
    server.get( '/api/posts/page/:page' , (req, res) => {
      const validatedPage = ! Number .isNaN(req.params.page) && parseInt (req.params.page, 10 ) >= 0
        ? parseInt (req.params.page, 10 )
        : 1 ;
      const postsPerPage = 10 ;
      const params = {
        limit : postsPerPage,
        skip : (validatedPage - 1 ) * postsPerPage,
        sort : '+created_at' ,
        status : 'published' ,
        type : 'posts' ,
      };

      return bucket.getObjects(params)
        .then( objects => res.send(objects))
        .catch( err => res.status( 404 ).json({
          message : `Error fetching posts for page ${validatedPage} ` ,
          error : err,
        }));
    });

    // API endpoint for an individual post
    server.get( '/api/post/:slug' , (req, res) => bucket.getObject({ slug : req.params.slug })
      .then( object => res.send(object))
      .catch( err => res.status( 404 ).json({
        message : `Error fetching post with slug, ${req.params.slug} ` ,
        error : err,
      })));

    // Our regular NextJS pages
    server.get( '*' , (req, res) => handler(req, res));

    server
      .listen(port, (err) => {
        if (err) throw err;
        console .log( `> Ready on http://localhost: ${port} ` );
      });
});

现在，我们可以在应用程序内点击API端点以检索我们的数据。例如，要检索单个帖子，我们可以使用以下代码：

const fetchPost = slug => fetch( ` ${API_URL} /post/ ${slug} ` )
  .then( res => res.json())
  .then( json => console .log(json));

就这么简单！

奥托罗

这只是将Cosmic JS与React + Next.js结合使用的简要概述 。如果您像我一样，最好的学习方法是直接尝试并尝试一些东西。我邀请您下载该项目的源代码并进行修改。 Cosmic JS提供的功能远远超过本文中提到的内容。在“开发人员”标签下查看其网站上的文章和其他信息。

谢谢阅读！编码愉快！

本文最初以Cosmic JS文章的形式出现。

翻译自: https://hackernoon.com/powering-a-react-next-js-blog-with-cosmic-js-bc182b2b2c94

cosmic数据库使用说明

dfsgwe1231

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
cosmic数据库使用说明_使用Cosmic JS为React + Next.js博客提供动力

cosmic数据库使用说明 TLDR； Cosmic JS为博客提供了出色的后端。它是功能齐全的内容管理系统（CMS），具有直观的用户界面，非技术客户可以使用该界面来管理其站点内容。请点击以下链接获取代码和演示： TL; DR： React + Next.js博客应用 React + Next.js博客演示 React + Next.js博客代码库介绍每...
复制链接

扫一扫