zoukankan html css js c++ java

项目准备(view)

管理员登陆界面-manage-admin

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta name="robots" content="noindex,nofollow">
  7     <meta name="description" content="Description">
  8     <meta name="keywords" content="keyword, keyword, keyword">
  9     
 10     <title><?php echo $this->get_var('title')?></title>
 11 
 12     <link href="/css/bootstrap.css" rel="stylesheet">
 13     <!--  <link href="/css/bootstrap-theme.css" rel="stylesheet">-->
 14     <link href="/css/style.css" rel="stylesheet">
 15 
 16     <script src="/js/jquery.js"></script>
 17     <script src="/js/bootstrap.js"></script>
 18     <script src="/plugins/layer/layer.min.js"></script>
 19     <!--  <script src="/js/core.js"></script>-->
 20     <script src="/js/custom.js"></script>
 21     <script type="text/javascript">
 22     function logout(){
 23         if (confirm("退出确认？"))
 24         window.location = '<?php echo Server::getRootURL().'logout';?>';
 25         return false;
 26     }
 27     $(document).ready(function() {
 28         $.post("/user/userMessage",    //若是管理员则获取apply的个数
 29                 function (data){
 30                 //alert("hello");
 31                     if(data>0){
 32                             $("#applynum").append(data);
 33                     }
 34                     else{
 35                         $("#applynum").append("0");
 36                     }
 37                 },
 38                 "json");
 39         
 40     });
 41     </script>
 42     
 43 </head>
 44 <body>
 45     <header class="container">
 46         <div class="row">
 47             <div class="col-md-6"><h1>互联网离线学习系统</h1></div>
 48             <div class="col-md-6">
 49                 <ul class="nav nav-pills pull-right">
 50                     <li class="active"><a href="#"><i class="icon-home icon-black"></i> 首页</a></li>
 51                     <li><a href="#"><i class="icon-envelope icon-black"></i> 
 52                         <?php session_start();
 53                                     if(isset($_SESSION['user_name'])){
 54                                         $user_name="<span>".$_SESSION['user_name']."</span>";
 55                                     }else{
 56                                         $user_name="<span>未登录</span>";
 57                                     }
 58                                     echo $user_name;
 59                         ?></a></li>
 60                     <li><a href="#"><i class="icon-envelope icon-black"></i>管理员</a></li>
 61                     <li><a id="message" href="/view/apply"><i class="icon-envelope icon-black"></i> 消息 <span class="badge badge-info" id="applynum"></span></a></li>
 62                     <li><a href="#" onClick="logout()"><i class="icon-off icon-black"></i> 退出系统</a></li>
 63                 </ul>
 64             </div>
 65         </div>
 66     </header>
 67     
 68     <div class="navbar navbar-inverse wm-navbar">
 69         <div class="container">
 70         <div class="navbar-header">
 71             <a class="navbar-brand" href="#">
 72             Internet Protocal Recognition Offline Learning System
 73             </a>
 74         </div>
 75         </div>
 76     </div>
 77     <div class="container wm-container">
 78         <div class="row">
 79             <div class="col-md-3" >
 80                 <div class="sidebar" style="display:block;">
 81                     <ul class="nav sidebar-nav">
 82                         <li class="nav-title">系统功能</li>
 83                         <li>
 84                             <a href="#">
 85                             <i class="glyphicon glyphicon-stats"></i> 集群管理
 86                             <span class="caret pull-right"></span>
 87                             </a>
 88                             <ul class="nav">
 89                                 <li class="navitem"><a href="/view/systemControl">系统启动控制</a></li>
 90                                 <li class="navitem"><a href="/view/nameNodeState">NameNode查询</a></li>
 91                                 <li class="navitem"><a href="/view/jobTrackerState">JobTracker查询</a></li>
 92                             </ul>
 93                         </li>
 94                         <li><a href="#"><i class="glyphicon glyphicon-list"></i> 任务管理
 95                             <span class="caret pull-right"></span>
 96                             </a>
 97                             <ul class="nav">
 98                                 <li class="navitem"><a href="/view/fileManage">HDFS管理</a></li>
 99                                 <li class="navitem"><a href="/view/detectionManage">新建任务</a></li>
100                             </ul>
101                         </li>
102                         <li><a href="#"><i class="glyphicon glyphicon-cog"></i> 用户管理
103                             <span class="caret pull-right"></span>
104                             </a>
105                             <ul class="nav">
106                                 <li class="navitem"><a href="/view/userInfo">个人信息</a></li>
107                                 <li class="navitem"><a href="/view/password">修改密码</a></li>
108                                 <li class="navitem"><a href="/view/apply">用户管理</a></li>
109                             </ul>
110                         </li>
111                         <li><a href="#"><i class="glyphicon glyphicon-thumbs-up"></i> 帮助信息
112                             <span class="caret pull-right"></span>
113                             </a>
114                             <ul class="nav">
115                                 <li class="navitem"><a href="/view/introduction" target="nav-content">系统介绍</a></li>
116                                 <li class="navitem"><a href="/view/connect" target="nav-content">联系我们</a></li>
117                             </ul>
118                         </li>
119                     </ul>
120                 </div>
121             </div>
122             <div class="preview-iframe" id="nav-content" >
123                 <section>
124                     Comming soon.
125                 </section>
126             </div>
127         </div>
128     
129     </div>
130     <!--<footer class="center-block text-center">
131         <hr>
132         <p><small>Firefox 4/Chrome 10/Safari 5/Opera 11 or higher version, with 1024x768 or higher resolution for best views.<br>Copyright &copy; 2012 by BUPT-DMTeam.All rights reserved </small></p>
133     </footer>  -->
134 </body>
135 </html>

