【JSON2WEB】 13 基于REST2SQL 和 Amis 的 SQL 查询分析器

【JSON2WEB】01 WEB管理信息系统架构设计

【JSON2WEB】02 JSON2WEB初步UI设计

【JSON2WEB】03 go的模板包html/template的使用

【JSON2WEB】04 amis低代码前端框架介绍

【JSON2WEB】05 前端开发三件套 HTML CSS JavaScript 速成

【JSON2WEB】06 JSON2WEB前端框架搭建

【JSON2WEB】07 Amis可视化设计器CRUD增删改查

【JSON2WEB】08 Amis的事件和校验

【JSON2WEB】09 Amis-editor的代码移植到json2web

【JSON2WEB】10 基于 Amis 做个登录页面login.html

【JSON2WEB】11 基于 Amis 角色功能权限设置页面

【JSON2WEB】 12基于Amis-admin的动态导航菜单树


关于数据的问题没有一句SQL不能解决的,如果有就两句。
我设计开发的所有信息系统 内嵌 SQL 查询分析器是标配,可执行CRUD的操作,也就是SQL的Insert、Select、Update、Delete操作。号称SQL的四大基本操作。

SQL才是做完美的存在。BS前端就不吐槽了,知识点太多,比上下五千年的历史事件还多,比地球上的乡村还多。

1 数据库端设计

针对Oracle数据设计,创建2个视图。

1.1 用户表视图

create or replace view user_tabs as
select t.table_name, tab_cnt(t.table_name) as row_count ,c.comments
from user_all_tables t --用户表视图
left join user_tab_comments c on c.table_name = t.table_name
order by t.table_name;

在这里插入图片描述

1.2 用户表和视图的视图

create or replace view user_table_view_v as
select table_name as s_name,comments, 'TABLE' as s_type from user_tabs
union all -- 用户表和视图的视图
select view_name as s_name,'' as comments, 'VIEW' as s_type from user_views
;

在这里插入图片描述

2 REST2SQL的微调

只修改一下 REST2SQL - dothing.go 文件的 doSQL()函数即可。

2.1 doSQL()的代码

// 根据请求参数执行不同的SQL操作 //
func doSQL(w http.ResponseWriter, req map[string]interface{}) {
	//w.Write([]byte("\ndoSQL()\n"))
	//w.Write([]byte("\"data\":"))
	//资源名sql语句

	resSQL := req["ResName"].(string)
	fmt.Println("SQL://", resSQL)
	sqlToUpper := strings.ToUpper(resSQL)
	sql6 := sqlToUpper[:6]

	var result string
	switch sql6 {
	case "SELECT":
		result = Icrud.SelectData(resSQL)

	case "INSERT":
		result = "[" + Icrud.InsertData(resSQL) + "]"

	case "UPDATE":
		result = "[" + Icrud.UpdateData(resSQL) + "]"

	case "DELETE":
		result = "[" + Icrud.DeleteData(resSQL) + "]"

	default:
		// 过滤sql ,只能执行 SELECT INSERT UPDATE DELETE
		result = "\"只能执行 SELECT INSERT UPDATE DELETE\""
	}

	logger.Alog(true, fmt.Sprint("SQL:", resSQL))
	// w.Write([]byte(result))
	// w.Write([]byte("}"))

	var dataset []map[string]interface{}

	// json串反序列化
	err := json.Unmarshal([]byte(result), &dataset)
	if err != nil {
		fmt.Println("Error:", err)
		return
	}
	// 返回数据
	rows := make(map[string]interface{})
	rows["rows"] = dataset
	//data := make(map[string]interface{})

	rw := returnMap()
	rw["data"] = rows
	// 输出到 http.ResponseWriter
	httpResWriter(w, rw)
}

重点就是所有的查询返回结果统一化。

2.2 SELECT 的返回结果

http://127.0.0.1:5217/sql/select * from s_role

