用JS制作一个信息管理平台完整版

Posted 听醒木一声收

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了用JS制作一个信息管理平台完整版相关的知识,希望对你有一定的参考价值。

  前  言

JRedu

在之前的文章中,介绍了如何用JS制作一个实用的信息管理平台。

但是那样的平台功能过于简陋了,我们今天来继续完善一下。

首先我们回顾一下之前的内容。



  1、JSON的基础知识

 

1.1  什么是JSON

  

  JSON是数据交互中,最常用的一种数据格式。

  由于各种语言的语法都不相同,在传递数据时,可以将自己语言中的数组、对象等转换为JSON字符串。 传递之后,可以将JSON字符串,再解析为JSON对象。  

  JSON对象的使用与JS中的对象基本相同,唯一需要区别的是,JSON中的键,必须是字符串。

  比如:

  var jsonObj = {
  "name":"zhangsan",
  "age":"12"
  }

 

  

1.2JSON的使用方法

 

  两个特别常用的函数。

  将JS中的对象、数组,传化为JSON字符串。

  var str1 = JSON.stringify(users);
  console.log(str1);

 

   将JSON字符串转化为JSON对象。

  var obj = JSON.parse(str1);
  console.log(obj);

 

  总结一下新增或是删除一条数据的基本方法。

  【新增一条数据】
   1、 取到录入的各种信息
   2、 把这些信息封装成一个对象。
   3、 从本地文件中,读取出存储数据的数组字符串。并将字符串,转回数组格式。
   如果本地文件中,没有这个数组,就新建一个数组存放。
   4、 数组中,push进一个新组建的对象。
   5、 将新数组,重新转为字符串。把字符串丢回文件。
   6、 重新读取一边文件,重新加载表格。


   【删除一条数据】
   1、 从文件中,读取出字符串,转回数组格式。
   2、 判断需要删除的是第几条数据。
   3、 删除掉数组对应的数据、splice
   4、 把新数组重新转为字符串,放回文件。
   5、 重新读取一边文件,重新加载表格。

 

   html5 新增Web存储方式,主要有两种:
   localStorage 和 sessionStorage,两个对象在使用方式上没有任何区别,唯一的不同点是存储数据的有效时间
   ① localStorage : 除非手动删除,否则数据将一直保存在本地文件;
   ② sessionStorage : 当浏览器关闭时,sessionStorage就被清空。

   [Storage的数据存储]
   1、Storage可以像普通对象一样,使用.追加或者读取最新的数据。
   eg :localStorage.username = "张三";

   2、常用的函数

   保存数据:localStorage.setItem(key,value);
   读取数据:localStorage.getItem(key);
   删除单个数据:localStorage.removeItem(key);
   删除所有数据:localStorage.clear();
   得到某个索引的key:localStorage.key(index);

  下面通过一个具体的案例详细的介绍一下这些函数的用法。

 

  2、 信息管理平台实例

 

2.1注册功能

 

  下面通过一个具体的案例详细的介绍一下这些函数的用法。

  这是一个信息管理平台,首先我们需要注册一个账号。

  附上一小部分表单结构的代码:

技术分享
  <div class="right">
  <h2>
  用户注册
  <span>user login</span>
  </h2>
  <div class="user">
  <input placeholder="3-15位字母数字,开头必须是字母" name="userNo" id="userNo" tabindex="1" class="account" autocomplete="off">
  <span id="p1">用户名已注册</span>
  </div>
  <div class="pwd">
  <input placeholder="4-10位字母数字组成" type="password" id="pwd" name="pwd" tabindex="2" class="passw" autocomplete="off">
  <span id="p2">两次密码输入不一致</span>
  </div>
  <div class="pwd">
  <input placeholder="请再次输入密码" type="password" id="repwd" name="pwd" tabindex="2" class="passw" autocomplete="off">
  </div>
  <input onclick="addAize()" class="denglu" type="submit" value="注&nbsp;册" tabindex="3">
  <p class="zhuce" onclick="denglu()">
  点击返回登录页面>>>
  </p>
  </div>
