目录
1. 通过bootstrap来构建整体结构
以下是页面效果图
1.1 HTML代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学生信息后台管理</title>
<!-- 引入bootstrap.css样式 -->
<link rel="stylesheet" href="./css/bootstrap.css">
<!-- 引入bootstrap.js样式 -->
<script src="./js/bootstrap.bundle.min.js"></script>
<!-- 引入自己专属的js样式-->
<script src="./js/index.js"></script>
<style>
table td {
line-height: 35px;
}
body {
background-color: #f2f2f2;
}
</style>
</head>
<body>
<!-- 响应式导航栏开始 -->
<nav class="navbar navbar-expand-lg bg-body-tertiary">
<div class="container-fluid w-75">
<a class="navbar-brand text-muted" href="#">学生信息后台管理系统</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown"
aria-expanded="false">
资源
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">资讯</a></li>
<li><a class="dropdown-item" href="#">资质证言</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">功能更新</a></li>
</ul>
</li>
</ul>
<a class="navbar-brand text-muted fs-6" href="#">根据学生姓名或者学号查询学生信息</a>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" style="font-size: 0.5rem;" placeholder="请输入姓名/学号"
aria-label="Search" id="sea">
<button class="btn btn-outline-success" type="submit" style="width:5rem" id="cx">查询</button>
</form>
</div>
</div>
</nav>
<!-- 响应式导航栏 结束-->
<!-- 添加学生信息开始 -->
<div class="container mt-5 w-75">
<div class="row justify-content-center">
<form class="info" autocomplete="off">
<div class="row g-3">
<div class="col-md-2">
<label for="uname" class="form-label"> 姓名：</label>
<input type="text" class="uname form-control" name="uname" id="uname" />
</div>
<div class="col-md-2">
<label for="studentNumber" class="form-label">学号：</label>
<input type="text" class="studentNumber form-control" name="studentNumber" id="studentNumber" />
</div>
<div class="col-md-2">
<label for="age" class="form-label">年龄：</label>
<input type="text" class="age form-control" name="age" id="age" />
</div>
<div class="col-md-4">
<label for="department" class="form-label form-text">所属院系</label>
<select name="department" id="department" class="w-100 rounded-1 border py-1 form-control">
<option value="电商系">电商系</option>
<option value="学前教育系">学前教育系</option>
<option value="茶业系">茶业系</option>
<option value="旅游商贸系">旅游商贸系</option>
</select>
</div>
<div class="col-md-2">
<div class="row">
<label for="department" class="form-label form-text">学生信息</label>
</div>
<button class="add btn btn-dark fs-6 p-1 px-2" id="liveToastBtn1">录入</button>
</div>
</div>
</form>
</div>
</div>
<!-- 轻量提示 -->
<!-- 录入成功提示 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
<div id="liveToast1" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<img src="./images/1.jpg" class="rounded me-2" alt="..." style="width: 1rem;">
<strong class="me-auto">录入成功</strong>
<small class="time"></small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
祝您生活愉快，工作顺利，身体健康。
</div>
</div>
</div>
<script>
(function () {
const toastTrigger = document.getElementById('liveToastBtn1')
const toastLiveExample = document.getElementById('liveToast1')
const uname = document.querySelector('#uname')
const studentNumber = document.querySelector('#studentNumber')
const age = document.querySelector('#age')
if (toastTrigger) {
toastTrigger.addEventListener('click', () => {
if (uname.value === '' || studentNumber.value === '' || age.value === '') {
return false
} else {
const toast = new bootstrap.Toast(toastLiveExample)
toast.show()
}
})
}
// 设置自动更新的时间赋值给small
timer()
function timer() {
// 获取当前时间
let time1 = new Date().toLocaleString()
let time = document.querySelector('.time')
time.innerHTML = `${time1}`
}
setInterval(timer, 1000)
})();
</script>
<!-- 添加学生信息结束 -->
<!-- 学生信息内容开始 -->
<form action="" class="mt-5 text-center d-flex justify-content-center " autocomplete="off">
<div class="w-75 table-responsive text-nowrap mb-5">
<table class="table table-striped table-bordered table1">
<thead>
<th>ID</th>
<th>姓名</th>
<th>学号</th>
<th>年龄</th>
<th>所属院系</th>
<th>操作</th>
</thead>
<!-- 行内容 -->
<!-- 编辑模态框 -->
<tbody></tbody>
<div class="modal fade" id="exampleModals" tabindex="-1" aria-labelledby="exampleModalLabels"
aria-hidden="true">
<div class="modal-dialog" style="pointer-events: auto;">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">编辑</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body text-start" id="form1">
<form action="" novalidate id="form2" autocomplete="off">
<div class="container">
<!-- 姓名 -->
<div class="row ">
<div class="col-12">
<label for="name" class="form-label form-text">姓名</label>
<input type="text" class="w-100 rounded-1 border py-1 form-control"
id="myName" pattern="^[\u4e00-\u9fa5]{1,9}$">
<div class="invalid-feedback">请输入姓名</div>
</div>
</div>
<!-- 学号 -->
<div class="row mt-2">
<div class="col-12">
<label for="studentNumber" class="form-label form-text">学号</label>
<input type="text" class="w-100 rounded-1 border py-1 form-control"
id="myStudentNumber">
<div class="invalid-feedback">请输入正确的学号</div>
</div>
</div>
<!-- 年龄 -->
<div class="row mt-2">
<div class="col-12">
<label for="age" class="form-label form-text">年龄</label>
<input type="text" class="w-100 rounded-1 border py-1 form-control"
id="myAge">
<div class="invalid-feedback">请输入年龄</div>
</div>
</div>
<!-- 所属院系 -->
<div class="row my-2 mb-3">
<div class="col-12">
<label for="department" class="form-label form-text">所属院系</label>
<select name="" id="myDepartment"
class="w-100 rounded-1 border py-1 form-control">
<option value="电商系">电商系</option>
<option value="学前教育系">学前教育系</option>
<option value="茶业系">茶业系</option>
<option value="旅游商贸系">旅游商贸系</option>
</select>
<div class="invalid-feedback">请输入年龄</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-secondary" data-bs-dismiss="modal"
id="sbm">提交</button>
</div>
</div>
</div>
</div>
<!-- 删除模态框 -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="exampleModalLabel">确认删除</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body text-start">
删除后学生信息不可恢复，请谨慎操作
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal"
id="confirm">确定</button>
</div>
</div>
</div>
</div>
</table>
</div>
</form>
<!-- 学生信息内容结束 -->
</body>
</html>
2. 增删改查功能
利用原生js实现学生信息的增删改查功能，并且采用本地存储localStorage，实现页面刷新数据不丢失。
2.1页面原始数据
页面原始数据// 数据采用数组对象的形式
let data = [
{
id: 1,
name: '琴木',
studentNumber: 202103140001,
age: 18,
department: '电商系'
},
{
id: 2,
name: '心溪',
studentNumber: 202103140002,
age: 19,
department: '旅游商贸系'
},
{
id: 3,
name: '木子',
studentNumber: 202103140003,
age: 18,
department: '学前教育系'
},
{
id: 4,
name: '风行',
studentNumber: 202103140004,
age: 19,
department: '电商系'
},
{
id: 5,
name: '天启',
studentNumber: 202103140005,
age: 18,
department: '茶业系'
},
{
id: 6,
name: '洛熙',
studentNumber: 202103140006,
age: 19,
department: '茶业系'
},
]
2.2 设置初始数据到本地存储
localStorage是本地存储技术,最大可以存5M在不手动删除的情况下会一直存在，并且只能存字符串。
由于本地存储只能存字符串，而我们的数据是一个数组对象，在不转化为字符串的形式存入的话，在浏览器存储中只会存入一个object，这样的话我们的数据在后面是无法调用的。
所以这个时候我们就要用到JSON.stringify将对象转化为字符串。
在我们调用本地存储里面的数据就需要利用JSON.parse将字符串转化为对象
// 设置初始数据到本地存储,student_data(本地存储的名字)
this.localStorage.setItem('student_data',JSON.stringify(data))
// 只渲染一次，不然每次刷新会覆盖后面的数据
2.3 渲染数据
// 读取本地存储的数据
const initData = this.localStorage.getItem('student_data')
// 如果有本地有数据就渲染到页面，如果没有就返回一个空数组,arr接受我们从本地存储中得到的数据
const arr = initData ? JSON.parse(initData) : []
//获得HTML表格里的tbody元素
const tbody = this.document.querySelector('tbody')
// 渲染数据函数开始
setDate(arr)
//封装一个渲染数据的函数
function setDate(myDate) {
//在渲染数据之前先将之前的tbody里面的内容清空，不然有多个数据的时候，会重复渲染之前的数据
tbody.innerHTML = ''
//通过forEach的方法渲染数据，value为值，index为索引号，也就是数组的下标
myDate.forEach(function (value, index) {
let tr = document.createElement('tr');
tr.innerHTML = `
<td>${value.id}</td>
<td>${value.name}</td>
<td>${value.studentNumber}</td>
<td>${value.age}</td>
<td>${value.department}</td>
<td>
<a type="button" class="btn btn-dark text-white px-3 py-1" data-bs-toggle="modal" data-bs-target="#exampleModals" data-ids = ${index}>编辑</a>
<button type="button" class="btn btn-dark px-3 py-1" data-bs-toggle="modal" data-bs-target="#exampleModal" data-id=${index}>删除</button>
</td>
`
tbody.appendChild(tr)
})
}
//在渲染数据的时候为编辑按钮和删除按钮设置一个自定义属data开头，以便后面对数据进行修改和删除的时候能够得到用户点击的哪个修改按钮和删除按钮
// 渲染数据结束
2.4 增
// 增添数据模块开始
//获取5个存入数据的元素
const uname = document.querySelector('#uname')
const studentNumber = document.querySelector('#studentNumber')
const age = document.querySelector('#age')
const department = document.querySelector('#department')
//获取整个form表单，因为我们提交数据主要是对整个form进行提交，所以不是给录入按钮添加点击事件
const info = document.querySelector('.info')
//给表单注册提交事件，e为事件对象
info.addEventListener('submit', function (e) {
//阻止表单提交默认刷新页面行为
e.preventDefault()
//对表单元素进行判断，如果其中有一项为空，那么对用户进行提示
if (uname.value === '' || studentNumber.value === '' || age.value === '') {
return alert('内容不能为空')
}
//创建一个obj对象，将表单里面的数据存入对象里面
const obj = {
//由于id是自增的，所以我们要对它进行判断
id: arr.length ? arr[arr.length - 1].id + 1 : 1,
name: uname.value,
studentNumber: studentNumber.value,
age: age.value,
department: department.value
// options[department.selectedIndex].text,如果没有设置value值只能通过这种方法获取文本
}
//通过数组push方法存入对象
arr.push(obj)
// 重新获取本地数据，存储到浏览器中
localStorage.setItem('student_data', JSON.stringify(arr))
//添加完数据对整个表单进行清空操作
this.reset()
//重新渲染页面
setDate(arr)
})
// 增添数据模块结束
演示效果图
2.5 删
// 删除模块开始
// 由于我们定义了一个确定删除的模态框，所以我们需要获取这个按钮来对其注册点击事件
const confirm = document.querySelector('#confirm')
//定义一个变量来接收按钮对应的自定义属性的id值
let id;
//通过事件委托的形式来进行注册，如果利用循环的话，后面添加的事件就没有点击事件行为
tbody.addEventListener('click', function (e) {
//通过e.target.tagName判断是不是点击的button这个按钮，如果是的话将这个按钮的自定义属性的id值赋值给id变量。
if (e.target.tagName === 'BUTTON') {
id = e.target.dataset.id
}
})
//给确定按钮注册点击事件
confirm.addEventListener('click', function (e) {
//利用数据的splice方法进行删除splice（删除的起始位置，删除的个数）
arr.splice(id, 1)
// 重新获取本地数据，存储到浏览器中
localStorage.setItem('student_data', JSON.stringify(arr))
//重新渲染页面
setDate(arr)
})
// 删除模块结束
演示效果图
2.6 改
// <!-- 编辑模块开始 -->
// 由于我们定义了一个编辑信息的模态框，所以我们需要获取这个按钮来对其注册点击事件
const sbm = document.querySelector('#sbm')
// 获取名字元素
const myName = document.querySelector('#form1 #myName')
// 获取学号元素
const myStudentNumber = document.querySelector('#form1 #myStudentNumber')
// 获取年龄元素
const myAge = document.querySelector('#form1 #myAge')
// 获取所属院系元素
const myDepartment = document.querySelector('#form1 #myDepartment')
//定义一个变量来接收按钮对应的自定义属性的id值
let ids;
//同样通过事件委托的形式注册点击事件
tbody.addEventListener('click', function (e) {
//通过e.target.tagName判断是不是点击的a这个按钮，如果是的话将这个按钮的自定义属性的ids值赋值给ids变量。
if (e.target.tagName === 'A') {
ids = e.target.dataset.ids
}
})
//给编辑模态框里的提交按钮注册点击事件
sbm.addEventListener('click', function (e) {
//阻止form表单提交默认刷新页面的行为
e.preventDefault()
//通过ids变量准确的得到对应哪个学生的信息进行更改
arr[ids].name = `${myName.value}`
arr[ids].studentNumber = `${myStudentNumber.value}`
arr[ids].age = `${myAge.value}`
arr[ids].department = `${myDepartment.value}`
// 重新获取本地数据，存储到浏览器中
localStorage.setItem('student_data', JSON.stringify(arr))
//重新渲染页面
setDate(arr)
//提交后对表单里面的数据进行清空操作
myName.value = ''
myStudentNumber.value = ''
myAge.value = ''
myDepartment.value = ''
})
})
// <!-- 编辑模块结束 -->
演示效果图
2.7 查
// 查询模块开始
// 获取根据学生姓名或者学号查询学生信息进行查询，获取它们对应的元素
//获取搜索框元素
const sea = document.querySelector('#sea')
// 获取查询按钮元素
const cx = document.querySelector('#cx')
// 给查询按钮注册点击事件
cx.addEventListener('click', function (e) {
//阻止默认行为
e.preventDefault()
//声明一个数组来接受查询后的数据
let arr1 = [];
//利some方法进行遍历查询，filter也可以，但是它多用于区间查询
arr.some(function (value) {
//声明一个str变量来接收搜索框里面的值，并清除它两边的空格
let str = sea.value.trim()
if (value.name === str || value.studentNumber == str) {
//如果有这个数据就将它存入到我们新定义的一个数组里面
arr1.push(value);
// 查询到后返回一个true，不对后面的数据继续查询，提高性能。如果是filter的话是会查询到最后一条数据，浪费内存空间。
return true;
}
})
//将查询到的数组重新渲染到页面。
setDate(arr1);
})
// 查询模块结束
演示效果图
总结
理清思路永远比盲目的写代码更有效。
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
