初试后台管理系统页面

本文详细介绍了如何封装JavaScript的alert和confirm函数,实现验证码倒计时、密码可见性切换、全选反选功能以及处理登录拦截、换行逻辑和修复常见bug的过程。作者分享了自己在完善页面过程中遇到的问题和解决策略。
摘要由CSDN通过智能技术生成

常见函数

1.alert和confirm的封装

注意
此处confirm和alert既可以写在js中动态添加,也可以直接写在html标签里

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
HTML代码

<!-- confirm 弹窗 -->
    <div class="confirm-mask">
      <div class="confirm-window">
        <div class="confirm-top">
          <span>系统提示</span>
          <div class="confirm-cancel">X</div>
        </div>
        <div class="confirm-content">
          <i class="iconfont">&#xe603;</i>
          <span>提示消息</span>
        </div>
        <div class="confirm-button">
          <button class="c-sure">确定</button>
          <button class="c-cancel">取消</button>
        </div>
      </div>
    </div>
    <!-- alert 弹窗 -->
    <div class="alert"><i class="iconfont">&#xe604;</i><span>提示消息</span></div>

css代码

.confirm {
  &-mask {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    z-index: 2;
    cursor: pointer;
  }
  &-window {
    position: relative;
    border-radius: 8px;

    background-color: white;
    width: 560px;
    height: 180px;
  }
  &-top {
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
    padding-top: 5px;
    padding-right: 5px;

    width: 100%;
    height: 50px;
    span {
      display: inline-block;
      margin-top: 10px;
      margin-left: 30px;
      font-size: 25px;
    }
  }
  &-cancel {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    width: 20px;
    height: 20px;
    font-size: 18px;
    font-weight: lighter;
    border-radius: 50%;
    color: #cacdd2;
    border: 1px solid #d7dbe3;
    background-color: #ffffff;
    text-align: center;
    &:hover {
      color: rgb(248, 248, 248);
      background-color: #dfdfdf;
    }
  }
  &-content {
    box-sizing: border-box;
    margin: 20px 50px;
    font-size: 18px;
    .iconfont {
      font-size: 28px;
      color: rgb(255, 204, 0);
    }
  }
  &-button {
    width: 190px;
    height: 50px;
    right: 0%;
    position: absolute;
    bottom: 0%;
    button {
      width: 80px;
      height: 40px;
      font-size: 18px;
      border-style: none;
      border-radius: 5px;
    }
    .c-sure {
      color: white;
      background-color: #53a9ff;
      &:hover {
        background-color: #3491ed;
      }
    }
    .c-cancel {
      color: #b7b6b6;
      background-color: #f3f4f4;
      &:hover {
        color: #7f8080;
      }
    }
  }
}




.alert {
  transition: all 0.5s;
  font-size: 13px;
  border-radius: 6px;
  position: fixed;
  z-index: 5;
  left: 50%;
  top: 10%;
  box-sizing: border-box;
  width: 327px;
  height: 40px;
  transform: translate(-50%, 0);

  padding: 10px 10px;
  opacity: 0;
  span {
    margin-left: 5px;
  }
}
.success {
  background-color: #def5de;
  color: #0bb767;
}
.err {
  background-color: #ffeded;
  color: #e52121;
}
.show {
  opacity: 1;
}

js代码

// 重写confirm
function confirm(msg) {
  let sure = document.querySelector(".c-sure");
  let cancel = document.querySelector(".c-cancel");
  let conCancel = document.querySelector(".confirm-cancel");
  let mask = document.querySelector(".confirm-mask");
  let content = document.querySelector(".confirm-content");
  let span = content.querySelector("span");
  span.innerHTML = msg;
  mask.style.display = "flex";

  let cPromise = new Promise(function (resolve, reject) {
    sure.onclick = function () {
      mask.style.display = "none";
      resolve();
    };
    cancel.onclick = function () {
      mask.style.display = "none";
      reject();
    };
    conCancel.onclick = function () {
      mask.style.display = "none";
      reject();
    };
  });
  return cPromise;
}

// 重写alert
const alert = document.querySelector(".alert");
let msgalert = alert.querySelector("span");
function alertSuccess(msg) {
  alert.innerHTML = `<i class="iconfont">&#xe602;</i><span>${msg}</span>`;
  msgalert.innerHTML = msg;
  alert.classList.add("success");
  alert.classList.add("show");
  setTimeout(function () {
    alert.classList.remove("show");
    alert.classList.remove("success");
  }, 2000);
}
function alertErr(msg) {
  alert.innerHTML = `<i class="iconfont">&#xe604;</i><span>${msg}</span>`;
  alert.classList.add("err");
  alert.classList.add("show");
  setTimeout(function () {
    alert.classList.remove("show");
    alert.classList.remove("err");
  }, 2000);
}

2.验证码倒计时

var count = 60;
function settime(el) {
  var registerE = document.querySelector(".registerE").value;
 
  if (count == 0) {
    el.removeAttribute("disabled");
    el.innerHTML = "获取验证码";
    registerAlertShow("发送成功", "#bfe8c0", "#0bb767");
    count = 60;
    //return必须添加,否则会一直循环倒计时
    return;
  } else {
    el.setAttribute("disabled", true);
    el.innerHTML = count + "s 重新发送";
    count--;
  }
  setTimeout(function () {
    settime(el);
  }, 1000);
}

3.登录注册密码是否可见

这里需要用到input 框type的text属性和password属性
该代码用的iconfont图库,也可以改为图片的形式展现

let eye = document.getElementById("eye");

