подскажите пожалуйста... я щас умру Дано: Внутренняя CMS - в которой контент менеджеры могут...
подскажите пожалуйста... я щас умру
Дано:
Внутренняя CMS - в которой контент менеджеры могут добавлять или удалять определенные компоненты, менять контент и тд.
Моя задача - отрендерить их на странице
Точка входа:
component.name)"
v-for="(component, index) in page?.components"
:key="index"
:data="component.data"
:children="component?.children"
/>
и например в данном случае, component.name = about-heading, и возвращает мне (рендерит) - компонент AboutHeading.vue
И тут начинается проблема - до этого было написано грубо говоря
AboutHeading.vue
ведь структура JSON'a:
components: [
{
children: [...] //может быть null, [], или массив с {name, data, children}
data: {title: ...} //может быть разное
name: 'about-heading'
}
]
и я не понимаю как мне нужно тут его отрендерить? Рекурсивно, или точно не через children[0].children - я просто запутался
как подойти вообще к решению?
По началу я думал добавлять через CMS по 1 вещи (просто компонент, потом титул, потом еще и описание и тд) - и проверять ломатеся или нет
ЧатГПТ - подсказал - максимально заполнить всю структуру, чтобы увидеть полностью всё дерево JSON
и оно у меня есть но я все равно не могу понять как дальше действовать
Ответы6
а как иначе? у вас если есть связанные компоненты то нельзя использовать дочерние без родителя
❤🔥1
да, рекурсивно
Рекурсивно можно, я сильно не углублялся, но начал бы с того, чтобы сделать компонент который принимает json и внутри себя сам рендерит все и самого себя в том числе, вся рекурсия автоматически сядет
Кароче - с горем пополам написал рекурсивный компонент - и всё работает как швейцарские часы! 😮💨
Но вот какой вопрос у меня возник, хочу чтобы пояснили верно ли я понимаю
Дано: Самописная CMS система (где контент менеджеры могут выбирать компоненты для страницы, менять их контент и прочее), и фронт (где эти компоненты должны отображаться)
Пример данных который к нам приходит:
{
"components": [
{
"children": [
{
"children": [
{
"children": null,
"data": {
"title": "Product card",
"src": "http://..."
},
"name": "components/product-card"
}
],
"data": {
"title": "Products"
},
"name": "components/products-section"
},
{
"children": null,
"data": {
"title": "The End"
},
"name": "components/footer"
}
],
"data": {
"title": "About Us"
},
"name": "components/about"
}
]
}
Для него я написал такой интерфейс, и вроде как он подходит пока идеально:
export interface CmsNode {
data: T
children: CmsNode[] | null
name?: string
}
Но меня смущает, что в задаче сказано - чтобы там можно было рендерить ЛЮБЫЕ компоненты и сейчас я заметил, что например я могу выбрать как
ProductsSection
ProductCard
так и
ProductCard
ProductCard
CMS - позволяет так делать. Я думаю это не верное архитектурное решение что такое возможно, нужно было сделать чтобы на топ уровне только ProductsSection можно было создать, а уже внутри него только ProductCard (так как там в форме грида стили, то есть стили зависят от родителя). Должна быть жосткая иерархия на стороне CSM (которой нету) - чтобы фронт работал как часы и не ломался.
Верно ли я понимаю?
Чтобы я мог объяснить завтра как контент менеджерам так и другим что должно быть именно так? (я вспомнил пример за Flutter фреймворк где по сути так же реализовано). Возможно они хотят чтобы было как WordPress - где ты через UI - можешь переставлять блоки, и прочее - но я пока так не умею и в соло я такое не вывезу
бамп
ну вот я так же думаю)
Просто иначе (Как сейчас сделано) - дочерние компоненты МОЖНО использовать без родителя - но эта CMS - отдельная репо, в которую как я понял никто не залазил, там вроде как TypeORM с которым я не знаком - ну кароче это отдельный вопрос разбираться там и рефакторить и тд
но спасибо, буду пушить этот тейк