「Strapi」无头CMS，快速构建API

Strapi介绍

Strapi是一个免费的开源无头CMS，可以快速构建自己所需的 API。

• 保持对数据的控制。使用Strapi，可以知道数据的存储位置，并且始终可以完全控制。
• 自托管。可以按照自己的方式托管和扩展Strapi项目。可以选择所需的任何托管平台：AWS，Netlify，Heroku，VPS或专用服务器。您可以随增长而扩展，100％独立。
• 可以选择自己喜欢的数据库。Strapi适用于SQL和NoSQL数据库：MongoDB，PostgreSQL，MySQL，MariaDB和SQLite。
• 可定制的。通过完全自定义API，路由或插件来完全满足需求，从而快速构建逻辑。

安装

# 使用 yarn 安装
yarn create strapi-app my-project --quickstart
# 使用  npm/npx 或者 安装
npx create-strapi-app my-project --quickstart
# 启动开发模式
yarn dev
# 生产模式
yarn start
# 重新构建
yarn build

可以打开config/server.js文件,修改启动端口号

初次安装完会弹出一个页面,让你注册管理员账号

使用

在登录成功后

1. 点击左侧菜单栏的内容类型生成器

2. 点击创建一个新的Content Type

3. 输入名称,在高级设置里,将Draft/publish system选择OFF(取消每次发布文章为草稿)点击继续(这里的名称就是后面 api 路径名,即api/name )

4. 选择自己所需的字段并创建,最后点击完成,应用重启.

5. 在左侧菜单栏COLLECTION TYPES分类下,就会出现刚刚创建的内容
   

6. 点击新建,输入内容后保存.(倘若第三步没有选择OFF,还要点击保存旁边的Publish).此时访问http://localhost:1337/tests显示statusCode: 403.

7. 点击左侧菜单栏的设置/角色与权限/Public,勾选find和find one,保存.

8. 此时访问http://localhost:1337/tests便可显示数据内容

定制富文本编辑器

这里以CKEditor5为例,其定制教程查看「CKEditor5」富文本编辑器定制,定制完成后复制build文件夹下的ckeditor.js和translations文件夹.

1. 生成插件并安装依赖

yarn strapi generate:plugin wysiwyg
cd plugins/wysiwyg
yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic

2.创建 MediaLib

Path — ./plugins/wysiwyg/admin/src/components/MediaLib/index.js

import React, {
    useEffect, useState } from 'react';
import {
    useStrapi, prefixFileUrlWithBackendUrl } from 'strapi-helper-plugin';
import PropTypes from 'prop-types';

const MediaLib = ({
    isOpen, onChange, onToggle }) => {
   
  const {
   
    strapi: {
   
      componentApi: {
    getComponent },
    },
  } = useStrapi();
  const [data, setData] = useState(null);
  const [isDisplayed, setIsDisplayed] = useState(false);

  useEffect(() => {
   
    if (isOpen) {
   
      setIsDisplayed(true);
    }
  }, [isOpen]);

  const Component = getComponent('media-library').Component;

  const handleInputChange = data => {
   
    if (data) {
   
      const {
    url } = data;

      setData({
    ...data, url: prefixFileUrlWithBackendUrl(url) });
    }
  };

  const handleClosed = () => {
   
    if (data)