luyadev/luya-headless-cms-api

连接您的SPA应用和LUYA CMS模块的桥梁。

维护者

详细信息

github.com/luyadev/luya-headless-cms-api

源代码

问题

安装: 7,141

依赖项: 0

建议者: 0

安全性: 0

星级: 1

关注者: 4

分支: 3

开放问题: 1

类型:luya-module

dev-master 2022-06-14 13:09 UTC

Requires

Requires (Dev)

MIT 999e48dd943d1f57e8bd59083f6a9dd0a7037c06

  • Basil <git.woop@nadar.io>

apicmsheadlessBridgeluya

This package is auto-updated.

Last update: 2024-09-14 18:20:50 UTC

README

LUYA Logo

LUYA 无头CMS API桥接器

LUYA

此模块提供了一个开箱即用的 API，用于消费LUYA CMS信息。

  • API是公开的，因此不需要认证。
  • CORS默认启用。
  • 只公开所需信息。
  • 它通过缓存进行了优化，使其非常快！

这可以将您的现有LUYA CMS网站转换为API，您可以使用它来构建网站！这可以是前端（JavaScript、Vue、React）或任何后端技术。

安装

通过composer安装扩展

composer require luyadev/luya-headless-cms-api

将模块添加到配置中

'modules' => [
    //...
    'api' => [
        'class' => 'luya\headless\cms\api\Module',
    ]
]

模块名称与REST API URL相同。当您在配置中将模块注册为foobar时，API将作为/foobar/menu?langId=x可用。默认为api。所有API都期望GET请求。

菜单

所有处理菜单数据的API，帮助您在布局文件中构建导航。

/api/menu/containers ─ 获取容器

返回所有可用的CMS菜单容器。LUYA在设置时将创建一个默认的content容器。

/api/menu?langId={int} ─ 获取菜单树

返回给定语言的页面树（菜单）api/menu?langId=1。要返回仅可见的项目，请添加&onlyVisible=1。示例响应

{
  "default": {
    "id": 1,
    "name": "Menu",
    "alias": "default",
    "items": [
      {
        "id": 1,
        "index": 1,
        "nav_id": 1,
        "lang_id": 1,
        "is_hidden": true,
        "is_home": true,
        "title": "Startseite",
        "title_tag": null,
        "alias": "startseite",
        "path": "startseite",
        "description": null,
        "children": [],
        "has_children": false
      },
      {
        "id": 2,
        "index": 2,
        "nav_id": 2,
        "lang_id": 1,
        "is_hidden": false,
        "is_home": false,
        "title": "Lets Talk",
        "title_tag": "",
        "alias": "letstalk",
        "path": "letstalk",
        "description": "Genuss und Freude.",
        "children": [],
        "has_children": false
      },
      {
        "id": 3,
        "index": 4,
        "nav_id": 3,
        "lang_id": 1,
        "is_hidden": false,
        "is_home": false,
        "title": "About Me",
        "title_tag": null,
        "alias": "aboutme",
        "path": "aboutme",
        "description": null,
        "children": [],
        "has_children": false
      }
    ]
  },
  "footer": {
    "id": 2,
    "name": "Footer",
    "alias": "footer",
    "items": [
      {
        "id": 6,
        "index": 1,
        "nav_id": 6,
        "lang_id": 1,
        "is_hidden": false,
        "is_home": false,
        "title": "Datenschutz",
        "title_tag": null,
        "alias": "datenschutz",
        "path": "datenschutz",
        "description": null,
        "children": [],
        "has_children": false
      },
      {
        "id": 7,
        "index": 2,
        "nav_id": 7,
        "lang_id": 1,
        "is_hidden": false,
        "is_home": false,
        "title": "Impressum",
        "title_tag": null,
        "alias": "impressum",
        "path": "impressum",
        "description": null,
        "children": [],
        "has_children": false
      }
    ]
  }
}

内容

所有帮助您为给定页面构建内容的API，通常通过处理给定页面ID的块来实现。

/api/page?id={int|string} ─ 获取页面块

返回特定页面（导航项）的所有块占位符api/page?id=8。也可以提供页面别名（别名）api/page?id=home。响应包含一个包含page、placeholders、layout和properties的对象。

示例响应

{
   "page":{
      "id":1,
      "nav_id":1,
      "lang_id":1,
      "title":"Startseite",
      "alias":"startseite",
      "description":null,
      "keywords":null,
      "title_tag":null
   },
   "placeholders":{
      "content":[
         {
            "id":13,
            "index":0,
            "block_id":2,
            "block_name":"HtmlBlock",
            "full_block_name":"LuyaCmsFrontendBlocksHtmlBlock",
            "is_container":false,
            "values":{
               "html":"<h1 class=\"display-2 font-weight-light\">.......</h4>"
            },
            "cfgs":{
               "raw":null
            },
            "extras":[]
         },
      ]
   },
   "layout":{
      "id":1,
      "name":"Default"
   },
   "properties":{
      "VarName":null
   }
}
/api/page/nav?id={int}&langId={int} ─ 获取页面语言上下文块

返回与给定语言ID相对应的特定导航ID的所有块占位符。

/api/page/home?langId={int} ─ 获取主页页面块

返回给定语言的首页内容。

VUE

VUE中的概念示例

为给定元素创建一个组件，在这种情况下，我们使用Html块LuyaCmsFrontendBlocksHtmlBlock.vue

<template>
  <div v-html="block.values.html" />
</template>

<script>
export default {
  props: {
    block: Object
  }
}
</script>

创建一个加载页面并遍历组件的组件

<template>
  <div v-if="isLoaded">
      <h1>{{ this.title }}</h1>
      <component 
        v-for="item in contentPlaceholder" 
        :key="item.id" 
        :is="item.block_name" 
        :block="item"
      />
  </div>
</template>

<script>
import LuyaCmsFrontendBlocksHtmlBlock from '../../components/LuyaCmsFrontendBlocksHtmlBlock.vue'

export default {
  components: { LuyaCmsFrontendBlocksHtmlBlock },
  data: () => ({
    isLoaded: false,
    response: null
  }),
  computed: {
    contentPlaceholder () {
      return this.isLoaded ? this.response.placeholders.content : []
    }
  },
  async mounted () {
    const { data } = await this.$axios('page?id=' + this.$route.params.slug)
    this.response = data
    this.isLoaded = true
  }
}
</script>