【内容管理系统】之 Strapi

文章前言

笔记来源：拉勾教育 大前端高薪训练营
阅读建议：内容较多，建议通过左侧导航栏进行阅读

CMS 简介

内容管理系统（content management system，CMS）是一种位于WEB 前端（Web 服务器）和 后端办公系统或流程（内容创作、编辑）之间的软件系统。内容的创作人员、编辑人员、发布人员使用内容管理系统来提交、修改、审批、发布内容。这里指的“内容”可能包括文件、表格、图片、数据库中的数据甚至视频等一切你想要发布到Internet、Intranet以及Extranet网站的信息。

内容管理还可选地提供内容抓取工具，将第三方信息来源，比如将文本文件、HTML网页、Web服务、关系数据库等的内容自动抓取，并经分析处理后放到自身的内容库中

Strapi

基本介绍

Strapi是一种灵活的开源 内容管理平台(CMS)，它使开发人员可以自由选择自己喜欢的工具和框架，同时还允许编辑人员轻松地管理和分发其内容。通过使管理面板和API可以通过插件系统进行扩展，Strapi 使全球最大的公司可以加速内容交付，同时构建优美的数字体验。

• 官网地址：https://strapi.io/

基本使用

• 1，安装Strapi，并创建一个新项目

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

• 2，创建一个管理员用户

  • 导航到http：// localhost：1337 / admin （在新窗口中打开）。

  • 完成表单，创建一个管理员用户

    

• 3，创建文章内容类型（Collection）

  • 导航到PLUGINS -内容类型生成器 ，在左侧菜单中。（在新窗口中打开）

  • 点击 “ +创建新的收藏夹类型 ” 链接

    

  • 输入Post，然后单击Continue(继续)

    

  • 点击 “ +添加其他字段 ” 按钮

    

  • 单击文本字段，键入title在名称字段

    

  • 单击转到 “高级设置” 选项卡，然后检查Required field（必须的）和Unique field（唯一的）

    

  • 点击 “ +添加另一个字段 ” 按钮，单击 富文本格式 字段，

  • 在 “名称” 字段 content 的 “基本设置” 选项卡下键入，点击 Finish

  • 单击 保存 按钮，然后等待 Strapi 重新启动

    

• 4，创建 Collection Post 中的数据

  • 增加新的 Posts

    

  • 填写内容，点击保存

    

  • 保存完后，会自动刷新，要求将接口权限开放 Publish

    

    重要的事情说三遍：一定要向外 Public ！！！

    重要的事情说三遍：一定要向外 Public ！！！

    重要的事情说三遍：一定要向外 Public ！！！

    如果不点击 Public 的话，则将不能在外部访问到接口数据。

  • 最后，形成的数据列表，如图所示：

    

使用 Strapi 接口数据

配置 角色 & 权限

• 点击 设置-角色权限

  

• 点击 编辑，给 Public 公共用户，开放权限

  

• 点击 保存

• 注意：给 Authenticated 管理员用户，开放全部权限。

  

Postman 测试接口

• 查询全部数据

  

• 根据 id 进行精准匹配，查询数据

  

访问受保护的 API

添加用户数据

• 点击 用户 - +增加新的 Users

  

• 填写用户相关信息，点击 保存

  

Postman 测试

• 登录刚才添加的用户，拿到 token

  • 接口地址，如下所示：

    # 登录网址
    http://localhost:1337/auth/local
  

  • 接口参数，如下所示：

    // 参数
    {
         
        "identifier": "用户名或邮箱",
        "password": "密码"
    }
  

  测试结果，如图所示：

  

• 由此可以得到 Token，配置请求头

    {
         
        "key": "Authorization",
        "value": `Bearer ${
           token}`
    }
  

  登录结果，如图所示：

  

  注意：

  ​ 这里使用了 Postman 进行接口的测试，具体的代码操作，参考官方网址：

  • https://strapi.io/documentation/developer-docs/latest/plugins/users-permissions.html#concept