Skip to content

Latest commit

 

History

History
316 lines (245 loc) · 10.6 KB

README.md

File metadata and controls

316 lines (245 loc) · 10.6 KB
Raw


StrapiDB

帮助您专注于前端开发的基于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方法，见下文方法章节。

(回到顶部)

Built With

组件主要基于无头的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>

V-slot

<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

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

populate填写某个关联字段或者%2A(表示将关联的字段一并显示，它是*的转义字符)。

如果仅需要关联一个字段，请不要使用array格式，尤其是*

如果我们需要该表显示关联的categories字段，可以传入如下内容到populate参数。

['categories']

fields

fields指定collection中要查询的字段，不填该参数则默认查询所有字段 例如，只查询title和body字段，则传入如下内容到fields参数。

['title', 'body']

filters

filters中指定要查询的条件。比如只查询某个字段的值符合一定条件的记录。 例如，如果想要查询username = John 的 记录，可以将下面的Object传入filters参数。等于的操作符即$eq

username: {
      $eq: 'John',
}

更多的操作符请参照下表：

参照

sort

格式为 字段名 空格 asc(升序)/desc(降序)，多个字段用array，优先级为字段顺序 示例代码：

<strapi-db sort="['title:asc', 'slug:desc']"></strapi-db>

loadtime

值 类型 描述
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}
}

组件方法

loadData

当 组件的 manual 属性设为 true 时，不会在页面初始化时联网查询数据，此时需要通过本方法在需要的时候手动加载数据。

strapi.value.loadData() //strapi为strapi-db组件的ref属性值

loadMore

在列表的加载下一页场景下，使用ref方式访问组件方法，加载更多数据，每加载成功一次，当前页 +1

strapi.value.loadMore() //strapi为strapi-db组件的ref属性值

clear

清空已加载的数据，但不会重置当前分页信息

strapi.value.clear() //strapi为strapi-db组件的ref属性值

reset

重置当前分页信息，并重新加载数据

strapi.value.reset() //strapi为strapi-db组件的ref属性值

refresh

清空并重新加载当前页面数据

strapi.value.refresh()

login

本组件提供登录的方法。strapi自带登录系统，用户权限管理。部分api存在权限限制，需要用户鉴权。通过登录方法可以自动取得JWT并存放于localStorage中。之后使用strapiDb组件时会自动附带JWT。所以本方法应在strapi-db组件创建之前调用。 identifier：账号/邮箱 password：密码

strapi.value.login(identifier, password)

addData

顾名思义，添加一条数据。

strapi.value.addData(collection,data)

removeData

顾名思义，删除一条数据。

strapi.value.removeData(id,collection)

updateData

顾名思义，更改一条数据的内容。

strapi.value.updateData(id,collection,data)

(回到顶部)