介绍

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

结构图

工作原理

首先选择场景编辑器（表单、表格、区块等），场景编辑器渲染到页面；
通过特定场景编辑器选择物料（组件、区块），选择动作传到服务器端；
服务器端生成源代码，输出源代码到预览项目中；
预览项目通过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

功能介绍

操作界面

资产市场

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

// 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地址

https://github.com/sparrow-js/vue-market/tree/master/boxs

表单

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

选中表单编辑器；
将数据填入右侧配置区；
选择左侧组件；

预览图如下：

表格

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

区块

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

tabs

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

区块

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

预览地址

https://sparrow-js.github.io/sparrow-vue-site/guide/market/block.html

提示

区块来源于开源项目, 已标注来源，如开源项目原作者有任何问题可以联系：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-radiov-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>

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

sparrow-js·场景化低代码搭建-了解一下相关推荐

面向中后台复杂场景的低代码实践思路
简介:现实中,业务场景多,迭代频繁,变化快到跟不上,规则可能由多人掌握,无法通过一个人了解全貌: 还有业务所在行业固有的复杂度和历史包袱,这些问题都会让我们感到痛苦. 除了逻辑问题,我们还关注易用性交 ...
低代码搭建门店管理之收发货管理系统
随着电商的深入,不少门店都开始采用线上模式进行销售了,并且有的门店线上销售更是比线下销售更加火爆.因此,线上销售务必会涉及到收发货这个步骤.以前线上销售刚兴起的时候收发货只靠人工纸质化登记就能搞定,但 ...
Methodot低代码电影票房管理系统实战案例（二）：前端低代码搭建系统后台
本次系统后台实战将使用Methodot应用工厂中的前端低代码组件完成搭建,无需注册域名.购买云服务器.虚拟机等,可在Methodot云端一体化完成开发.交付.访问.运维,3s即可部署至线上免运维,在 ...
sparrow-js开源低代码场景化工作台，自动给你生成代码
介绍 sparrow-js 是场景化低代码(LowCode)搭建工作台,通过操作场景化编辑器生成源代码,侧重于支持日常业务需求开发的效率提示,核心目标仅有一条"提生研发效率",目前 ...
老板心血来潮要自己搞低代码平台？这个开源项目试一试！
大家好,我是TJ 一个励志推荐10000款开源项目与工具的程序员平日里大家编码的时候肯定想着如何能提高自己的工作效率,那么一种方法肯定是提高自身的编码水平,但是同时工欲善其事必先利其器,如果有一款好 ...
12个低代码开源项目（转载）
转载地址:https://mp.weixin.qq.com/s/2pTDHCQPtnta3I1njPN3iw 1.Appsmith Appsmith 是一款开源低代码框架,主要用于构建管理面板.内部工 ...
低代码发展专访系列之七：低代码的火爆需要不一样的声音么？
编辑 | 曹芊芊话题:低代码发展系列专访前言:2019年开始,低代码爆火.有人认为它是第四代编程语言,有人认为它是开发模式的颠覆,也有人认为是企业管理模式的变革--有很多声音,社区讨论很热烈.CS ...
牛散村:国内低代码平台有哪些？low code平台整理分享！
全栈平台阿里-云凤蝶蚂蚁杨周璇:我做前端这十多年来的感悟云凤蝶可视化搭建的推导与实现云凤蝶中台研发提效实践中台建站的智能化探索云凤蝶如何打造媲美 sketch 的自由画布云凤蝶自由画布之 ...
低代码可视化开发理念在物联网APP开发中的应用
目录引言 1 相关背景技术 1.1 低代码开发平台发展趋势 1.2 低代码开发平台的研究 2 云编排式APP开发平台 2.1 传统Native Code物联APP开发方式面临的问题 2.2 云编排式 ...

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

介绍

优势

目录结构

结构图

工作原理

快速上手

全局安装

项目内安装

项目内安装效果图

功能介绍

操作界面

资产市场

场景编辑器

编辑器目录

git地址

表单

表格

区块

tabs

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

区块

预览地址

提示

生成源代码示例：

主文件

Form文件

sparrow-js·场景化低代码搭建-了解一下相关推荐

最新文章

热门文章