自动生成移交JSON自助页面

最新推荐文章于 2025-09-04 14:12:30 发布

转载最新推荐文章于 2025-09-04 14:12:30 发布 · 106 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/u/2436852/blog/994792

文章标签：

#json #javascript #python #ViewUI

本文介绍了一款基于AngularJS的JSON视图自动生成工具，该工具能够通过简单的配置选项帮助用户快速生成JSON视图，并提供了单文件操作及批量操作功能。

2019独角兽企业重金招聘Python工程师标准>>>

html:

<!DOCTYPE html>
<!--[if IE 8]>
<html lang="en" class="ie8">
<![endif]-->
<!--[if IE 9]>
<html lang="en" class="ie9">
<![endif]-->
<!--[if !IE]><!-->
<html lang="en" ng-app="selfHelpApp">
	<!--<![endif]-->
	<!-- BEGIN HEAD -->

	<head>
		<meta charset="UTF-8" />
		<title>BCORE Admin Dashboard Template | Dashboard</title>
		<meta content="width=device-width, initial-scale=1.0" name="viewport" />
		<meta content="" name="description" />
		<meta content="" name="author" />
		<!--[if IE]>
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <![endif]-->
		<!-- GLOBAL STYLES -->
		<link rel="stylesheet" href="assets/plugins/bootstrap/css/bootstrap.css" />
		<link rel="stylesheet" href="assets/css/main.css" />
		<link rel="stylesheet" href="assets/css/theme.css" />
		<link rel="stylesheet" href="assets/css/MoneAdmin.css" />
		<link rel="stylesheet" href="assets/plugins/Font-Awesome/css/font-awesome.css" />
		<!--END GLOBAL STYLES -->
		<!-- PAGE LEVEL STYLES -->
		<link href="assets/css/layout2.css" rel="stylesheet" />
		<link href="assets/plugins/flot/examples/examples.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/plugins/timeline/timeline.css" />
		<!-- END PAGE LEVEL STYLES -->
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
	</head>
	<!-- END HEAD -->
	<!-- BEGIN BODY -->

	<body class="padTop53 " ng-controller="selfHelpController">
		<div id="body">
			<div class="row">
				<div class="col-lg-12">
					<div class="panel panel-primary">
						<div class="panel-heading">json自助生成view</div>
						<div class="panel-body">
							<div class="row">
								<div class="col-lg-6">
									<div class="panel panel-info">
										<div class="panel-heading">单文件操作</div>
										<div class="panel-body">
											<div class="col-lg-6">
												<div class="form-group">
													<label>json表头:</label>
													<input class="form-control" ng-model="options.jsonHead"></div>
												<div class="form-group">
													<label>前缀路径:</label>

													<input class="form-control" ng-model="options.prePath" placeholder="db/nets2/inc/1.69.0/">
												</div>
											</div>
											<div class="col-lg-6">
												<div class="form-group">
													<label>数据库名称:</label>
													<input class="form-control" ng-model="options.dbName"></div>
												<div class="form-group">
													<label>文件名:</label>
													<input class="form-control" ng-model="options.fileName" placeholder="xxxxxx.sql"></div>
											</div>
											<div class="form-group">
												<label>选择类型顺序:</label>
												<div id="labArr" class="form-group well">
													<label ng-repeat="x in options.submitType" style="padding:6px 27px 6px 27px" ondrop="drop(event,this)" ondragover="allowDrop(event)" draggable="true" ondragstart="drag(event, this)" class="{{x.labClass}}">{{x.type}}</label>
												</div>
											</div>
											<button class="btn btn-info" ng-click="btnMerge()">新增or修改</button>
											<button class="btn btn-default" ng-click="btnSort()">排序</button>
										</div>
									</div>

									<div class="panel panel-info">
										<div class="panel-heading">批量操作</div>
										<div class="panel-body">
											<div class="form-group">
												<label>原生json增加或修改:</label>
												<textarea class="form-control" rows="5"></textarea>
											</div>
											<button class="btn btn-info" id="btn_emerge_json">生成json</button>
										</div>
									</div>
									<button class="btn btn-info" id="btn_sort">按sr、pkgh、pkgb、trigger、job排序</button>
									<button class="btn btn-info" id="btn_watch_view">查看视图</button>
								</div>

								<div class="col-lg-6">
									<textarea class="form-control" style="border:1px solid #bce8f1;" rows="35" ng-model="viewDBJsonView"></textarea>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- GLOBAL SCRIPTS -->
		<script src="assets/plugins/jquery-2.0.3.min.js"></script>
		<script src="assets/plugins/bootstrap/js/bootstrap.min.js"></script>
		<script src="assets/plugins/modernizr-2.6.2-respond-1.1.0.min.js"></script>
		<!-- END GLOBAL SCRIPTS -->
		<script type="text/javascript" src="jquery-table-workm.js"></script>
		<!-- END PAGE LEVEL SCRIPTS -->

		<!--AngularJS-->
		<script src="comm/angular.js"></script>
		<script src="module/json-self-help-view.js"></script>
		<script type="text/javascript">
			function allowDrop(ev) {
				ev.preventDefault();
			}

			var srcdiv = null;

			function drag(ev, divdom) {
				srcdiv = divdom;
				ev.dataTransfer.setData("text/html", divdom.innerHTML);
			}

			function drop(ev, divdom) {
				ev.preventDefault();
				if(srcdiv != divdom) {
					srcdiv.innerHTML = divdom.innerHTML;
					divdom.innerHTML = ev.dataTransfer.getData("text/html");
				}
			}
		</script>
	</body>

</html>

js:

var selfHelp = angular.module('selfHelpApp', []);