技术分享

 

  当我们点击注册的时候,会触发一个点击事件,然后触发函数addAize()。

  这个时候,我们需要验证密码是否正确,或是输入的格式是否符合要求。

  首先,我们先取出我们所输入的内容。

 

  var user = document.getElementById("userNo").value;
  var pwd = document.getElementById("pwd").value;
  var repwd = document.getElementById("repwd").value;

 

 

  具体的验证要求通过正则来验证,这里就不详述了。

  若是符合要求,将用户名和密码封装成一个对象。

  var site = {
  user : user,
  pwd : pwd
  }

 

  若是第一次注册,则在本地存储中新建一个数组arr=[];

  若是已经有数组,则录入这条数据。

  if(localStorage.sites == undefined){
  var arr = [];
  }else{
  var str = localStorage.sites;
  var arr = JSON.parse(str);
  }

 

  验证用户名是否重复或者是两次密码输入是否一致,这里不详述。

  当全都通过验证之后,将这条信息存入本地,跳转到登录页。

  arr.push(site);
  var str = JSON.stringify(arr);
  localStorage.sites = str;
  alert("注册成功");
  location = "登录.html";

 

  登陆的功能其实跟注册很像,也是从本地中取出数据,与输入的数据进行一一比对,或是有相同的,则登陆成功,跳转到主页面。

  管理平台的信息录入功能也与注册大同小异,就不每个举例了。

 

2.2信息的展示和删除功能

 

  首先创建一个函数showAllSite()

  每当界面刷新或是信息录入的时候,调用这个函数。

技术分享
  function showAllSite(){
  var str = localStorage.sitess;
  var arr = JSON.parse(str);
  var html = "";
  if(localStorage.sitess == undefined){
  return;
  }
  arr.forEach(function(item,index){
  html += "<tr class=‘tr‘ onclick=‘chooseInput("+index+")‘ ondblclick=‘updateSite("+index+")‘><td align=‘center‘><input type=‘checkbox‘ onclick=‘chooseInput("+index+")‘ value=‘"+index+"‘ class=‘checkbox‘ style=‘marg  in-top:15px‘/></td><td>"+(index+1)+"</td><td>"+item.name+"</td><td>"+item.city+"</td><td>"+item.home+"</td><td style=‘color:black‘>"+item.jingli+"</td><td style=‘color:black‘>"+item.youbian+"</td><td style=‘color:  black‘>"+item.iphone+"</td><td style=‘color:black‘>"+item.star+"</td></tr>";
  });
  var tbody = document.getElementById("tbody");
  tbody.innerHTML = html;
  }
技术分享

 

  因为完整代码太多,可能拿出一段并不能完全明白,我大体解释一下思路。

  创建一个html变量,先赋值一个空字符串即可。

  首先,将本地存储的数据取出来,转化成对象格式。

  然后检测这个对象是否存在,也就是本地是否有一条以上的数据。

  然后遍历这些数据,把他们加给表格中,附给html变量。

  最后用一开始在文件中就创建好的表格中的tbody。通过.innerHTML = html。将数据打印出来。

  这样就可以将添加进去的表单通过表格展示出来。

  再介绍删除功能,同样是创建一个函数delSite()附到删除按钮的onclick事件上。

  需要注意的是,删除功能一定要有一个确认按钮,也就是confirm()。

  当结果返回true的时候,执行这个函数

技术分享
  var checkboxs = document.getElementsByClassName("checkbox");
  var count = 0;
  var str = localStorage.sitess;
  var arr = JSON.parse(str);
  for(var i=0; i<checkboxs.length; i++){
  if(checkboxs[i].checked){
  var index = parseInt(checkboxs[i].value)-count;
  count++;
  arr.splice(index,1);
  }
  }
  localStorage.sitess = JSON.stringify(arr);
  if(count==0){
  alert("请至少选择一个删除对象");
  }else{
  alert("删除成功!共删除"+count+"条数据!");
  showAllSite();
  }
技术分享

 

  这段代码的核心思想是,给每一个checkbox加上一个value,通过他们的value值,来匹配这一行列表对应的index值。

  检测chenkbox是否被选中,将选中的每一个所对应的那一行删除掉。

  因为要彻底删除掉,所以一定不能用delete,要用splice(index,1)。

 

2.3信息的修改功能

  

  我们可以选择制作一个修改按键,绑定每一行。

  也可以选择双击每行的信息,直接显示出隐藏的修改框。

  本例我们选择后者。

  首先,为创建出来的每一行数据绑定一个dblclick事件,创建updateSite()函数。并传入参数index,绑定当前的行数。

  为了方便用户直接修改而不是重新输入,我们需要采集当前信息

  

var updateIndex = 0;
function updateSite(index){
    var str = localStorage.sitess;
    var arr = JSON.parse(str);
    document.getElementById("zhuce1").style.display = "block";
    document.getElementById("name1").value = arr[index].name;
    document.getElementById("city1").value = arr[index].city;
    document.getElementById("home1").value = arr[index].home;
    document.getElementById("jingli1").value = arr[index].jingli;
    document.getElementById("youbian1").value = arr[index].youbian;
    document.getElementById("iphone1").value = arr[index].iphone;
    document.getElementById("star1").value = arr[index].star;
    updateIndex = index;
}

  这样,我们就把当前采集到的信息全部赋值给了修改栏。

  声明一个变量updateIndex的意图在于将当前的index保存起来,以便在下一个函数的作用域也可以使用。

  接着,我们给修改栏的提交按钮再绑定一个函数updateSite1().

  

