乐趣区

关于javascript:Headless-CMS-之-Strapi-使用指南

jiezi

1. 简介

Strapi is the leading open-source headless CMS. It’s 100% Javascript, fully customizable and developer-first.

官网：https://strapi.io/

Strapi 是 Headless CMS 的一个实现，其余相似实现能够参考 GitHub Topic：https://github.com/topics/hea…

能够用于疾速实现 CMS 格调利用的后端性能（后盾治理 + 接口），十分实用于疾速原型出现、为小型 CMS 格调利用提供后盾数据。

2. 装置 Strapi

2.1. 筹备运行环境

Make sure requirements are met

Node.js

Software Minimum version Recommended version
Node.js 12.x 14.x
npm 6.x 6.x

Yarn (optional)
You can also use yarn if you want here (opens new window)are the instructions to get started with it.

Databases
Strapi currently support the following databases.

Database Minimum version
SQLite 3
PostgreSQL 10
MySQL 5.6
MariaDB 10.1
MongoDB 3.6

2.2. 创立工程

Step 2: Create a new project

反对 yarn 或 npx 形式构建，本文应用 npx 为例。

To quickly create a blank project from scratch, run this command:

npx create-strapi-app my-project --quickstart

Alternatively, to use one of our starters (opens new window), run this command instead:

npx create-strapi-starter my-project <starter-url>

TIP

  • If you want to use specific database, you don’t have to use the --quickstart flag. The CLI will let you choose the database of your choice. The --quickstart flag sets the database to SQLite.
  • By default, create-strapi-app will generate an empty Strapi project. If you want an application that is pre-configured for a specific use case, see the Templates section.
  • When using a starter, the project can be created from a specific branch, for example with a url like this: https://github.com/strapi/strapi-starter-gatsby-blog/tree/<my-branch>.

WARNING
To start your Strapi application you will have to run the following command in your application folder.

2.3. 启动工程

Start the project
To start your Strapi application you will have to run the following command in your application folder.

npm run develop

TIP

If you created your application using --quickstart flag, it will automatically run your application.

3. 应用 Strapi

3.1. 拜访 Strapi web 后盾

浏览器拜访：http://localhost:1337/admin

首次拜访注册

Email：amin@demo.com
PWD：Qwer1234

3.2. 创立内容

提醒：Content Type 对应数据 实体 的概念（数据库中的 表）

3.2.1. 创立 Content Type

后盾主页 >【主菜单】插件：内容类型生成器 >【导航面板】创立一个新的 Content Type

3.2.2. 为 Content Type 写入数据

  1. 后盾主页 >【主菜单】COLLECTION TYPES > 选中新建的 Content Type
  2. 点击右侧数据区右上角 ”” 减少新的 XXX（Content Type 名称）” 按钮
  3. 新增实体的字段，并保留。

3.2.3. 为 Content Type 数据配置拜访权限

后盾主页 >【主菜单】惯例：设置 >【角色和权限】

对 Public 编辑

对 Public 角色的各 Content Type 资源拜访权限进行勾选，并保留

==Waring：强烈建议对 Public 角色仅赋予只读类的权限，如count, findOne, find==

3.2.4. 装置 API 文档插件 documentation（可选的）

documentation 介绍：Create an OpenAPI Document and visualize your API with SWAGGER UI.

后盾主页 >【主菜单】惯例：市场 > 浏览插件列表找到 DOCUMENTTATION 插件，点击“下载”主动装置。装置结束后主菜单“插件”项下回减少“文档”子项，点击，右侧面板“打开文档”即可拜访内容的 API 文档。

3.2.5. 通过 API 拜访 Content Type 资源

资源 API 的 Endpoint 格局为：{host}:{port}/{contetTypeName 复数模式}

Strapi 主动生成的资源 API 端点示例：

端点示例 形容
GET /categories 获取列表
POST /categories 新增
GET /categories/count 获取计数
GET /categories/{id} 获取一个
PUT /categories 更新
DELETE /categories 删除

API 文档界面：

以 curl 为客户端拜访实例：

# 申请
curl --location --request GET 'http://localhost:1337/products'

#响应
[
    {
        "id": 1,
        "title": "iPhone 12 Pro Max",
        "price": 8848,
        "stock_count": 99,
        "category": {
            "id": 1,
            "name": "智能手机",
            "recommended": true,
            "sort_weight": 0,
            "created_at": "2021-04-22T06:58:20.058Z",
            "updated_at": "2021-04-22T06:58:20.066Z"
        },
        "published_at": "2021-04-17T07:23:10.235Z",
        "created_at": "2021-04-17T07:22:29.600Z",
        "updated_at": "2021-04-22T07:04:37.817Z"
    }
]

4. 总结

Strapi 为利用后端开发提供了一个选项，其最大的劣势在于疾速。本文是一篇疾速上手体验 Strapi 的入门级指南，不对 Strapi 自身的稳定性、可用性、商用性等方面作进一步探讨。

5. 参考

  • Offical: Strapi developer Docs
  • Offical: Strapi user Docs
  • 哔哩哔哩视频：strapi Headless CMS api 创立框架入门到放弃
  • Youtube: Strapi.js Crash Course | Headless CMS
退出移动版