从零实现低代码平台(三) -- 服务器开发、部署

OJAccepted
1,431 阅读5分钟

本文正在参与技术专题征文Node.js进阶之路，点击查看详情

概要

我的本系列第一篇文章 表单配置 实现了在低代码平台上配置简单表单(目前支持文本输入、文本域、数字输入、日期输入、下拉选择组件)，并提供了把数据传输到指定接口的能力

我的本系列第二篇文章列表页配置及预览 实现了在低代码平台配置列表页的能力，可以调用指定接口把数据拉取到前端并展示

本文作为系列的第三篇文章，理所当然要实现数据的落库和查找功能，从而把前面的功能串联起来。本文会从两个方面来讲述如何实现一个服务器，提供数据落库和数据查找能力。

在我的设计中，每个使用低代码平台实现的业务都需要后端对应实现接口，建对应的业务数据表实现落地。为每个业务单独开发接口和数据表的目的是提供更高的逻辑自由度，并且优化数据库性能时可以有更强的针对性 image.png

服务器开发

服务器源码地址

服务器框架选型

我是一个前端，那么后端的语言很容易就确定使用nodejs了。nodejs的服务器框架的选项很多，一番调研后我决定在egg和nest中选一个

  • egg与express koa一脉相承，支持es6和es7的新语法，具有丰富的中文文档
  • nest

最后决定使用egg，因为nest涉及注解，我写过spring我知道使用注解需要理解成本，而我开发服务器仅仅是为了辅助低代码平台的呈现，因此选择了入门成本更低的egg。

数据库

说到服务器，那么一定需要考虑数据库，我使用的是mysql，并且使用docker的方式部署，好处是免去了非常多的数据库安装部署工作，但是不能直接操作数据库，需要进入docker容器内操作mysql,用到命令docker exec -it 数据库镜像实例名 bash

我一共建了三张表

由于接下来打算开放低代码平台给大家体验，并且初步准备使用github作为第三方登录渠道，developer表用于存储访问低代码平台的用户信息

低代码平台用户信息表 rango-low-code-server/scripts/sql/developer.sql
create table developer (
  developer_id varchar(32) not null,
  display_name varchar(32),
  name varchar(32),
  photo varchar(512),
  provider char(4),
  updated_time timestamp default CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  created_time timestamp default current_timestamp,
  primary key (developer_id)
);

在构思中，后面会提供DSL复用的功能，因此计划提供DSL的保存功能

DSL存储表，用于保存DSL rango-low-code-server/scripts/sql/config.sql
create table page_cfg (
  id MEDIUMINT NOT NULL AUTO_INCREMENT,
  dsl text not null,
  usr_tkn char(32) not null,
  template_name varchar(64) not null,
  updated_time timestamp default CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  created_time timestamp default current_timestamp,
  primary key (id)
)

此外还建了一张表，也就是低代码平台的业务数据表，仅作为功能展示用

业务数据表，用于存储表单提交的数据rango-low-code-server/scripts/sql/business/user.sql
create table user_tab (
  id MEDIUMINT NOT NULL AUTO_INCREMENT,
  name text not null,
  age int not null,
  sex char(1) not null,
  birthdate date not null,
  remarks text not null,
  updated_time timestamp default CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  created_time timestamp default current_timestamp,
  primary key (id)
);

业务代码

目前提供了对业务数据表user的新增和列表查询，使用的是egg中mysql功能

构建配置

由于服务器的源码会开源，因此数据库密码等配置不可以写在源码之中，而是在构建时通过命令行输入，这里用到了开源库 yargs

目前提供了几个启动选项

dbHost 数据库的服务器ip或域名，对应egg配置中的mysql.client.host
dbPort 数据库端口，对应egg配置中的mysql.client.port
dbUser: 数据库用户，对应egg配置中的mysql.client.user
dbName: 数据库名,对应egg配置中的mysql.client.database
dbPassword: 数据库密码，对应egg配置中的mysql.client.password
githubKey: github oauth应用的key，对应egg配置中的passportGithub.key,
githubSecret: github oauth应用的秘钥，对应egg配置中的passportGithub.secret,

服务器具体的启动命令如下，本地启动时可以自行替换 npx egg-scripts start --daemon --title=egg-server-rango-low-code-server --dbHost=数据库服务器ip --dbPort=数据库端口 --dbUser=数据库用户名 --dbName=数据库名 --dbPassword=数据库密码 --githubKey=github oauth的key --githubSecret=github oauth的秘钥

服务器部署

既然前后端工程是分开的，为了避免跨域的问题，我这里采用的是nginx反向代理的方式来部署服务器。如下图所示，所有的请求都先发到nginx，再由nginx转发到egg服务器或者

image.png

服务器构建

目前服务器上的构建我简单为前后端工程各写了一个shell脚本来完成构建

前端的构建脚本
rm -rf ./rango-low-code
git clone git@github.com:Rangocold/rango-low-code.git
cd ./rango-low-code
npm install
npm run build

后端的构建脚本
rm -rf ./rango-low-code-server
git clone git@github.com:Rangocold/rango-low-code-server.git
cd rango-low-code-server
npm install
npx egg-scripts start --daemon --title=egg-server-rango-low-code-server --dbHost=数据库服务器ip --dbPort=数据库端口 --dbUser=数据库用户名 --dbName=数据库名 --dbPassword=数据库密码 --githubKey=github oauth的key --githubSecret=github oauth的秘钥

目前没有联动github实现更智能化的持续构建，只能每次推送代码后，到服务器去自己跑一下构建的脚本，后面可以考虑做成自动化发布

nginx

nginx对前端工程的代理为文件代理，所有没有命中其他规则的请求nginx都会去目标文件夹下寻找

location / {root /文件绝对路径/rango-low-code/dist/;}

nginx对后端工程的代理为借口代理

location /rango-low-code-server/ {
                proxy_pass http://localhost:7001/rango-low-code-server/;
        }

值得一提的是，使用nginx代理的时候，要注意nginx.conf中的user配置，一定要配置有权限访问前端文件夹的用户，否则请求时会报403

avatar
文章
阅读
粉丝