为什么需要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的相关知识进行扩充。
npm run develop