{
  "data": {
    "rows": [
      {
        "P_ID": "R010",
        "S_NAME": "开发测试role",
        "S_NOTE": null,
        "TIME_STAMP": null
      },
      {
        "P_ID": "R100",
        "S_NAME": "测试10",
        "S_NOTE": "1000",
        "TIME_STAMP": "2024-04-09T17:08:42.794Z"
      },
      {
        "P_ID": "R020",
        "S_NAME": "系统管理",
        "S_NOTE": null,
        "TIME_STAMP": null
      },
      {
        "P_ID": "R030",
        "S_NAME": "静态数据",
        "S_NOTE": null,
        "TIME_STAMP": null
      },
      {
        "P_ID": "R040",
        "S_NAME": "动态数据",
        "S_NOTE": null,
        "TIME_STAMP": "2024-04-09T17:21:18.603Z"
      },
      {
        "P_ID": "R050",
        "S_NAME": "管输排产",
        "S_NOTE": null,
        "TIME_STAMP": null
      },
      {
        "P_ID": "S520",
        "S_NAME": "BS静态数据",
        "S_NOTE": null,
        "TIME_STAMP": "2024-04-08T15:39:58.489Z"
      },
      {
        "P_ID": "S510",
        "S_NAME": "BS系统管理",
        "S_NOTE": null,
        "TIME_STAMP": "2024-04-10T15:33:15.739Z"
      }
    ]
  },
  "msg": "",
  "status": 0
}

2.3 INSERT 的返回结果

http://127.0.0.1:5217/sql/insert into s_role (p_id,s_name) values (‘RRR’,‘测试数据随后就删除’)

{
  "data": {
    "rows": [
      {
        "Insert rowsAffected": 1
      }
    ]
  },
  "msg": "",
  "status": 0
}

2.4 UPDATE 的返回结果

http://127.0.0.1:5217/sql/update s_role set s_name = ‘SSSS’ where p_id = ‘RRR’

{
  "data": {
    "rows": [
      {
        "Update rowsAffected": 1
      }
    ]
  },
  "msg": "",
  "status": 0
}

2.5 DELETE 的返回结果

http://127.0.0.1:5217/sql/delete s_role where p_id = ‘RRR’

{
  "data": {
    "rows": [
      {
        "Delete rowsAffected": 1
      }
    ]
  },
  "msg": "",
  "status": 0
}

3 基于Amis-Editor的 SQL 查询分析器页面

3.1 页面布局 在这里插入图片描述

左边栏列出用户表和视图,右上未 SQL 输入编辑区域,右下为 SQL 执行结果JSON输出区域。

3.2 左边栏

放一个 crud2 设置及代码如下:

