sparrow-js·场景化低代码搭建-了解一下-介绍

sparrow-js·场景化低代码搭建-了解一下-介绍

技术杂谈小彩虹2021-08-21 23:29:26870A+A-

介绍

sparrow-js 是场景化低代码(LowCode)搭建工作台,通过操作场景化编辑器生成源代码,侧重于支持日常业务需求开发的效率提升,核心目标仅有一条“提生研发效率”,目前提供基于vue、element-ui组件库中后台项目的方案。主要具备以下功能:

  • 低代码开发, 快速生成可读性强、vue element-ui组件库的源代码。
  • 可视化开发, 通过GUI生成页面代码源文件。
  • 资产市场, 代码资源共享,包含组件、区块、场景搭建编辑器。

优势

  • sprarrow 的核心目标是“提效”,因此功能上不只是单纯UI的可视化搭建,目前提供函数级别的搭建,提供拥有业务逻辑的代码组装,生成可二次开发的源代码;
  • 易于扩展,通过AST读取组件源代码,进行组合,只要页面的逻辑是可拆解的就可以任意组装;
  • 可与项目结合,技术上采用本地运行server服务,可以与项目深度结合,实现更多提效手段,更大可操作空间;

目录结构

.
├── README.md ├── sparrow // sparrow 核心功能,包括可视化搭建、生成源代码服务 │ ├── package.json │ └── packages ├── sparrow-vue-develop // 项目内安装界面 │ ├── babel.config.js │ ├── package.json │ ├── public │ ├── src │ └── vue.config.js ├── sparrow-vue-site // 文档站点 │ ├── deploy.sh │ ├── docs │ └── package.json └── vue-market // 资产市场  ├── blocks  ├── boxs  └── components 

结构图

工作原理

  1. 首先选择场景编辑器(表单、表格、区块等),场景编辑器渲染到页面;
  2. 通过特定场景编辑器选择物料(组件、区块),选择动作传到服务器端;
  3. 服务器端生成源代码,输出源代码到预览项目中;
  4. 预览项目通过webpack热更新实时展示效果;

快速上手

全局安装

# 全局安装
$ npm install -g sparrow-code  # 运行 $ sparrow 

项目内安装

# 项目内安装
$ npm install sparrow-code -D  # package.json 增加 sparrow "scripts": {  "sparrow": "sparrow start -m page" }  # 项目内安装GUI组件 $ npm install @sparrow-vue/develop-ui -S  # 项目内引用App.vue <template>  <div id="app">  <router-view />  <sparrow />  </div> </template>  <script> import Sparrow from '@sparrow-vue/develop-ui'  export default {  components: {  Sparrow  },  name: 'App' } </script>   

项目内安装效果图

项目使用:vue-admin-template

功能介绍

操作界面

git 地址

git开源代码,核心功能地址

资产市场

资产市场负责生产组件、区块、模版、场景编辑器等原材料,供开发者使用;

// vue-market 目录结构
. ├── README.md ├── blocks // 区块 │ ├── BasicException │ ├── BasicForm │ ├── BasicTable │ ├── block.json │ ├── package.json │ ├── script │ ├── src │ └── table.json ├── boxs // 场景编辑器 │ ├── build │ ├── examples │ ├── package.json │ ├── src │ └── tsconfig.json └── components  └── README.md 

资产市场git地址

场景编辑器

场景编辑器负责粘合资产,通过使用相应的场景编辑器可以可视化搭建出各种业务需求页面。

编辑器目录

├── components
│ ├── ArrayListBox │ ├── BoxForm │ ├── ComponentBox │ ├── ConfigBox │ ├── ContainerBox │ ├── CustomInline │ ├── InlineToolbar │ ├── LabelBox │ ├── LogicBox │ ├── TableBox │ ├── TableCellBox │ ├── TableHeaderBox │ ├── TabsBox │ ├── block │ ├── box │ ├── layout │ ├── paragraph │ └── toolbar ├── index.js 

编辑器git地址

github.com/sparrow-js/…

