Strapi只需几分钟就可以打造一款CMS内容管理系统

Strapi是一款基于NodeJs开源的项目,Strapi 提供了很大的灵活性用于管理内容,同时提供开放的API请求,可以毫不费力地构建强大的 API 。

功能特性

  • 扁平化的管理面板,优雅、完全可定制、完全可扩展的管理面板
  • 安全性,可重用策略、CSRF、CORS、P3P、Xframe、XSS 等
  • 插件化,可在几秒钟内安装身份验证系统、内容管理、自定义插件等等
  • 支持多类型数据库,使用 Mongo 作为主数据库,同时支持 Postgres、MySQL 等

环境要求:

  • NodeJS:目前支持 v18 和 v20 ,不支持 Node 的奇数版本,例如:v19
  • NPM:v6 及以上
  • Yarn:推荐使用Yarn 包管理器

创建项目

在终端中,运行以下命令:

NPM

sql 复制代码
npx create-strapi-app@latest my-project --quickstart

Yarn

lua 复制代码
yarn create strapi-app my-project --quickstart

选择安装类型

  • Quickstart (recommended),使用默认数据库(SQLite)
  • Custom (manual settings),允许选择你喜欢的数据库

安装后也可以修改数据库类型,所以这里选择Quickstart ,待命令执行完之后进入项目文件夹,执行yarn develop,你会得到如下图的界面:

至此安装完成,进入配置页面,完善后台登录账号后进去控制台,在这里默认有一个User 模型,我们可以新建一个自己的模型,比如Article

如上图,Article 模型已经建立完成了,大家记得点击保存按钮!同时也支持一些字段类型的设置,比如字段长度,是否必填等等

接下来我们就可以进入Content Manager 中写我们的第一篇文章了

写完之后记得Publish Save

API调用

REST API 允许通过 API 端点访问 content-types。创建内容类型时,Strapi 会自动创建API查询。

对于每个 Content-Type,会自动生成以下接口:

方法 网址 描述
GET /api/:pluralApiId 获取条目列表
POST /api/:pluralApiId 创建条目
GET /api/:pluralApiId/:documentId 获取入口
PUT /api/:pluralApiId/:documentId 更新条目
DELETE /api/:pluralApiId/:documentId 删除条目

这里的pluralApiId 就是我们之前创建的Articles

例如获取Article 列表,那么API就是/api/Articles

在请求API时需要进行鉴权,在请求头中写入API 令牌,新的 API 令牌是从管理面板生成的。

生成的token 只会显示一次,如果隐藏掉之后则只能重新生成

当对 Strapi 的 API 执行请求时,应使用以下语法将 API 令牌添加到请求的 Authorization 标头中:bearer your-api-token。记得token前固定值bearer

至此Article模型搭建已经完成了。

部署

在生产中运行服务器之前,你需要构建生产管理面板:

ini 复制代码
NODE_ENV=production yarn build

使用 production 设置运行服务器:

ini 复制代码
NODE_ENV=production yarn start

建议使用 pm2 来管理Node进程。

也可以根据环境使用环境变量来配置你的应用,例如:

javascript 复制代码
// /config/server.js
module.exports = ({ env }) => ({
	host: env('HOST', '0.0.0.0'),
	port: env.int('PORT', 1337),
});

然后你可以创建 .env 文件或直接在你选择的部署平台中设置环境变量:

ini 复制代码
HOST=10.0.0.1
PORT=1338

最后

欢迎大家体验,快去实现你的第一个博客项目吧!

相关推荐
小政爱学习!18 分钟前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript
魏大帅。23 分钟前
Axios 的 responseType 属性详解及 Blob 与 ArrayBuffer 解析
前端·javascript·ajax
花花鱼29 分钟前
vue3 基于element-plus进行的一个可拖动改变导航与内容区域大小的简单方法
前端·javascript·elementui
k093333 分钟前
sourceTree回滚版本到某次提交
开发语言·前端·javascript
EricWang13581 小时前
[OS] 项目三-2-proc.c: exit(int status)
服务器·c语言·前端
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
晴天飛 雪1 小时前
React 守卫路由
前端框架·reactjs
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
超雄代码狂1 小时前
ajax关于axios库的运用小案例
前端·javascript·ajax
长弓三石2 小时前
鸿蒙网络编程系列44-仓颉版HttpRequest上传文件示例
前端·网络·华为·harmonyos·鸿蒙