function updateSite1(){
    var name = document.getElementById("name1").value;
    var city = document.getElementById("city1").value;
    var home = document.getElementById("home1").value;
    var jingli = document.getElementById("jingli1").value;
    var youbian = document.getElementById("youbian1").value;
    var iphone = document.getElementById("iphone1").value;
    var star = document.getElementById("star1").value;
    var str = localStorage.sitess;
    var arr = JSON.parse(str);
    for(var i=0; i<arr.length; i++){
        if(arr[i].name == name && updateIndex!=i){
            alert("网站名已注册!请更换网站名!");return;
        }
    }
    var site = {
        name : name,
        city : city,
        home : home,
        jingli : jingli,
        youbian : youbian,
        iphone : iphone,
        star : star
    }
    arr.splice(updateIndex,1,site);
    localStorage.sitess = JSON.stringify(arr);
    showAllSite();
    document.getElementById("zhuce1").style.display = "none";
}

  将修改后的每一行数据取出来,对本地存储的数据进行修改。

  最后将修改栏隐藏,重新展示数据。

 

2.4信息的查询功能

 

  信息查询的主要思路是,通过一定的规范,将查询栏输入的内容与本地存储的内容进行对应。

  可以通过indexOf进行部分匹配,也可以通过等于进行等于匹配,这个可以根据需求进行定义。

  本例两种类型都进行一下展示。

  首先在查询按钮上绑定一个函数searchSite()

function searchSite(){
    var name = document.getElementById("search1").value;
    var jingli = document.getElementById("search2").value;
    var star = document.getElementById("search3").value;
    var str = localStorage.sitess;
    var arr = JSON.parse(str);
    var newArr = []; // 用于装载符合条件的数据
    for(var i=0; i<arr.length; i++){
        var isWzm = true, isBm = true, isWz = true;
        if(arr[i].name.indexOf(name)==-1 && name!="") isWzm=false;
        if(arr[i].jingli.indexOf(jingli)==-1 && jingli!="") isWzm=false;
        if(arr[i].star != star && star!="") isWz=false;
        if(isWzm&&isBm&&isWz){
            arr[i].index = i;
            newArr.push(arr[i]);
        }
    }
    var html = "";
    newArr.forEach(function(item,index){
        html += "<tr class=‘tr‘ onclick=‘chooseInput("+index+")‘ ondblclick=‘updateSite("+item.index+")‘><td align=‘center‘><input type=‘checkbox‘ onclick=‘chooseInput("+index+")‘ value=‘"+item.index+"‘ class=‘checkbox‘ /></td><td>"+(index+1)+"</td><td>"+item.name+"</td><td>"+item.city+"</td><td>"+item.home+"</td><td style=‘color:black‘>"+item.jingli+"</td><td style=‘color:black‘>"+item.youbian+"</td><td style=‘color:black‘>"+item.iphone+"</td><td style=‘color:black‘>"+item.star+"</td></tr>";
    });
    
    var tbody = document.getElementById("tbody");
    tbody.innerHTML = html;
}

  将与查询内容相符的本地存储信息提取出来,加入到一个新的数组中,然后将新数组的内容遍历打印到html,覆盖掉原来展示的信息,这样搜索的功能就实现了

 

 

3.1 结尾

  对于一个简单的信息管理平台来说,这样的功能就基本满足使用了。

  当然我们可以更完善一下,比如修改密码,比如注销功能,都是必不可少的。

  而当我们完成上述内容的时候,这些其余功能就没有什么新意了,相信大家顺手就可以完成,我就不多详述了。

  大家实现功能的同时,也可以添加一些自己喜欢的样式,让我们的系统更加美观呦~

  希望这篇文章能对大家有所帮助,欢迎批评指正~

 





































以上是关于用JS制作一个信息管理平台完整版的主要内容,如果未能解决你的问题,请参考以下文章

Python学生成绩管理系统(完整版)

数据结构课设:学生信息管理系统(完整版)

数据结构课设:学生信息管理系统(完整版)

Qt学生信息管理系统2.完整版源码

7天撸完KTV点歌系统,含后台管理系统(完整版)

使用Android studio制作一个APP?完整版教学