纯JavaScript实现一个带cookie的学生管理系统

由来

之前写过一个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

欢迎关注我的博客,不定期分享一些优质的原创项目,可用作毕业设计或者面试找工作~

原文地址:https://www.cnblogs.com/phdeblog/p/14232028.html