selfHelp.controller('selfHelpController', function($scope) {

	$scope.commClass = {
		boot_comm:['default','info','success','warning','danger']
	};
	$scope.options = {
		'jsonHead': 'sqls',
		'dbName': 'oracle',
		'submitType': [
			{ 'sortValue': 0, 'type': 'sr' ,labClass:'label label-'+$scope.commClass.boot_comm[0]+' checkbox-inline'},
			{ 'sortValue': 1, 'type': 'pkgh',labClass:'label label-'+$scope.commClass.boot_comm[1]+' checkbox-inline' },
			{ 'sortValue': 2, 'type': 'pkgb',labClass:'label label-'+$scope.commClass.boot_comm[2]+' checkbox-inline' },
			{ 'sortValue': 3, 'type': 'trigger',labClass:'label label-'+$scope.commClass.boot_comm[3]+' checkbox-inline' },
			{ 'sortValue': 4, 'type': 'job',labClass:'label label-'+$scope.commClass.boot_comm[4]+' checkbox-inline' }
		],
		'prePath': '',
		'fileName': ''
	};
	$scope.selectedIndex = $scope.options.submitType[0];//默认选中第一个

	$scope.viewDBJson = {
		"sqls": {
			"oracle": [

			]
		}
	};
	$scope.viewDBJson2 = {
		"sqls": {
			"oracle": [
				{'selectedIndex':0,'sql':[]},
				{'selectedIndex':1,'sql':[]},
				{'selectedIndex':2,'sql':[]},
				{'selectedIndex':3,'sql':[]},
				{'selectedIndex':4,'sql':[]}
			]
		}
	};
	
	$scope.isContain = function(firstStr,secondStr){
		return firstStr.toLowerCase().indexOf(secondStr.toLowerCase())!=-1;//全转成大写来比较
	};
	$scope.btnMerge = function() {
		console.log($scope.viewDBJson);
		//这行只是取到key为oracle这层，因为将来可能自定义，所以这样取
		$scope.viewDBJson[$scope.options.jsonHead][$scope.options.dbName].push($scope.options.prePath + $scope.options.fileName);

		recursion($scope.viewDBJson[$scope.options.jsonHead][$scope.options.dbName]); //去重
		
		$scope.viewDBJsonView = JSON.stringify($scope.viewDBJson, null, 4);
		//dbjson2

		/*	
		 * 	$scope.options.jsonHead=sqls
		 *	$scope.options.dbName=oracle
		 *	$scope.selectedIndex.sortValue=选中的下标
		 *	$scope.options.prePath=文件路径
		 * 	$scope.options.fileName=文件名
		 * 	操作
		 * 	给$scope.viewDBJson2.sqls.oracle里的数组按对应选中的下标往sql里放值
		 */
		//$scope.viewDBJson2[$scope.options.jsonHead][$scope.options.dbName][$scope.selectedIndex.sortValue]['sql'].push($scope.options.prePath + $scope.options.fileName);
	}
	$scope.btnSort = function(){
		
		$scope.labArr = new Array();
		
		//这里用jquery操作的dom来完成的，感觉会比模版写着简单
		var labArr = $('#labArr');
		for (var i=0,len=labArr.children('label').length;i<len;i++) {
			var lab = labArr.children('label')[i];
			$scope.labArr.push($(lab).text());
		}
		
		for(var i=0,len=$scope.viewDBJson[$scope.options.jsonHead][$scope.options.dbName].length;i<len;i++){
			var sql = $scope.viewDBJson[$scope.options.jsonHead][$scope.options.dbName][i];
			if($scope.isContain(sql,'sr')){
				console.log(true);
			}
		}
		
	};

	$scope.convertTemplateJSON = function() {

	};
});

Array.prototype.indexOf = function(val) {
	for(var i = 0; i < this.length; i++) {
		if(this[i] == val) return i;
	}
	return -1;
};
Array.prototype.remove = function(val) {
	var index = this.indexOf(val);
	if(index > -1) {
		this.splice(index, 1); //params1 代表下标,params2 代表要删除几个元素 
	}
};

function recursion(arr) {
	var dataSort = arr.sort(); //排序
	var rec = function() {
		for(var i = 0; i < arr.length; i++) {
			if(dataSort[i] == dataSort[i + 1]) {
				//console.log('有相同数据'+dataSort.length);
				dataSort.remove(dataSort[i]);
				rec(); //递归
			}
		}
	}
	//递归删除重复数据
	rec();
	return dataSort;
}

function uniqueObj(obj) {
	for(var i = 0; i < obj.length; i++) {
		var count = 0;
		for(var j = 0; j < obj.length; j++) {
			if(obj[i].name == obj[j].name) {
				count++;
			}
			if(obj[i].name == obj[j].name) {
				if(count > 1) {
					obj.remove(obj[i]);
				}
			}
		}
	}
	return obj;
}

//使用sort方法再调用sortArrayObj可以实现对json对象的某一属性进行排序
function sortArrayObj(property) {
	return function(a, b) {
		return a[property] - b[property];
	}
}

begin-head

<head>
		<meta charset="UTF-8" />
		<title>BCORE Admin Dashboard Template | Dashboard</title>
		<link rel="stylesheet" href="../../../../../../comm/css/bootstrap.min.css" />
		<script type="text/javascript" src="../../../../../../comm/js/jquery.min.js" ></script>
		<script type="text/javascript" src="../../../../../../comm/js/bootstrap.min.js" ></script>
		<script type="text/javascript" src="../../../../../../comm/js/angular.min1.6.x.js" ></script>
		<script type="text/javascript" src="../module/json-self-help-view.js" ></script>
	</head>

end-head

未完待续！

转载于:https://my.oschina.net/u/2436852/blog/994792