我的低代码平台Marsview终于开源了

前沿

前段时间写了一篇Mars低代码的文章，反馈良好，但是开源的进度比较缓慢，主要涉及到服务器部署，环境搭建、域名解析、nginx配置、数据库安装等，所以让大家久等了。

为了让大家能够有一个好的体验，我特意搭建了一套在线服务，大家可以直接在线体验，账号密码已经默认放在了登录页面，无需输入，直接登录即可。目前服务器性能比较弱，所以会出现页面加载缓慢的情况，后续也会不断优化性能。

今天这篇文章将正式宣布低代码平台Marsview开源，并把服务器部署和代码核心功能做一下阐述。

名称来源

起初叫Mars，主要是因为对马斯克的崇拜，因为他的火箭未来要送人类去火星，所以，火星会是最终的归属，由此我起名叫Mars。近期抖音发布了代码助手MarsCode，名字也非常好听，此时我开始觉得我的低代码不应该叫Mars，因为它比较泛化，没有场景支撑，想到前端很多框架实际上就是基于视图的操作，于是改名叫：Marsview，未来你看到的系统中所有的名称，都将会是Marsview。

开源介绍

开源仓库

github.com/JackySoft/m…
希望喜欢的兄弟给个Star，不胜感激。

技术框架

Pnpm + React18 + Vite5 + Zustand4 + Antd5

后端API服务

mars-api.marsview.cc/api

在线服务

编辑器端：www.marsview.cc
用户端：admin.marsview.cc

账号密码

默认账号密码已放在了登录页面，所有人共用。如果想单独创建，请发邮件到sunnyboysoft@163.com申请，如果想要自定义密码，也请在邮箱提供密码给我，系统暂不支持个人注册。

代码贡献

代码体量还比较大，同时存在很多问题，感兴趣的兄弟们可以提PR成为Contributor。也欢迎大家加入微信技术交流群，一起沟通交流。

页面模板

为了指导大家快速使用，我给大家创建了几个页面模板，大家尽量别删除，别修改，可以先看看我是怎么配置事件流和交互的，如果有需要，可以直接复制一份出来做二次修改。

服务部署

我在百度云购买了一台服务器，三年大概2100块钱；又购买了域名；为了让上传服务更便捷，又购买了百度云存储；为了让资源加载更快，又购买了cdn，大家不要以为我有钱烧的慌，其实我也没钱，但是在自己喜欢的领域投入还是有必要的。

• 服务器配置：1核/2GB/100GB/计算型c3
• 百度云存储
• 百度云CDN
• 百度云域名服务

服务器购买完以后，就是做环境部署，比如：nginx安装、nodejs安装、mysql数据库安装，安装教程大家可以自行搜索，服务器部署的过程是比较复杂的，我本身对服务器也不是很熟悉，所以，我的语言组织不起来。

这套项目，我一共用了三个域名，前端两个，后端一个，所以我在域名配置里面增加了三个A解析。

Nginx服务如何配置多域名呢？

Nginx安装成功后，一般在/etc/nginx/目录，这个目录有一个默认的配置nginx.conf，我建议不要把服务全部配置在这个里面，当前我们有三个服务：www.marsview.cc/admin.marsv…

我们在/etc/nginx/目录创建一个文件夹：vhost，然后我们分别创建不同服务的配置即可，比如：

• 服务A：www.marsview.conf
• 服务B：admin.marsview.conf
• 服务C：mars-api.marsview.conf

