前端拖拽自动生成代码_我的前端布局自动化——开始,布局自动生成(一)

2023-10-27

在web前端工作的这些年,历经多次技术变革,不过依然只是一个追随大牛们的小白。

此时此刻,尤其加班时,最想做的就是干掉自己职业的东西,做一个可代替前端工作的工具。

由此开始了前端自动化探索。

这篇文章就是自己的旗子吧,先举起一面变革之旗,不论自己多么虾米,梦想还是要有的,不是被大牛们引领学新技术,就是变为大牛,让他们学。^_^

先上图:

b203cebe89c1936a926f7510465f96de.png

绝对定位生成flex布局

今天记录的主要内容为,如何把前端绝对定位布局产生的页面,变为一般flex布局。为什么有这个需求呢?我想让移动端的h5页面,全部像易企秀一样的可视化拖拽生成,但易企秀一类可视化拖拽生成的页面是绝对定位布局页面,不是我们正常开发的flex布局之类。

仔细分析两种布局,绝对定位布局是二维布局,flex布局是一维布局,结合自己平时的布局步骤,写了一个十字识别法,让绝对定位布局转flex布局。


github测试地址:https://github.com/utouchme/qiFeiyi

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端拖拽自动生成代码_我的前端布局自动化——开始,布局自动生成(一) 的相关文章

  • Vue实现验证码

    在Web应用程序中 为了避免机器自动化或恶意攻击 很常见的做法是要求用户在表单提交之前输入验证码 验证码最常见的形式是图片验证码 因为图片验证码最大程度地防止了自动化机器调用API来执行攻击 使人类用户输入不是人类难以识别的形式 比如文本和
  • 数据结构的常用八种排序算法

    概述 排序有内部排序和外部排序 内部排序是数据记录在内存中进行排序 而外部排序是因排序的数据很大 一次不能容纳全部的排序记录 在排序过程中需要访问外存 我们这里说说八大排序就是内部排序 当n较大 则应采用时间复杂度为O nlog2n 的排序
  • 活动安排问题-贪心算法

    在时间段内选择尽可能多的活动 0 14 include
  • python-10

    纯函数实现面向对象 人狗大战 游戏人狗大战 人 角色 属性 名称 等级 血量 攻击力 性别 职业 zhangsan name zhangsan level 1 hp 100 ad 20 sex 男 职业 魔法师 def person nam
  • QString和std::string相互转换

    QString和std string相互转换 使用下面的函数 toStdString gt 将QString转换成std string QString toStdString fromStdString gt 将std string转换成Q
  • Docker数据目录(/var/lib/docker)迁移

    本文介绍Linux上如何安全的迁移Docker的数据目录 var lib docker 为什么要迁移 虚拟机创建时 一般分配一个比较小的系统盘 然后挂载一个大容量的数据盘 docker默认情况下数据存储在系统盘 var lib docker
  • 捕获线程执行异常

    在 Thread 类中 可以获取线程运行时异常的 API 总共有四个 public void setUncaughtExceptionHandler UncaughtExceptionHandler eh 为某个特定线程指定 Uncaugh
  • hibernate注解

    现在EJB3实体Bean是纯粹的POJO 实际上表达了和Hibernate持久化实体对象同样的概念 他们的映射都通过JDK5 0注释来定义 EJB3规范中的XML描述语法至今还没有定下来 注释分为两个部分 分别是逻辑映射注释和物理映射注释
  • 目标检测一阶段和二阶段对比图

    图片来源
  • 『学Vue2+Vue3』认识Vue3

    认识Vue3 1 Vue2 选项式 API vs Vue3 组合式API 特点 代码量变少 分散式维护变成集中
  • Linux下安装jre

    Linux下安装Java运行环境 现需要项目部署到Linux中 需要配置java运行环境 注 以下测试环境系统为centOS 用户为超级管理员 jre8 1 下载最新版的jre 服务器环境下不需要配置jdk 下载地址如下 http www
  • microsoft visual c++ 6.0中文版两种使用方法

    microsoft visual c 6 0 是一款语言编程软件 那么很多人都不知道microsoft visual c 6 0中文版怎么使用 其实使用方法很简单哦 只要打开microsoft visual c 6 0中文版就可以进行语言编
  • 《数据结构》 图的创建与遍历 代码表示

    测试数据 10 15 共10个顶点 15条边 0 1 0 8 0 0 第一 二个数表示连接两个顶点的起始顶点 第三个数1表示单通行 0表示双向通行 4 8 1 5 4 0 5 9 1 0 6 0 7 3 1 8 3 1 2 5 0 2 1
  • c#排列组合算法

    Combinatorics cs代码清单 using System using System Collections using System Data
  • 二叉树所有节点转换成大于该节点的平均值,没有最大值就转换成0

    import java util ArrayList import java util List import java util function ToIntFunction import java util stream Collect
  • CUnit(单元测试框架)

    CUnit是一个用C语言编写 管理和运行单元测试的轻量级系统 它为C程序员提供了具有灵活多样用户界面的基本测试功能 CUnit是作为一个静态库构建的 它与用户的测试代码链接在一起 它使用一个简单的框架来构建测试结构 并为测试公共数据类型提供
  • Buildroot制作根文件系统过程(基于MYD-AM335X开发板)

    buildroot的功能很强大 可以利用它制作交叉编译工具链 根文件系统 甚至可以构建多种嵌入式平台的bootloader linux 下面以米尔科技的MYD AM335X平台为例展示如何利用buildroot制作自己所需的根文件系统 一
  • 柔性OLED拼接屏有哪些场景化应用?

    柔性OLED拼接屏是一种新型的显示技术 它采用了柔性OLED屏幕 可以实现多个屏幕的拼接 形成一个大屏幕显示 这种技术可以应用于各种场合 如商业展示 广告宣传 会议演示等 柔性OLED屏幕是一种新型的显示技术 它采用了柔性材料作为基底 可以
  • java基于ssm+vue的共享充电宝管理系统 elementui

    随着时代的发展 人们的生活越来越离不开手机 但是因为技术水平等原因的限制 手机的电池并没有人们想象中的那么耐用 很多时候人们在外出的时候 很可能会遇到手机没电的情况发生 作为日常通讯的必备工具 如果没电了 很可能会影响一些重要的事情 尤其是

