serializable.html 8.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243
  1. <!--
  2. * @Author: XianKaiQun
  3. * @Date: 2020-04-13 09:19:31
  4. * @LastEditors: WuWei
  5. * @LastEditTime: 2020-06-17 09:07:09
  6. * @Descripttion: kuaisu
  7. -->
  8. <!DOCTYPE html>
  9. <html lang="en">
  10. <head>
  11. <meta charset="UTF-8">
  12. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13. <title>Document</title>
  14. </head>
  15. <script>
  16. window.onload = function () {
  17. ///从本地获取之前缓存的数据
  18. document.getElementById("json").value = localStorage.getItem('json1');
  19. document.getElementById("jsons").value = localStorage.getItem('json2');
  20. document.getElementById("className").value = localStorage.getItem('className');
  21. if (localStorage.getItem('json1') && localStorage.getItem('json2') && localStorage.getItem('className')) {
  22. json2dart();
  23. }
  24. }
  25. function change1() {
  26. var b = document.getElementById("json").value;
  27. localStorage.setItem('json1', b);
  28. }
  29. function change2() {
  30. var b = document.getElementById("jsons").value;
  31. localStorage.setItem('json2', b);
  32. }
  33. function change3() {
  34. var b = document.getElementById("className").value;
  35. localStorage.setItem('className', b);
  36. }
  37. function parse() {
  38. var a = localStorage.getItem('json1');
  39. var b = localStorage.getItem('json2');
  40. var back = {};
  41. try {
  42. if (a) {
  43. back = {
  44. ...back,
  45. ...JSON.parse(a)
  46. };
  47. }
  48. if (b) {
  49. back = {
  50. ...back,
  51. ...JSON.parse(b)
  52. };
  53. }
  54. } catch (error) {
  55. alert('json格式可能存在错误')
  56. }
  57. return back;
  58. }
  59. //判断类型
  60. function dateType(data) {
  61. let back = "int"
  62. if (data === null) back = "dynamic"
  63. else if (typeof data == "undefined") back = "dynamic"
  64. else if (data.constructor === Array) back = "List"
  65. else if (data.constructor === Boolean) back = "bool"
  66. else if (data.constructor === String) back = "String"
  67. else if (data.constructor === Object) back = "Map"
  68. else if (data.constructor === Number) back = "num"
  69. // else if (data.constructor === Number) back = (data + ".0" != data) ? "double" : "int"
  70. else back = "dynamic"
  71. return back
  72. }
  73. //转驼峰
  74. function tf(str) {
  75. var strArr = str.split('/');
  76. for (var i = 1; i < strArr.length; i++) {
  77. strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substring(1);
  78. }
  79. str = strArr.join('')
  80. strArr = str.split('_');
  81. for (var i = 1; i < strArr.length; i++) {
  82. strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substring(1);
  83. }
  84. str = strArr.join('')
  85. strArr = str.split('-');
  86. for (var i = 1; i < strArr.length; i++) {
  87. strArr[i] = strArr[i].charAt(0).toUpperCase() + strArr[i].substring(1);
  88. }
  89. str = strArr.join('')
  90. return str;
  91. };
  92. //首字母大写
  93. function upper(data) {
  94. return data.replace(/\b\w+\b/g, function (word) {
  95. return word.substring(0, 1).toUpperCase() + word.substring(1)
  96. })
  97. }
  98. //构造
  99. function buildClass(json, thisClassName) {
  100. var className = thisClassName;
  101. className = upper(tf(className));
  102. let definedStr = `` //构造函数
  103. let initializeStr = `` // 初始化
  104. let fromJsonStr = `` //fromJson
  105. let toJsonStr = `` //toJson
  106. let back = ``
  107. const fields = Object.keys(json)
  108. fields.forEach(field => {
  109. const _data = json[field]
  110. const _dataType = dateType(_data)
  111. let childClassName = upper(tf(field))+'Of'+className
  112. // Map类型 需要递归build新的class
  113. if (_dataType == "Map") {
  114. back = back + buildClass(_data, childClassName)
  115. // 定义
  116. definedStr += `${childClassName} ${field} ;\r\n`
  117. initializeStr += `this.${field},\r\n`
  118. fromJsonStr += `${field}= ${childClassName}.fromJson(map["${field}"]??{});\r\n`
  119. toJsonStr += `json['${field}'] = this.${tf(field)}.toJson();\r\n`
  120. }
  121. // List类型且孩子为Map 需要传入list【0】递归build新的class
  122. else if (_dataType == "List" && dateType(_data[0]) == "Map") {
  123. back = back + buildClass(_data[0], childClassName)
  124. // 定义
  125. definedStr += `List<${childClassName}> ${field};\r\n`
  126. initializeStr += `this.${field},\r\n`
  127. fromJsonStr += `${field}= List<${childClassName}>.from((map["${field}"]?? []).map((x) => ${childClassName}.fromJson(x)));\r\n`
  128. toJsonStr += `json['${field}']=List<dynamic>.from((${field}??[]).map((x) => x.toJson()));\r\n`;
  129. }
  130. // List类型 孩子不是Map (一维数组)
  131. else if (_dataType == "List" && dateType(_data[0]) != "Map") {
  132. // 定义
  133. definedStr += `List<${dateType(_data[0])}> ${field};\r\n`
  134. initializeStr += `this.${field},\r\n`
  135. fromJsonStr += `${tf(field)}=map['${field}'].cast<${dateType(_data[0])}>();\r\n`
  136. toJsonStr += ` json['${field}'] = this.${tf(field)};\r\n`
  137. } else {
  138. definedStr += `${_dataType} ${field};\r\n`
  139. initializeStr += `this.${field},\r\n`
  140. fromJsonStr += `${tf(field)} = map['${field}'];\r\n`
  141. toJsonStr += `json['${field}'] = this.${tf(field)};\r\n`
  142. }
  143. })
  144. //构造函数
  145. initializeStr = `${className}({${initializeStr}});`
  146. //fromJson
  147. fromJsonStr = `\r\n${className}.fromJson(json) {
  148. \r\nMap<String, dynamic> map = Map.from(json ?? {});
  149. \r\n${fromJsonStr}
  150. \r\n}`
  151. //toJson
  152. toJsonStr = `
  153. \r\nMap<String, dynamic> toJson() {
  154. \r\nMap<String, dynamic> json = Map<String, dynamic>();
  155. \r\n${toJsonStr}
  156. \r\nreturn json;
  157. \r\n}`
  158. back = `\r\nclass ${className}{
  159. \r\n${definedStr}
  160. \r\n${initializeStr}
  161. \r\n${fromJsonStr}
  162. \r\n${toJsonStr}
  163. \r\n}
  164. \r\n${back}`
  165. return back
  166. }
  167. //清空
  168. function clear1() {
  169. document.getElementById("json").value = '';
  170. }
  171. //转换
  172. function json2dart() {
  173. let className = localStorage.getItem('className');
  174. if (!className) className = 'Empty';
  175. className+='Model'
  176. let json = parse();
  177. var str = buildClass(json, className);
  178. document.getElementById("dart").value = str;
  179. }
  180. //复制
  181. function copydart() {
  182. var Url2 = document.getElementById("dart")
  183. Url2.select() // 选择对象
  184. document.execCommand("Copy") // 执行浏览器复制命令
  185. alert("复制成功")
  186. }
  187. </script>
  188. <body>
  189. <div class="box">
  190. <div style="
  191. flex-direction: column;
  192. height: 80vh;
  193. width: 50%;
  194. margin-right: 10px;">
  195. <textarea id="json" onchange="change1()" style="height: 70%;" placeholder="json code.."></textarea>
  196. <button onClick="clear1()" style="height: 40px;">清空</button>
  197. <textarea id="jsons" onchange="change2()" style="height:30%;" placeholder="jsons code.."></textarea>
  198. </div>
  199. <textarea id="dart" style="width: 50%;"></textarea>
  200. </div>
  201. <div style=" display: flex;flex-direction: row;justify-content: center;margin:40px ">
  202. <input id="className" onchange="change3() " placeholder=" className.." style="margin:0 40px;width:300px;" />
  203. <input type="button" onClick="json2dart()" value="json to dart" style="margin:0 40px" />
  204. <input type="button" onClick="copydart()" style="margin:0 40px" value="复制代码" />
  205. </div>
  206. </body>
  207. </html>
  208. <style>
  209. .box,
  210. .box div {
  211. display: flex;
  212. font-family: "verdana";
  213. }
  214. </style>