lecen：一个更好的开源可视化系统搭建项目--数据(_data)、类名(_class)--全低代码|所见即所得|利用可视化设计器构建你的应用系统-做一个懂你的人
利用可视化设计器构建你的应用系统-做一个懂你的人
_data 属性
我们在为组件做数据绑定的时候使用 _data，如 el-table 组件绑定数据的属性就是默认为这个字段，因此我们的一些自定义组件或者其他的数据绑定都统一定为 _data。
一般类似于列表或者是通过 v-for 这种形式渲染的组件，都可以为其指定一个数组，然后循环遍历进行渲染
我们通过几个常用组件的示例，来介绍一下关于 _data 属性，也就是数据属性的使用方法
在页面设计器中，只要具有 data 属性的组件，都有两种方式进行数据的指定，一种是通过绑定接口的返回值来填充数据，另一种是手动指定数据
1. 表格组件 lc-table
假设现在要做一个歌单的列表
先拖入一个表格组件，然后给它设置几个列
有歌曲名称、歌手、时长、热度这四列，目前还是一个空列表，没有歌单的数据，这四列的值分别绑定到 title、singer、time、hot 字段上面，关于如何绑定可详见 动态绑定
新建一个请求链接，并在当前页面中添加这个请求链接，该请求链接返回的数据被绑定在 songList 字段上面
点击表格属性面板的填充数据选项，列出了当前可以绑定的数据字段
请求链接返回的数据格式如下：
{data:[{title:'研文真习性',singer:'宋伟',time:'05:32',hot:190},{title:'非是象',singer:'蔡军',time:'04:26',hot:844},{title:'近铁民家装还',singer:'易洋',time:'04:36',hot:783},{title:'界常',singer:'范秀兰',time:'03:04',hot:704},{title:'更白火',singer:'董桂英',time:'03:59',hot:911},{title:'具成',singer:'冯敏',time:'02:32',hot:428},{title:'存道根效长接',singer:'余伟',time:'03:29',hot:934},{title:'会据一光住',singer:'贺秀英',time:'02:12',hot:668},{title:'解保少情打强群',singer:'陈敏',time:'03:42',hot:549},{title:'际口名线所志论',singer:'谭娜',time:'03:50',hot:635}]}其中 data 字段的值就会绑定到 songList 上面，我们选中这个数据字段，列表就会自动渲染出来
2. 虚拟列表组件 lc-list
在页面设计器中拖入一个列表组件，然后在列表组件中再放入一个卡片组件
这次我们通过手动指定数据的方式来对列表进行数据绑定，数据格式如下：
[{name:"苹果",description:"苹果，学名Malus pumila Mill.，别称西洋苹果、柰，属于蔷薇科苹果属的植物 [1-2]。苹果是全球最广泛种植和销售的水果之一，具有悠久的栽培历史和广泛的分布范围。苹果的原始种群主要起源于中亚的天山山脉附近，尤其是现代哈萨克斯坦的阿拉木图地区，提供了所有现代苹果品种的基因库。苹果通过早期的贸易路线，如丝绸之路，从中亚向外扩散到全球各地。"},{name:"香蕉",description:"香蕉（Musa acuminata '(AAA)'），英文名(banana)芭蕉科芭蕉属多年生草本植物，植株丛生，有匐匍茎；假茎浓绿有黑色斑点；叶片长圆形，上面为深绿色，无白粉，下面浅绿色；花朵为乳白色或淡紫色；果实呈弯曲的弓状，有棱，果皮为青绿色，成熟后变黄；果肉松软，黄白色，味甜香味浓，无种子。"},{name:"葡萄",description:"葡萄（学名：Vitis vinifera L.）是葡萄科葡萄属高大缠绕藤本，幼茎秃净或略被绵毛；叶片为纸质，圆卵形或圆形；花序大而长；萼很小，为黄绿色的杯状；花柱很短，为圆锥形；浆果为卵圆形至卵状长圆形，成熟时为紫黑色或红而带青色。 [7]花期4-5月，果期8-9月。 [1]李时珍在《本草纲目》中说：葡萄，《汉书》作蒲桃，可以造酒，人哺饮之，则陶然而醉，故有是名。"},{name:"西瓜",description:"西瓜（学名：Citrullus lanatus (Thunb.) Matsum. et Nakai），为葫芦科西瓜属 [2]一年生蔓生藤本植物 [3]，又名寒瓜、水瓜、西瓜皮等 [1]。茎、枝粗壮，被白色或淡黄褐色长柔毛。叶片纸质，轮廓三角状卵形，带白绿色。雌雄同株，雌、雄花均单生于叶腋。果实大型，近于球形或椭圆形，果皮光滑，色泽及纹饰各式。种子多数，卵形，黑色、红色，有时为白色、黄色、淡绿色或有斑纹。花果期夏季。 [3]在中国，西瓜因从西域（中国新疆和中亚一带）地区传入，因而得名西瓜，即来自西方的瓜。"}]然后我们将卡片的标题绑定到 name 字段，卡片的内容绑定到 description 字段
这时卡片就会通过列表进行渲染
同样，还有很多可以使用列表的组件，比如下拉框选项、单选按钮选项、多选按钮选项、折叠面板等等
通过将父组件中放入一个列表，然后再在列表中放入需要循环渲染的组件，这样就能够组合出各种各样的列表展示
列表组件中也可以放入多个组件进行组合式的循环渲染
3. 树组件 lc-tree
除了列表形式的组件可以绑定 data 属性字段，树组件也可以绑定 _data 字段
拖入一个树组件放入到页面中，然后我们绑定如下的数据：
[{id:1,label:"一级1",children:[{id:2,label:"二级1-1"},{id:3,label:"二级1-2"}]},{id:4,label:"一级2",children:[{id:5,label:"二级2-1",children:[{id:6,label:"三级2-1-1"}]},{id:7,label:"二级2-2"}]}]这样就渲染出了树结构
_class 属性
项目中预置了大多数常见的单属性，我们可以通过简写的形式去使用，要想类名生效一定要遵守约定。
举几个例子来说明一下：
- 设置display: none；可以通过d-n。
- 设置color: red；可以通过c-red。
- 设置position: relative；可以通过p-r。
- 设置padding-top: 5px；可以通过pt-5。
- 设置margin-top: -10px；可以通过mt–10；
- 设置cursor: pointer；可以通过c-p；
- 设置width: 50%；可以通过w_50。
类名的设定只要遵循以下几个原则：
- key中没有短横线，则直接取首字母，key中有短横线，则取短横线分割之后的每个首字母。
- value中没有短横线，直接取首字母，value中有短横线，则取短横线分割之后的每个首字母。
- 将上面取到的两部分用短横线拼接起来，这样就构成了简写类名。
- 如果属性是颜色，那么短横线后面就直接拼接去掉#的颜色值，或者完整英文。
- 如果属性是宽高等数值类型，那么默单位为px，短横线后面直接拼接数值即可，如果是负值那么就用两个短横线连接，如果是百分比值那么就用下划线连接。如果是其他单位，那么需要在最后面明确指定。
- 对于有冲突的属性，比如min-width和max-width简写都是mw，那么就需要前缀全拼，即minw-50或maxw-50。
上面这些约定是一个基本约定，但是也有一些特殊的属性具有特定的写法，具体内容可以浏览下面的示例部分
类名格式
与将自定义类名绑定给组件，一个类名绑定多个属性对不同，我们这里是使用的单元类名的方式，也就是说你写的每一个类名都对应了一个单独属性对。
代码会根据类名自动生成相应的样式属性，不是穷举法预置的，也就是页面只会生成需要的样式，不会生成多余的样式，重用的样式只会生成一次，能达到复用的目的，这些对于使用者来说是无感的。
使用者只需要按照格式来命名类名即可。
我们秉持缩写的原则，即属性名的首字母缩写，然后再加上对应的值的首字母缩写，把他们用横线连接起来。
举几个例子：示例是表示它们可能的用法，各种用法之间可以自由组合。宽度width
宽度有几种指定方式：固定值、百分比值、全局值等。
其中w是width的缩写，vw表示用视口宽度。w-50: 表示宽度为50px，等同于width: 50px;。w_50: 表示宽度为50%，等同于width: 50%;，百分比的值使用下划线。vw_50: 表示宽度为视口的50%，等同于width: 50vw;。minw-50: 表示最小宽度为50px，等同于min-width: 50px;，由于min和max首字母都是m，并且他们都起到形容修饰的作用，因此对这种直接写全，同理最小高度就是minh。外边距margin
外边距也有几种指定方式：固定值、百分比值、全局值等。
其中m是margin的缩写，ml是margin-left的缩写，mx是margin-left和margin-right的缩写，x表示水平方向，同样my表示的是上下外边距。m-10: 表示外边距10px，等同于margin: 10px;。ml-10: 表示左外边距为10px，等同于margin-left: 10px;。mt--10: 表示上外边距为-10px，等同于margin-top: -10px;。mx-10: 表示左右外边距为10px，等同于margin-left: 10px;margin-right: 10px;。定位position
其中p是positon的缩写，r是属性值relative的缩写。p-r: 表示相对定位，等同于positon: relative;。p-a: 表示绝对定位，等同于positon: absolute;。显示类型display
其中d是display的缩写，b是属性值block的缩写。d-i: 表示行内，等同于display: inline;。d-ib: 表示行内块，等同于display: inline-block;。d-n: 表示隐藏，等同于display: none;。d-f: 表示弹性布局，等同于display: flex;。鼠标形状cursor
其中c是cursor的缩写。c-p: 表示手形状，等同于cursor: pointer;。c-na: 表示不允许操作，等同于cursor: not-allowed;。颜色color
其中c是color的缩写，不用担心跟鼠标形状cursor会冲突，因为它们的值格式不同。c-red: 表示红色，等同于color: red;，可以直接指定颜色单词。c-ff0000: 表示红色，等同于color: #ff0000;，也可是指定rgb形式的颜色值。背景色background-color
其中bgc是background-color的缩写，这里没用bc的原因是因为我们熟悉背景的英文缩写就是bg，因此这里沿用下来，也让人容易理解，而且也是为了避免与border-color相冲突。bgc-123456: 表示背景色为#123456，等同于background-color: #123465;。字体大小font-size
其中fs是font-size的缩写。fs-18: 表示字体大小为18px，等同于font-size: 18px;。边框border
其中b是border的缩写，后面的值分为三个，第一个表示边框宽度，第二个表示线的类型，第三个表示线的颜色，颜色可以是英文单词或者十六进制或者rgb等。b-n: 表示不显示边框，等同于border: none;。b-1-solid-red: 表示1px的红色实线边框，等同于border: 1px solid red;。b-1-solid-ff0000: 表示1px的红色实线边框，等同于border: 1px solid #ff0000;。对齐方式text-align
其中ta是text-align的缩写。ta-c: 表示居中对齐，等同于text-align: center;。
等等等等，其他的类名也都遵守上面的格式。不再一一列举。
【项目体验】
系统管理端地址 ：http://www.lecen.top/manage
系统用户端地址 ：http://www.liudaxianer.com/user
系统文档地址 ：http://www.lnsstyp.com/web
