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

    数据库最低限度推荐版本
    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

作者

鹏叔

发布于

2023-09-26

更新于

2024-08-07

许可协议

评论