strapi的安装和使用
strapi一款基于Node.js开发的headless, 接口优先(API-first)的内容管理系统.
Strapi 应用程序可以本地安装在计算机上,也可以安装在远程服务器上。以下安装指南提供了有关如何在本地计算机上安装和创建新Strapi项目的分步说明。
Strapi CLI(命令行界面)安装脚本是让 Strapi 在本地运行的最快方法, 也是官方推荐的安装方式。
1. 安装前准备工作
在安装 Strapi 之前,您的计算机上必须安装以下软件:
- Node.js:仅支持维护版本和 LTS 版本(v16、v18和v20)。
- 建议安装 Strapiv4.3.9及以上版本使用 Node v18.x
- 建议安装 Strapi v4.0.x 到 v4.3.8 版本使用 Node v16.x 。
安装Node.js可以参考我之前的博客
Node.js 包管理器
- npm(v6及以上)
- yarn
Python(如果使用 SQLite 数据库)
任何 Strapi 项目支持的数据库:
数据库 最低限度 推荐版本 MySQL 5.7.8 8.0 MariaDB 10.3 10.6 PostgreSQL 11.0 14.0 SQLite 3 3
注意: Strapi v3 支持 MongoDB, 但是Strapi v4不支持MongoDB。后续版本可能仍然会支持MangoDB, 详情请参考这篇文章MongoDB support in Strapi: Past, Present and Future
PostgreSQL安装可以参考Centos7上安装PostgreSQL 14 | 鹏叔的技术博客
MariaDB安装可以参考Centos7上安装MariaDB | 鹏叔的技术博客 里面涉及到的版本有些旧了, 要安装新版本的MariaDB可能需要替换Yum源.
如果使用MySQL, MariaDB, PostgreSQL应该提前将数据库创建好, 再创建Strapi项目, 以PostgreSQL, 数据库的表结构会在项目首次运行时导入.
2. 创建Strapi项目
按照以下步骤创建一个新的Strapi项目,确保使用适合您已安装的包管理器的命令:
2.1. 在终端中,运行以下命令
使用npm创建Strapi项目
1
2
3
4
5
6
7
npx create-strapi-app@latest my-project
# 'npx' runs a command from an npm package
# 'create-strapi-app' is the Strapi package
# '@latest' indicates that the latest version of Strapi is used
# 'my-project' is the name of your Strapi project
或者使用yarn创建Strapi项目
1
2
3
4
5
6
yarn create strapi-app my-project
# 'yarn create' creates a new project
# 'strapi-app' is the Strapi package
# 'my-project' is the name of your Strapi project
2.2. 选择安装类型
- Quickstart (推荐),它使用默认数据库(SQLite)
- Custom (手动配置),它允许选择您首选的数据库
2.3. (仅限自定义安装类型)在数据库列表中,为您的 Strapi 项目选择一个数据库
2.4. (仅限自定义安装类型)为项目的数据库命名
2.5. CLI 一些安装选项说明
上述安装指南仅涵盖使用 CLI 的基本安装选项。创建新的 Strapi 项目时还可以使用其他选项,例如:
1
2
3
4
--quickstart:以快速开始方式直接创建工程。
--template:使用Strapi配置模板创建项目(请参阅[模板](https://docs.strapi.io/dev-docs/templates))。
--typescript/--ts:使用TypeScript创建项目。
--no-run:仅创建不自动启动Strapi服务(与--quickstart结合使用)。
3. 启动Strapi应用程序
要启动 Strapi 应用程序,请在项目文件夹中运行以下命令:
1
2
3
4
5
npm run develop
# 或者
yarn develop
一旦应用启动后, 我们可以通过以下链接导航到我们的管理面板:http://localhost:1337/admin. 当您浏览时您将能够看到注册页面。
4. 一些有用的Strapi命令
1
2
3
4
5
6
7
8
9
10
11
12
13
npm run develop
Start Strapi in watch mode. (Changes in Strapi project files will trigger a server restart)
npm run start
Start Strapi without watch mode.
npm run build
Build Strapi admin panel.
npm run strapi
Display all available commands.
5. 使用strapi
5.1. 注册管理员账号
管理面板打开之后,系统会提示我们创建一个超级管理员的身份,输入自己的账号和密码,目前界面显示的是英文,稍后我们进行配置接口让其显示中文界面。
注册输入一个账号、邮箱、密码,点击 Let’s start,进入到即可进入到 CMS 系统当中。
5.2. 修改 strapi 管理界面为中文
接下来我们进行项目代码的配置,将界面设置为中文,使用自己熟悉的开发工具打开工程,这里我使用 VSCode,项目的结构如下图所示
这里我使用了文件折叠的插件,才让下面那些配置文件显示成层级结构的,不用管,将 src/admin/app.example.tsx 修改为 src/admin/app.tsx,并将代码修改成如下:
1
2
3
4
5
6
7
8
9
10
11
12
export default {
config: {
locales: [
'zh-Hans',
'zh',
],
},
bootstrap(app) {
console.log(app);
},
};
保存代码,项目会自动重启,打开管理系统,找到 Settings -> internationalization -> Add new locale ,添加一个中文的语言设置.
点击 save 保存语言配置项,然后重启一下项目,再次登录到管理系统当中。点击左下角的头像,选择 Profile,跳转到个人信息设置页面,可以看到有设置中文的选项了,我们选中中文(简体),然后点击 save,即可看到界面切换到中文。
5.3. 如何创建博文
首先在左侧导航栏中选择
Content-Type builder
, 在中间的导航栏选择Collection Type
选项下选择create new Collection Type
在
Create a collection type
对话框输入Content-Type的名称, 在Advanced setting中确保Draft&publish
勾选上, 这一项在编辑博客文章时先保存为草稿, 等编辑完成后手动点击publish. 点击Continue按钮进入字段设置对话框.创建字段如下
标题: 字段名title, 类型Text, 在Advanced setting中勾选’Required field’, ‘Unique field’ 等选项, 保存.
内容: 字段名content, 类型Rich text, 在Advanced setting中勾选’Required field’
作者: 字段名author, 类型Relation, 在Advanced setting中勾选’Required field’
标签: 字段名Tags, 类型Relation, 在Advanced setting中勾选’Required field’
因为我们的博客文章包括多个字段, 例如标题, 正文, 标签, 作者等字段, 所以我们需要选择Collection Type而不是Single type.
可以将Content-type理解为数据库的table, 创建Content-Type相当于动态建立数据库表结构
标签字段为Relation, 需要新建Tag
Content-Type, 然后将字段与Tag
Content-Type关联, Author字段同理.
6. 问题排查
1. 运行项目`npm run develop`时报错
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Building your admin UI with development configuration...
Admin UI built successfully
error: ���ݿ� "xxx-project" ������
at Parser.parseErrorMessage (D:\dev\proj\xxx-project\node_modules\pg-protocol\dist\parser.js:287:98)
at Parser.handlePacket (D:\dev\proj\xxx-project\node_modules\pg-protocol\dist\parser.js:126:29)
at Parser.parse (D:\dev\proj\xxx-project\node_modules\pg-protocol\dist\parser.js:39:38)
at Socket.<anonymous> (D:\dev\proj\xxx-project\node_modules\pg-protocol\dist\index.js:11:42)
at Socket.emit (node:events:513:28)
at Socket.emit (node:domain:489:12)
at addChunk (node:internal/streams/readable:324:12)
at readableAddChunk (node:internal/streams/readable:297:9)
at Readable.push (node:internal/streams/readable:234:10)
at TCP.onStreamRead (node:internal/stream_base_commons:190:23)
原因数据库未创建, 数据库配置解析失败.
2. 忘记管理员密码,如何重置。
在登陆界面点击忘记密码连接,跳转到重置密码界面。注册时的邮箱地址,会收到一封重置密码的邮件,点击邮件中的链接,跳转到重置密码界面,重置密码即可。
7. 参考文档
strapi的安装和使用