{
  "type": "crud2",
  "id": "u:2350a7316069",
  "mode": "table2",
  "dsType": "api",
  "syncLocation": true,
  "primaryField": "s_name",
  "loadType": "",
  "api": {
    "url": "http://127.0.0.1:5217/rest/user_table_view_v",
    "method": "get"
  },
  "filter": {
    "type": "form",
    "title": "表或视图查询",
    "mode": "inline",
    "columnCount": 1,
    "clearValueOnHidden": true,
    "behavior": [
      "SimpleQuery"
    ],
    "body": [
      {
        "name": "S_NAME",
        "label": "名称",
        "type": "input-text",
        "size": "full",
        "required": false,
        "behavior": "SimpleQuery",
        "id": "u:120b4ef2515e"
      },
      {
        "name": "COMMENTS",
        "label": "备注",
        "type": "input-text",
        "size": "full",
        "required": false,
        "behavior": "SimpleQuery",
        "id": "u:201a4c336663"
      }
    ],
    "actions": [
      {
        "type": "reset",
        "label": "重置",
        "id": "u:1c5e9794de0a"
      },
      {
        "type": "submit",
        "label": "查询",
        "level": "primary",
        "id": "u:4bd7edd74974"
      }
    ],
    "id": "u:714d678e7896",
    "feat": "Insert"
  },
  "headerToolbar": [
    {
      "type": "flex",
      "direction": "row",
      "justify": "flex-start",
      "alignItems": "stretch",
      "items": [
        {
          "type": "container",
          "align": "left",
          "behavior": [
            "Insert",
            "BulkEdit",
            "BulkDelete"
          ],
          "body": [
            {
              "type": "tpl",
              "tpl": "鼠标双击行可以生成 SELECT 查询语句",
              "inline": true,
              "wrapperComponent": "",
              "id": "u:81c3176e9478"
            }
          ],
          "wrapperBody": false,
          "id": "u:e754ddc5a2a5"
        },
        {
          "type": "container",
          "align": "right",
          "behavior": [
            "FuzzyQuery"
          ],
          "body": [],
          "wrapperBody": false,
          "id": "u:81f562752dea"
        }
      ],
      "id": "u:21f94630ae3e",
      "isFixedHeight": false,
      "isFixedWidth": false
    }
  ],
  "footerToolbar": [
    {
      "type": "flex",
      "direction": "row",
      "justify": "flex-start",
      "alignItems": "stretch",
      "style": {
        "position": "static"
      },
      "items": [
        {
          "type": "container",
          "align": "left",
          "body": [],
          "wrapperBody": false,
          "style": {
            "flexGrow": 1,
            "flex": "1 1 auto",
            "position": "static",
            "display": "flex",
            "flexBasis": "auto",
            "flexDirection": "row",
            "flexWrap": "nowrap",
            "alignItems": "stretch",
            "justifyContent": "flex-start"
          },
          "id": "u:ad6a4c49cf11"
        },
        {
          "type": "container",
          "align": "right",
          "body": [
            {
              "type": "pagination",
              "behavior": "Pagination",
              "layout": [
                "total",
                "perPage",
                "pager"
              ],
              "perPage": 50,
              "perPageAvailable": [
                10,
                20,
                50,
                100,
                500
              ],
              "align": "right",
              "id": "u:0fac899d9be2"
            }
          ],
          "wrapperBody": false,
          "style": {
            "flexGrow": 1,
            "flex": "1 1 auto",
            "position": "static",
            "display": "flex",
            "flexBasis": "auto",
            "flexDirection": "row",
            "flexWrap": "nowrap",
            "alignItems": "stretch",
            "justifyContent": "flex-end"
          },
          "id": "u:1307d8ea5a6b"
        }
      ],
      "id": "u:c01dcade7257"
    }
  ],
  "columns": [
    {
      "type": "tpl",
      "title": "名称",
      "name": "S_NAME",
      "id": "u:e8cb1c25ee76",
      "placeholder": "-"
    },
    {
      "type": "tpl",
      "title": "备注",
      "name": "COMMENTS",
      "id": "u:d09e124643fc",
      "placeholder": "-"
    },
    {
      "type": "tpl",
      "title": "类型",
      "name": "S_TYPE",
      "id": "u:d25820de66dd",
      "placeholder": "-"
    }
  ],
  "editorSetting": {
    "mock": {
      "enable": true,
      "maxDisplayRows": 5
    }
  },
  "loadDataOnce": true,
  "onEvent": {
    "rowDbClick": {
      "weight": 0,
      "actions": [
        {
          "componentId": "u:e92cb0a1b8d7",
          "ignoreError": false,
          "actionType": "setValue",
          "args": {
            "value": "${\"select * from \" + event.data.item.S_NAME}"
          }
        }
      ]
    }
  },
  "matchFunc": ""
}

这里重点是加了一个行双击事件生成Select查询语句并赋值给 SQL 编辑框。

"onEvent": {
    "rowDbClick": {
      "weight": 0,
      "actions": [
        {
          "componentId": "u:e92cb0a1b8d7",
          "ignoreError": false,
          "actionType": "setValue",
          "args": {
            "value": "${\"select * from \" + event.data.item.S_NAME}"
          }
        }
      ]
    }
  }

3.3 右上区域

先放一个面板panel,再在面板的内容去放一多行文本框即可,相关设置代码如下:

