惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

爱范儿
爱范儿
T
The Blog of Author Tim Ferriss
G
Google Developers Blog
博客园_首页
博客园 - 【当耐特】
量子位
S
SegmentFault 最新的问题
B
Blog RSS Feed
酷 壳 – CoolShell
酷 壳 – CoolShell
V
Visual Studio Blog
T
Tailwind CSS Blog
阮一峰的网络日志
阮一峰的网络日志
V
V2EX
Y
Y Combinator Blog
博客园 - 聂微东
The Cloudflare Blog
小众软件
小众软件
J
Java Code Geeks
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
月光博客
月光博客
H
Help Net Security
Jina AI
Jina AI
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
宝玉的分享
宝玉的分享

博客园 - 码间留白

uniapp打包的APP内嵌H5游戏切后台背景音乐停不下来的解决方案 微信小程序审核总被拒?掌握这套“极简闭环”方案,轻松通关,亲测有效! uni-app 项目鸿蒙原生适配实录:微信授权登录从"点击无反应"到真机跑通,条件编译、SDK 配置与那些官方文档没说清的坑 uniapp项目鸿蒙适配,rebuild 后同步原生工程的三种方案与分层决策 uniapp项目适配鸿蒙端没有自定义基座,调试和打包怎么办? 鸿蒙纯血系统适配实战记录:uView + Vue3 的 uni-app 项目适配鸿蒙 NEXT,一天搞定主功能运行到鸿蒙纯血系统 AI辅助前端开发实战指南:高效落地、避坑沉淀全流程 uni-app 集成网易云信通话插件:首页通话监听一直只有第一次有日志?从监听丢失到重复上报的完整治理之路 即时通信 IM 踩坑实录:群主拉人入群后无法收消息?一文讲透 10007 错误码 AI时代插件开发新玩法,分分钟抽离封装插件,你需要做的只是发布到插件市场 PhotoShop CS6在win11系统中界面字体很小,通过兼容性设置强制高 DPI 缩放即可解决 不会后端不用愁,Strapi解你忧——使用Qoder生成前端开发框架,技术栈React18 + Vite + ReactRouter6 + Axios + vw 适配 + Ant Design Mobile + Zustand + Strapi5 不会后端不用愁,Strapi解你忧——搭建博客系统常用数据表设计 windows11系统如何安装多个版本的node,新旧项目切换再也不需要卸载重装了 不会后端不用愁,Strapi解你忧——前端使用Strapi就能实现常见的数据增删查改,分页、排序、模糊查询、时间范围等,不要后端也能自己建站 不会后端不用愁,Strapi解你忧——Windows 11 本地完整部署 Strapi + MySQL 8 实操攻略,从下载到配置启动全指南 不会后端不用愁,Strapi解你忧——Strapi v5.4设置中文语言展示 win11电脑浏览器无法上网但微信正常使用,通常是因为‌DNS解析失败‌,手动设置可靠的公共DNS服务器地址来解决问题 高效能CI/CD流水线设计:Jenkins与Docker的7个关键优化点 从零搭建 Docker + Jenkins CI/CD 流水线:实现项目自动化构建与部署 AI辅助开发——阿里Qoder重构vue2项目到vue3后继续对项目页面加载速度进行优化 vue3项目本地环境网路请求初始连接过久导致接口请求时间过长的问题处理 微信小程序内嵌vue项目实现页面自定义分享完整示例代码 JavaScript 数组高阶用法汇总(含浏览器+微信小程序WebView支持) 京东小程序报错APP-SERVICE-SDK:setStorageSync:fail vue3+ts项目自定义全局函数调用正常但IDE报异常类型ComponentPublicInstance上不存在属性“$showLoading" vue项目实现Tab页面触底上拉切换下个Tab vue3+ts实现页面滚动位置的保存及恢复 到底是用vue2还是vue3好? css3过渡效果如何处理高度不确定的动态内容
不会后端不用愁,Strapi解你忧——Strapi后台数据表创建及API联...
码间留白 · 2026-04-17 · via 博客园 - 码间留白

前边已经介绍过了Strapi创建博客系统的数据表设计,这里就Strapi后台创建“数据表”进行介绍。

注意,这里的创建数据表要实现表连接,不再是前边简单的创建个表能通过API查询到就行了,搭建博客系统最常用的功能是要获取文章及其分类、标签和评论等内容的。

同时,创建好相关数据表,设置好表连接关系之后,我们还要创建几条测试数据,然后使用Postman进行API查询测试,保证能完整的获取到我们需要查询的文章及其关联的分类、标签及评论。

因篇幅有限,本文着重介绍POST/Category/Tag三个表的配置及API调试。


 一. 创建Content-Type

. 创建Content

三. 使用Postman调试API


 一. 创建Content-Type:

1. Category(分类):

- name:分类名称,必填,短文字(2-20个字符长度)

