zoukankan html css js c++ java

工欲善其事必先利其器SQL在线可视化模型设计，（还可学习拖拽知识）

作为技术人员，在开发项目中，不可避免的要跟数据库打交道，一个完整的项目正常情况下是讨论完整体需求，有了大致的框框在脑海中后，是需要设计合理的数据库的，这时会有其他的专业的UML建模工具可以使用，但是这种大型的专业化的UML建模工具，仅仅拿来建立数据库模型显得大材小用了，并且也太重量级，所以一般都不会轻易使用。多数人会选择直接在数据库软件中直接鼠标操作建表、填充列，这样更是不方便，故而很多人提到了VS中的codefirst方式，直接在代码中建立数据库模型，这种方式生成数据库之后，如果回头维护、查看都不太友好，甚至过了几个月之后你自己回头看都有可能不知道是什么意思。这样我们就需要数据库说明。

常见的数据库说明都是word文档，类似如下：

这是很多公司或团队采用的，但是我觉得这样还是不爽，假定你是一个接手人，你拿着这样的表格，左边点开数据库，右边打开这个文档，瞄一眼数据库再瞄一眼这个表格，左右切换窗口，超级不爽啊。

另外一种更加直观的，正向思维的方式：

这样看起来是不是直观多了，清楚明白的知道这个表的构成，直接在数据库中打开，不用切换窗口，它是建表脚本，也是一份详细直观的数据库说明文档，后续对数据库进行修改、增加、删除结构都很直接、直观。

于是，我个人就弄了个自己用的方便的可视化的数据库设计的东西，当然最终是生成上述直观可读性高的脚本文件，今天把它写出来分享下。

我的环境是mvc3，其实这个东西根本用不着MVC，很简单，就一个页面大量的JS操作，提交到后台代码生成文件下载回本地。先看打开时：

默认加载一个空表，填写相应的名称之类的，字段、类型、默认值、备注信息等，+号增加一行，如果一行没有完成会提示：