{
  "type": "panel",
  "title": "SQL编辑器",
  "body": [
    {
      "type": "textarea",
      "label": "",
      "name": "sql",
      "id": "u:e92cb0a1b8d7",
      "minRows": 6,
      "maxRows": 10,
      "value": "select sysdate from dual",
      "validateOnChange": false,
      "clearable": true
    }
  ],
  "id": "u:9d0e47e56bfb",
  "affixFooter": true,
  "actions": [
    {
      "type": "button",
      "label": "执行",
      "onEvent": {
        "click": {
          "actions": [
            {
              "componentId": "",
              "ignoreError": false,
              "actionType": "ajax",
              "args": {},
              "outputVar": "responseResult",
              "options": {},
              "api": {
                "url": "http://127.0.0.1:5217/sql/${sql}",
                "method": "get",
                "requestAdaptor": "",
                "adaptor": "",
                "messages": {}
              }
            },
            {
              "componentId": "u:505178345a09",
              "ignoreError": false,
              "actionType": "setValue",
              "args": {
                "value": "${event.data.responseResult.responseData|json}"
              }
            }
          ]
        }
      },
      "id": "u:6ded52fac842",
      "size": "lg",
      "block": false,
      "level": "warning",
      "themeCss": {
        "className": {
          "font:default": {
            "fontSize": "var(--fonts-size-7)",
            "text-align": "center"
          },
          "padding-and-margin:default": {}
        }
      }
    },
    {
      "type": "button",
      "label": "复制SQL",
      "onEvent": {
        "click": {
          "actions": [
            {
              "ignoreError": false,
              "actionType": "copy",
              "args": {
                "copyFormat": "text/plain",
                "content": "${sql}"
              }
            }
          ]
        }
      },
      "id": "u:eee1cae708cb",
      "themeCss": {
        "className": {
          "padding-and-margin:default": {}
        }
      },
      "block": false,
      "size": "md",
      "level": "info"
    },
    {
      "type": "button",
      "label": "复制结果JSON",
      "onEvent": {
        "click": {
          "actions": [
            {
              "ignoreError": false,
              "actionType": "copy",
              "args": {
                "copyFormat": "text/plain",
                "content": "${result}"
              }
            }
          ]
        }
      },
      "id": "u:a2396ccdb96b",
      "level": "success"
    }
  ],
  "subFormMode": "",
  "actionsClassName": "m-xs",
  "className": "Panel--info",
  "headerClassName": "",
  "bodyClassName": "m-xs",
  "footerClassName": "",
  "subFormHorizontal": {
    "leftFixed": "normal"
  }
}

这里重点是执行按钮上的2个点击事件,第一个是数据请求,这里要调用REST2SQL 的API,参数就是SQL 多行文本框输入的全部内容,第二个事件是把返回结果赋值给执行结果JSON的多行问文本框:

"type": "button",
      "label": "执行",
      "onEvent": {
        "click": {
          "actions": [
            {
              "componentId": "",
              "ignoreError": false,
              "actionType": "ajax",
              "args": {},
              "outputVar": "responseResult",
              "options": {},
              "api": {
                "url": "http://127.0.0.1:5217/sql/${sql}",
                "method": "get",
                "requestAdaptor": "",
                "adaptor": "",
                "messages": {}
              }
            },
            {
              "componentId": "u:505178345a09",
              "ignoreError": false,
              "actionType": "setValue",
              "args": {
                "value": "${event.data.responseResult.responseData|json}"
              }
            }
          ]
        }
      }

在这里插入图片描述
另 : 【复制SQL】按钮的事件就是把 sql 多行文本框的内容复制到剪贴板;

"onEvent": {
    "click": {
      "actions": [
        {
          "ignoreError": false,
          "actionType": "copy",
          "args": {
            "copyFormat": "text/plain",
            "content": "${sql}"
          }
        }
      ]
    }
  }

【复制结果JSON】按钮的事件就是把 result 多行文本框的内容复制到剪贴板;

"onEvent": {
    "click": {
      "actions": [
        {
          "ignoreError": false,
          "actionType": "copy",
          "args": {
            "copyFormat": "text/plain",
            "content": "${result}"
          }
        }
      ]
    }
  }

3.4 右下区域

先放一个面板panel,面板的内容区域放一个多行文本框:

{
  "type": "panel",
  "title": "执行结果JSON",
  "body": [
    {
      "type": "textarea",
      "label": "",
      "name": "result",
      "id": "u:505178345a09",
      "minRows": 17,
      "maxRows": 30
    }
  ],
  "id": "u:dac15e24efb3",
  "affixFooter": false,
  "className": "Panel--success",
  "bodyClassName": "m-xs"
}

4 实操演练

4.1 SELECT

在这里插入图片描述

4.2 INSERT

在这里插入图片描述