let flag = 0;
eye.onclick = function () {
  let input = document.querySelector(".input.password");
  if (flag == 0) {
    input.type = "text";
    flag = 1;
    eye.innerHTML = "&#xebcc;";
  } else {
    input.type = "password";
    eye.innerHTML = "&#xebcd;";
    flag = 0;
  }
};

4.全选反选

// 如果多选框全选中,则全选框应该选中,如果多选框没都选中,则全选框不选中
// 为多选框分别绑定单击响应函数

function isCheck() {
  for (let i = 0; i < items.length; i++) {
    items[i].onclick = function () {
      // 将全选框设置为选中状态
      checkAll.checked = true;
      // 点击一个多选框后还需要判断所有多选框的状态
      for (let j = 0; j < items.length; j++) {
        if (!items[j].checked) {
          //一旦进入判断语句,则证明有未选中的多选框
          checkAll.checked = false;
        }
      }
    };
  }
}

5.翻页

该功能利用了传参,和默认传参,
需要注意的是,由于该函数既可以在查询功能时使用也可以在渲染页面时使用,因此keywords 是否为空是关键
因此在查询按钮上,我们可以设置一个click变量,初始值是false,点击时为true,刷新后为false等等(视具体情况而定)

var last = document.querySelector(".last");
var next = document.querySelector(".next");

last.addEventListener("click", function () {
  var search = document.getElementsByClassName("search")[0];
  var inputValue = search.getElementsByTagName("input")[0];
  var keywords = inputValue.value;
  if (click == false) {
    keywords = "";
  }
  offset--;

  getCourse(offset, keywords);//渲染
  if (offset <= 1) {
    last.setAttribute("disabled", true);
    offset = 1;
  }
  if (offset < allPages && offset >= 1) {
    next.removeAttribute("disabled");
  }
});

next.addEventListener("click", function () {
  var search = document.getElementsByClassName("search")[0];
  var inputValue = search.getElementsByTagName("input")[0];
  var keywords = inputValue.value;
  if (click == false) {
    keywords = "";
  }
  offset++;
  console.log(keywords);
  if (offset >= 1) {
    last.removeAttribute("disabled");
  }
  if (offset >= allPages) {
    offset = allPages;
    next.setAttribute("disabled", true);
  }
  getCourse(offset, keywords);
});

细节问题

1.正则表达式

注意
正则可以用来判断邮箱格式,后台管理系统中通常需要去空处理,标签过滤,数据判正等

//邮箱正则
let reg =
  /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
function setText(val) {
//将标签替换成普通样式,不会将字放大
  let msg = val.replace(/</g, "&lt;").replace(/>/g, "&gt;"); 
 //去掉所有的空格(中文空格、英文空格都会被替换)
  msg = msg.replace(/\s/g, ""); 
  return msg; 
}

2.登录拦截(极速版)

//判断,如果获取不到token,则返回登录面
if (localStorage.getItem("token") == null) {
  window.location.replace("../login.html");
}
//当点击退出登录按钮时,将本地token移除
//保证退出登录时,直接通过网址进入后台时没有token,从而跳转到登录页面
var backBtn = document.querySelector(".backBtn");
var backBtn = document.querySelector(".backBtn");
backBtn.onclick = function () {
  confirm("确定退出登录吗?")
    .then(function () {
      localStorage.removeItem("token");
      window.location.replace("login.html");
    })
    .catch(function () {});
};

3.换行

 word-break: break-all;//需要指定宽度才能达到换行效果

谈到换行
那么就不得不说说它和word-break:break-word的区别了

一般这两个属性都会加上 height-auto;white-space:normal;
共同点:word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。
不同点:
1.word-break:break-all 例如div宽200px,它的内容就会到200px自动换行,如果该行末端有个英文单词很长(congratulation等),它会把单词截断,变成该行末端为conra(congratulation的前端部分),下一行为tulation(conguatulation)的后端部分了。
2.word-wrap:break-word 例子与上面一样,但区别就是它会把congratulation整个单词看成一个整体,如果该行末端宽度不够显示整个单词,它会自动把整个单词放到下一行,而不会把单词截断掉的。

5.各种bug

1.假如数据为2页,当停留在第二页时,添加数据,有第三页,但下一页的按钮仍为禁点状态
2.当删除最后一页数据时,重新刷新到了第一页,但正常状态下应该返回上一页
3.查询时,当有多页数据时,无法正常翻页,翻页后会重新渲染所有数据(问题出在翻页功能的keywords上)
4.当查询的数据删除完时,应当在页面上显示暂无数据或者重新渲染所有数据后,弹出alert来警告暂无数据

总结

又给了一星期的时间来完善页面,这一星期给我的感觉都是在原来代码的基础上找bug,填坑,这个坑填上了可能本来没有bug的地方又有bug了,像个裁缝一样,在那缝缝补补,到最后我那可怜的页面也算是基本上完成了,虽然还是有bug…[蚌埠住了] 也许这就是因为if等语句的耦合性 [ 新学的词 ] 较强?导致牵一发动全身?
到最后看我整个的代码,感觉逻辑很乱,毕竟是在我的最初的代码上更改,然后我又花了一个晚上在小组的时间重新写了一个新的代码,逻辑性更强;但是更让我无语的是,我的最初的代码和这个新的,几乎bug是互补的,合在一块就没太过大的bug了,看来还需要点时间研究研究,争取写个没有bug的完整代码,这样以后就可以借鉴了
下周计划
不逃课…,好好听课, 学习计划好好完成

  • 15
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值