React83_Strapi的使用

为什么需要Strapi?

真实开发中数据都需要从服务器中加载，所以在后续课程我们要开始学习如何在React中加载服务器中的数据。

问题出现了，我们还没有服务器啊？难道要现写一个吗？写一个也不是不可以，但却有一点点麻烦，所以这节课我们来介绍一个为我们一个工具——Strapi

Strapi可以帮助我们方便快捷的搭建起一个供我们使用的API服务器。

 使用Strapi

1. 创建项目

选一个就行

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

yarn create strapi-app my-project --quickstart

项目创建后会自动启动，浏览器会自动打开链接地址：http://localhost:1337/admin，由于是第一次启动项目，所以会弹出一个注册窗口，这里需要注册一个新的管理员账号。

API服务器仅仅会运行在本地服务器中，所以账号什么的其实没那么重要，随意注册一个即可。注册完成后，点击Let’s start即可进入到项目页面。

2. 配置语言

注册后，我们暂时先不急着查看项目的页面。因为项目的语言默认是英文的，我们需要先经过一些配置开启中文的支持。首先，在命令行中通过ctrl+c停止项目的运行，如果ctrl+c不能正常关闭服务器的话，你还需要在任务管理器中找到node.js的进程并将其结束。然后，在项目的根目录中找到/src/admin/admin.example.js。接着，在当前目录中对该文件进行复制名重命名为admin.js并修改其中代码：

export default {
  config: {
    locales: [
      'zh-Hans',
    ],
  },
  bootstrap(app) {
    console.log(app);
  },
};

 

然后在命令行中，进入项目目录执行如下命令npm run build或yarn build，重新对项目就构建。执行完毕后调用npm start develop或yarn develop启动项目。

再次进入项目后，点击管理界面的左下角，你的用户名的地方且选中Profile选项来进入配置页面：

在配置页面的最下方Inteface language中选中“中文(简体)”，点击save即可将语言设置为简体中文。

虽然，设置了简体中文，但是翻译并不是那么的彻底有些地方并没有完全翻译，但是还好并不影响我们的使用

3. 使用操作

① 添加内容类型

② 添加数据

③ 设置api权限

数据设置完了，我们还需要开发API的访问权限，分别点击settings –> roles –> public

public中设置的是公共访问API的权限，也就是无需登录即可访问。然后选中student，开始设置student的权限，这里我设置了student的所有权限，实际开发中，可以根据实际情况设置。

create表示创建，delete表示删除，find表示查询，findOne查询指定，update修改。设置权限后点击save即可正常开始使用API了。

④ 测试api

用到一个工具叫做“postman”，用来测试api

结尾

使用它的主要目的并不是将它使用到生产环境中，而是让它为我们测试React提供接口，所以它更多的功能我们暂且先放到一边，后边的课程中，我们会根据需要在对Strapi的相关知识进行扩充。