表单

表单编辑器提供表单组件的搭建,组件配置,表单内容器组装功能;

  1. 选中表单编辑器;
  2. 将数据填入右侧配置区;
  3. 选择左侧组件;

预览图如下:

表格

表格提供初始化、删除、编辑、链接,弹窗等功能

区块

选择需要的区块代码片段插入到页面中,实时预览效果

tabs

其他场景编辑器感兴趣可自行体验...

区块

区块定位是可复用的代码片段,项目中可自由更改,是参照原子设计理论对页面进行的分级的其中一层,有很多优秀的开源项目根据原子设计理论沉淀的物料可供参考。

预览地址

sparrow-js.github.io/sparrow-vue…

提示

区块来源于开源项目, 已标注来源,如开源项目原作者有任何问题可以联系:sparrowwht7@gmail.com

生成源代码示例:

下面是通过sparrow生成的源代码,代码质量可以持续提升

主文件

<template>
 <div class="home">  <div class="block-list">  <div style="margin-bottom: 20px;">  <el-tabs v-model="activeName" @tab-click="handleClick">  <el-tab-pane label="用户管理" name="first">  <div>  <div class="block-list">  <Form12 />  </div>  </div>  </el-tab-pane>   <el-tab-pane label="配置管理" name="second">  <div>  <div class="block-list">  <Table />  </div>  </div>  </el-tab-pane>  </el-tabs>  </div>  </div>   <div class="block-list">  <paragraph  :type="'Container'"  :emit="'client.component.show'"  :params="{ uuid: 'ec6bd3bf' }"  />  </div>  </div> </template>  <script> import Table from "./components/Table"; import Form12 from "./components/Form12"; import generatorMixin from "../mixins/generatorMixin"; export default {  data() {  return {  activeName: "first"  };  },   methods: {  handleClick(tab, event) {  console.log(tab, event);  }  },  components: {  Form12,  Table  },  mixins: [generatorMixin] }; </script>  

Form文件

<template>
 <div class="root">  <el-form label-width="100px">  <el-form-item label="文本框">  <el-input placeholder="" v-model="form.name" />  </el-form-item>   <el-form-item label="文本框">  <el-autocomplete  :fetch-suggestions="querySearch21b542b3"  @select="handleSelect21b542b3"  placeholder="请输入"  v-model="form.region"  />  </el-form-item>   <el-form-item label="单选框">  <el-radio-group v-model="form.date1">  <el-radio  v-for="item in radionboxOptionsb542b38a"  :key="item.value"  :label="item.label"  />  </el-radio-group>  </el-form-item>  </el-form>  </div> </template>  <script> export default {  methods: {  querySearch21b542b3(queryString, cb) {  var restaurants = this.restaurants;  var results = queryString  ? restaurants.filter(this.createFilter(queryString))  : restaurants; // 调用 callback 返回建议列表的数据   cb(results);  },   createFilter(queryString) {  return restaurant => {  return (  restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===  0  );  };  },   handleSelect21b542b3(item) {  console.log(item);  }  },   data() {  return {  form: {  name: "",  region: "",  date1: "",  date2: "",  delivery: false,  type: [],  resource: "",  desc: ""  },  restaurants: [  {  value: "三全鲜食(北新泾店)",  address: "长宁区新渔路144号"  },  {  value: "Hot honey 首尔炸鸡(仙霞路)",  address: "上海市长宁区淞虹路661号"  },  {  value: "新旺角茶餐厅",  address: "上海市普陀区真北路988号创邑金沙谷6号楼113"  }  ],  state1: "",  radionboxOptionsb542b38a: [  {  value: "单选框1",  label: "单选框1"  },  {  value: "单选框2",  label: "单选框2"  },  {  value: "单选框3",  label: "单选框3"  }  ]  };  } }; </script> 

新功能持续新增中,感兴趣可以关注github.com/sparrow-js/…

本文使用 mdnice 排版

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示 | 支付宝红包
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1
本网站由 提供CDN/云存储服务

联系我们