Как построить интерфейс конфигурации со сложными функциями (1)

внешний интерфейс JSON JavaScript Vue.js React.js Vuex

задний план

В настоящее время основным бизнесом многих компаний является конец C. Несмотря на то, что у них огромное количество пользователей и трафика, бизнес конца B незаменим, например, CRM, CMS, платформа управления конфигурацией операций, платформа визуализации данных и различные платформы утверждения. Эти системы имеют несколько общих черт: множество требований, быстрые изменения, страницы запросов, страницы списков и страницы отправки. И эти страницы похожи, с низкими требованиями к пользовательскому интерфейсу и простыми функциями. Так можем ли мы разработать конфигурационную платформу для повышения производительности? Ответ положительный. Нам нужно только настроить Json для генерации страницы, как этого добиться? Давайте потихоньку...

Технический отбор

Nodejs + Vue/React + схема Json

каркасное здание

Анализ: странице нужен только один контейнер, который можно понимать как Div. При загрузке страницы асинхронно перейдите в центр распределенной конфигурации (Redis или другой), чтобы получить конфигурацию страницы. Конфигурация страницы — это просто строка Json. После того, как данные конфигурации извлечены, мы начинаем анализировать Json, в том числе правильность и законность Json. Наконец, страница рендерится через метод Render компонента Vue, увидев это, у многих возникнут следующие сомнения:

  1. Как определяется формат Json?
  2. Как Json соответствует компонентам?
  3. Как визуализируются компоненты?
  4. Как взаимодействуют компоненты?
  5. Поддерживает ли он сложные логические взаимодействия?

Инновации и оптимизация фреймворка

  • Поддерживает вложенный рендеринг компонентов бесконечного уровня

  • Упрощение связи между компонентами

  • Предварительный просмотр конфигурации страницы

Вопрос ответ

1. Как определяется формат Json?

Для этого нет единого стандарта, он полностью основан на личных предпочтениях, позвольте мне показать вам мое определение:

{
 "uniqueId": "mt-form",
 "attrs": {
 "style": {
 "paddingBottom": "15px",
 "paddingLeft": "5px"
    }
  }
}

2. Json как и компоненты соответствуют? Смотрим на код пользовательского компонента Form.vue:

<template>
 <el-form :label-width="labelWidth" :inline="true" class="mt-form-inline">
    <slot></slot>
 </el-form>
</template>
<script>
export default {
 props: ['labelWidth']
}
</script>
<style>
</style>

Создайте новый модуль библиотеки компонентов ComponentsLib.js, и мы предоставим пользовательские компоненты через этот модуль:

/**
 * 引入所有公共组件库
 */
import Form from './Form.vue'

module.exports = {
 /**
   * 对外暴露组件，名称id必须唯一
   */
 'mt-form': Form
}

3. Как визуализируются компоненты

После написания компонента и представления компонента, как мы его визуализируем? Определите глобальный компонент через Vue.component:

import Vue from 'vue'
import ComponentsLib from './ComponentsLib' // 暴露出来的组件库

/**
 * 注入全局的页面容器组件
 * 所有组件必须包裹在一个容器组件中
 */
Vue.component('page-container', {
 render: function (createElement) {
 return this.deepComponents(this.pageConfig, createElement)
  },
 methods: {
 deepComponents (pageConfig, createElement) {
 if (pageConfig) {
 return createElement(ComponentsLib[pageConfig.uniqueId], {
 ...pageConfig.attrs
        }, this.deepChildren(pageConfig.children, createElement))
      }
    },
 /**
     * 递归遍历所有子组件
     * @param {} pageConfig
     * @param {*} createElement
     */
 deepChildren (pageConfig, createElement) {
 if (!pageConfig) {
 return createElement('span')
      }
 if (pageConfig) {
 let children = []
 for (let i = 0; i < pageConfig.length; i++) {
 let item = pageConfig[i]
 if (item) {
 children.push(createElement(ComponentsLib[item.uniqueId], {
 ...item.attrs }, this.deepChildren(item.children, createElement)))
          }
        }
 return children
      }
    }
  },
 props: {
 pageConfig: {
 type: Object,
 required: true
    }
  }
})

Видно, что суть в том, что мои компоненты выставлены через библиотеку компонентов, и каждый компонент имеет уникальный ID, и когда я настраиваю его в Json, uniqueId — это уникальный ID, соответствующий моему компоненту, так что через Vue .component Метод Render может рекурсивно проходить и визуализировать мои компоненты, так что могут быть достигнуты бесконечные уровни вложенности компонентов.

Предварительный просмотр эффекта



Категории