# 介绍

## 概述

vjdesign 是一个 vue 界面及功能的可视化构建工具，通过图形界面搭建前端业务

## 开发动机

调研了一些的可视化界面设计工具后发现存在以下几点问题

一方面是支持的组件都是设计器本身自带的或者是基于某种组件库开发的，样式和功能都是固定的，可设置的属性也是设计器支持范围内的，如果想扩展更多支持组件和属性则需要二次开发

另一方面是一般设计器通常对数据的操作仅限于输入交互，而界面逻辑仅仅只支持类似根据条件是否显示组件这种简单联动，如果有组件属性也跟数据有复杂的关联的需求则无法实现

> 例如：A 组件选择一个记录，B 组件根据选择的记录变换颜色和样式。

一般可视化设计器都是注重界面的编辑，但当需要从服务端获取数据之后需要对数据进行转换再使用或是提交请求时数据有逻辑上的处理时，可能还是需要额外编程序实现

由于暂时找不到能满足复杂表单定制化需求的设计器方案，因此从头开发一套功能更加强大的设计器

## 特性及目标

- 支持任何 html 元素和项目中引用的组件并且支持组件的任何属性

通过配置可定义设计器支持的组件和组件属性，设计器对组件的支持没有限制，理论上任何 html 元素和当前 vue 项目中引用的组件都可以支持

- 提供数据源支持远程数据获取与提交行为

设计器支持设置数据源来实现从远程数据的读取与提交

设计器基于 vjform 开发，除了自带的 http 请求数据源类型也可增加新的数据源类型，同时设计器也支持通过配置来扩展数据源的设置

- 支持设置数据复杂的联动行为

通过设置监听来实现表单响应数据变化触发操作，可定义操作行为

- 可设置数据和组件属性的关联

通过转换表达式实现将数据关联到组件的属性上，在数据发生变化后组件的属性也会发生变化，支持获取数据属性的表达式和 javascript 语法

也提供常用功能函数，实现数学、数组、逻辑运算等功能

数据源和监听的属性也支持转换表达式

## 适用对象

### 对于开发人员

组件提供可扩展机制，对于开发人员可以对组件进行二次开发，增加新的功能

可扩展的功能包括:

- **设计器**

组件在设计器上的呈现形式

- **属性编辑器**

组件属性的编辑形式

### 对于不懂编程的人

对于一般用户，如果了解对象的属性相关概念，例如：知道 `model.text` 表示 model 对象里的 text 属性值，了解 excel 里的公式函数，例如：SUM(cell1, cell2) 是两个单元格值相加，则基本可以使用设计器定制出业务系统界面逻辑