用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;
}