用户注册页面

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 <head>
  4 <meta charset="UTF-8">
  5 <meta name="viewport" content="width=device-width,initial-scale=1.0">
  6 <!-- Bootstrap -->
  7 <link rel="stylesheet" href="/css/bootstrap.css">
  8 <link rel="stylesheet" href="/css/style.css">
  9 <style>
 10             
 11 body{font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","WenQuanYi Micro Hei",sans-serif;}
 12 h1, .h1, h2, .h2, h3, .h3, h4, .h4, .lead {font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Helvetica Neue",Helvetica,Arial,"Hiragino Sans GB","Hiragino Sans GB W3","Microsoft YaHei UI","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;}
 13 pre code { background: transparent; }
 14 @media (min- 768px) {
 15     .bs-docs-home .bs-social, 
 16     .bs-docs-home .bs-masthead-links {
 17       margin-left: 0;
 18     }
 19 }
 20 
 21 .bs-docs-section p {
 22     line-height: 2;
 23 }
 24 
 25 .bs-docs-section p.lead {
 26     line-height: 1.4;
 27 }
 28 
 29 
 30             
 31     </style>
 32 <title><?php echo $this->get_var('title');?></title>
 33     
 34 <script src="/js/jquery.js"></script>
 35 <script src="/js/bootstrap.js"></script>
 36 
 37 <script type="text/javascript">
 38 
 39 //判断用户输入的用户名是否可用
 40 function checkUsername(){
 41     if($("#user_name").val()!=""){
 42            $.post("/user/serviceUserNameCheck", 
 43                 { memberid:$("#user_name").val()},
 44                 function (data, textStatus){
 45                     if(data.isMemberIdUsed==true){
 46                         $("#user_name").addClass("ok");
 47                     }else{
 48                         $("#user_name").removeClass("ok");
 49                     }
 50                 }, 
 51                 "json");
 52     }
 53 }
 54 
 55 //检查用户的密码是否合法，目前密码的唯一要求就是不能为空
 56 function checkPassword(){
 57     var password=$("#password").val();
 58        if(password==""){
 59               $("#password").removeClass("ok");
 60        }
 61        else{
 62            $("#password").addClass("ok");
 63     }
 64 }
 65 
 66 function checkRePassword(){
 67     var password=$("#password").val();
 68     var rePassword=$("#repassword").val();
 69     if(rePassword==""){
 70         $("#repassword").removeClass("ok");
 71     }
 72     else{
 73         if(password!=rePassword){
 74             $("#repassword").removeClass("ok");
 75         }
 76         else{
 77             $("#repassword").addClass("ok");
 78         }
 79     }
 80 }
 81 
 82 function checkSubmit(){
 83     var username=false;
 84     var password=false;
 85     var repassword=false;
 86     var agree=document.getElementById("agree").checked;
 87 
 88     if($("#user_name").hasClass("ok") && ($("#user_name").val()!="")){
 89         username=true;
 90     }
 91     if($("#password").hasClass("ok")){
 92         password=true;
 93     }
 94     if($("#repassword").hasClass("ok")){
 95         repassword=true;
 96     }
 97     if(username && password && repassword && agree){
 98         $("#formRegist").submit();
 99     }
100 }
101 </script>
102 </head>
103 <body>
104     <div class="navbar navbar-inverse navbar-static-top header" >
105         <div class="container">
106             <div class="navbar-header">
107                 <a class="navbar-brand" href="#"><?php echo $this->get_var('logo_text');?></a>
108             </div>
109             <div class="collapse navbar-collapse">
110             <ul class="nav navbar-nav">
111                 <li class="active"><a href="#">首页</a></li>
112                 <li><a class="#">关于我们</a></li>
113                 <li><a href="#">联系我们</a></li>
114             </ul>
115             </div>
116         </div>
117     </div>
118     <div class="container">
119             <div class="wm-register-box well m-well center-block">
120                 <div class="panel-heading">
121                     <div class="panel-title">新用户注册</div>
122 
123                 </div>
124                 <div class="panel-body">
125                     <form class="form-horizontal" id="formRegist" role="form" action="/user/serviceRegister" method="post">
126                         <div class="form-group">
127                             <label for="user_name" class="col-md-2 control-panel">
128                                 用户名:
129                             </label>
130                         <div class="col-md-10">
131                             <input type="text" class="form-control" id="user_name" name="user_name" placeholder="请输入用户名" onblur="checkUsername()">
132                         </div>
133                         </div>
134                         <div class="form-group">
135                             <label for="password" class="col-md-2 control-panel">
136                                 密码:
137                             </label>
138                             <div class="col-md-10">
139                                 <input type="password" class="form-control" id="password" name="password" placeholder="密码" onblur="checkPassword()">
140                                     <p class="help-block">
141                                         最少6个字符 (只允许数字字母)
142                                     </p>
143                             </div>
144                         </div>
145                         <div class="form-group">
146                             <label for="repassword" class="col-md-2 control-panel">
147                                 确认密码:
148                             </label>
149                             <div class="col-md-10">
150                                 <input type="password" class="form-control" id="repassword" name="repassword" placeholder="请再次输入密码" onblur="checkRePassword()">
151                             </div>
152                         </div>
153                         <div class="form-group">
154                             <label for="emailaddress" class="col-md-2 control-panel">
155                                 邮箱地址:
156                             </label>
157                             <div class="col-md-10">
158                                 <input type="email" class="form-control" id="emailaddress" name="email" placeholder="邮箱地址">
159                                     <p class="help-block">
160                                         例如: yourname@domain.com
161                                     </p>
162                             </div>
163                         </div>
164         
165         
166                         <div class="form-group">
167                             <label for="role" class="col-md-2 control-panel">
168                                 用户角色:
169                             </label>
170                             <div class="col-md-10">
171                                 <label class="radio">
172                                     <input type="radio" name="role" id="role" value="normal" checked>
173                                         普通用户
174                                 </label>
175                                 <label class="radio">
176                                     <input type="radio" name="role" id="role" value="admin">
177                                         管理员用户
178                                 </label>
179                             </div>
180                         </div>
181         
182                         <div class="form-group">
183                             <label for="describe" class="col-md-2 control-panel">
184                                 备注:
185                             </label>
186                             <div class="col-md-10">
187                                 <textarea class="form-control" id="comment" name="comment" ></textarea>
188                             </div>
189                         </div>
190         
191                         <div class="checkbox">
192                             <div class="col-md-2 control-panel">
193                             </div>
194                             <div class="col-md-10">
195                                 <label>
196                                     <input type="checkbox" id="agree">
197                                         同意使用协议和所有条款
198                                 </label>
199                             </div>
200                         </div>
201         
202                         <div class="row">
203                             <div class="col-md-2 control-panel">
204                             </div>
205                             <div class="col-md-2">
206                                 <button type="button" class="btn btn-info" id="submitRegist" onClick="checkSubmit()">
207                                     提交注册
208                                 </button>
209                             </div>
210                         </div>
211                 </form>
212             </div>
213         </div>
214     </div>
215 </body>
216 </html>

查看用户信息界面user_info

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex,nofollow">
    <meta name="description" content="Description">
    <meta name="keywords" content="keyword, keyword, keyword">
    <title><?php echo $this->get_var('title')?></title>

    <link href="/css/bootstrap.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/jquery.form.js"></script>
    
    <script type="text/javascript">
    // onsubmit="return alertUser();"
        function alertUser(){
            // jquery 表单提交
            $("#refreshForm").ajaxSubmit(function(data) {
                  // 对于表单提交成功后处理，message为提交页面operation.htm的返回内容
                var obj = eval ("(" + data + ")");      
                if(obj.retval==true){
                    $("#success-confirm").show();
                }else{
                    $("#fail-confirm").show();
                }
               });
            return false; // 必须返回false，否则表单会自己再做一次提交操作，并且页面跳转
        }
    
    $(document).ready(function(){
        $("#success-confirm").hide();
        $("#fail-confirm").hide();
        $.ajax({
            url:'/user/getUserInfo',
            type:'POST',
            success:function(data){
                var obj = eval ("(" + data + ")");      
                $("#name").val(obj.name);
                $("#role").val(obj.role);
                $("#email").val(obj.email);
                $("#comment").val(obj.comment);
            }
        });
    });
    
    </script>
    
</head>
    <body>
    <div id="subContent">
        <div class="row col-md-12">
        <div>
            <ul class="breadcrumb">
                        <li><a href="#">系统功能</a> <span class="divider"></span></li>
                        <li><a href="#">用户管理</a> <span class="divider"></span></li>
                        <li class="active">个人信息</li>
            </ul>
        </div>

        <div class="alert alert-success" id="success-confirm">
            <strong>更新成功：</strong>用户数据已经更新
            <button type="button" class="close" data-dismiss="alert">×</button>
        </div>
        
        <div class="alert alert-success" id="fail-confirm">
            <strong>更新失败：</strong>用户数据更新失败
            <button type="button" class="close" data-dismiss="alert">×</button>
        </div>
        
            <div class="well center-block">
            
            <form class="form-horizontal" role="form">    
                <div class="form-group">
                    
                    <label for="name" class="col-sm-2 control-label">用户名:</label>
                    <div class="col-sm-10"><input type="text" class="form-control" id="name"></div>
                    
                </div>
                
                <div class="form-group">
                        <label for="role" class="col-sm-2 control-label">用户权限:</label>
                        
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="role">
                    </div>
                </div>
            </form>
                    
            <form class="form-horizontal" id="refreshForm" action="/user/userBasicInfoUpdate" 
                    method="post" onsubmit="return alertUser();">        
                <div class="form-group">
                    <label for="email" class="col-sm-2 control-label">邮箱:</label>
                        
                    <div class="col-md-10">
                        <input type="email" class="form-control" id="email" name="email">
                    </div>
                </div>
                
                <div class="form-group">
                    <label for="comment" class="col-md-2 control-label">
                        描述:
                    </label>
                    <div class="col-md-10">
                        <textarea class="form-control" id="comment" name="comment"></textarea>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-2 control-label">
                    </div>
                    <div class="col-md-10">
                        <button type="submit" class="btn btn-success pull-right">
                            更新信息
                        </button>
                    </div>
                </div>
            </form>
            </div>
        </div>
    </div>
</body>
</html>

文件管理file_manage

<!DOCTYPE html>
<html lang="zh-cn">
<html>
<HEAD>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex,nofollow">
    <meta name="description" content="Description">
    <meta name="keywords" content="keyword, keyword, keyword">
    <title>互联网离线学习系统</title>

    <link href="/css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
    <link rel="stylesheet" href="/plugins/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>    

    
    <script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.core-3.5.js"></script>
    <script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.excheck-3.5.js"></script>
    <script type="text/javascript" src="/plugins/zTree_v3/js/jquery.ztree.exedit-3.5.js"></script>
        
    <SCRIPT type="text/javascript">
    //global var
    var uploadType="uploadMethod";
    //normal js        
    function showConfiguration(str){
        if(str=="upload"){
            document.getElementById("uploadMethod").style.display="block";
            document.getElementById("browseMethod").style.display="none";
            uploadType="uploadMethod";
        }else{
            document.getElementById("uploadMethod").style.display="none";
            document.getElementById("browseMethod").style.display="block";
            uploadType="browseMethod";
        }
        }
    
    

        //ztree 
        var setting = {
            async: {
                enable: true,
                url:"/file/getNodes",
                autoParam:["id", "name", "location"],
                otherParam:{"otherParam":"zTreeAsyncTest"},
                dataFilter: filter
            },
            view: {
                expandSpeed:"fast", //zTree 节点展开、折叠时的动画速度,设置为 "" 时，不显示动画效果
                addHoverDom: addHoverDom, //用于当鼠标移动到节点上时，显示用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
                removeHoverDom: removeHoverDom, //用于当鼠标移出节点时，隐藏用户自定义控件，显示隐藏状态同 zTree 内部的编辑、删除按钮
                selectedMulti: false, //不许同时选中多个节点
                dblClickExpand: false
            },
            check: {
                enable: false
            },
            edit: {
            enable: true,
                    editNameSelectAll: true,
                    showRemoveBtn:true,
                    ShowRenameBtn:true,
                    removeTitle: "删除",
                    renameTitle: "编辑"
            },
            data: {
                keep:{
                    leaf:true,
                    parent:true
                },
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: zTreeBeforeDrag, //禁止拖动
                beforeRemove: beforeRemove,
                beforeRename: beforeRename,
                onRemove:onRemove,
                onRename:onRename,
                onRightClick:OnRightClick
            }
        };

        var urlStrOption ="";//对于树节点的增删改操作ajax异步处理的url地址
            var params="";       //ajax异步处理需要传入到服务端的数据
            var oldName="";      //保存当前节点编辑以前的名称
              
        function filter(treeId, parentNode, childNodes) {
            if (!childNodes) return null;
            return childNodes;
        }
        
        function zTreeBeforeDrag(treeId, treeNodes) {
            return false;
        };

        function beforeRemove(treeId, treeNode) {
            
            zTree.selectNode(treeNode); //选中指定节点,单选，无返回值
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");                        
        }
        function onRemove(event,treeId, treeNode){
            urlStrOption='/file/remove';
            var params="location="+treeNode.location;
            var message=zTreeOption(urlStrOption,params);
            if(message==="success"){
                //var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                   //zTree.addNodes(treeNode, {id:treeNode.id, pId:treeNode.pId, name:treeNode.name, location:treeNode.location});
                alert("删除成功");
            }else{
                alert("删除失败");            
            }        
        }
        
        function beforeRename(treeId, treeNode, newName) {
            oldName=treeNode.name;
            if (newName.length == 0) {
                alert("节点名称不能为空.");
                return false;
            }
            return true;
        }
         function onRename(event, treeId, treeNode) {
             if(treeNode.name!=oldName){
                 urlStrOption = '/file/rename';
                 var params = "location="+treeNode.location+"&newName="+treeNode.name+"&oldName="+oldName;
                 var message=zTreeOption(urlStrOption,params);
                 if(message==="success"){
                        alert("重命名成功");
                    }else{
                        alert("重命名失败");
                        treeNode.name=oldName;
                    }
             }
         }
        
        
        //下面是添加新建按钮
        function addHoverDom(treeId, treeNode) {
            if(!treeNode.isParent)
                return;
            var sObj = $("#" + treeNode.tId + "_span");
            
        
            if ($("#addBtn_"+treeNode.id).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.id
            + "' title='新建' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.id);
            //下面是新增文件功能
            if (btn) btn.bind("click", function(){
            var newDirName=window.prompt("输入新文件夹的名字");
        
            var len=treeNode.children.length;
            var newChildId=treeNode.id+len;
            var location=treeNode.location+"/"+newDirName;
            var validLoc=location.replace(/(//)/g,"/");
            zTree.addNodes(treeNode, {id:newChildId, pId:treeNode.id, name:newDirName,location:validLoc,isParent:true});
            var addUrl="/file/addNode";
            var params={dirname:validLoc};
            var state=zTreeOption(addUrl,$.param(params));
            
            if(state=="success")
                alert("新建成功");
            else
                alert("新建失败");
            });
        };        
        
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.id).unbind().remove(); //remove() 方法移除被选元素，包括所有文本和子节点
        };
        
        function zTreeOption(doUrl, backParams){
        var tempdata ;
        $.ajax({
        async: false,
        url: doUrl,
        type: 'post',
        dataType: 'text',
        data: backParams,
        success: function(data) {
           tempdata = data;
        }
        });
            return tempdata;
        }
        //下面是右键菜单的函数
        
        function OnRightClick(event, treeId, treeNode) {
            if (!treeNode && event.target.tagName.toLowerCase() != "button" && $(event.target).parents("a").length == 0) {
                zTree.cancelSelectedNode();
                //showRMenu("root", event.clientX, event.clientY);
            } else if (treeNode) {
                zTree.selectNode(treeNode);
                if(treeNode.isParent)
                    //showRMenu("Dirnode", event.clientX, event.clientY);
                    showRMenu("Dirnode",event.clientX,event.clientY);
                else{
                    //showRMenu("node", event.clientX, event.clientY);    
                    showRMenu("node",event.clientX,event.clientY);            
                    }
            }
        }

        function showRMenu(type, x, y) {
            $("#rMenu").show();
            if (type=="root") {
                $("#m_refresh").hide();
                $("#m_upload").hide();
                $("#m_download").hide();
            } else if(type=="Dirnode"){
                $("#m_refresh").show();
                $("#m_upload").show();
                $("#m_download").show();
            }else{
                $("#m_refresh").hide();
                $("#m_upload").hide();
                $("#m_download").show();
            }
            rMenu.css({"position":"fixed","top":y+"px", "left":x+"px", "visibility":"visible"});

            $("body").bind("mousedown", onBodyMouseDown);
        }
        function hideRMenu() {
            if (rMenu) rMenu.css({"visibility": "hidden"});
            $("body").unbind("mousedown", onBodyMouseDown);
        }
        function onBodyMouseDown(event){
            if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length>0)) {
                rMenu.css({"visibility" : "hidden"});
            }
        }
        function refreshTreeNode(){
            hideRMenu();
            var nodes = zTree.getSelectedNodes();
            zTree.reAsyncChildNodes(nodes[0],"refresh");
        }
        function uploadToTreeNode(){
            hideRMenu();
            var pathFrom=window.prompt("输入想要上传的文件目录或者文件名：");
            if(!pathFrom||pathFrom=="")
            {
                $("#log").html($("#log").html()+"请先输入本地上传文件路径（目录路径）！<br>");
                return;
            }
            var nodes=zTree.getSelectedNodes();
            if(nodes.length==0)
            {
                $("#log").html($("#log").html()+"请选择上传目的地址！<br>");
                return;
            }
            var pathTo=nodes[0].location;
            var isDir=nodes[0].isParent;
            if(isDir&&pathTo){
            $("#log").html("已准备就绪...<br>源路径："+pathFrom+"<br>目的路径："+pathTo+"<br>开始上传...<br>");
            
            uploadFile(pathFrom, pathTo);
            }
        }
        function uploadFile(pathFrom, pathTo){
            $.post("/file/upload",{pathFrom:pathFrom,pathTo:pathTo},
                    function(data,textStatus){
                    data=JSON.parse(data);
                    if(data.isSuccess=="true")
                        $("#log").html($("#log").html()+"上传完毕！<br>");
                    else{
                         $("#log").html($("#log").html()+"上传失败！<br>"+data.msg);
                        
                        }                
                    });
        }
        function downloadFromTreeNode(){
            hideRMenu();
            var pathTo=window.prompt("输入本地目的文件夹或者文件名：");
            if(!pathTo||pathTo=="")
            {
                $("#log").html("请先输入本地目的文件路径（目录路径）！");
                return;
            }
            var nodes=zTree.getSelectedNodes();
            if(nodes.length==0)
            {
                $("#log").html("请先选择下载目的文件！");
                return;
            }
            var pathFrom=nodes[0].location;
            if(pathFrom){
            $("#log").html("已准备就绪...<br>源路径："+pathFrom+"<br>目的路径："+pathTo+"<br>开始下载...<br>");
            
            downloadFile(pathFrom, pathTo);    
            }
        }
        function downloadFile(pathFrom, pathTo){
            $.post("/file/download",{pathFrom:pathFrom,pathTo:pathTo},
            function(data,textStatus){
                if(data=="success")
                    $("#log").html($("#log").html()+"下载完毕！<br>");
                else
                        $("#log").html($("#log").html()+"下载失败！<br>");    
            });    
        }
        
        var zTree, rMenu;
        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting);
            zTree = $.fn.zTree.getZTreeObj("treeDemo");
            rMenu = $("#rMenu");
            
        });

    </SCRIPT>

    
    
