當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

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

發布時間：2024/9/5 javascript 45 豆豆

生活随笔收集整理的這篇文章主要介紹了用JS制作一个信息管理平台完整版小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? 前 ?言

JRedu

在之前的文章中，介紹了如何用JS制作一個實用的信息管理平臺。

但是那樣的平臺功能過于簡陋了，我們今天來繼續完善一下。

首先我們回顧一下之前的內容。

? 1、JSON的基礎知識

1.1 ?什么是JSON

　　JSON是數據交互中，最常用的一種數據格式。

　　由于各種語言的語法都不相同，在傳遞數據時，可以將自己語言中的數組、對象等轉換為JSON字符串。傳遞之后，可以將JSON字符串，再解析為JSON對象?！　?/span>

　　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 οnclick="addAize()" class="denglu" type="submit" value="注 冊" tabindex="3"><p class="zhuce" οnclick="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()

　　每當界面刷新或是信息錄入的時候，調用這個函數。

　　因為完整代碼太多，可能拿出一段并不能完全明白，我大體解釋一下思路。

　　創建一個html變量，先賦值一個空字符串即可。

　　首先，將本地存儲的數據取出來，轉化成對象格式。

　　然后檢測這個對象是否存在，也就是本地是否有一條以上的數據。

　　然后遍歷這些數據，把他們加給表格中，附給html變量。

　　最后用一開始在文件中就創建好的表格中的tbody。通過.innerHTML = html。將數據打印出來。

　　這樣就可以將添加進去的表單通過表格展示出來。

　　再介紹刪除功能，同樣是創建一個函數delSite()附到刪除按鈕的onclick事件上。

　　需要注意的是，刪除功能一定要有一個確認按鈕，也就是confirm()。

　　當結果返回true的時候，執行這個函數

　　這段代碼的核心思想是，給每一個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().

　　將修改后的每一行數據取出來，對本地存儲的數據進行修改。

　　最后將修改欄隱藏，重新展示數據。

2.4信息的查詢功能

　　信息查詢的主要思路是，通過一定的規范，將查詢欄輸入的內容與本地存儲的內容進行對應。

　　可以通過indexOf進行部分匹配，也可以通過等于進行等于匹配，這個可以根據需求進行定義。

　　本例兩種類型都進行一下展示。

　　首先在查詢按鈕上綁定一個函數searchSite()

　　將與查詢內容相符的本地存儲信息提取出來，加入到一個新的數組中，然后將新數組的內容遍歷打印到html，覆蓋掉原來展示的信息，這樣搜索的功能就實現了

?

3.1 結尾

　　對于一個簡單的信息管理平臺來說，這樣的功能就基本滿足使用了。

　　當然我們可以更完善一下，比如修改密碼，比如注銷功能，都是必不可少的。

　　而當我們完成上述內容的時候，這些其余功能就沒有什么新意了，相信大家順手就可以完成，我就不多詳述了。

　　大家實現功能的同時，也可以添加一些自己喜歡的樣式，讓我們的系統更加美觀呦~

　　希望這篇文章能對大家有所幫助，歡迎批評指正~

轉載于:https://www.cnblogs.com/lihaohai/p/7585823.html

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的用JS制作一个信息管理平台完整版的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： python模块-getpass模块
下一篇：【Spring】详解spring事务属性