使用bootstrap+jQuery实现简单学生管理系统增删改查功能
🌵 前言介绍:以下👇 内容都是我个人对于知识的总结,会定期更新欢迎持续关注!
🌵 欢迎点赞 👍 收藏 ⭐留言 📝 如有错误敬请指正!
项目准备
目录结构:
项目初始化
项目初始化
npm i -y
安装依赖包
安装express、express-art-template、jQuery以及bootstrap 。
安装依赖包
npm i express
npm i express-art-template
npm i jquery
npm i bootstrap
在package.json页面能找到我们刚才配置的依赖包就可以
创建项目
创建服务
在students-system下新建server.js。
const express=require('express')
const app = express()
//配置express-art-template,才可以render html
app.engine('html',require('express-art-template'))
app.get('/',(req,res) =>{
res.render('login.html')
})
app.listen(3000,() => console.log('app listening on http://localhost:3000 '))
当用用户get时就会渲染login.html开通3000端口号。
创建登录页面、查看添加学生页面
使用HTML+CSS创建简单的登录页面。
这里的网页是使用bootstrap官方提供的素材进行略加修改后完成的。有需要的同学可以查看这个网址进行学习。https://v3.bootcss.com/examples/dashboard/#
登录功能开发
传统表单登录
表单登录,需要在form表单里,指定action和method,action是路径,method是方法,方法一般分为get和post。
get用于保密级别低,长度短的信息(get会把请求写道url里面,受到url长度影响,信息的长度不能无限长)。
post用于保密级别高(比如密码等),长度长的信息。
表单登录,一定伴随着整个页面的重新跳转或刷新
在login.html,为表单提供指定的路径以及方法
<form action='/login' method='post'>
·······
</form>
在后端servers.js配置相应的请求信息
app.post('/login',(req,res) =>{
console.log(req.body)
if (req.body.email==='admin@qq.com'&&req.body.password==='admin'){
res.render('main.html')
}else{
res.render('error.html')
}
})
如果想要在后端使用req.body来获取post信息的话,需要在后端配置body-parser,现在新版本的express已经内置了body-parser,不需要额外安装,直接配置即可
//配置body-parser
app.use(express.urlencoded({ extended:false}))
app.use(express.json())
这样当用户输入正确的账户密码的时候会跳转到main.html,如果错误的账号或密码就会跳转到error.html
Ajax登录
由于表单登录,伴随着整个页面的刷新,带来白屏问题,等待,跳转等问题,非常不方便,而且提示信息是在错误页面上需要跳转来,跳转去所以本项目使用Ajax局部刷新登录。
form表单里的action和method此时已经无用,删除掉
<form> ······· </form>
引入jQuery
<script src="../node_modules/jquery/dist/jquery.js"></script>
打开localhost:3000发现,jQuery并没有被加载上,因为此时jQuery存在于服务器中的node_modules文件夹中,后端服务器的文件不允许前端随意查看,我们需要开放静态文件权限给前端,public和node_modulse两个文件夹
/开放node_modules,public两个文件夹的权限,允许用户查看
app.use('/public', express.static('public'))
app.use('/bbb', express.static('node_modules'))
//前面的/aaa,/bbb是随便起名,可以对后端文件夹配置有一定的隐藏,防止被黑
此时,前端对于jQuery的引入,也可以改成下面形式,以隐藏真实后端文件夹目录
<script src="/bbb/jquery/dist/jquery.js"></script>
配置前端jQuery ajax,向后端发起请求,如果账号密码正确,则跳转到新页面main.html,如果账号密码错误,则跳出提示
<script>
$('form').on('submit', function(event){
event.preventDefault()//取消默认submit提交事件
$.ajax({
url:'/login',
method: 'POST',
data:{//向后端提交的数据
email: $('#email').val(),
password: $('#password').val()
},
success: function(data){//提交成功,要执行的函数,data就是后端回来的信息
console.log(data)
if (data.success){
window.location.href='/main.html'
}else{
alert('账号或密码错误')
}
},
error: function(){//如果受到网络原因或其他不确定因素的影响,导致请求失败执行的函数
console.log('Something went wrong')
}
})
})
</script>
后端对于post /login的请求修改如下:
app.post('/login',(req,res) =>{
console.log(req.body)
if (req.body.email==='admin@qq.com'&&req.body.password==='admin'){
// res.render('main.html')
res.send({success:true})
}else{
res.send({success:false})
}
})
配置主界面
查看学生信息
这里使用了art-template模板引擎,模板引擎是一种用于生成动态内容的工具。它将静态模板与动态数据结合起来,生成最终的输出内容。
这里是使用了each循环来遍历一个名为"students"的数组,根据数组中的学生对象的数量,循环生成对应数量的表格行,并将每个学生对象的属性值填充到表格中的对应位置。
{{each students}}
<tr>
<td>{{$index+1}}</td>
<td>{{$value.name}}</td>
<td>{{$value.gender}}</td>
<td>{{$value.age}}</td>
<td>{{$value.studentNumber}}</td>
<td>{{$value.phone}}</td>
<td></td>
</tr>
{{/each}}
在后端配置渲染页面的同时将数据也传输到页面中去。
app.get('/main.html',(req,res)=>{
res.render('main.html',{students})
})
添加学生信息
在前端页面定义一个页面加载完执行的函数,使用event.preventDefault()
阻止默认的表单提交行为,因为我们需要使用 AJax 发送表单数据到后端服务器。然后创建一个newStudent
对象,分别获取表单中学生的姓名、年龄、学号、性别。
然后使用jQuery的Ajax方法发送请求然后使用get
方法获取url
地址该请求将发往后端服务器的 /addStudent
接口。
data: newStudent,
将获取的学生信息发送到后端服务器。
success(data)
如果请求成功,并返回了响应数据,则执行回调函数。这里定义了一个简单的提示窗口来告诉用户添加学生成功,并且清空表单中的所有输入框。如果添加成功则弹出提示告诉用户添加成功
alert('Student added successfully')
弹出提示告诉用户添加成功。
$('#newStudentForm input[type!="radio"]').val(''):
清空表单中除了单选框之外的所有输入框的值,以便用户可以继续输入新的学生信息。
error()
如果请求失败执行回调函数在控制台打印输出提示用户提交失败。
<script>
$(function ()
$('#newStudentForm').on('submit', function (event) {
event.preventDefault()
const newStudent = {
name: $('#name').val(),
age: $('#age').val(),
studentNumber: $('#studentNumber').val(),
phone: $('#phone').val(),
gender: $('input[name="gender"]:checked').val()
}
$.ajax({
url: '/addStudent',
method: 'get',
data: newStudent,
success(data) {
if (data.success) {
alert('Student added successfully')
$('#newStudentForm input[type!="radio"]').val('')
}
},
error() {
console.log('something went wrong')
}
})
})
})
</script>
在后端server.js 里配置相应请求信息:
console.log(req.query)
这里我使用console.log
输出客户端发送过来的请求参数对象,方便调试和审查请求参数是否正确。
const newStudent = {...req.query}
将发送来的请求放到一个新的对象中,这里使用了ES6的新特性。
newStudent.id=students[students.length-1].id+1
为学生设置一个ID,这里使用的是以最后一条记录的ID加1
所以如果后期使用删除功能将所有的数据都删除的话,再往里添加内容会报错。
然后将新的学生添加到数组中去。
app.get('/addStudent',(req,res)=>{
console.log(req.query)
const newStudent = {...req.query}
newStudent.id=students[students.length-1].id+1
students.push(newStudent)
res.send({success:true})
});
修改学生信息
需要在前端页面加上模板字符串,例如:value="{{student.phone}}
,在这里当我们点击修改按钮后跳转到修改页面默认的会将value="{{student.phone}}
的值输入到输入框中这样方便用户修改内容。
const index = students.findIndex(student =>student.id==req.query.id)
这里使用数组的 findIndex() 方法查找到需要更新的学生数据记录的索引位置。使用箭头函数来快速创建一个匿名函数(用于比较学生 ID 是否与查询参数 ID 相匹配)。
students.splice(index,1,req.query)
:使用数组的 splice()
方法将需要更新的学生数据记录替换掉。
res.redirect('/main.html')
:重定向客户端跳转到 /main.html 页面,方便能够看到修改后的最新的学生数据信息。
app.get('/update',(req,res)=>{
//console.log(req.query)
const index = students.findIndex(student =>student.id==req.query.id)
console.log(index)
students.splice(index,1,req.query)
res.redirect('/main.html')
});
删除学生信息
这里的修改学生信息与添加学生信息是类似的。
同样使用箭头函数来快速创建一个匿名函数(用于比较学生 ID 是否与查询参数 ID 相匹配)。
使用 splice()
方法将需要删除的记录删除掉。
这里使用的是以最后一条记录的ID加1,所以如果将所有数据删除,那添加功能或报错
app.get('/delete',(req,res)=>{
const index = students.findIndex(student =>student.id==req.query.id)
students.splice(index,1)
res.redirect('/main.html')
});
总结
本项目是在不使用数据库的情况下使用bootstrap和jQuery实现简单的增删改查的功能,如有错误敬请指正!