然后我们再外面nginx.conf中去加载vhost下所有的配置即可：include /etc/nginx/vhost/*.conf;

这样做的好处是，干净、利索、容易维护，每个conf的配置都差不多，主要是针对服务定义、资源加载、接口代理等。

server {

  listen 80

  server_name www.marsview.cc

  root /workspace/mars/xxx

  index index.html index.htm login.html

  

  location / {

    root /workspace/mars/xxx

    try_files $uri $uri/ /index.html

  }

  location ^~/api {

    proxy_pass http://xxxxx:80

  }

  location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$

  {

    root /workspace/mars/xxx

  }

  


  location ~ .*.(js|html|css)?$

  {

    root /workspace/mars/xxx

    expires 30d

  }

}

所以，我觉得只要前期把nginx搭建好以后，后面没增加一个域名，新建一个配置就好，每个配置也都非常简单，并不需要很多的运维知识，上面有几个细节需要注意：

• try_files $uri $uri/ /index.html;这个是针对前端history来由做的。
• location ^~/api 这个是接口代理用的。
• server_name www.marsview.cc;这个就是用来定义服务跟前端域名匹配用的。

云存储

不用云存储也可以，图片、文件直接使用koa-body插件上传到服务器云磁盘，最终用服务器域名去访问，但是总觉得差点意思，所以干脆直接上云，百度云存储接入也比较简单，可以按需付费。

打开云存储，找到Bucket列表菜单，创建一个存储桶即可，这里可以直接上传图片也可以使用Node SDK上传，同时可以一键开启cdn服务。

功能介绍

• 登录
• 欢迎页面
• 项目列表
• 页面列表（可单独创建，通过微服务集成到自己项目中）
• 组件库
• 编辑器(工具条、组件列表、组件配置、画布)
• 发布记录
• 编辑器支持组件复制、删除、排序、父子容器切换
• 支持事件流开发
• 支持接口配置
• 支持权限控制（菜单权限、按钮权限、页面开发者权限、页面编辑权限、项目配置权限）
• 支持常规的报表业务开发
• 支持静态网页布局开发
• 支持业务：后台管理系统、PC静态网页

产品介绍

欢迎页面

登录页面

首页

编辑器

预览页面

发布历史页面

自定义组件

后台访问端

数据列表

重点功能介绍

组件显隐

这个功能在开发中，经常使用，比如：当下拉框选择值为2时，隐藏日期组件。

一、选中组件

二、点击右侧事件流

三、行为配置-选择组件显隐，显示类型选择表达式

四、配置表达式

注意试下：

• 对于行为配置，比如显隐、打开弹框、组件刷新之类的，如果在外面能找到就直接点击即可，如果找不到就在组件方法里面，去那里找就行了。
• 只要是文本框右侧有fx标记的，说明都可以使用表达式来动态编程。
• 表达式里面，大家可能会觉得是一个黑盒子，的确如此，因为，如何编译都是我自己控制的，大家只需要记住几个知识点就能摆脱黑盒，所有的数据都是挂载在context对象上的，比如：variable、表单值、逻辑函数等。
• 表达式里面，eventParams 是什么意思，就是事件参数，只要是涉及到传参的，在表达式里面一律使用 eventParams
• 表达式里面可以直接写三元运算符、函数、常量等，如果是一个常量，系统会当做return 处理，比如你写了一个100，系统最终会按照return 100处理。

计数器

定义两个按钮，一个按钮用来点击，另一个按钮用来显示值，每次点击加1.

一、定义一个变量。

二、给右侧按钮绑定变量

三、给左侧按钮添加事件流

注意，变量赋值有静态赋值和动态赋值两种，静态赋值指的是直接给一个变量设置一个静态值或者是通过变量动态计算一个值。 动态赋值指的是通过事件流上游传递过来的值（一般是接口返回的值）。

四、保存事件流

全部配置完成后，点击左侧按钮，就会发现右侧按钮值会跟随变化。

项目难点

• 权限控制：菜单按钮权限、项目开发权限、页面开发权限、编辑和只读权限、页面删除修改权限。
• 事件流：数据结构转换比较复杂
• 逻辑表达式：支持各种场景的编程运行，这块应该还有优化空间。
• 自定义组件库。代码编译比较复杂。
• 接口参数。参数有各种形式，比如模板参数，query参数等，需要做各种适配。

总结

时间有限，不能把所有的功能点罗列出来，对低代码感兴趣的兄弟，可以自行克隆代码，如果发现问题可以提PR，让我们一起推进低代码的发展。