利用原生JS写学生信息收集系统模板--JS部分

;(function(){

class Student{
    constructor(num){
      this.oinsert=document.getElementById("insert");
      this.osend=document.getElementById("send");
      this.oname=document.getElementById("name");
      this.osex=document.getElementById("sex");
      this.oage=document.getElementById("age");
      this.otbody=document.getElementById("tbody");
      // 这个节点就是页面下页码的ul
      this.oyema=document.getElementById("yema");
      this.openurl="http://localhost/xueshengxinxi/open.php"
      this.inserturl="http://localhost/xueshengxinxi/insert.php";
      this.updateurl="http://localhost/xueshengxinxi/update.php";
      this.deleteurl="http://localhost/xueshengxinxi/delete.php";
      //表示一页最多可以放几条数据，可以改为传参的形式（这个无所谓）
      this.num=num;
      //表示当前的页，初始时当前也设置为第一页
      this.index=1;
      //先备份因为下面又有新的函数出现this的指向会发生改变
      var self=this;
      // 打开页面时先请求数据库获取数据，获取到以后渲染页面内容以及下方页码，再绑定一系列事件（顺序很重要）
      myajax.post(this.openurl,{},function(res){
        // console.log(res);
        self.json=JSON.parse(res);
        self.page();
        self.render();
        self.bindEvent();
      })
      
    }
    // bindEvent就是绑定一系列事件
    bindEvent(){
      var self=this;
      //坑1：点击事件中套嵌点击事件会重复给第二个事件绑定多个监听（这是一个坑，比如刚开始写的时候添加按钮的点击事件里再绑定一个发送增加数据的点击事件，如果不在每次结束的时候把发送增加数据的点击事件移除，第二次点击添加事件触发发送增加数据事件时会发送二次增加数据请求，因为这时发送按钮身上有2个增加数据的请求事件，同理第三次点击时则会发送三次）
      //这是给发送按钮绑定点击事件，我是根据点击不同的按钮会弹出发送框这一不同点来区分到底是增加数据请求还是修改数据请求，这样就会发生点击事件里套点击事件这种情况。。。
      this.oinsert.addEventListener("click",function(){             
          self.oname.value=self.osex.value=self.oage.value="";
          self.osend.addEventListener("click",fun1);              
            function fun1(){
              myajax.post(self.inserturl,{xingming:self.oname.value,sex:self.osex.value,age:self.oage.value},function(res){
                  self.json=JSON.parse(res);
                  self.page();
                  self.render();
                  // console.log(res);
                  //所以当一次操作结束的时候这里要利用DOM2级事件的移除功能来把第二个事件的监听移除，不过还有一个方法好一些，直接在点击添加或者点击修改的时候增加一个信号量，然后单独绑定一个send的点击事件，最后根据信号量发送不同网址的请求
                  self.osend.removeEventListener("click",fun1); 
              })
            }
      })
      // 这是给删除按钮绑定删除事件，注意点：因为删除按钮是后生成的而且以后会根据不同的情况发生改变所以不能选中它，这时候就需要利用事件委托的机制，找到他父辈及父辈以上元素中节点不会发生改变的然后给它绑定监听，再利用事件捕获的原理找到事件源，找到事件源以后要先判定这个事件源是不是就是删除按钮（判定的方法就是给删除按钮身上自定义一个属性）  
      this.otbody.addEventListener("click",function(event){
        var e=event || window.event;
        //判断事件源是不是这个删除键
        if(e.target.getAttribute("mm")=="nb"){
          // console.log(e.target);
          //获取这个删除键所在行的tr这个节点
          self.childs=e.target.parentNode.parentNode.children;
          //获取这个删除键所在行的id
          self.id=self.childs[0].innerHTML;
          // 给数据库发送请求删除这条数据
          myajax.post(self.deleteurl,{id:self.id},function(res){
            if(res){
              // 当数据库删除成功时根据最新的json数据渲染页面和下方的页码，同时删除这个tr节点
              self.json=JSON.parse(res);
              self.page();
              self.render();
              e.target.parentNode.parentNode.remove();
            }
          })
        }
        // 判定事件源是不是修改键
        if(e.target.getAttribute("ms")=="goat"){
          // 修改弹出框里的value值
            self.childs=e.target.parentNode.parentNode.children;
            self.oname.value=self.childs[1].innerHTML;
            self.osex.value=self.childs[2].innerHTML;
            self.oage.value=self.childs[3].innerHTML;
            // 同时获取这条数据的id
            self.id=self.childs[0].innerHTML;
            //发送修改请求，这里还是点击事件中套点击事件所以在回调函数的最后要把这个发送修改请求这个事件移除
            self.osend.addEventListener("click",fun2)
                function fun2(){
                myajax.post(self.updateurl,{xingming:self.oname.value,sex:self.osex.value,age:self.oage.value,id:self.id},function(res){
                    // 根据最新的json数据修改页面内容，因为数据的总量不会发生改变所以不用渲染下方的页码了
                    self.json=JSON.parse(res);
                    self.render();
                    self.osend.removeEventListener("click",fun2);
                    // console.log(res);
                })
            }
        }
      })
      //还是那个注意点，因为上一页、页码数、下一页这几个节点都不是固定的每次调用page都会发生改变，所以这里也用事件委托机制来写绑定事件
      this.oyema.addEventListener("click",function(event){
        var e=event || window.event;
      if(e.target.getAttribute("btn")=="l"){
        //表示点击上一页时，信号量index减一，当信号量小于1时等于最后一页即（页数）
        self.index--;
        self.index=self.index<1 ? self.yeshu : self.index;
        self.page();
        self.render();
      }
      if(e.target.getAttribute("btn")=="r"){
        // 表示点击下一页时，信号量index加一，当信号量大于最后一页（页数）的页码时等于1
        console.log(1);
        self.index++;
        self.index=self.index>self.yeshu ? 1 : self.index;
        self.page();
        self.render();
      }
      if(e.target.getAttribute("li")=="num"){
        //表示点击下方页码数字时，点击哪个就让index的值等于它
        self.index=e.target.innerHTML;
        self.page();
        self.render();
      }
    })
    }
    // render渲染页面内容（不包括下方页码），根据信号量以及后端返回的json数据来渲染页面内容，所以根据它的功能我们在页面index或者后端有返回json时都需要调用这个render方法
    render(){
      this.otbody.innerHTML="";
      for(var i=0;i<this.json.length;i++){
        if(i>=this.num*this.index-this.num&&i<=this.num*this.index-1){
          this.otbody.innerHTML+=`<tr>
            <td>${this.json[i].Id}</td>
            <td>${this.json[i].xingming}</td>
            <td>${this.json[i].sex}</td>
            <td>${this.json[i].age}</td>
            <td><span class="btn btn-warning shou" id="delete" mm="nb">删除</span></td>
            <td><button type="button" class="btn btn-primary shou" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat" ms="goat">修改</button></td>
          </tr>`
        }
      }
    }
    //page渲染下方页码，根据后端返回数据的长度以及num值来确定页数，在根据index值来确定哪个页码数字需要特殊显示的即（当前页的那个页码要与众不同），所以在index值发生改变时或者json的长度发生改变时都需要调用page方法
    page(){
      this.yeshu=Math.ceil(this.json.length/this.num);
      var str="";
      var str2="";
      for(var j=0;j<this.yeshu;j++){
        if(this.index==j+1){
          str2=`<li class="page-item"><a class="page-link bj" href="javascript:;" li="num">${j+1}</a></li>`;
        }else{
          str2=`<li class="page-item"><a class="page-link" href="javascript:;" li="num">${j+1}</a></li>`;
        }
        str+=str2;
      }
      console.log(str);
      this.oyema.innerHTML=`<li class="page-item"><a class="page-link" href="javascript:;" btn="l">上一页</a></li>${str}<li class="page-item"><a class="page-link" href="javascript:;" btn="r">下一页</a></li>`
    }
  }
  new Student(5);

})();