# lowcode-platform

**Repository Path**: liu_zhi_xiong258/lowcode-platform

## Basic Information

- **Project Name**: lowcode-platform
- **Description**: 基于Vue2低代码平台搭建
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 5
- **Forks**: 1
- **Created**: 2022-08-06
- **Last Updated**: 2024-11-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 字节跳动青训营 - Row Your Boat - 12580

一个低代码平台的前端部分，靠拖拉拽生成页面。
## 功能点
这是本项目具有的功能点，如果想了解详情请参考本项目的三篇文档，每个功能点都有不同程度的描述以及动图帮助你理解。
1. 编辑器
1. 自定义组件（文本、图片、矩形、圆形、直线、星形、三角形、按钮、表格、组合）
1. 接口请求（通过接口请求组件数据）
1. 组件联动
1. 拖拽
1. 删除组件、调整图层层级
1. 放大缩小
1. 撤消、重做
1. 组件属性设置
1. 吸附
1. 预览、保存代码
1. 绑定事件
1. 绑定动画
1. 拖拽旋转
1. 复制粘贴剪切
1. 多个组件的组合和拆分
1. 锁定组件
1. 网格线

## 文档
* [可视化拖拽组件库一些技术要点原理分析](https://github.com/woai3c/Front-end-articles/issues/19)
* [可视化拖拽组件库一些技术要点原理分析（二）](https://github.com/woai3c/Front-end-articles/issues/20)
* [可视化拖拽组件库一些技术要点原理分析（三）](https://github.com/woai3c/Front-end-articles/issues/21)

## 开发
### 安装
```
npm i
```
### 运行
```
npm run dev
```
### 打包
```
npm run build
```

## License
**MIT**

## LZX

### 项目构思：

1. 通过自定义事件, 配合使用setTimeOut(fn: string)实现用户自定义函数的使用
1. 需要一个js编辑器以支撑自定义事件 + 生命周期钩子函数... 
2. 更改样式，使用更好的布局样式 - 改的完全看不出来
3. 配合ELementUI完善和支撑整个组件库 - 封装问题 ---- v-bind='对象' 对象是组件所需要的参数值 === 我们可以自定义配置ElementUI
4. 实现拖拽进去变成一个child树形组件 ?? 有能者就来
5. 搭建一个最小运行时的项目
6. 测试样例 + 性能型的设计

### 具体的规划如下：

1. 基于ElementUI的组件封装（我已对VAlert组件进行Demo开发），涉及改动文件（'@/custome-component/component-list.js', '@/custome-component/index.js', @/custome-component下新增VAlert目录（Component + Attr）=>详情见代码）

2. 实现用户自定义事件，也即用户可以自定义方法（不同触发方式['单击','双击','blur','focus',...]）的内容，我们负责配置Mixin和触发执行，可以通过setTimeOut(fnStr, 0)来执行，目的是避免Eslint出现eval函数报错，具体可以参考我对'@/components/Editor/ComponentWrapper.vue'、'@/components/EventList.vue'、'@/utils/events.js'进行的小变更

3. Mixin进生命周期钩子函数，需要在右侧进行生命周期钩子函数的配置，处理方式可以同2

4. 使用一个第三方JS编辑器，从而方便2和3中所述的用户自定义方法内容和生命周期钩子函数

5. 修改整体项目的样式，让其优雅美观，更重要的是，避免出现和别的项目使用同一个开源项目的状况
    - 重新找取iconfont图标文件，覆盖原有的图标

6. 实现拖拽元素进行组件层级嵌套（这个难度较大，优先级靠后）

7. 搭建一个最小运行时的项目，从而只要我们这边生成数据，在此项目中可以运行

8. 研究如何进行单元测试、功能性测试以及性能测试

### 代码细节说明：
1. There are some handle for last section - point 7
- 下载功能
```js
// 封装下载方法
const download = (fileName, blob) => {
    // 创建A标签
    const link = document.createElement('a')
    // 创建一个唯一的 URL，其形式为 blob:<origin>/<uuid>
    link.href = URL.createObjectURL(blob)
    link.download = fileName
    link.click()
    link.remove()
    // 从内部映射中删除引用，从而允许删除 Blob
    URL.revokeObjectURL(link.href)
}

// 首先转化对象为字符串
const data = {
    name: '赵二丫',
    age: 18,
    descript: '婷婷玉立',
    address: '河南省郑州市',
    iphone: '1234567788',
    worker: 'front-end',
    hobby: [{ name: '动漫' }, { name: '游戏' }],
}
const dataStr = JSON.stringify(data, null, 4)

// 指定文件名
let fileName = 'config.json'

// the blob
const blob = new Blob([dataStr], { type: 'application/json', endings: 'transparent' })

// 下载调起
download(fileName, blob)
```
- 读取JSON功能
```js
// 简单通过导入的方式读取json
import config from './config.json'

// 直接读取json文件
console.log(config)
```