</HEAD>

<BODY>
    <div class="row clearfix">
    <div class="col-md-12">
    <div>
        <ul class="breadcrumb">
            <li><a href="#">系统功能</a> <span class="divider"></span></li>
            <li><a href="#">任务管理</a> <span class="divider"></span></li>
            <li class="active">HDFS文件管理</li>
        </ul>
    </div>
    
    
<div class="content-box-small box-with-header">
     <div class="alert-head alert-info"><strong>文件系统</strong></div>
     <div class="file-system">
         <div id="treeDemo" class="ztree" ></div>
     </div>
</div>    
    
<div class="content-box-small box-with-header">
    <div class="alert-head alert-info"><strong>文件修改记录</strong></div>
    <div class="modify-info col-lg box-with-header">
        <div id="log"></div>
    </div>

</div>
</div>
</div>
<div  id="rMenu" class="list-group">
        <a id="m_refresh" class="list-group-item" href="#" onclick="refreshTreeNode();">刷新</a>
        <a id="m_upload" class="list-group-item" href="#" onclick="uploadToTreeNode();">上传</a>
        <a id="m_download" class="list-group-item" href="#" onclick="downloadFromTreeNode(true);">下载</a>
    
</div>    
    

</BODY>
</HTML>

显示申请用户界面-apply--动态显示table

  1 <!DOCTYPE html>
  2 <html lang="zh-cn">
  3 <head>
  4     <meta charset="utf-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta name="robots" content="noindex,nofollow">
  7     <meta name="description" content="Description">
  8     <meta name="keywords" content="keyword, keyword, keyword">
  9     <title><?php echo $this->get_var('title')?></title>
 10 
 11     <link href="/css/bootstrap.css" rel="stylesheet">
 12     <link href="/css/style.css" rel="stylesheet">
 13     <script src="/js/jquery.js"></script>
 14     <script src="/js/bootstrap.js"></script>
 15     <script src="/plugins/layer/layer.min.js"></script>
 16     
 17     <script type="text/javascript">
 18 
 19     var agreedUser = new Array();
 20 
 21 function agreeApply(){
 22     agreedUser=[];
 23     
 24     $('input:checkbox').each(function() {
 25             if($(this).prop('checked')){
 26                 //alert($(this).attr('value'));
 27                 agreedUser.push($(this).attr('value'));
 28         }
 29     });
 30 
 31     //提交给后台，添加新用户
 32     $.post("/user/agreeUserApply",   
 33             {names:agreedUser},
 34             function (data){
 35                 $.layer({
 36                     title: false,
 37                     time: 2,
 38                     shade: [0],
 39                     closeBtn: false,
 40                     dialog: {
 41                         type: 1,
 42                          msg:'操作成功'
 43                     },
 44                     end: function(){
 45                         $("#tbody").empty();
 46                         $.post("/user/applyUserInfo",    //若是管理员则获取apply的个数
 47                             function (data){
 48                                 //alert(data);
 49                                  var obj = eval ("(" + data + ")"); 
 50     
 51                                  for(var i=0; i<obj.length; i++) { 
 52                          //            alert(obj[i].name+" " + obj[i].role) 
 53                                     var check="<td><input type='checkbox' name='"+obj[i].name+"' id='user-apply' value='"+obj[i].name+"'></td>";
 54                                     var name="<td>"+obj[i].name+"</td>";
 55                                     var role="<td>"+obj[i].role+"</td>";
 56                                     var email="<td>"+obj[i].email+"</td>";
 57                                     var time="<td>"+obj[i].comment+"</td>";
 58                                     var user="<tr>"+check+name+role+email+time+"</tr>";
 59                                     $("#tbody").append(user);
 60                                  } 
 61                             },
 62                             "json");
 63                     }
 64                 });
 65              },
 66             "json");
 67  
 68 }
 69 
 70 
 71 
 72     function refuseApply(){
 73         refusedUser=[];
 74         
 75         $('input:checkbox').each(function() {
 76             if($(this).prop('checked')){
 77                 //refusedUser.push($(this).attr('value'));
 78                 refusedUser.push($(this).attr('value'));
 79             }
 80         });
 81         //alert(refusedUser);
 82         $.post("/user/refuseUserApply",   
 83                 {names:refusedUser},
 84                 function (data){
 85                     $.layer({
 86                         title: false,
 87                         time: 2,
 88                         shade: [0],
 89                         closeBtn: false,
 90                         dialog: {
 91                             type: 1,
 92                              msg:'操作成功'
 93                         },
 94                         end: function(){
 95                             $("#tbody").empty();
 96                             $.post("/user/applyUserInfo",    //若是管理员则获取apply的个数
 97                                 function (data){
 98                                     //alert(data);
 99                                      var obj = eval ("(" + data + ")"); 
100         
101                                      for(var i=0; i<obj.length; i++) { 
102                              //            alert(obj[i].name+" " + obj[i].role) 
103                                         var check="<td><input type='checkbox' name='"+obj[i].name+"' id='user-apply' value='"+obj[i].name+"'></td>";
104                                         var name="<td>"+obj[i].name+"</td>";
105                                         var role="<td>"+obj[i].role+"</td>";
106                                         var email="<td>"+obj[i].email+"</td>";
107                                         var time="<td>"+obj[i].comment+"</td>";
108                                         var user="<tr>"+check+name+role+email+time+"</tr>";
109                                         $("#tbody").append(user);
110                                      } 
111                                 },
112                                 "json");
113                         }
114                     });
115                 },
116         "json");
117     }
118 
119 
120     function selectOption(){
121         var test = document.getElementById("user-handle").checked;
122         
123         if(test){
124             $('input:checkbox').each(function() {
125                 $(this).prop('checked', true);
126             //    alert("stat "+$(this).prop('checked'));
127             });
128         }else{
129             $('input:checkbox').each(function() {
130                 $(this).prop('checked', false);
131             //    alert("stat "+$(this).prop('checked'));
132             });
133         }
134     }
135     
136     $(document).ready(function() {
137         
138         $.post("/user/applyUserInfo",    //若是管理员则获取apply的个数
139                 function (data){
140                     //alert(data);
141                      var obj = eval ("(" + data + ")"); 
142 
143                      for(var i=0; i<obj.length; i++) { 
144              //            alert(obj[i].name+" " + obj[i].role) 
145                         var check="<td><input type='checkbox' name='"+obj[i].name+"' id='user-apply' value='"+obj[i].name+"'></td>";
146                         var name="<td>"+obj[i].name+"</td>";
147                         var role="<td>"+obj[i].role+"</td>";
148                         var email="<td>"+obj[i].email+"</td>";
149                         var time="<td>"+obj[i].comment+"</td>";
150                         var user="<tr>"+check+name+role+email+time+"</tr>";
151                         $("#tbody").append(user);
152                      } 
153                 },
154                 "json");
155     });
156 
157 
158     </script>
159     
160 <body>
161 
162 <div id="subContent">
163     <div class="row col-md-12">
164     <div>
165         <ul class="breadcrumb">
166             <li><a href="#">系统功能</a> <span class="divider"></span></li>
167             <li><a href="#">任务管理</a> <span class="divider"></span></li>
168             <li class="active">HDFS文件管理</li>
169         </ul>
170     </div>
171     
172     <div class="well center-block">
173         
174             <table class="table table-bordered table-striped">
175                 <thead>
176                     <tr>
177                         <th><input type="checkbox" name="selectAll" id='user-handle' onClick="selectOption()"></th>
178                         <th>用户名</th>
179                         <th>申请角色</th>
180                         <th>邮箱</th>
181                         <th>备注</th>
182                     </tr>
183                     
184                 </thead>
185                 <tbody id="tbody">
186 
187                 </tbody>
188             </table>
189             
190             <div style="height:35px;">
191                     <span id="apply-handle" class="pull-right">
192                     <button class="btn btn-primary" type="button" onClick="agreeApply()"><i class="icon-random icon-white"></i> 同意申请</button>
193                     <button class="btn btn-danger" type="button" onClick="refuseApply()"><i class="icon-lock icon-white"></i> 拒绝申请</button>
194                     </span>
195             
196             </div>
197         
198     </div>
199     </div>
200 </div>
201 </body>
202 </html>

