用户登录界面的做法及遇到的问题和解决方法

花了五天的时间写了一个用户登录系统，下面是自己在写代码时遇到的一些问题

登录界面

当时还没学到jQuery，用的DOM获取元素，在代码上有些繁琐，

首先遇到的第一个问题，就是表单的默认提交，当时用的是一下方法是

deng.addEventListener('click', function () {
                              if (unname == '' || password == '') {
                                  alert('请输入完整的信息')
                                  $('#upForm').submit(function (e) {
                                      e.preventDefault()
                                  })
                              } else {
                                  alert('欢迎登录')
                                  location.href = 'login.html'
                                  return true
                              }

用过之后，当你点击登录时， 没有用，后来在form表单域这个按钮上添加了一个函数  

  <form action="login.html" name="upForm" onsubmit="return check();">
                    <table style="text-align: center;margin:20px 140px">
                        <tr class="one">
                            <td><b>用户名:</b></td>
                            <td><input type="text" placeholder="请输入用户名" name="unname"></td>
                        </tr>
                        <tr class="two">
                            <td><b>密 码:</b></td>
                            <td><input type="password" placeholder="请输入密码"></td>
                        </tr>
                    </table>
                    <div class="denglu">
                        <input type="submit" value="登录" style="width:200px"></input>
                    </div>
                    <script>
                        var input1 = document.querySelector('.one').querySelector('input')
                        var input2 = document.querySelector('.two').querySelector('input')
                        var deng = document.querySelector('.denglu').querySelector('input')
                        function check() {
                            undefined
                            if (input1.value == '' || input2.value == '') {

                                alert('请重新输入')
                                return false
                            }
                            else {
                                undefined
                                alert('欢迎登录')
                                return true
                            }
                        }
                    </script>

                </form>

接着就是拖动模拟框，当我们选择登录时，会将一个隐藏的窗口显示出来，这个窗口可以随意拖动，也就是说包含了三个事件（鼠标移动，鼠标按下，鼠标弹起）,这时候随着鼠标的移动，窗口的位置也在改变

 title.addEventListener('mousedown', function (e) {
            var x = e.pageX - login.offsetLeft;
            var y = e.pageY - login.offsetTop;
            document.addEventListener('mousemove', move)
            function move(e) {
                login.style.left = e.pageX - x + 'px';
                login.style.top = e.pageY - y + 'px'
            }
            document.addEventListener('mouseup', function () {
                document.removeEventListener('mousemove', move)
            })
        })

 当我们点击这个title时，声明两个变量x和y来获取鼠标在这个窗体的位置，当鼠标移动时，窗口的位置会通过move这个函数来改变，这个刚开始有点难想，特别是没加mouseup这个事件时，窗口会一直随着鼠标移动，有点难想

还有一个问题是通过判断员工输入密码的长度来看是否正确

这个问题由于写的匆忙，日后会进行改善的

到了管理页面

在这里面对的第一个问题就是两个页面的传递参数

首先一定要有表单域

 通过这个来获取

  var params = location.search.substr(0)
  var arr = params.split('=')
  var head = document.querySelector('.header-right').querySelector('span')
  head.innerHTML = '<a>用户</a>' + arr[1] + '<a>欢迎你，点击退出登录</a>'

运用了截取和分割字符串

然后就是添加员工信息了

这个刚开始自己做没头绪，跟以前做的todolist有点相似

  $('.tbtn').click(function () {
                var name = $('.content-body input').eq(0).val();
                var tel = $('.content-body input').eq(1).val();
                var email = $('.content-body input').eq(2).val();
                var salary = $('.content-body input').eq(3).val();
                if (name === '' || tel === '' || email === '' || salary === '') {
                    alert('请不要捣乱')
                } else {
                    $('<tr class="moban"></tr>')
                        .append("<td>" + name + "</td>")
                        .append("<td>" + tel + "</td>")
                        .append("<td>" + email + "</td>")
                        .append("<td>" + salary + "</td>")
                        .append('<td><button type="button" class="btn btn-primary bbtn">编辑</button><button type="button" class="btn btn-danger sbtn">删除</button></td>')
                        .appendTo(".table")
                        .find(".bbtn").click(function () {
                            revise(this);
                        })
                    $(".table tr:last").find(".sbtn")
                        .click(function () {
                            remove(this);
                        });
                    $('.content-body input').eq(0).val('');
                    $('.content-body input').eq(1).val('');
                    $('.content-body input').eq(2).val('');
                    $('.content-body input').eq(3).val('');
                }
            })

当我们点击的时候，会通过 name tel email salary 来获取当前表单的值，并且进行判断如果当前表单的值为空就弹出警示框；输入正确的话就会在tr上添加表单值，并且清空表单已有的值

这些就是在写登录系统时的问题，还有一些问题日后一定多加改善