Strapi——基础

介绍

Strapi是一种灵活的、开放源码的无头CMS，开发者可以自由选择自己喜欢的工具和框架，编辑器也可以轻松地管理和分发内容。通过使管理面板和API可扩展通过插件系统，Strapi使世界上最大的公司加速内容交付，同时建立美丽的数字体验。

用一句话来概括：免费开源的Nodejs无头CMS内容管理框架,建立在自定义api。

特点

• 自定义内容结构

• 轻松的内容管理

• 开发人员友好的API

• 角色和权限

  Strapi具有内置的用户系统，可让您管理谁可以访问什么。

构建项目

简单构建电商网站。

准备工作

• 安装Node.js

• Vue.js

• 安装Postman

  一种用于与HTTP API进行交互的Google Chrome浏览器工具。

安装

创建Strapi项目的最快，最推荐的方法是通过Strapi CLI。可以使用yarn或npx视情况而定。打开一个终端窗口并运行命令：

• $使用快速入门系统创建应用$

  yarn create strapi-app VueStrap --quickstart  （VueStrap是项目名称）
  #OR
  npx create-strapi-app VueStrap --quickstart（VueStrap是项目名称）
  

  该--quickstart标志将使用$SQLite数据$库设置项目。如果打算使用其他数据库创建新项目，则可以省略该标志，CLI会提示您选择首选数据库。

  若执行以上命令后报错直接进入项目根目录后执行npm install即可。

• $选择其他数据库$

  以MongoDB为例：

  yarn create strapi-app VueStrapiNew （VueStrapiNew是项目名称）
  #OR
  npx create-strapi-app VueStrapiNew（VueStrapiNew是项目名称）
  

  

运行

yarn develop
#OR
npm run develop

在浏览器输入localhost:1337/admin会出现以下界面：

输入用户名密码后进入主界面：

接下来我们就可以创建自己的产品：

步骤

• 根据设计，创建一个/products端点，我们可以调用它来返回一个产品列表。要做到这一点，创建一个产品内容类型，点击蓝色的大按钮，并填写表单如下:

  

• 单击Continue，将显示一个新的部分，需要在其中为这个端点创建字段。在我们的例子中，我们只有四个字段:

  • Title
  • Description
  • Price
  • Image

  我们需要两个文本字段用于标题和描述，一个数字字段用于价格，一个媒体字段用于产品图像。以下是我们如何填充字段:

  

• 添加完我们指定的所有字段后，单击“完成”时，可以预览包含所有添加字段的产品端点：

  

• 此时创建了一个功能性/ products端点，可用于创建要在商店中展示的产品,之后点击Save来保存。

  

• 点击右上角Add New Product添加新产品：

  

  记得添加完后点击Save进行保存，添加后如下(添加了2条)：

  
  so,我们已经创建了一个功能完备的/ products端点，可以从客户端调用它来检索我们在此处创建的所有产品的列表。

• 最后，让我们更新用户角色和权限部分，以正确管理对该端点的访问。

  目前，如果我们尝试访问/ products端点，则会收到一个禁止的错误：

  

  发生这种情况是因为我们未授权该公共用户访问此端点。要管理访问，请使用侧边栏上的“角色和权限”按钮，选择“公共”，然后选中您要授予公共用户访问权限的框：

  

  再次去postman中访问此端点：

  

到目前为止，我们已拿到了产品数据，那如何展示在页面上呢❓请参考下一篇。

补充：

因为我选择的数据库是MongoDB，数据库名称是strapi,所以在Robo 3T里面可以看见上面增加的4条数据：