- description:分类描述,非必填,短文字(短文本默认0-255个字符也够用了)

- parentId:上级分类id,非必填,短文字,对应上级分类的documentId(最大长度24)

Relation (oneToMany) with Post :一个分类对应多篇文章

image

name字段需要配置必填栏位、最小长度2,最大长度20,虽然Strapi已经做了数据格式控制,但进行必要的字段长度设置有利于减少脏数据。

image

ParentId字段设置最大传唱度24,其他无需设置

image

表关系设置这里选择Post,Category属于许多Posts

image

对于Category数据类型的设置,按这个就可以了,也可以根据自己的需要进行调整。

2. Tag(标签):

- name:标签名称,短文字,必填,1-20个字符

- Relation (manyToMany) with Post :标签与文章多对多的关系

image

imageimage

 3. POST(文章):

- title*:文章标题,短文本,必填,1-200

- markdown:是否开启markdown编辑内容,Boolean,默认false,展示富文本(Block),为true则展示富文本(Markdown)

- content*:文章内容,富文本(Block),必填

- contentMd*:文章内容,富文本(Markdown),必填,与content通过markdown字段切换展示

- excerpt:文章摘要,短文本,非必填,1-255

- cover:封面图,非必填

- isPublished:是否发布,Boolean,为true则发布,false则存为草稿

- Relation (manyToMany) with Tag:Post与Tag多对多关系

- Relation (manyToOne) with Category :Post与Category多对一关系

image

使用markdown控制文章内容类型是Block还是Markdown,默认false,非必填

image

content/contentMd两个字段分别记录两种类型的文章内容输入

image

image

Post与Category为多对一关系,与Tag为多对多关系

image

image

主要的几个数据表创建完了,记得一定要点击左上角的保存按钮,服务器重启数据才会生效的,下一步我们来创建测试数据。

. 创建Content:

Content Manager页面,给Category/Tag两个表先添加两条测试数据,后边再创建Post数据

1. Category:

Category支持多级,但Strapi后台是不显示documentId的,所以在创建测试数据的时候就先不考虑多级分类了。

image

2. Tag:

image3. POST:

文章内容输入框默认显示传统输入框

image

点击markdown选择是,切换为Markdown输入框

image

输入框下边可以输入博文摘要,上传博文封面图片,还可以选择分类及标签。

虽然现实了isPublish字段,但这个字段是为了给Api调用使用的,这里的可以不用理会,直接通过右上角的发布、保存按钮操作。

image

image

三. 给Public角色配置访问权限:

虽然我们已经创建了相关数据表及测试数据,但Strapi中Public角色默认是没有任何权限的,即使是读取权限,这就需要我们自己设置了。

设置-用户及权限插件-角色页面,点击Public右侧的编辑按钮

image

根据需要,给Public角色添加Category/Tag/Post/Comment等用户可以匿名访问到的这些数据信息表添加find/findOne权限,点击右上角保存按钮,才能使用API查询相关数据。

image

四. 使用Postman调试API:

1. 文章列表,含分类、标签

GET http://localhost:1337/api/posts?populate[category][fields][0]=name&populate[tags][fields][0]=name

如果不会写,可以借住AI,输入几个表之间的关系,AI会直接给出对应的查询API链接

返回数据如下:

{
    "data": [
        {
            "id": 2,
            "documentId": "zs2rv5bgwy6n1q0bmghoac3c",
            "createdAt": "2026-04-16T14:07:20.772Z",
            "updatedAt": "2026-04-16T14:07:36.790Z",
            "publishedAt": "2026-04-16T14:07:36.818Z",
            "title": "我的第一篇Strapi博文",
            "markdown": false,
            "content": [
                {
                    "type": "paragraph",
                    "children": [
                        {
                            "text": "我的第一篇Strapi博文",
                            "type": "text"
                        }
                    ]
                }
            ],
            "contentMd": null,
            "excerpt": "博文摘要",
            "isPublished": null,
            "category": null,
            "tags": [
                {
                    "id": 1,
                    "documentId": "cnbn3qnjpmm95zp6b9s9onbg",
                    "name": "vue"
                },
                {
                    "id": 2,
                    "documentId": "tsrmcyw7t8wi19raxdvycy7w",
                    "name": "strapi"
                }
            ]
        },
        {
            "id": 4,
            "documentId": "byy7cfuxkem6r53jb0f8t93u",
            "createdAt": "2026-04-17T06:15:52.554Z",
            "updatedAt": "2026-04-17T06:15:52.554Z",
            "publishedAt": "2026-04-17T06:15:52.591Z",
            "title": "没有分类和标签的文章",
            "markdown": false,
            "content": [
                {
                    "type": "paragraph",
                    "children": [
                        {
                            "text": "没有分类和标签的文章",
                            "type": "text"
                        }
                    ]
                }
            ],
            "contentMd": null,
            "excerpt": null,
            "isPublished": false,
            "category": null,
            "tags": []
        }
    ],
    "meta": {
        "pagination": {
            "page": 1,
            "pageSize": 25,
            "pageCount": 1,
            "total": 2
        }
    }
}