4.3 UPDATE

在这里插入图片描述

4.4 DELETE

在这里插入图片描述

SQL 查询分析器的功能主要是开发和运维人员使用,应急处理数据问题。


本文完。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/533400.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

antd+Vue 3实现table行内upload文件图片上传【超详细图解】

目录 一、背景 二、效果图 三、代码 一、背景 一名被组长逼着干前端的苦逼后端&#xff0c;在一个晴天霹雳的日子&#xff0c;被要求前端订单产品实现上传产品图片并立刻回显图片。 二、效果图 三、代码 <template><a-table :dataSource"dataSource" :c…

前端三剑客 —— JavaScript (第七节)

内容回顾 DOM编程 document对象 有属性 有方法 节点类型 元素节点 属性节点 文本节点 操作DOM属性 DOM对象.属性名称 DOM对象[属性名称] 调用DOM对象的API 操作DOM样式 获取有单位的样式值 标签对象.style.样式名称&#xff0c;这种方式只能操作行内样式。 使用getComputedSty…

[Linux][进程概念][进程优先级]详细解读

目录&#xff09; 0.冯诺依曼体系结构1.操作系统(Operator System)1.概念2.设计OS的目的3.定位4.系统调用和库函数概念5.总结 2.进程1.基本概念2.描述进程 -- PCB3.task_struct内容分类4.组织进程5.查看进程6.通过系统调用获取进程标识符7.通过系统调用创建进程 -- fork初识8.进…

44---MSATA电路设计

视频链接 mSATA & mini-pcie电路设计01_哔哩哔哩_bilibili mSATA电路设计 1、mSATA简介 1.1、mSATA基本介绍 mSATA接口是标准SATA的迷你版本&#xff0c;通过mini PCI-E界面传输信号&#xff0c;传输速度支持1.5Gbps、3Gbps、6Gbps三种模式。mSATA接口的诞生&#xff…

数据可视化的3D问题

三维对象非常流行&#xff0c;但在大多数情况下会对解释图形的准确性和速度产生负面影响。 以下是对涉及 3d 的主要图形类型的回顾&#xff0c;并讨论了它们是否被认为是不好的做法。 1、3D 条形图&#xff1a;不要 这是一个 3d 条形图。 你可能很熟悉这种图形&#xff0c;因为…

自学嵌入式,已经会用stm32做各种小东西了,下一步是什么,研究stm32的内部吗?

是的&#xff0c;深入研究STM32的内部是一个很好的下一步。我这里有一套嵌入式入门教程&#xff0c;不仅包含了详细的视频讲解&#xff0c;项目实战。如果你渴望学习嵌入式&#xff0c;不妨点个关注&#xff0c;给个评论222&#xff0c;私信22&#xff0c;我在后台发给你。 了…

【Vue + keep-alive】路由缓存

一. 需求 列表页&#xff0c;n 条数据项可打开 n 个标签页&#xff0c;同时1条数据项的查看和编辑共用一个标签页。如下所示&#xff1a; 参考 // 主页面 // 解决因 路由缓存&#xff0c;导致 编辑后跳转到该页面 不能实时更新数据 onActivated(() > {getList() })二. 实现…

Java面试题戏剧

目录 第一幕 、第一场&#xff09;某大厦楼下大门前第二场&#xff09;电梯中第三场&#xff09;走廊中 第二幕、第一场&#xff09;公司前台第二场&#xff09;公司卫生间 第三幕、第一场&#xff09;一场异常面试 第四幕 、第一场&#xff09;大厦楼下门口第二场&#xff09;…

实验5 VLAN基础配置

实验5 VLAN基础配置 一、 原理描述二、 实验目的三、 实验内容四、 实验配置五、 实验步骤1.配置IP地址2.检测链路连通性3.创建 VLAN4.配置Access接口5.检验结果6.配置Trunk端口7.检验连通性 一、 原理描述 现代局域网通常配置为等级结构&#xff0c;一个工作组中的主机通过交…

【vue/uniapp】使用 smooth-signature 实现 h5 的横屏电子签名

