使用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实现简单的增删改查的功能，如有错误敬请指正！