Fizz Gateway 二次開發集成教程

Fizz聚合模塊

Fizz可以支持擴展聚合編輯器的功能。在現階段原生官方支持的聚合類型中僅有的REQUEST，Dubbo，gRPC三種RPC請求方式。但Fizz可以支持的包含但不只限於RPC，雖然聚合模塊設計的時候咱們更多考慮RPC請求聚合以免過多的業務邏輯進入聚合模塊影響性能，但若是想要支持更多數據聚合類型，Fizz現階段也提供對應的解決方案。

擴展方法

Fizz聚合編輯器配置以後的陪hi文件的分發流程爲：編輯器——》管理端存儲——》緩存——》節點，編輯器負責配置文件的編輯，中間管理端負責配置文件的存儲和節點分發，最終節點負責識別解析配置文件。因此咱們須要修改包含兩部分： 一、增長後臺編輯器中聚合類型的支持； 二、增長節點中聚合代碼對於新增類型的支持；

編輯器支持

前端開發步驟

一、安裝支持

yarn add vue-module-creator
複製代碼

一、進入目錄module，生成vue項目

cd module;
vmc create; 
// 輸入項目名稱，建立項目
yarn add vue-module-loader --save
複製代碼

二、添加項目入口文件module.js

import MysqlItem from './components/aggregate/mysql-item.vue'
import routes from './router/routes'
import storeModule from './store/store-module'
export default function(Vue) {
  Vue.config.productionTip = false
  this.$router.addRoutes(routes)
  this.$store.registerModule('mysql', storeModule)
  this.$dynamicComponent.create(MysqlItem)
}

複製代碼

三、編寫組件mysql-item.vue

<template>
    <div> <el-form-item label="鏈接地址" prop="URL" key="URL"> <el-input v-model="requestForm.URL" clearable></el-input> <span class="key-tips">數據庫連接地址，如：r2dbcs:mysql://root:password@localhost:3306/archer?useSSL=false&useUnicode=true&characterEncoding=utf-8&zeroDateTimeBehavior=convertToNull&transformedBitIsBoolean=true&serverTimezone=GMT%2B8&nullCatalogMeansCurrent=true&allowPublicKeyRetrieval=true</span> </el-form-item> <el-form-item label="查詢數據SQL" prop="sql" key="sql"> <el-input type="textarea" v-model="requestForm.sql" clearable></el-input> <span class="key-tips">示例：Select dd* from users 請勿以分號結尾</span> </el-form-item> <el-form-item label="綁定參數" prop="binds" key="binds"> <el-input v-model="requestForm.binds" clearable></el-input> <span class="key-tips">輸入使用JSON{"id":"1"}</span> </el-form-item> </div>
</template>
<script> export default { name: 'mysqlItem', props: { requestForm: { // 名字已經固定，請勿修改 default() { return {}; } } } } </script>
複製代碼

四、編譯組件 在package.json中scripts中添加

"scripts": {
    "serve": "concurrently \"vue-cli-service serve -mode development\" \"vue-cli-service build --target lib src/module.js --dest public --watch\"",
    "build:app": "vue-cli-service build -mode production",
    "build:module": "vue-cli-service build --target lib src/module.js --dest public",
    "publish": "vue-cli-service build --target lib src/module.js --dest ../../public/module/mysql"
  },
複製代碼

五、使用命令編譯

yarn run build:module
複製代碼

六、編譯以後的文件爲：mysql.umd.js 七、配置Fizz管理後臺 接下來須要讓Fizz管理後臺可以加載該組件，找到Fizz後臺中public文件夾中constant.js，配置以下：

var Constant = (function(){
    return {
        aggregate:{
            plugins:{
                mysql:{
                    "entry":NODE_ENV === 'development' ? "//localhost:8080/mysql.umd.js":"/public/module/mysql/mysql.umd.js",
                    "component":"mysqlItem" // 該字段須要與mysql-item.vue中name字段對應
                }
            }
        }
    }
})();
複製代碼

說明

調試模式能夠啓動serve，Fizz管理後臺可以根據配置加載對應路徑的Web Component

節點支持

節點開發步驟

一、在合適的位置註冊Input

InputFactory.registerInput(MySQLInput.TYPE, MySQLInput.class);
複製代碼

二、編寫MySQLInput.java

public class MySQLInput extends Input implements IInput {
    static public InputType TYPE = new InputType("MYSQL");
    public static Class inputConfigClass (){
        return MySQLInputConfig.class;
    }
    public void beforeRun(InputContext context){

    }
    public Mono<Map> run(){
        // items 是根據數據庫讀取以後的結果處理
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("data", items);
        result.put("request", this);
        return Mono.just(result);
    }
}
複製代碼

三、編寫配置MySQLInputConfig.java

public class MySQLInputConfig extends InputConfig {

	public MySQLInputConfig(Map configBody) {
		super(configBody);
	}
    // 在這裏解析前端傳遞過來的配置
	public void parse(){
    }
}
複製代碼

重要說明

Fizz該功能現階段僅對商業用戶開放。