显示结果界面run

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="robots" content="noindex,nofollow">
    <meta name="description" content="Description">
    <meta name="keywords" content="keyword, keyword, keyword">
    <title>互联网离线学习系统</title>

    <link href="/css/bootstrap.css" rel="stylesheet" id="bootstrap-css">
    <link href="/css/style.css" rel="stylesheet">
    <script src="/js/jquery.js"></script>
    <script src="/js/bootstrap.js"></script>
    
    <script src="/plugins/Highcharts/js/highcharts.js"></script>
    <script src="/plugins/Highcharts/js/modules/exporting.js"></script>
    <script type="text/javascript">
    
    function charts(container, name, number,title) {
        $(container).highcharts({
            chart: {
                type: 'column',
             //   margin: [ 50, 50, 100, 80]
            },
            title: {
                text: title
            },
            xAxis: {
                categories: name,
                labels: {
                    align: 'right',
                    style: {
                        fontSize: '13px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            },
            yAxis: {
                min: 0,
                title: {
                    text: '条'
                }
            },
            legend: {
                enabled: false
            },
            tooltip: {
                formatter: function() {
                    return '<b>'+ this.x +'</b><br>'+
                        title +":"+ Highcharts.numberFormat(this.y, 1) +
                        ' 条';
                }
            },
            series: [{
                name: 'The websites',
                data: number,
                dataLabels: {
                    enabled: true,
                    rotation: -90,
                    color: '#FFFFFF',
                    align: 'right',
                    x: 4,
                    y: 10,
                    style: {
                        fontSize: '11px',
                        fontFamily: 'Verdana, sans-serif'
                    }
                }
            }]
        });
    }

    function zTreeOption(doUrl, backParams){
        var tempdata=false;
        $.ajax({
        async: false,
        url: doUrl,
        type: 'post',
        dataType: 'text',
        data: backParams,
        success: function(data) {
           tempdata = data;
        }
        });
        return tempdata;
    }

    function showSafeChart(){
        var url = "/detection/safeInfo";
        var message=zTreeOption(url); 
        var data = eval("(" + message + ")"); 
        
        var name=data.name;
        var number=data.number;
        var total = number[0] + number[1];

        $("#total").text(total);
        $("#safe").text(number[0]);
        $("#unsafe").text(number[1]);
        
        var chart1="#chart1";        
        charts(chart1, name, number, "检测结果");
    }

    function showUrlChart(){
        var url = "/detection/urlInfo";
        var message=zTreeOption(url); 

        var data = eval("(" + message + ")"); 
         
        var name=data.name;
        var number=data.number;
        var chart2="#chart2";

        var urlList = ["url1","url2","url3","url4","url5","url6","url7","url8","url9","url10"];


         for(var i=0; i<urlList.length; i++) { 
            var id="<td>"+urlList[i]+"</td>";
            var num="<td>"+number[i]+"</td>";
            var url="<td>"+name[i]+"</td>";
            var info="<tr>"+id+num+url+"</tr>";
            $("#urlBody").append(info);
         } 
        
        charts(chart2, urlList, number, "恶意网址");
    }
    
    function showResult(){
        $("#logContent").hide();
        $("#result").show();
        $("#safeInfo").show();

        showSafeChart();
    }

    function showDetails(){
        $("#safeInfo").hide();
        $("#urlInfo").show();
        showUrlChart();
    }
    
    $(document).ready(function(){

    //    $("#checkBtn").hide();
        $("#safeInfo").hide();
        $("#urlInfo").hide();
        $("#result").hide();
        
        //$("form#startdo").submit();
        /*websocket interface client*/
        var ws_proto = "<?php echo Loader::loadConfigs('system.conf','ws_proto');?>";
        var ws_hostaddr = "<?php $ws_host = Loader::loadConfigs('system.conf','ws_host');echo gethostbyname($ws_host);?>";
        var ws_port ="<?php echo Loader::loadConfigs('system.conf','ws_port');?>";
        var wsUri = ws_proto+ws_hostaddr+":"+ws_port;
        websocket = new WebSocket(wsUri);
        websocket.onopen = function(ev){
            $("#logContent>.panel-body").append("<p>submit task request!connected!<p>");
        };
        websocket.onmessage = function(ev){
            //alert(ev.data);
            //var test = prompt("nihaoma?");
            var msg = JSON.parse(ev.data);
            if(msg['status']=='connected'){
                websocket.send('start');
                }else if(msg['status']=='finished'){
                    $('#checkBtn').show();
                    }
            $('#logContent>.panel-body').append(msg['responseText']+'<br>');
        };
        websocket.onerror = function(ev){
            $('#logContent>.panel-body').append('Error occurred!-'+ev.data+'<br>');
        };
        websocket.onclosed = function(ev){
            $("#logContent>.panel-body").append('Connection closed!-'+ev.data+'<br>');
        };
        //for test
        //$('#checkBtn').show();

        
        
    });
    //detection/detect  http://localhost:50070
    </script>
</head>
<body>
<div>
<!--  
    <div>    
        <form id="startdo" name="startdo" action="/detection/detect" method="post"></form>
    </div>
-->
    <div class="row col-md-12">
    <div>
        <ul class="breadcrumb">
            <li><a href="#">系统功能</a> <span class="divider"></span></li>
            <li><a href="#">任务管理</a> <span class="divider"></span></li>
            <li class="active">新建任务</li>
        </ul>
    </div>
    <div id="logContent" class="panel panel-default">
          <div class="panel-heading">
            <h3 class="panel-title">检测日志信息</h3>
          </div>
          <div class="panel-body">
                
          </div>
          <input type="button" class="btn btn-success pull-right" value="查看结果" id="checkBtn" onClick="showResult()"></input>
    </div>    
      
      <div>
                <div id ="result" class="alert alert-info">
                  <strong>检测结果</strong>
              </div>

          <div id="safeInfo">    
              <table class="table table-bordered table-striped">

                <thead>
                    <th>检测数据总数（条）</th>                    
                    <th>安全数据数目（条）</th>    
                    <th>可疑数据数目（条）</th>    
                    <th>恶意URL排名</th>
                </thead>
                <tbody id="tbody">
                    <tr>
                        <td id="total"></td>
                        <td id="safe"></td>
                        <td id="unsafe"></td>
                        <td> <a href="#" onClick="showDetails()">点击查看详情</a></td>
                    </tr>
                </tbody>
            
              <div class="col-md-12">            
                  <table width="70%" height="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                    <td width="100%" height="400px"><div id="chart1" style="height:400px; 100%; float:center;text-align:center;">Chart1</div></td>
                    </tr>

                </table>
            </div>
    </div>
    
    <div id="urlInfo">
        <table id = "urlTable" class="table table-bordered table-striped">
            <thead>
                <th>URL标号</th>                    
                <th>发送可疑数据数目</th>    
                <th>URL全名</th>    
            </thead>
            <tbody id="urlBody">
            </tbody>
        </table>
        
              <div class="col-md-12">            
                  <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr><td width="100%" height="400px"><div id="chart2" style="height:400px; 100%; float:center;text-algin:center;">chart2</div></td>
                    </tr>
                </table>
            </div>
    </div>
    
    </div>        
</div>
</body>
</html>

查看全文

相关阅读:
MapReduce原理
 《软件需求十步走》阅读笔记3
《软件需求十步走》阅读笔记2
《软件需求十步走》阅读笔记1
2017秋季阅读计划
 怎么做需求分析
 兴趣小组第一次
 第十天
 第九天
 对UC的分析（个人观点，多多包涵）

原文地址：https://www.cnblogs.com/hemi/p/4019984.html