strapi的安装和使用

发表于 更新于 分类于 阅读次数： 本文字数： 4.4k 阅读时长 ≈ 4 分钟

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 项目支持的数据库：

    数据库最低限度推荐版本
    MySQL5.7.88.0
    MariaDB10.310.6
    PostgreSQL11.014.0
    SQLite33

注意: 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. 如何创建博文

  1. 首先在左侧导航栏中选择 Content-Type builder, 在中间的导航栏选择Collection Type 选项下选择create new Collection Type

  2. 在Create a collection type对话框输入Content-Type的名称, 在Advanced setting中确保Draft&publish勾选上, 这一项在编辑博客文章时先保存为草稿, 等编辑完成后手动点击publish. 点击Continue按钮进入字段设置对话框.

  3. 创建字段如下
    标题: 字段名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. 参考文档

Installing from CLI