layout: post
title: 实训项目2
date: 2020-12-22
author: XiaoJia849
categories:
- 开发部
tags:
- 后端
- js

项目实训已经结束，但是我觉得分享项目可能不太好，所以算了。
以下代码，基本上都是参考网络各位大佬的，但是因为时间有点久了，网上可参考的地方是在是五花八门，所以没有写参考部分。
因为没有系统学习js，但是写前端的时候这些功能又要用，所以以下代码只是能够保证可以使用。
这下面全是前端的东西，感觉放在后端这个Tag很奇怪，(￣▽￣)"

• 拖动组件
• 密码输入控制
• 增加和删除div
• 模态框的使用
• js实现打印

拖动组件

目标功能：鼠标拖动div1下的元素div_ele_1 拖动到div2内，同时向后端发送请求。这里是老师给我们的意见：在管理员更改学生分组时，可以采用拖动包含每个学生信息的一个div，拖动此div道另一个div实现学生分组信息的更改

代码样例

<div class="card shadow mb-4">                      
      <a href="#collapseteam1" class="" data-toggle="collapse"
          role="button" aria-expanded="true" aria-controls="collapseCardExample"
          data-parent="#accordion">
            <h6 class="">队伍名team1    </h6>
      </a>                           
      <div id="collapseteam1" class=""  ondrop="drop(event,this)"
            ondragover="allowDrop(event)">
                <div class="card-body" draggable="false" id="dragtargetTcap1"              ondragstart="dragStart(event)" style="">
                                           队长名(队长)
                 </div>
                            
                <div class="card-body" draggable="true" id="dragtargetTstu1"              ondragstart="dragStart(event)" style="">
                                           队员1姓名
                </div>
                <div class="card-body" draggable="true" id="dragtargetTstu2"              ondragstart="dragStart(event)" style="">
                                           队员2姓名
                </div>  
     </div>                           
</div>

  <script type="text/javascript">
        function dragStart(event) {//每次拖动时用Text记录被拖动的div的id名
            event.dataTransfer.setData("Text", event.target.id);
        }        
      $(function () {//设置id为collapseteam1的组件可以折叠
                $('collapseteam1').collapse({
                    toggle: false
                })
            });
        function allowDrop(event) {
            event.preventDefault();//一个div是默认不可放入新的元素的，这个解除了这个禁止
        }
        //要实现拖动，这里有两种类型的div,一种用于存放（容器），一种用于拖动
        //设置容器的id名包含队伍的队号
        //设置被拖动的组件的Id名包含学生的学号
      function drop(event, element) {
            event.preventDefault();
            var groupid=element.id;//获取容器的id
            var id = event.dataTransfer.getData("Text");//获取被拖动的组件的id
          
            var iid = id.toString();
            var dd=groupid.substring(8);//从中取出队伍号
            var sid = iid.substring(11);//从中取出学号

            var aa = "http://<%=request.getServerName()%>:<%=request.getServerPort()%>/RequestJoinT?sid="+sid+"&tid="+dd+"";
            //将请求发送给函数/RequestJoinT
            var div = document.getElementById(id);
            element.appendChild(div);//向容器内添加组件
            window.location.href = aa;//向后端发送请求    
        }

    </script>
    

密码输入控制

这个其实在网络上随处可见，我只是记录一下。当初需要完成这个功能的时候，我只是在网上搜了一下，然后就直接使用代码了，，，

<form action="" method="post">
        <p class="p_row">
                    <label  style="">原密码：</label>
                    <input placeholder="原密码" type="password" name="Opwd"
                                     value="" required="required" class="form-control" style="" />
        </p>
        <p class="p_row">
                  <label style="">新密码：</label>
                   <input placeholder="密码" type="password" name="Npwd"
                                id="password1" value="" required="required"
                                onfocus="showTips('span_password','长度不能小于6且不能大于14')"
                                onblur="checkPassword()" onkeyup="checkPassword()" class="form-control" style="" />
        </p>
        <span id="span_password"></span>
        <div class="item">
                    <p class="p_row">
                             <label  style="">重复输入：</label>
                            <input placeholder="重复密码" type="password"
                                    id="repsword1" value="" required="required"
                                    onblur="checkRePassword()" onkeyup="checkRePassword()" class="form-control" style=""/>
                    </p>
                    <span id="span_repassword"></span>
        </div>
        <div style="">
                    <input type="submit" class="" value="提交">
        </div>
</form>

function checkPassword(){
   //获取密码输入
   var uPass = document.getElementById("password1").value.trim();
   var span = document.getElementById("span_password");

    var pwdRegex = new RegExp('(?=.*[0-9])(?=.*[a-zA-Z]).{8,30}');

    if (!pwdRegex.test(uPass)) {
        span.innerHTML = "<font color='red' size='2'>您的密码复杂度太低（密码中必须包含字母、数字），请及时修改密码！</font>";
        return false;
    }

   //对密码输入进行校验
   if(uPass.length == 0){
       span.innerHTML = "<font color='red' size='2'>不能为空</font>";
       return false;
   }else if(uPass.length < 6 && uPass.length > 0){
       span.innerHTML = "<font color='red' size='2'>密码太短</font>";
       return false;
   }
   else if (uPass.length >14){
       span.innerHTML = "<font color='red' size='2'>密码太长</font>";
       return false;
   }
   else{
       span.innerHTML = "<font color='green' size='2'>密码可用</font>";
       return true;
   }
}


function checkRePassword(){
   //获取密码输入
   var uPass = document.getElementById("password1").value.trim();
   //获取确认密码输入
   var uRePass = document.getElementById("repsword1").value.trim();
   var span = document.getElementById("span_repassword");
   //对密码输入进行校验
   if(uPass != uRePass){
       span.innerHTML = "<font color='red' size='2'>两次密码不一致</font>";
       return false;
   }else{
       span.innerHTML = "";
       return true;
   }
}

