帮助您专注于前端开发的基于Strapi的前端组件。
浏览组件使用文档 »
View Demo
·
Report Bug
·
Request Feature
Strapi是一款非常优秀的无头CMS，它基于koa2开发，提供了后端、管理端以及数据库等服务，且支持众多插件扩展。Strapi的出现为我们全栈开发提供了非常大的帮助，让我们不需要费力专注于后端和数据库，而只需将开发中心放在前端，这样我们就可以专注于前端开发。
为此呢，作者秉持了这样敏捷开发的理念，进一步为Strapi与Vue.js交互，即前后端交互，提供更好的开发体验与便利。它的灵感主要来自于UniCloudDb。
<strapi-db>组件是一个专用于Strapi的Restful API查询组件。
前端通过组件方式直接获取strapi的接口的数据，并绑定在界面上进行渲染。
在传统开发中，开发者需要在前端定义data、通过request联网获取接口数据、然后赋值给data。同时后端还需要写接口来查库和反馈数据。
但有了strapi和strapi-db，就不再需要编写增删查改的接口和前端请求代码，这些工作，只需要一行代码。写组件，设组件的属性，在属性中指定要查什么表、哪些字段、以及查询条件，就OK了！
IDE敲下`strapi-db`代码块，得到如下代码，然后通过collection属性指定要查询表“table1”，通过field属性指定要查询字段“field1”的数据。查询结果data就可以直接渲染在界面上。
<strapi-db v-slot:default="{data}" collection="table1" fields="field1">
<view>
<ul>
<li v-for="item in data">
{{ item }}
</li>
</ul>
</view>
</strapi-db>
<strapi-db> 组件尤其适用于列表、详情等展示类页面。开发效率可以大幅度的提升。
<strapi-db> 组件不仅支持查询。还自带了add、remove、update方法，见下文方法章节。
(回到顶部)
组件主要基于无头的Strapi和MVVM前端开发框架Vue.js。
请注意，本组件完全基于Vue3.
(回到顶部)
这是一个简单示例来帮助你更快的掌握组件的使用方法。
npm i strapi-db在文件中引入该组件，并在template内编写如下代码即可。更详细的例子请参考preview.vue
<strapi-db v-slot:default="{data}" collection="table1" fields="field1" baseUrl="http://www.example.com/api">
<view>
<ul>
<li v-for="item in data">
{{ item }}
</li>
</ul>
</view>
</strapi-db>(回到顶部)
| 属性 | 类型 | 描述 |
|---|---|---|
| v-slot:default | 查询状态（失败、联网中）及结果（data），详情可见V-slot相关章节 | |
| ref | String | vue组件引用标记，用于调用组件内方法 |
| baseUrl | String | Strapi管理端的API地址，默认为https://strapi.marlenej.com/api |
| collection | String | 表名。支持输入多个表名，用 , 分割 |
| fields | String，Array | 指定要查询的字段，多个字段用 array传入。不写本属性，即表示查询所有字段。 |
| filters | Object | 查询条件，对记录进行过滤。 |
| sort | String，Array | 排序字段及正序倒序设置 |
| populate | String，Array | 手动指定使用的关联关系 |
| pageData | String | 分页策略选择。值为 add 代表下一页的数据追加到之前的数据中，常用于滚动到底加载下一页；值为 replace 时则替换当前data数据，常用于PC式交互，列表底部有页码分页按钮，默认值为add |
| pageCurrent | Number | 当前页 |
| pageSize | Number | 每页数据数量 |
| getCount | Boolean | 是否查询总数据条数，默认 true，需要分页模式时指定为 true |
| getOne | Number | 指定查询结果的ID为多少 |
| distinct | Boolean | 是否对数据查询结果中重复的记录（根据id）进行去重，默认值true |
| loadtime | String | 数据加载方式，详情见下 |
| @load | EventHandle | 成功回调。联网返回结果后，若希望先修改下数据再渲染界面，则在本方法里对data进行修改 |
| @error | EventHandle | 失败回调 |
比如strapi有个user的表，里面有字段id、name，查询id=1的数据，那么写法如下： 注意下面示例使用了getOne会返回一条对象形式的data，如不使用getOne，data将会是数组形式，即多一层。
<template>
<view>
<strapi-db v-slot:default="{data}" collection="user" getOne=1>
<view>
{{ data.name}}
</view>
</strapi-db>
</view>
</template>
<strapi-db v-slot:default="{data,pagination,loading,hasMore,error}"></strapi-db>
| 属性 | 类型 | 描述 |
|---|---|---|
| data | Array | 查询结果 |
| pagination | Object | 分页属性 |
| loading | Boolean | 查询中的状态。可根据此状态，在template中通过v-if显示等待内容，如加载中... |
| hasMore | Boolean | 是否有更多数据。可根据此状态，在template中通过v-if显示没有更多数据了。部分特殊情况下存在BUG。 |
| error | Object | 查询错误。可根据此状态，在template中通过v-if显示等待内容，如加载错误 |
<strapi-db v-slot:default="{data, loading, error}" collection="user">
<view v-if="error">{{error.message}}</view>
<view v-else-if="loading">正在加载...</view>
<view v-else>
<ul>
<li v-for="item in data">
{{ item }}
</li>
</ul>
</view>
</strapi-db>
collection即strapi中的表名。
<strapi-db v-slot:default="{data, loading, error}" collection="user">
<view v-if="error">{{error.message}}</view>
<view v-else-if="loading">正在加载...</view>
<view v-else>
{{data}}
</view>
</strapi-db>
populate填写某个关联字段或者%2A(表示将关联的字段一并显示，它是*的转义字符)。
如果仅需要关联一个字段，请不要使用array格式，尤其是*
如果我们需要该表显示关联的categories字段，可以传入如下内容到populate参数。
['categories']fields指定collection中要查询的字段，不填该参数则默认查询所有字段 例如，只查询title和body字段，则传入如下内容到fields参数。
['title', 'body']filters中指定要查询的条件。比如只查询某个字段的值符合一定条件的记录。 例如，如果想要查询username = John 的 记录，可以将下面的Object传入filters参数。等于的操作符即$eq
username: {
$eq: 'John',
}更多的操作符请参照下表：
格式为 字段名 空格 asc(升序)/desc(降序)，多个字段用array，优先级为字段顺序 示例代码：
<strapi-db sort="['title:asc', 'slug:desc']"></strapi-db>| 值 | 类型 | 描述 |
|---|---|---|
| auto | String | 页面就绪后或属性变化后加载数据，默认为auto |
| onready | String | 页面就绪后不自动加载数据，属性变化后加载。适合在onready中接收上个页面的参数作为filters条件时。 |
| manual | String | 手动模式，不自动加载数据。如果涉及到分页，需要先手动修改当前页，在调用加载数据 |
- load事件
load事件在查询执行后、渲染前触发，一般用于查询数据的二次加工。比如查库结果不能直接渲染时，可以在load事件里先对data进行预处理。
...
<strapi-db @load="handleLoad" />
...
handleLoad(data, pagination) {
// `data` 当前查询结果
// `pagination` 分页信息
}
- error事件
error事件在查询报错时触发，比如联网失败。
...
<strapi-db @error="handleError" />
...
handleError(e) {
// {message}
}
当 组件的 manual 属性设为 true 时，不会在页面初始化时联网查询数据，此时需要通过本方法在需要的时候手动加载数据。
strapi.value.loadData() //strapi为strapi-db组件的ref属性值
在列表的加载下一页场景下，使用ref方式访问组件方法，加载更多数据，每加载成功一次，当前页 +1
strapi.value.loadMore() //strapi为strapi-db组件的ref属性值
清空已加载的数据，但不会重置当前分页信息
strapi.value.clear() //strapi为strapi-db组件的ref属性值
重置当前分页信息，并重新加载数据
strapi.value.reset() //strapi为strapi-db组件的ref属性值
清空并重新加载当前页面数据
strapi.value.refresh()
本组件提供登录的方法。strapi自带登录系统，用户权限管理。部分api存在权限限制，需要用户鉴权。通过登录方法可以自动取得JWT并存放于localStorage中。之后使用strapiDb组件时会自动附带JWT。所以本方法应在strapi-db组件创建之前调用。 identifier：账号/邮箱 password：密码
strapi.value.login(identifier, password)顾名思义，添加一条数据。
strapi.value.addData(collection,data)顾名思义，删除一条数据。
strapi.value.removeData(id,collection)顾名思义，更改一条数据的内容。
strapi.value.updateData(id,collection,data)(回到顶部)