純JavaScript實現一個帶cookie的學生管理系統

小樓夜聽雨QAQ發表於2021-01-04

由來

之前寫過一個Jsp&Servlet版本的學生管理系統。

發出來之後,有一個網友找我給他寫JavaScript版本的,時間也過去很久了,我估摸著他那門課已經結束了,所以整理了一下程式碼,分享出來給有需要的人。

需求

只能使用JavaScript,不涉及任何後端語言,不涉及資料庫。

需要實現的功能:

1、登入登出功能

2、對學生資訊的增刪改查

3、使用cookie記錄當前登入使用者的資訊

成品截圖

登入頁

主頁

新增學生

更新學生

實現思路

按照那位朋友的描述,大概是大學裡的JS課程設計吧,老師可能想讓他們把一些學的東西都用上,才出了這麼一個題目。

首先要解決儲存問題,不用資料庫的話,只能寫進本地檔案或者記憶體了。

我的辦法是,啟動系統的時候,將初始資料載入進記憶體,然後對記憶體的資料增刪改查即可。

cookie也是一個問題

直接開啟一個html時,會以檔案的方式開啟,沒有域(例如www.baidu,com等域名,或者127.0.0.1等ip),是儲存不了cookie的

必須以“服務‘的方式開啟。

vscode開啟,匯入專案,裝一個外掛“Live Server”

右擊檔案,選擇Open With Live Server 執行。

將會以服務的方式執行這個專案,這麼一來,就可以使用cookie啦

另外為了好看點,用了bootstrap的一些表單和按鈕樣式,這個基本忽略不計。

原始碼

原始碼已經放在碼雲上了,需要的自取:

https://gitee.com/DayCloud/student-manage-js

歡迎關注我的部落格,不定期分享一些優質的原創專案,可用作畢業設計或者面試找工作~

 

相關文章