增加和删除div

               <form id="form" role="form" method="post" class="custom-control"
                      action="Teapro">
                    <div>
                        <h2 align="left">题目信息填写</h2>
                    </div>
                    <div class="form-group" id="details">

                        <div class="form-inline">
                            <label>题目名称</label>
                            <textarea rows="1" cols="49" class="form-control" id="textarea1"
                                      name="Pname" placeholder="" required="required"></textarea>
                        </div>

                        <p>

                        </p>
                        <div class="form-inline" id="ddd">
                            <label id="ee">题目简介</label>
                            <textarea rows="4" cols="49" class="form-control" id="textarea"
                                      name="Pcontent" placeholder="" required="required"></textarea>

                        </div>

                    </div>

                </form>
                <div class="form-inline" style="margin: 0 auto; width: 20em;">

                    <button type="button" id="add-btn" class="btn btn-secondary"
                            style=""
                            onclick="add_div()">+添加题目
                    </button>
                </div>

                <div style="margin-bottom:1em;margin-left:5px;">
                    <input id="button" type="button" class="btn btn-primary"
                           style="width: 10em;" action=""
                           value="提 交" onclick="tijiao()"/>

                </div>
                

           function tijiao() {
                //document.getElementById("from").submit();
                $("#form").submit();
            }

            var info_div = 1;

            function add_div() {
                debugger;
                var e = document.getElementById("details");
                var div = document.createElement("div");
                div.className = "form-group";
                div.id = "details" + info_div;
                div.innerHTML = e.innerHTML;
                var del = document.createElement('div');
                del.innerHTML = '<button type="button" class="btn btn-secondary" style="margin-left:2em;position: relative;margin-top:4%;" id="del-btn"'
                    + info_div + ' ' +
                    '' + '" onclick="del_div(this.id)">删除</button>';
                div.children.ddd.appendChild(del);
                document.getElementById("form").appendChild(div);
                info_div++;
            }

            function del_div(eleId) {
                debugger;
                var eeid = document.getElementById(eleId).parentNode.parentNode.parentNode.id;
                var ee = document.getElementById(eeid);
                document.getElementById("form").removeChild(ee);
            }
        </script>

这里的textarea做了根据输入行数改变自动增加行数的js，我这里直接贴代码吧

<script>
            //code from http://caibaojian.com/textarea-autoheight.html
            function makeExpandingArea(el) {
                var timer = null;
                //由于ie8有溢出堆栈问题，故调整了这里
                var setStyle = function (el, auto) {
                    if (auto) el.style.height = 'auto';
                    el.style.height = el.scrollHeight + 'px';
                }
                var delayedResize = function (el) {
                    if (timer) {
                        clearTimeout(timer);
                        timer = null;
                    }
                    timer = setTimeout(function () {
                        setStyle(el)
                    }, 200);
                }
                if (el.addEventListener) {
                    el.addEventListener('input', function () {
                        setStyle(el, 1);
                    }, false);
                    setStyle(el)
                } else if (el.attachEvent) {
                    el.attachEvent('onpropertychange', function () {
                        setStyle(el)
                    })
                    setStyle(el)
                }
                if (window.VBArray && window.addEventListener) { //IE9
                    el.attachEvent("onkeydown", function () {
                        var key = window.event.keyCode;
                        if (key == 8 || key == 46) delayedResize(el);

                    });
                    el.attachEvent("oncut", function () {
                        delayedResize(el);
                    }); //处理粘贴
                }
            }

            var textarea = document.getElementById('textarea');
            makeExpandingArea(textarea);
            var textarea1 = document.getElementById('textarea1');
            makeExpandingArea(textarea1);
        </script>

模态框的使用

其实很简单，因为bootstrap都已经把一切都做好了，只需要把名字换一下就行了

  <a class="btn btn-primary " href="#" data-toggle="modal" data-target="#logoutModal">
                                <img src="image/del2.png" width="20px" height="20px">
                                解散队伍
                            </a>

                        <div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
                             aria-hidden="true">
                            <div class="modal-dialog" role="document">
                                <div class="modal-content">
                                    <div class="modal-header">
                                        <h5 class="modal-title" id="exampleModalLabel2">确定解散该队伍？</h5>
                                        <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                                            <span aria-hidden="true">×</span>
                                        </button>
                                    </div>
                                    <div class="modal-footer">
                                        <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                                        <a class="btn btn-primary" href="/DismissTeam">确定</a>
                                    </div>
                                </div>
                            </div>
                        </div>

js实现打印

    <div id="div_print">
                   需要打印的内容
                   
     </div>
     <div id="b4">
           <input name="b_print" type="button" class="btn btn-primary"
                           onClick="printdiv('div_print');" value="打印">
      </div>

<script language="javascript">
        function printdiv(printpage) {
            var headstr = "<html><head><title></title></head><body>";
            var footstr = "</body>";
            var newstr = document.all.item(printpage).innerHTML;
            var oldstr = document.body.innerHTML;
            document.body.innerHTML = headstr + newstr + footstr;
            window.print();
            document.body.innerHTML = oldstr;
            return false;
        }

        function loadCSS() {
            if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|wOSBrowser|BrowserNG|WebOS)/i))) {
                document.write('<link href="css/phone.css" rel="stylesheet" type="text/css" media="screen" />');
            } else {
                document.write('<link href="css/Adgrade.css" rel="stylesheet" type="text/css" media="screen" />');
            }
        }

        loadCSS();
    </script>