2. 单篇文章详情(含分类 + 标签 + 评论 + 评论回复)

先来个直接返回包含所有相关数据的简洁API,直接用 populate=*,让 Strapi 自动展开所有关系,不用自己写复杂参数,小白首选,新手零出错。

GET http://localhost:1337/api/posts/${id}?populate=*

将其中的${id}替换为文章的documentId即可,返回数据如下:

{
    "data": {
        "id": 5,
        "documentId": "zs2rv5bgwy6n1q0bmghoac3c",
        "createdAt": "2026-04-16T14:07:20.772Z",
        "updatedAt": "2026-04-17T08:29:37.992Z",
        "publishedAt": "2026-04-17T08:29:38.040Z",
        "title": "我的第一篇Strapi博文",
        "markdown": false,
        "content": [
            {
                "type": "paragraph",
                "children": [
                    {
                        "text": "我的第一篇Strapi博文",
                        "type": "text"
                    }
                ]
            }
        ],
        "contentMd": null,
        "excerpt": "博文摘要",
        "isPublished": null,
        "cover": null,
        "tags": [
            {
                "id": 1,
                "documentId": "cnbn3qnjpmm95zp6b9s9onbg",
                "name": "vue",
                "createdAt": "2026-04-16T15:18:05.739Z",
                "updatedAt": "2026-04-16T15:18:05.739Z",
                "publishedAt": "2026-04-16T15:18:05.729Z"
            },
            {
                "id": 2,
                "documentId": "tsrmcyw7t8wi19raxdvycy7w",
                "name": "strapi",
                "createdAt": "2026-04-16T15:18:43.384Z",
                "updatedAt": "2026-04-16T15:18:43.384Z",
                "publishedAt": "2026-04-16T15:18:43.373Z"
            }
        ],
        "comments": [],
        "category": {
            "id": 1,
            "documentId": "kpkjdb7xhr0ie87z0yie1uvj",
            "name": "前端开发",
            "description": null,
            "parentId": null,
            "createdAt": "2026-04-16T15:13:46.440Z",
            "updatedAt": "2026-04-16T15:13:46.440Z",
            "publishedAt": "2026-04-16T15:13:46.427Z"
        }
    },
    "meta": {}
}

注意:

?populate=*是 Strapi 官方推荐写法,自动深度关联所有关系:
分类 category ✔
标签 tags ✔
评论 comments ✔
评论回复 parent ✔
封面图片 cover ✔
完全满足你要的关联查询。

3. 如果你想严格控制只取需要的字段(推荐生产环境)

http://localhost:1337/api/posts/zs2rv5bgwy6n1q0bmghoac3c?fields=title,content,publishedAt&populate[category][fields]=name&populate[tags][fields]=name&populate[comments][fields]=authorName,content,createdAt
{
    "data": {
        "id": 5,
        "documentId": "zs2rv5bgwy6n1q0bmghoac3c",
        "title": "我的第一篇Strapi博文",
        "content": [
            {
                "type": "paragraph",
                "children": [
                    {
                        "text": "我的第一篇Strapi博文",
                        "type": "text"
                    }
                ]
            }
        ],
        "publishedAt": "2026-04-17T08:29:38.040Z",
        "category": {
            "id": 1,
            "documentId": "kpkjdb7xhr0ie87z0yie1uvj",
            "name": "前端开发"
        },
        "tags": [
            {
                "id": 1,
                "documentId": "cnbn3qnjpmm95zp6b9s9onbg",
                "name": "vue"
            },
            {
                "id": 2,
                "documentId": "tsrmcyw7t8wi19raxdvycy7w",
                "name": "strapi"
            }
        ],
        "comments": []
    },
    "meta": {}
}

自此,我们已经可以实现Strapi的表连接查询了,就可以先试着搭建前端框架,调用查询文章的相关API制作博客文章展示页面了。


注意事项:

1. 本文介绍了使用AI IDE初始化项目、Axios封装、Strapi相关api的请求封装,以及完成真实API调用的文章列表及详情的基础页面。无论是React还是Vue,亦或者Angular,都可以按照这个流程来走,也可以借助于AI聊天工具设计具体的指令,切记,投喂AI的指令很重要,决定了AI生成代码的准确度与质量。

2. Strapi5的数据结构有了大的改变,所以指令中要多提示,避免AI误用Strapi4的相关写法。

3. Strapi除了User表,其他数据表都是自定义创建,所以API  URL最好在Postman中调试好,再拿来投喂AI,根据需要使用全量数据返回及或者必要数据返回。