随机推荐

  • 3D相机调研

    最近因为自己实验需要配置一个3D相机 安装在机械臂上实现eye in arm的自动化引导过程 调研结果记录如下 3D相机又称为深度相机 即通过该相机能检测出拍摄空间的景深距离 与普通相机 2D的最大区别 普通彩色相机 2D相机 拍摄到的图片
  • JS -- input输入框只能输入正整数

    摘自文章 input输入框只能输入正整数 半城烟沙的技术博客 51CTO博客 one
  • 最大比例

    X星球的某个大奖赛设了M级奖励 每个级别的奖金是一个正整数 并且 相邻的两个级别间的比例是个固定值 也就是说 所有级别的奖金数构成了一个等比数列 比如 16 24 36 54 其等比值为 3 2 现在 我们随机调查了一些获奖者的奖金数 请你
  • 面试题深入思考01-----Arrays.sort()与Collections.sort()

    面试题深入思考01 Arrays sort 与Collections sort 1 Collections sort Collections本质是关于集合的一种工具类 其中包含对集合的各种api 例如排序 反转 交换和复制等 其中sort方
  • word怎么恢复保存前的文件,word文件恢复

    我们在使用word编辑文档时偶尔会有误删除文档的经历 word要怎么恢复保存前的文件呢 本文为你提供了五种解决思路 你可以通过搜索word文档的备份文档 自动恢复文件 临时文件 回收站 第三方数据恢复软件找到文档 方法一 搜索 Word 备
  • katex

    Katex Accents Accent functions inside text Delimiters Delimiter Sizing Environments Letters and Unicode Other Letters Un
  • Android ----蓝牙架构

    蓝牙 1 fromwork 2 service 3 driver Bluetooth apk bluedroid 芯片厂家 fromwork到service直接调用 service到driver利用service调用 fromwork到dr
  • 【机器学习 - 4】:线性回归算法

    文章目录 线性回归 线性回归的理解 损失函数 简单线性回归 封装线性回归算法 线性回归算法 在sklearn中调用线性回归算法 向量化运算 线性回归模型中的误差 均方误差 MSE 均方根误差 平均绝对误差 调用sklearn中的均方根误差和
  • 位置式和增量式PID控制

    PID控制是一个二阶线性控制器 定义 通过调整比例 积分和微分三项参数 使得大多数的工业控制系统获得良好的闭环控制性能 优点 a 技术成熟 b 易被人们熟悉和掌握 c 不需要建立数学模型 d 控制效果好 e 鲁棒性 通常依据控制器输出与执行
  • 测试管理之测试过程

    测试过程 以此文来阐述自己对于测试过程的认识 目录 文章目录 目录 过程分类 测试过程主要分为测试前 测试中 测试完成 发布后 测试前 测试前注意事项 需求评审 参与评审 了解需求背景 需求详情以及需求价值 初步评估需求覆盖面 需求测试工作
  • CSS背景:背景色/背景图像/背景重复/背景附着/简写背景属性(一文搞懂)

    目录 CSS背景 CSS 背景色 实例 其他元素 实例 不透明度 透明度 实例 使用 RGBA 的透明度 实例 CSS 背景图像 实例 实例 实例 CSS 背景重复 实例 实例 CSS background repeat no repeat
  • 程序员版孔乙己

    互联网的格局 是和别处不同的 都是格子衫 稀疏的头发 双肩包 男 写代码的人 傍午傍晚散了工 每每三两人 背着手 沿着软件园溜达一圈 倘肯花点钱 便还会走到星巴克 买一杯咖啡 那样便能再多摸几分钟的鱼 我从十九岁起 便在软件园的星巴克打工
  • Vim 键盘贴纸(打印用)

    Vim是一个类似于Vi的著名的功能强大 高度可定制的文本编辑器 在Vi的基础上改进和增加了很多特性 vim学习过程中需要记住好多键位的使用 下面分享一下vim键位图 打印后贴在键盘上 原版下载地址 密码 ultv 注 作者纯手工打造 难免有
  • 数据相关知识点(数据资产、业务底座、业务中台、企业数仓、即席查询)

    业务底座 企业数仓所提供的支撑能力 业务中台 企业在经营过程中积累起来的 具有一定规模的且能够快速适应变化 能够支撑器企业数字化转型升级的能力 企业数仓 又名企业数据仓库 是一个面向主题的 集成的 非易失的且随时间变化的数据集合 用来支持管
  • 微信小程序自定义弹窗实现详解(可通用)

    本文为自定义弹窗 该内容可满足如下需求 自定义各种布局弹窗 点击弹窗布局外消失弹窗 弹出弹窗时背景阴影半透明 各方向弹出效果 本文为自下而上弹出 wxml 文件中 直接放到wxml的最底部就行了 十分简练
  • Unity之实现拖拽UI功能

    一 unity 图片切割 先把图片导入到Unity中 选中图片你会看到上边的Inspector界面 然后 选择Texture Type类型为Advanced 将Read Write Enabled选上 然后Sprite Mode选择Mult
  • [ Matlab ] 遗传算法求最短路径

    打包下载源代码 实例描述 配送中心数为 1 客户数 k 为 8 车辆总数 m 为 2 车辆载重皆为 8 吨 各客户点需求为 g i 1 2 8 单位为吨 已知客户点与配送中心的距离如表 1 其中 0 表示中心仓库 要求合理安排车辆的运输路线
  • 服务计算——web 技术 - 处理 Request 与 Response

    基于Negroni框架的cloudgo应用 本次实验是基于Negroni框架的应用 我设计了一个简单的四则运算应用 这个应用设计主要分为两部分 中间件设计 以及 main函数的设计 接下来就分别对这两个部分进行介绍 中间件设计 printF
  • VS2017配置Qt开发环境

    VS2017配置Qt开发环境 安装Qt5 12 11 安装Qt插件 在VS2017中进行设置 参考教程 安装Qt5 12 11 安装Qt插件 在VS2017中进行设置 参考教程 Qt下载地址 https download qt io Qt安
  • 前端拖拽自动生成代码_我的前端布局自动化——开始,布局自动生成(一)

    在web前端工作的这些年 历经多次技术变革 不过依然只是一个追随大牛们的小白 此时此刻 尤其加班时 最想做的就是干掉自己职业的东西 做一个可代替前端工作的工具 由此开始了前端自动化探索 这篇文章就是自己的旗子吧 先举起一面变革之旗 不论自己