大家好,我是爱撸代码的开源大叔!
什么是低代码?
在维基百科给出了这样的定义:
低代码开发平台(LCDP:Low-code development platform)A low-code development platform (LCDP) is software that provides an environment programmers use to create application software through graphical user interfaces and configuration instead of traditional computer programming.
从上面的定义可以看出,低代码平台是一种可视化的应用开发方法,用较少的代码、以较快的速度来交付应用程序,将程序员不想开发的代码做到自动化。
今天给大家推荐一个基于 vue 开发可视化商城搭建平台,支持生成H5、小程序多端商城项目 -- Mall-Cook。
功能简介
- 拖拽式生成页面
- 可生成 H5、小程序多端商城应用
- 生成商城支持屏幕适配
- 实时预览页面
- 包含多领域模板,可以手机预览模板
- 支持多种模块,魔方、倒计时、广告轮播、商品、新闻公告,搜锁功能等
- 自定义底部菜单
平台截图
自定义页面
支持多种页面元素:魔方、倒计时、商品、图片、公告、搜索、广告轮播等等。
商品物料
支持多种商品展示形式,顶部菜单和左侧菜单。各种样式、文本根据需求进行调整。
底部菜单
可配置 1 至 4 个导航,菜单图标和跳转页面都可以修改。
配置商品
自定义商品分组,目前支持两级分组。
配置商品
可以配置商品标题、商品封面、价格、商品详情等属性。
看下最终效果
项目使用
在 clone 项目源码之后先安装对应依赖,在对应工程目录里执行下载依赖
项目结构
代码语言:javascript复制mall-cook // 项目仓库 (必须下载依赖)
├─ packages
│ ├─ mall-cook-platform // 搭建平台 (必须下载依赖)
│ ├─ mall-cook-template // 渲染引擎 (必须下载依赖)
│ ├─ mall-cook-document // 文档 (如需使用需下载依赖)
│ ├─ mall-cook-service // 后端服务 (如需使用需下载依赖)
├─ scripts
└─ package.json
项目仓库安装依赖
代码语言:javascript复制npm install
单独项目安装依赖
代码语言:javascript复制cd 进对应项目目录
npm install
修改配置文件
packages/mall-cook-platform/src/config/global.js
代码语言:javascript复制export default {
baseApi: 'https://127.0.0.1:3000/node/', // 后端接口地址
viewUrl: 'http://127.0.0.1:9000/#/'// iframe嵌套的H5地址,本地开发可改为本地启动的H5地址
}
运行项目
代码语言:javascript复制npm run dev
node服务,启动之前要修改 mogodb 地址。
代码语言:javascript复制config = {
appid: 'xxx', // 小程序appId
secret: 'xxx', // 小程序secret
serviceApi: 'http://127.0.0.1:3000', // 服务器地址
mongodbUrl: 'mongodb://localhost:27017/mall-cook' // mongodb数据库地址 格式:mongodb://username:password@host:port/name
}
module.exports = config
总结
Mall-Cook 通过拖拽的方式,即可构建一个应用,能够实现业务应用的快速交付,能够降低业务应用的开发成本。