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

时间 2019-12-09

标签制做一个信息管理平台完整栏目 JavaScript 繁體版

原文原文链接

前言html

JRedujson

在以前的文章中，介绍了如何用JS制做一个实用的信息管理平台。数组

可是那样的平台功能过于简陋了，咱们今天来继续完善一下。浏览器

首先咱们回顾一下以前的内容。session

一、JSON的基础知识

1.1 什么是JSON

　　JSON是数据交互中，最经常使用的一种数据格式。iphone

　　因为各类语言的语法都不相同，在传递数据时，能够将本身语言中的数组、对象等转换为JSON字符串。传递以后，能够将JSON字符串，再解析为JSON对象。　　函数

　　JSON对象的使用与JS中的对象基本相同，惟一须要区别的是，JSON中的键，必须是字符串。网站

　　好比：spa

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

1.2JSON的使用方法

　　两个特别经常使用的函数。code

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

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

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

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

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

　　【新增一条数据】
　　一、取到录入的各类信息
　　二、把这些信息封装成一个对象。
　　三、从本地文件中，读取出存储数据的数组字符串。并将字符串，转回数组格式。
　　若是本地文件中，没有这个数组，就新建一个数组存放。
　　四、数组中，push进一个新组建的对象。
　　五、将新数组，从新转为字符串。把字符串丢回文件。
　　六、从新读取一边文件，从新加载表格。

　　【删除一条数据】
　　一、从文件中，读取出字符串，转回数组格式。
　　二、判断须要删除的是第几条数据。
　　三、删除掉数组对应的数据、splice
　　四、把新数组从新转为字符串，放回文件。
　　五、从新读取一边文件，从新加载表格。

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

　　 [Storage的数据存储]
　　一、Storage能够像普通对象同样，使用.追加或者读取最新的数据。
　　eg ：localStorage.username = "张三";

　　二、经常使用的函数

　　保存数据：localStorage.setItem(key,value);
　　读取数据：localStorage.getItem(key);
　　删除单个数据：localStorage.removeItem(key);
　　删除全部数据：localStorage.clear();
　　获得某个索引的key：localStorage.key(index);

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

二、信息管理平台实例

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 结尾

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

　　固然咱们能够更完善一下，好比修改密码，好比注销功能，都是必不可少的。

　　而当咱们完成上述内容的时候，这些其他功能就没有什么新意了，相信你们顺手就能够完成，我就很少详述了。

　　你们实现功能的同时，也能够添加一些本身喜欢的样式，让咱们的系统更加美观呦~

　　但愿这篇文章能对你们有所帮助，欢迎批评指正~