点击新建表会增加一个表，整个筐筐内每个表模型可以任意拖动位置且高度会自适应。拖拽都是靠JS。整个界面代码如下：

  1 @{
  2     ViewBag.Title = "主页";
  3 }
  4 <div class="box">
  5 
  6 
  7 
  8 
  9        <div class="editmenu">
 10        
 11        <input  type="text" id="txtBaseName" value="@ViewBag.baseName"/>
 12 
 13        <input  type="text" id="txtBaseDes"  value="@ViewBag.baseDes"/>
 14        <input id="addTable" type="button"  value="新建表"/>
 15        <input id="getData" type="button" title="下载完整的TXT格式的数据库脚本" style="float:right;"   value="下载数据"/>
 16 
 17        </div>
 18         <div id="main" class="main">
 19             <div class="tbbox">
 20                 
 21                 <div class="titletr" title="">
 22                     <span class="spleft">
 23                     <input value="XXX表" class="tbname"  type="text" />
 24                     </span>
 25                     <span class="title"></span>
 26                     <span class="spright"></span>
 27                 </div>
 28                 
 29                 <div class="titletr" title="">
 30                     <span class="spleft">
 31                     名:<input  value="tb_1" class="tbname" type="text" />
 32                     </span>
 33                     <span class="title"></span>
 34                     <span class="spright">删除</span>
 35                 </div>
 36                 <table class="tablelist">
 37                     <tbody>
 38                         <tr>
 39                             <td>
 40                                 字段名
 41                             </td>
 42                             <td>
 43                                 类型
 44                             </td>
 45                             <td>
 46                                 默认值
 47                             </td>
 48                             <td>
 49                                 备注
 50                             </td>
 51                             <td style="border: 0">
 52                             </td>
 53                         </tr>
 54                         <tr>
 55                             <td>
 56                                 <input type="text" />
 57                             </td>
 58                             <td>
 59                                 <div class="sortdiv">
 60                                     <span  class="selspan">
 61                                         <select class="selsort">
 62                                             <option value="int">int</option>
 63                                             <option value="varchar(50)">varchar(50)</option>
 64                                             <option value="nvarchar(200)">nvarchar(200)</option>
 65                                             <option value="datetime">datetime</option>
 66                                             <option value="float">float</option>
 67                                             <option value="text">text</option>
 68                                             <option value="ntext">ntext</option>
 69                                         </select>
 70                                     </span>
 71                                     <input  value="int"  class="sortinput" />
 72                                 </div>
 73                             </td>
 74                             <td>
 75                               <input class="txtdef" type="text" /> 
 76                             </td>
 77                             <td>
 78                               <input type="text" />  
 79                             </td>
 80                             <td id="tool" class="jiatr" style="border: 0">
 81                                +
 82                             </td>
 83                         </tr>
 84                     </tbody>
 85                 </table>
 86             </div>
 87         </div>
 88     </div>
 89 
 90     <input id="hdbase" type="hidden" value="@ViewBag.baseId"/>
 91 
 92     <input id="hdtr" type="hidden" value="@ViewBag.Tr"/>
 93     <input id="hddiv" type="hidden" value="@ViewBag.div"/>
 94     <input id="hdall" type="hidden" value="@ViewBag.AllData"/>
 95 
 96     <script type="text/javascript">
 97         $(document).ready(function () {
 98             window.onload = function () {
 99                 if ($("#hdall").val() != "") {
100                     $("#main").html($("#hdall").val());
101                 }
102                 ///初始化给div加移动事件
103                 $("#main").find("span.title").each(function () {
104                     this.onmousedown = MoveBegin;
105                 });
106                 ///给+TD事件
107                 $("#main").find("td.jiatr").each(function () {
108                     $(this).click(TdClick);
109                     $(this).attr("title", "新增一行");
110                 });
111                 ///添加DIV按钮
112                 $("#addTable").click(AddTbale);
113                 $("#getData").click(GetData);
114                 $("#saveData").click(SaveData);
115                 ///给select绑定事件
116                 $("#main").find("div.tbbox").each(function () {
117                     SortList(this);
118                     $(this).find("span.spright").click(DelDiv);
119                 });
120 
121                 CheckMainHeight();
122 
123             }
124             ///返回txt文件
125             function SaveTxt(arr) {
126                 var loogParam = arr;
127                 var nwin = window.open('/home/DataText?t=' + Math.random(), 'newwindow', 'height=5, width=5, top=400,left=500, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
128                 document.body.insertAdjacentHTML("beforeEnd", "<form  name='form1'  action='/home/DataText'  target='newpage'  method='post'><input  type='hidden'  name='param'></form>");
129                 document.form1.param.value = loogParam;
130                 document.form1.submit();
131                 $("form").remove();
132                 nwin.close();
133             }
134 
135             ///txt文件空格占位
136             function NullSpace(defnum, str) {
137                 var s = "\040";
138                 var r = "";
139                 var l = str.length;
140                 var num = defnum - l;
141                 for (var i = 0; i < num; i++) {
142                     r += s;
143                 }
144                 return r;
145             }
146             ///"-"占位符
147             function NullH(defnum, str) {
148                 var s = "-";
149                 var r = "";
150                 var l = str.length;
151                 var num = defnum - l;
152                 for (var i = 0; i < num; i++) {
153                     r += s;
154                 }
155                 return r;
156             }
157 
158             
159             ///下载脚本为txt文件
160             function GetData() {
161                 var tbName = "";
162                 var tr = 0;
163                 var sav = true;
164                 var br = "\r\n";
165                 var strSql = "use  " + $("#txtBaseName").val() + br;
166                 $("#main").find("div.tbbox").each(function () {
167                     tbName = $($(this).find(".tbname")[1]).val();
168                     var desName = $($(this).find(".tbname")[0]).val();
169                     var sqlExists = "if exists ( select *  from  sysobjects where name = '" + tbName + "' and xtype='U') " + br + ""
170                                 + "drop table " + tbName + "";
171                     strSql += sqlExists + br;
172                     strSql += "create table  " + tbName + NullH(67, tbName) + desName + br + "(" + br;
173                     $(this).find("tr").each(function (index, element) {
174                         if (index > 0) {
175                             var tdlist = $(this).find("td");
176                             var key = $(tdlist[0]).find("input").val();
177                             if ($.trim(key) != "") {
178                                 if (key.length >= 17) {
179                                     alert(key + "超出了15个字符的限制");
180                                     //alert(strSql);
181                                     sav = false;
182                                     return;
183                                 }
184                                 key += NullSpace(17, key);
185                                 var col = $(tdlist[1]).find("input").val();
186                                 col += NullSpace(17, col);
187                                 if (index == 1)
188                                     col = "int" + NullSpace(17, "int");
189                                 var def = $(tdlist[2]).find("input").val() == "" ? "default ''" : "default  " + $(tdlist[2]).find("input").val();
190                                 def += NullSpace(32, def);
191                                 if (index == 1)
192                                     def = "primary key identity(1,1)" + NullSpace(32, "primary key identity(1,1)");
193                                 var des = "--" + $(tdlist[3]).find("input").val();
194                                 if (index == 1)
195                                     des = "--主键-" + $(tdlist[3]).find("input").val();
196                                 strSql += "\040\040" + key + col + def + "NOT NULL , " + des + br;
197 
198                                 tr++;
199                             }
200                         }
201                     });
202                     strSql += ");" + br + br + br;
203                 });
204                 if (sav && tr > 0) {
205                     $("#saveData").click();
206                     SaveTxt(strSql);
207                 }
208             }
209 
210 
211             ///给数据类型列加事件
212             function SortList(obj) {
213                 $(obj).find("div.sortdiv").each(function () {
214 
215 
216                     $(this).find("select:first").change(ChangeVal).change(DefaultTxt);
217                     $(this).find("input:first").focus(ShowSel);
218 
219                     $(this.parentNode).mouseenter(ShowSel).mouseleave(HideSel);
220 
221                     $(this.parentNode.parentNode).find(".txtdef").blur(DefaultTxt);
222 
223                 });
224 
225             }
226 
227             ///删除div
228             function DelDiv() {
229                 $(this.parentNode.parentNode).remove();
230             }
231 
232 
233 
234             ///改变数据类型
235             function ChangeVal(obj) {
236                 $(this.parentNode.parentNode).find(".sortinput").val($(this.parentNode).find(".selsort").val());
237 
238 
239             }
240             ///默认值
241             function DefaultTxt(obj) {
242                 var txt = $(this.parentNode.parentNode).find(".txtdef:first")[0];
243                 if (obj.type == "change") {
244                     txt = $(this.parentNode.parentNode.parentNode.parentNode).find(".txtdef:first")[0];
245                 }
246                 var val = $(txt).val().replace("'", "").replace("'", "");
247                 $(txt).val(val);
248                 if ($.trim($(txt).val()) != "" && $.trim($(txt).val().toLowerCase()) != "getdate()" && $.trim($(txt.parentNode.parentNode).find(".sortinput").val()) != "int" && $.trim($(txt.parentNode.parentNode).find(".sortinput").val()) != "float") {
249 
250                     $(txt).val("'" + val + "'");
251                 }
252             }
253             ///数据类型下拉显示
254             function ShowSel(obj) {
255                 $(this.parentNode).find(".selspan").show();
256                 $(this.parentNode).find(".sortinput").width("90px");
257                 $(this.parentNode).find(".sortinput").css("position", "absolute");
258             }
259             ///数据类型下拉隐藏
260             function HideSel(obj) {
261                 var td = this;
262                 var o = obj.relatedTarget || obj.toElement;
263                 if (!o) {
264                     return;
265                 }
266                 $(td).find(".selspan").hide();
267                 $(td).find(".sortinput").width("118px");
268                 $(td).find(".sortinput").css("position", "");
269             }
270 
271 
272 
273             ///添加DIV
274             function AddTbale() {
275                 var child = document.createElement("div");
276                 child.className = "tbbox";
277                 var name = Math.random().toString().substr(2, 3);
278                 var div = $("#hddiv").val().replace("tb_Name", "tb_" + name);
279                 $(child).html(div);
280                 $(child).find("span.title").each(function () {
281                     this.onmousedown = MoveBegin;
282                 });
283 
284 
285 
286 
287                 $(child).find("span.spright").click(DelDiv);
288                 $(child).find("td.jiatr").each(function () {
289                     $(this).click(TdClick);
290                     $(this).attr("title", "新增一行");
291                 });
292                 SortList(child);
293                 $("#main").append(child);
294                 CheckMainHeight();
295             }
296 
297             ///TD增加一行点击
298             function TdClick(obj) {
299                 var tooltipem = $(this.parentNode).find("td:first").find("input:first");
300                 if ($.trim(tooltipem.val()) == "") {
301                     $(tooltipem).tooltip({
302                         "title": "这里还没填写呢~！",
303                         "trigger": "manual",
304                         "placement": "right",
305                         "delay": 800
306                     });
307                     $(tooltipem).tooltip("show");
308 
309                     $(tooltipem).focus();
310                     setTimeout(function () { $(tooltipem).tooltip("hide"); }, 1800)
311 
312                     return false;
313                 }
314                 $(tooltipem).tooltip("destroy");
315                 var tr = $("#hdtr").val();
316                 var child = document.createElement("tr");
317                 $(child).html(tr);
318                 $(this.parentNode.parentNode).append(child);
319                 SortList(child);
320                 $(child).find("td.jiatr").click(TdClick);
321 
322 
323                 $(this).removeClass();
324                 $(this).unbind();
325                 $(this).html("");
326                 $(this).attr("title", "");
327 
328                 CheckMainHeight();
329                 $($($(this.parentNode.parentNode).find("tr:first").next("tr"))).find("td:last").addClass("prmkey").attr("title", "第一行默认为主键&自增长");
330             }
331             ///校验div#main高度
332             function CheckMainHeight() {
333                 $("#main").find("div").each(function () {
334                     if (this.offsetTop + $(this).height() > $("#main").height())
335                         $("#main").height(this.offsetTop + $(this).height() + 10);
336                 });
337             }
338 
339             ///移动
340             function MoveBegin(obj) {
341                 var e = obj || window.event,
342                 x1 = e.clientX;
343                 y1 = e.clientY;
344                 var setOn = this.parentNode.parentNode;
345                 var defLeft = setOn.offsetLeft;
346                 var defTop = setOn.offsetTop;
347 
348                 document.onmousemove = function (event) {
349                     var e = event || window.event;
350                     //
351                     x2 = e.clientX;
352                     y2 = e.clientY;
353                     //
354                     x = x2 - x1;
355                     y = y2 - y1;
356                     var setLeft = defLeft + x;
357                     var setTop = defTop + y;
358                     setOn.style.position = "absolute";
359                     //setOn.style.filter = 'alpha(opacity=80)';
360                     //setOn.style.opacity = "0.8";
361                     if (setLeft <= 0) {
362                         setLeft = 0;
363                     }
364                     if (setTop <= 0) {
365                         setTop = 0;
366                     }
367                     if (setLeft >= $("#main").width() - $(setOn).width() - 9) {
368                         setLeft = $("#main").width() - $(setOn).width() - 14;
369                     }
370                     if (setTop > $("#main").height() - $(setOn).height() + 10) {
371 
372                         $("#main").height(setTop + $(setOn).height() + 100);
373 
374                         setTop = $("#main").height() - $(setOn).height();
375                     }
376                     setOn.style.left = setLeft + 'px';
377                     setOn.style.top = setTop + 'px';
378                     //$("#showText").text("Top:" + setOn.style.top + "; Left:" + setOn.style.left + "; OFl:" + "");
379                 }
380                 document.onmouseup = function () {
381                     this.onmousemove = null;
382                 }
383             }
384 
385         });   
386     </script>

里面有JS拖拽代码，都很简单，上面这些是我2年前做的东西，很多命名之类的都不规范，大家关注方法就好。

后台代码：

  1    public ActionResult Index()
  2         {
  3             StringBuilder sb = new StringBuilder();
  4 
  5             sb.Append("<td>");
  6             sb.Append("<input type=\"text\" />");
  7             sb.Append("</td>");
  8             sb.Append("<td>");
  9             sb.Append("<div class=\"sortdiv\">");
 10             sb.Append("<span  class=\"selspan\">");
 11             sb.Append("<select class=\"selsort\">");
 12             sb.Append("<option value=\"int\">int</option>");
 13             sb.Append("<option value=\"varchar(50)\">varchar(50)</option>");
 14             sb.Append(" <option value=\"nvarchar(200)\">nvarchar(200)</option>");
 15             sb.Append("<option value=\"datetime\">datetime</option>");
 16             sb.Append("<option value=\"float\">float</option>");
 17             sb.Append("<option value=\"text\">text</option>");
 18             sb.Append("<option value=\"ntext\">ntext</option>");
 19             sb.Append("</select>");
 20             sb.Append("</span>");
 21             sb.Append("<input  value=\"int\"  class=\"sortinput\" />");
 22             sb.Append("</div>");
 23             sb.Append("</td>");
 24             sb.Append("<td>");
 25             sb.Append("<input class=\"txtdef\" type=\"text\" />");
 26             sb.Append("</td>");
 27             sb.Append("<td>");
 28             sb.Append("<input type=\"text\" />");
 29             sb.Append("</td>");
 30             sb.Append("<td id=\"tool\" class=\"jiatr\"  title=\"新增一行\" style=\"border: 0\">");
 31             sb.Append("+");
 32             sb.Append("</td>");
 33             ViewBag.Tr = sb.ToString();
 34 
 35             StringBuilder sbdiv = new StringBuilder();
 36             sbdiv.Append("<div class='titletr' title=''>");
 37             sbdiv.Append("<span class='spleft'>");
 38             sbdiv.Append("<input value='XXX表' class='tbname'  type='text' />");
 39             sbdiv.Append("</span>");
 40             sbdiv.Append("<span class='title'></span>");
 41             sbdiv.Append("<span class='spright'></span>");
 42             sbdiv.Append("</div>");
 43             sbdiv.Append("<div class='titletr' title=''>");
 44             sbdiv.Append("<span class='spleft'>");
 45             sbdiv.Append("名:<input value='tb_Name' class='tbname' type='text' />");
 46             sbdiv.Append("</span>");
 47             sbdiv.Append("<span class='title'></span>");
 48             sbdiv.Append("<span class='spright'>删除</span>");
 49             sbdiv.Append("</div>");
 50             sbdiv.Append("<table class='tablelist'>");
 51             sbdiv.Append("<tbody>");
 52             sbdiv.Append("<tr>");
 53             sbdiv.Append("<td>");
 54             sbdiv.Append("字段名");
 55             sbdiv.Append("</td>");
 56             sbdiv.Append("<td>");
 57             sbdiv.Append("类型");
 58             sbdiv.Append("</td>");
 59             sbdiv.Append("<td>");
 60             sbdiv.Append("默认值");
 61             sbdiv.Append("</td>");
 62             sbdiv.Append("<td>");
 63             sbdiv.Append(" 备注");
 64             sbdiv.Append("</td>");
 65             sbdiv.Append("<td style='border: 0'>");
 66             sbdiv.Append("</td>");
 67             sbdiv.Append("</tr>");
 68             sbdiv.Append("<tr>");
 69             sbdiv.Append("<td>");
 70             sbdiv.Append("<input type='text' />");
 71             sbdiv.Append("</td>");
 72             sbdiv.Append("<td>");
 73             sbdiv.Append("<div class='sortdiv'>");
 74             sbdiv.Append("<span  class='selspan'>");
 75             sbdiv.Append("<select class='selsort'>");
 76             sbdiv.Append("<option value='int'>int</option>");
 77             sbdiv.Append("<option value='varchar(50)'>varchar(50)</option>");
 78             sbdiv.Append("<option value='nvarchar(200)'>nvarchar(200)</option>");
 79             sbdiv.Append("<option value='datetime'>datetime</option>");
 80             sbdiv.Append("<option value='float'>float</option>");
 81             sbdiv.Append("<option value='text'>text</option>");
 82             sbdiv.Append("<option value='ntext'>ntext</option>");
 83             sbdiv.Append("</select>");
 84             sbdiv.Append("</span>");
 85             sbdiv.Append("<input  value='int'  class='sortinput' />");
 86             sbdiv.Append("</div>");
 87             sbdiv.Append("</td>");
 88             sbdiv.Append("<td>");
 89             sbdiv.Append("<input class='txtdef' type='text' />");
 90             sbdiv.Append("</td>");
 91             sbdiv.Append("<td>");
 92             sbdiv.Append("<input type='text' />");
 93             sbdiv.Append("</td>");
 94             sbdiv.Append("<td id='tool' class='jiatr' style='border: 0'>");
 95             sbdiv.Append(" +");
 96             sbdiv.Append("</td>");
 97             sbdiv.Append("</tr>");
 98             sbdiv.Append("</tbody>");
 99             sbdiv.Append("</table>");
100             ViewBag.div = sbdiv.ToString();
101             ViewBag.AllData = "";
102             ViewBag.baseId = "";
103             ViewBag.baseName = "basename";
104             ViewBag.baseDes = "备注说明";
105             
106             return View();
107 
108         }
109         //响应下载脚本请求，返回txt文件
110         public void DataText()
111         {
112             if (Request["param"] == null)
113                 return;
114             string t = Request["param"];
115             if (t == "")
116                 return;
117             string tbName = "数据库-" + System.DateTime.Now.ToString("yyMMdd-HHmmss")+".sql";
118             Response.AppendHeader("Content-Disposition", "attachment;filename=" + tbName);
119             Response.ContentEncoding = System.Text.Encoding.Default;
120             Response.ContentType = "text/plain";
121             Response.Write(t);
122         }

在线暂时测试地址：http://websql.puworld.com

新建的QQ群，技术交流，有其他任何技术方面的讨论都可以进群：群号183695596 微信公众平台开发MVC版本demo下载群号183695596 微信客户端调试工具下载群号183695596 微信公众平台开发webform版本demo下载

查看全文

相关阅读:
I.MX6 Surfaceflinger 机制
 理解 Android Fragment
RPi 2B DDNS 动态域名
 RPi 2B IPC webcam server
理解 Android MVP 开发模式
 I.MX6 system.img unpack repack
can't set android permissions
VMware Ubuntu 共享文件夹
 解决oracle数据库连接不上的问题
 perfect-scrollbar示例

原文地址：https://www.cnblogs.com/mochen/p/3638782.html