eflagcomm · buct2012dbl · Aug 24, 2016 · Aug 24, 2016 · Aug 24, 2016 · Aug 24, 2016
diff --git a/web/SVG_demo_learning/Readme.md b/web/SVG_demo_learning/Readme.md
@@ -0,0 +1,3 @@
+### 名称：svg时钟demo
+### 功能：即时的用图形化的时钟界面显示和更新本地时间
+### 位置：/path/svgdemo_clock.html
diff --git a/web/SVG_demo_learning/page/svgdemo_clock.html b/web/SVG_demo_learning/page/svgdemo_clock.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html style="width:100%;height:100%" lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title></title>
+</head>
+<body style="width:100%;height:100%;background-color:green">
+  <svg style="width:100%;height:100%">
+    <circle cx="500px" cy="250px" r="200px" stroke="white" stroke-width="20px" fill="none"></circle>
+    <path id="hour" d="M500,250 L500,130" stroke="white" stroke-width="8px" stroke-linecap="round"></path>
+    <path id="min" d="M500,250 L500,100" stroke="white" stroke-width="8px" stroke-linecap="round"></path>
+    <path id="sec" d="M500,250 L500,80" stroke="white" stroke-width="3px" stroke-linecap="round"></path>
+
+  </svg>
+  <script>
+    var hour = document.getElementById("hour");
+    var min = document.getElementById("min");
+    var sec = document.getElementById("sec");
+    setInterval(function(){
+      function r(rel,deg){
+        rel.setAttribute('transform','rotate('+deg+' 500 250)')
+      }
+      var date = new Date();
+      r(sec , 6*date.getSeconds());
+      r(min , 6*date.getMinutes());
+      r(hour, 30*(date.getHours()%12)+date.getMinutes()/2);
+    },1000);
+  </script>
+</body>
+</html>
diff --git a/web/Windows下Nodejs中引入oracledb模块前的准备工作和环境配置.md b/web/Windows下Nodejs中引入oracledb模块前的准备工作和环境配置.md
@@ -0,0 +1,21 @@
+#Windows下Nodejs中引入oracledb模块前的准备工作和环境配置
+
+###1. 安装python
+
+   + 到python官网下载python2.7版本，下载完成后按照默认安装步骤进行安装。
+
+###2. 安装oracle instant client
+
+   + 到http://www.oracle.com/technetwork/topics/winx64soft-089540.html 下载instantclient_basic-windows.x64-12.1.0.2.0.zip和instantclient_sdk-windows.x64-12.1.0.2.0.zip，下载好后新建一个空目录，将两个压缩包的内容的内容都解压到该文件夹，假定C:\oracle\instantclient，将C:\oracle\instantclient添加到环境变量中的Path中，另外再在系统环境变量中添加两个变量：OCI_LIB_DIR=C:\oracle\instantclient\sdk\lib\msvc，OCI_INC_DIR=C:\oracle\instantclient\sdk\include。
+
+###3. 安装Microsoft Visual Studio 2015 community
+
+   + 在Microsoft官网下载vs2015 community版本，点击安装，注意在安装过程中选择安装项的时候只选择visual c++相关项，其他的一概不选。下载好后找到vs根目录中的vc目录，假定为C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC，将C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\bin目录添加到环境变量的Path中，另外再添加两个系统环境变量：INCLUDE=C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\include,LIB=C:\Program Files (x86)\Microsoft Visual Studio 14.0\VC\lib。
+
+###4. 安装Nodejs
+
+   + 在Nodejs官网中下载Nodejs最新版并安装。
+
+###5. 引入oracledb依赖
+
+   + 打开终端，cd进入到项目目录下，输入npm install oracledb，并运行，运行完成后oracledb模块就成功的添加到项目中。
diff --git a/web/easyUI_Demo_Learning/Readme.md b/web/easyUI_Demo_Learning/Readme.md
@@ -0,0 +1,21 @@
+###Easyui Demo
+
++ ####功能：easyui数据表格的的增删改(nodejs编写后台)以及组合查询
+
++ ####前端：/front/page/basic_CRUDapplicationwithsearch.html
+            /front/js/basic_crudapplicationwithsearch_js.js
+            /front/js/comb_searchDEMO.js
+
++ ####后端：/server/
+
++ ####数据库(mysql)
+
+    + user : root
+
+    + password : root
+
+    + database : test
+
+    + table : student(name vchar(10) , age int(4))
+
++ ####使用技术：nodejs,easyui,mysql
diff --git a/web/easyUI_Demo_Learning/front/js/basic_CRUDapplication_js.js b/web/easyUI_Demo_Learning/front/js/basic_CRUDapplication_js.js
@@ -0,0 +1,55 @@
+var url = 'empty';
+function newUser()
+{
+  $('#dlg').dialog('open').dialog('setTitle','New User');
+  $('#fm').form('clear');
+  url='http://localhost:8888/newuser';
+}
+function editUser()
+{
+  var row = $('#dg').datagrid('getSelected');
+  if(row){
+    $('#dlg').dialog('open').dialog('setTitle','Edit User');
+    $('#fm').form('load',row);
+    url = 'http://localhost:8888/edituser?id='+row.id;
+  }
+}
+function destroyUser()
+{
+  var row = $('#dg').datagrid('getSelected');
+  if(row){
+    $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
+      if(r){
+        $.post('http://localhost:8888/destroyuser',{id:row.id},function(result){
+          if(result.success){
+            $('#dg').datagrid('reload');
+          }else{
+            $.messager.show({
+              title:'Error',
+              msg:result.errorMsg
+            });
+          }
+        },'json');
+      }
+    });
+  }
+}
+function saveUser(){
+  $('#fm').form('submit',{
+    url:url,
+    onSubmit:function(){
+      return $(this).form('validate');
+    },
+    success:function(result){
+      if(result.errorMsg){
+        $.messager.show({
+          title:'Error',
+          msg:result.errorMsg
+        });
+      }else{
+        $('#dlg').dialog('close');
+        $('#dg').datagrid('reload');
+      }
+    },
+  });
+}
diff --git a/web/easyUI_Demo_Learning/front/js/basic_CRUDapplicationwithsearch_js.js b/web/easyUI_Demo_Learning/front/js/basic_CRUDapplicationwithsearch_js.js
@@ -0,0 +1,61 @@
+var url = 'empty';
+function newUser()
+{
+  $('#dlg').dialog('open').dialog('setTitle','New User');
+  $('#fm').form('clear');
+  url='http://localhost:8888/newuser';
+}
+function editUser()
+{
+  var row = $('#dg').datagrid('getSelected');
+  if(row){
+    $('#dlg').dialog('open').dialog('setTitle','Edit User');
+    $('#fm').form('load',row);
+    url = 'http://localhost:8888/edituser?id='+row.id;
+  }
+}
+function destroyUser()
+{
+  var row = $('#dg').datagrid('getSelected');
+  if(row){
+    $.messager.confirm('Confirm','Are you sure you want to destroy this user?',function(r){
+      if(r){
+        $.post('http://localhost:8888/destroyuser',{id:row.id},function(result){
+          if(result.success){
+            $('#dg').datagrid({
+              url:"http://localhost:8888/test"
+            });
+            $('#dg').datagrid('reload');
+          }else{
+            $.messager.show({
+              title:'Error',
+              msg:result.errorMsg
+            });
+          }
+        },'json');
+      }
+    });
+  }
+}
+function saveUser(){
+  $('#fm').form('submit',{
+    url:url,
+    onSubmit:function(){
+      return $(this).form('validate');
+    },
+    success:function(result){
+      if(result.errorMsg){
+        $.messager.show({
+          title:'Error',
+          msg:result.errorMsg
+        });
+      }else{
+        $('#dlg').dialog('close');
+        $('#dg').datagrid({
+          url:"http://localhost:8888/test"
+        });
+        $('#dg').datagrid('reload');
+      }
+    },
+  });
+}
diff --git a/web/easyUI_Demo_Learning/front/js/comb_searchDEMO.js b/web/easyUI_Demo_Learning/front/js/comb_searchDEMO.js
@@ -0,0 +1,86 @@
+$.searchtabevent = {
+  table : null,
+  html : null,
+  count : 0,
+
+  add : function(){
+    table.append(html);
+    $.parser.parse(table.find("tr:last"));
+    $.ajax({
+      url : "http://localhost:8888/getcolumn",
+      dataType : "json",
+      success:function(data,status){
+       //  var val = $.parseJSON(data);
+         $.each(data["res"],function(n,valu){
+           table.find("tr:last td:eq(1) select").append("<option value='"+valu['COLUMN_NAME']+"'>"+valu['COLUMN_NAME']+"</option>");
+         });
+       $.parser.parse(table.find("tr:last"));
+       }
+    } );
+  },
+  remove : function(){
+     if(table.find("tr").length ===1)
+         return;
+     table.find("tr:last").remove();
+  },
+  search : function(){
+    var query = "";
+    table.find("tr").each(function(){
+      if($(this).find("td select.connector").length>0)
+        query+=$(this).find("td select.connector").combobox("getValue");
+      if($(this).find("td select.key").length>0)
+        query+=$(this).find("td select.key").combobox("getValue");
+      if($(this).find("td select.operater").length>0)
+        query+=$(this).find("td select.operater").combobox("getValue");
+      if($(this).find("td input.inputbox").length>0)
+        query+="'"+$(this).find("td input.inputbox").textbox("getValue")+"'";
+     });
+    alert(query);
+    $("#dg").datagrid({
+      url:"http://localhost:8888/test?condition="+query
+    });
+    $("#dg").datagrid('reload');
+  },  
+  init : function(tab,addbutton,removebutton,searchbutton){
+    table = tab;
+    html = "<tr>"
+        +  "<td>"
+        +  "<select id=\"connector\" name=\"connectorname\" class=\"easyui-combobox connector\">" 
+        +  "<option value=' and '>AND</option>"
+        +  "<option value=' or '>OR</option>"
+        +  "</select>"
+        +  "</td>"
+        +  "<td>"
+        +  "<select id=\"key\" name=\"keyname\" class=\"easyui-combobox key\">"
+        +  "</select>"
+        +  "</td>"
+        +  "<td>"
+        +  "<select id=\"operater\" name=\"operater\" class=\"easyui-combobox operater\">"
+        +  "<option value='='>=</option>"
+        +  "<option value='>'>></option>"
+        +  "<option value='>='>>=</option>"
+        +  "<option value='<'><</option>"
+        +  "<option value='<='><=</option>"
+        +  "</select>"
+        +  "</td>"
+        +  "<td>"
+        +  "<input class='easyui-textbox inputbox' type='text'>"
+        +  "</td>";
+        +  "</tr>" 
+    addbutton.click($.searchtabevent.add);
+    removebutton.click($.searchtabevent.remove); 
+    searchbutton.click($.searchtabevent.search);
+    $.ajax({
+      url : "http://localhost:8888/getcolumn",
+      dataType : "json",
+      success:function(data,status){
+       //  var val = $.parseJSON(data);
+         $.each(data["res"],function(n,valu){
+           table.find("tr:first td:eq(1) select").append("<option value='"+valu['COLUMN_NAME']+"'>"+valu['COLUMN_NAME']+"</option>");
+         });
+       $.parser.parse(table.find("tr:last"));
+       }
+    } );
+
+  },
+}
diff --git a/web/easyUI_Demo_Learning/front/page/basic_CRUDapplication.html b/web/easyUI_Demo_Learning/front/page/basic_CRUDapplication.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="stylesheet" type="text/css" href="../resourse/easyui/themes/default/easyui.css">
+  <link rel="stylesheet" type="text/css" href="../resourse/easyui/themes/icon.css">
+  <style type="text/css">
+    #fm{
+      margin:0;
+      padding:10px 30px;
+    }
+    .ftitle{
+      font-size:14px;
+      font-weight:bold;
+      color:#666;
+      padding:5px 0;
+      margin-bottom:10px;
+      border-bottom:1px solid #ccc;
+    }
+    .fitem{
+      margin-bottom:5px;
+    }
+    .fitem label{
+      display:inline-block;
+      width:80px;
+    }
+  </style>
+  <script type="text/javascript" src="../resourse/easyui/jquery.min.js"></script>
+  <script type="text/javascript" src="../resourse/easyui/jquery.easyui.min.js"></script>
+  <title></title>
+</head>
+<body>
+  <table id="dg" title="my users" class="easyui-datagrid" style="width:700px;height:250px" toolbar="#toobar"
+    url="http://localhost:8888/test" rownumbers="true" fitColumns="true" singleSelect="true">
+    <thead>
+      <tr>
+        <th field="name" width="50">Name</th>
+        <th field="age" width="50">Age</th>
+      </tr>
+    </thead>
+
+  </table>
+  <div id="toolbar">
+    <a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="true" onclick="newUser()">New User</a>
+    <a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="true" onclick="editUser()">Edit User</a>
+    <a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="true" onclick="destroyUser()">Remove User</a>
+  </div>
+  <div id="dlg" class="easyui-dialog" style="width:400px;height:200px;padding:10px 20px" closed="true" buttons="#dlg-buttons">
+    <div class="ftitle">User Information</div>
+    <form id="fm" method="post">
+     <div class="fitem">
+       <label>Name</label>
+        <input name="name" class="easyui-validatebox" required="true">
+     </div>
+     <div class="fitem">
+        <label>Age&nbsp</label>
+        <input name="age" class="easyui-validatebox" required="true">
+     </div>
+    </form>
+  </div>  
+  <div id="dlg-buttons">
+   <a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">save</a>
+   <a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="javascript:$('#dlg').dialog('close')">cancel</a>
+  </div>
+  <script src="../js/basic_CRUDapplication_js.js" type="text/javascript"></script>
+</body>
+</html>