通过github链接进行下载&#xff0c;然后代码参考如下&#xff0c;功能包含了清空、判断签名内容是否为空、生成png/jpg图片等。 签名效果&#xff1a; 预览效果&#xff1a; 下载 smooth-signature 链接&#xff1a;https://github.com/linjc/smooth-signature 代码参考&a…

流程图步骤条

1.结构 <ul class"stepUl"> <li class"stepLi" v-for"(item, index) in stepList" :key"index"> <div class"top"> <p :class"{active: currentState > item.key}">{{ item.value }}…

ROS机器人未知环境自主探索功能包explore_lite最全源码详细解析(五)

本系列文章主要针对ROS机器人常使用的未知环境自主探索功能包explore_lite展开全源码的详细解析&#xff0c;并进行概括总结。 本系列文章共包含六篇文章&#xff0c;前五篇文章主要介绍explore_lite功能包中 explore.cpp、costmap_tools.h、frontier_search.cpp、costmap_clie…

Canal--->准备MySql主数据库---->安装canal

一、安装主数据库 1.在服务器新建文件夹 mysql/data&#xff0c;新建文件 mysql/conf.d/my.cnf 其中my.cnf 内容如下 [mysqld] log_timestampsSYSTEM default-time-zone8:00 server-id1 log-binmysql-bin binlog-do-db mall # 要监听的库 binlog_formatROW2.启动数据库 do…

汽车4S行业的信息化特点与BI建设挑战

汽车行业也是一个非常大的行业&#xff0c;上下游非常广&#xff0c;像主机厂&#xff0c;上游的零配件&#xff0c;下游的汽车流通&#xff0c;汽车流通之后的汽车后市场&#xff0c;整个链条比较长。今天主要讲的是汽车流通&#xff0c;汽车4S集团。一个汽车4S集团下面授权代…

【CSS】利用Vue实现数字翻滚动画效果

利用Vue实现数字翻滚动画效果 在很多数据可视化的需求中&#xff0c;动态呈现数据变化是一个常见且具有较强视觉冲击力的手段&#xff0c;尤其是数字的实时变化。今天我们将探讨如何使用 Vue.js 和 CSS3 来实现数字的翻滚动画效果&#xff0c;即模拟真实物体在Z轴上翻动的效果…

python使用uiautomator2操作雷电模拟器9并遇到解决adb 连接emulator-5554 unauthorized问题

之前写过一篇文章 python使用uiautomator2操作雷电模拟器_uiautomator2 雷电模拟器-CSDN博客 上面这篇文章用的是雷电模拟器4&#xff0c;雷电模拟器4.0.78&#xff0c;android版本7.1.2。 今天有空&#xff0c;再使用雷电模拟器9&#xff0c;android版本9来测试一下 uiauto…

利用Flexbox和Margin实现智能布局:如何巧妙分配剩余空间,让你的网页设计更上一层楼?

1、演示 2、flex布局 Flex布局是一种用于Web开发的弹性盒子布局模型&#xff0c;它可以让容器内的子元素在空间分配、对齐和排列方面具有更大的灵活性。以下是Flex布局的基本用法&#xff1a; 容器属性&#xff1a; display: flex;&#xff1a;将容器指定为Flex布局。flex-dire…

头歌-机器学习 第9次实验 随机森林

第1关&#xff1a;Bagging 任务描述 本关任务&#xff1a;补充 python 代码&#xff0c;完成 BaggingClassifier 类中的 fit 和 predict 函数。请不要修改 Begin-End 段之外的代码。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a; 什么是 Bagging&#xf…

【IC前端虚拟项目】验证阶段开篇与知识预储备

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 从这篇开始进入验证阶段&#xff0c;因为很多转方向的小伙伴是转入芯片验证工程师方向的&#xff0c;所以有必要先做一个知识预储备的说明&#xff0c;或者作为验证入门的一个小指导吧。 在最开始&#…

C++11 设计模式1. 模板方法(Template Method)模式学习。UML图

一 什么是 "模板方法&#xff08;Template Method&#xff09;模式" 在固定步骤确定的情况下&#xff0c;通过多态机制在多个子类中对每个步骤的细节进行差异化实现&#xff0c;这就是模板方法模式能够达到的效果。 模板方法模式属于&#xff1a;行为型模式。 二 &…