学生管理系统

2022-01-04  本文已影响0人  wy22

1. 查询学生信息+筛选+分页

封装一个通用方法:function loadData(studentName,sex,pageIndex,pageSize)

2. 添加学生

将对象里面的数据,转为json字符串

JSON.stringify(对象)

将对象里面的数据,转为url字符串,写一个方法进行转换

studentNo=12345&loginPwd=123123&studentName=周杰伦

设置请求头:

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

xhr.setRequestHeader('Content-Type','application/json')

3.修改学生

先根据学号查询指定学生

再修改该学生信息

4.删除学生

删除前提示用户是否确定删除

根据学号删除学生信息

<!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>

    <style>

        *{

            margin: 0;

            padding: 0;

            list-style: none;

            outline: none;

            font-size: 14px;

        }

        body{

            padding: 10px;

        }

        table{

            border-collapse: collapse;

        }

        h2{

            font-size: 20px;

            margin-bottom: 10px;

        }

        th,td{

            border: 1px solid #ddd;

            padding: 2px 20px;

        }

        td button{

            margin-right: 4px;

        }

        .search{

            border: 1px solid #eee;

            padding: 5px;

            margin-bottom: 5px;

        }

        .search *{

            margin: 0 5px;

        }

        .search button{

            padding: 0 10px;

        }

    </style>

</head>

<body>

    <h2>查询学生</h2>

    <div class="search">

        <span>姓名(模糊查询):</span>

        <input type="search" id="searchText">

        <span>性别:</span>

        <input checked name="sex" type="radio" value="">全部

        <input name="sex" type="radio" value="M"/>男

        <input name="sex" type="radio" value="F"/>女

        <button id="searchBtn">搜索</button>

    </div>

    <table>

        <thead>

            <tr>

                <th>学号</th>

                <th>姓名</th>

                <th>性别</th>

                <th>年级</th>

                <th>电话</th>

                <th>地址</th>

                <th>生日</th>

                <th>邮箱</th>

                <th>操作</th>

            </tr>

        </thead>

        <tbody id="tbody">

        </tbody>

        <tfoot>

            <tr>

                <td colspan="9">

                    <button id="first">首页</button>

                    <button id="prev">上页</button>

                    <span id="pageIndex">1</span>

                    <span>/</span>

                    <span id="totalPage">1</span>

                    <button id="next">下页</button>

                    <button id="last">尾页</button>

                </td>

            </tr>

        </tfoot>

    </table>

    <script src="./js/bing.js"></script>

    <script>

        //window加载事件

        window.onload = function(){

            // 调用加载学生信息的方法

            loadStudents()

        }

        //搜索按钮点击事件

        searchBtn.onclick = function(){

            // 调用加载学生信息的方法

            loadStudents()

        }

        // 首页按钮点击事件

        first.onclick = function(){

            if(pageIndex.innerHTML==1) return

            //将页码设置为1

            pageIndex.innerHTML = 1

            // 调用加载学生信息的方法

            loadStudents()

        }

        // 上一页按钮点击事件

        prev.onclick = function(){

            //获取当前页

            let index = parseInt(pageIndex.innerHTML)

            //如果当前页大于1

            if(index>1){

                index--

                pageIndex.innerHTML = index

                // 调用加载学生信息的方法

                loadStudents()

            }

        }

        // 下一页按钮点击事件

        next.onclick = function(){

            //获取当前页

            let index = parseInt(pageIndex.innerHTML)

            //获取总页数

            let indexCount = parseInt(totalPage.innerHTML)

            // 如果当前页小于总页数

            if(index<indexCount){

                index++

                pageIndex.innerHTML = index

                // 调用加载学生信息的方法

                loadStudents()

            }

        }

        // 尾页按钮点击事件

        last.onclick = function(){

            //获取当前页

            let index = parseInt(pageIndex.innerHTML)

            //获取总页数

            let indexCount = parseInt(totalPage.innerHTML)

            if(index!=indexCount){

                //将总页数赋值给当前页

                pageIndex.innerHTML = totalPage.innerHTML

                // 调用加载学生信息的方法

                loadStudents()

            }

        }

        //加载学生信息的方法

        function loadStudents(){

            // 清空之前的数据

            tbody.innerHTML = ""

            // 获取搜索框里面的内容

            let studentName = searchText.value

            // 获取所有的性别单选框

            let sexes = document.getElementsByName('sex')

            // 定义性别

            let sex = ''

            sexes.forEach(r=>{

                if(r.checked){

                    sex = r.value

                }

            })

            // 发送请求获取学生信息

            let xhr = new XMLHttpRequest()

            xhr.open('GET',`http://www.bingjs.com:81/Student/GetStudentsConditionPages?pageIndex=${pageIndex.innerHTML}&studentName=${studentName}&sex=${sex}`)

            xhr.send()

            xhr.onreadystatechange = function(){

                if(xhr.readyState===4){

                    if(xhr.status===200){

                        //获取数据,总数量,当前页码,每页数量

                        let {data,count,pageIndex,pageSize} = JSON.parse(xhr.responseText)

                        //总页数

                        let pageCount = Math.ceil(count/pageSize)

                        //显示总页数

                        totalPage.innerHTML = pageCount

                        //遍历数据,展示数据

                        data.forEach(r=>{

                            let tr = $b.$c("tr")

                            let td1 = $b.$c('td')

                            td1.innerHTML = r.StudentNo

                            let td2 = $b.$c('td')

                            td2.innerHTML = r.StudentName

                            let td3 = $b.$c('td')

                            td3.innerHTML = r.Sex==='M'?'男':'女'

                            let td4 = $b.$c('td')

                            td4.innerHTML = r.Grade.GradeName

                            let td5 = $b.$c('td')

                            td5.innerHTML = r.Phone

                            let td6 = $b.$c('td')

                            td6.innerHTML = r.Address

                            let td7 = $b.$c('td')

                            td7.innerHTML = $b.$fd(new Date(r.BornDate))

                            let td8 = $b.$c('td')

                            td8.innerHTML = r.Email

                            let td9 = $b.$c('td')

                            let btn1 = $b.$c('button')

                            btn1.innerHTML = '修改'

                            btn1.onclick = function(){

                                location.href = './add.html?stuNo='+r.StudentNo

                            }

                            let btn2 = $b.$c('button')

                            btn2.innerHTML = '删除'

                            btn2.onclick = function(){

                                // 调用删除学生的方法

                                deleteStudent(r.StudentNo)

                            }

                            td9.appendChild(btn1)

                            td9.appendChild(btn2)

                            tr.appendChild(td1)

                            tr.appendChild(td2)

                            tr.appendChild(td3)

                            tr.appendChild(td4)

                            tr.appendChild(td5)

                            tr.appendChild(td6)

                            tr.appendChild(td7)

                            tr.appendChild(td8)

                            tr.appendChild(td9)

                            tbody.appendChild(tr)

                        })

                    }

                }

            }

        }

        //删除学生

        function deleteStudent(stuNo){

            if(confirm('确定删除吗?')){

                // 发送请求,删除学生

                let xhr = new XMLHttpRequest()

                xhr.open('POST','http://www.bingjs.com:81/Student/Delete')

                xhr.setRequestHeader('Content-Type','application/json')

                xhr.send(JSON.stringify({studentNo:stuNo}))

                xhr.onreadystatechange = function(){

                    if(xhr.readyState===4){

                        if(xhr.status===200){

                            if(xhr.responseText=='true'){

                                alert('删除成功!')

                                // 调用加载学生信息的方法

                                loadStudents()

                            }else{

                                alert('删除失败!')

                            }

                        }

                    }

                }

            }

        }

    </script>

</body>

</html>

<!DOCTYPE html>

<html>

<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>

    <style>

        #studentNoMsg {

            color: red;

            display: none;

        }

    </style>

</head>

<body>

    <h2 id="title">添加学生</h2>

    <table>

        <tr>

            <td>学号:</td>

            <td>

                <input type="text" id="studentNo">

                <span id="studentNoMsg">该学号已经存在</span>

            </td>

        </tr>

        <tr>

            <td>密码:</td>

            <td>

                <input type="password" id="loginPwd">

            </td>

        </tr>

        <tr>

            <td>姓名:</td>

            <td>

                <input type="text" id="studentName">

            </td>

        </tr>

        <tr>

            <td>性别:</td>

            <td>

                <input type="radio" name="sex" checked value="M">男

                <input type="radio" name="sex" value="F">女

            </td>

        </tr>

        <tr>

            <td>年级:</td>

            <td>

                <select id="gradeId">

                </select>

            </td>

        </tr>

        <tr>

            <td>电话:</td>

            <td>

                <input type="text" id="phone">

            </td>

        </tr>

        <tr>

            <td>地址:</td>

            <td>

                <textarea cols="50" rows="5" id="address"></textarea>

            </td>

        </tr>

        <tr>

            <td>生日:</td>

            <td>

                <input type="text" id="bornDate">

            </td>

        </tr>

        <tr>

            <td>邮箱:</td>

            <td>

                <input type="text" id="email">

            </td>

        </tr>

        <tr>

            <td>证件:</td>

            <td>

                <input type="text" id="identityCard">

            </td>

        </tr>

        <tr>

            <td></td>

            <td>

                <button id="add">添加</button>

                <button id="cancel" onclick="clearInput()">取消</button>

            </td>

        </tr>

    </table>

    <script src="./js/bing.js"></script>

    <script>

        //窗体加载事件

        window.onload = function () {

            //调用加载年级信息的方法

            loadGrade()

            setTimeout(() => {

                // 调用根据学号加载学生的方法

                loadStudentByNo()

            }, 500);

        }

        //根据学号加载学生的方法

        function loadStudentByNo() {

            //search有内容,就表示当前页面为修改

            if (location.search) {

                //设置标题

                title.innerHTML = '修改学生'

                add.innerHTML = '修改'

                let stuNo = location.search.split('?')[1].split('=')[1]

                // 根据学号,查询学生信息

                // 根据学号,查询指定的学生对象

                let xhr = new XMLHttpRequest()

                xhr.open('GET', 'http://www.bingjs.com:81/Student/GetStudentByNo?studentNo=' + stuNo)

                xhr.send()

                xhr.onreadystatechange = function () {

                    if (xhr.readyState === 4) {

                        if (xhr.status === 200) {

                            let stu = JSON.parse(xhr.responseText)

                            //给表单元素赋值

                            studentNo.value = stu.StudentNo

                            loginPwd.value = stu.LoginPwd

                            studentName.value = stu.StudentName

                            if (stu.Sex == 'M') {

                                document.getElementsByName('sex')[0].checked = true

                            } else {

                                document.getElementsByName('sex')[1].checked = true

                            }

                            gradeId.value = stu.GradeId

                            phone.value = stu.Phone

                            address.value = stu.Address

                            bornDate.value = stu.BornDate

                            email.value = stu.Email

                            identityCard.value = stu.IdentityCard

                            //将学号文本框设置为只读

                            studentNo.setAttribute('disabled', 'disabled')

                        }

                    }

                }

            }

        }

        // 学号文本框失去焦点事件

        studentNo.onblur = function () {

            //获取文本框里面的值

            let val = this.value

            // 根据学号,查询指定的学生对象

            let xhr = new XMLHttpRequest()

            xhr.open('GET', 'http://www.bingjs.com:81/Student/GetStudentByNo?studentNo=' + val)

            xhr.send()

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    if (xhr.status === 200) {

                        if (xhr.responseText != 'null') {

                            studentNoMsg.style.display = 'inline'

                        } else {

                            studentNoMsg.style.display = 'none'

                        }

                    }

                }

            }

        }

        // 添加按钮点击事件

        add.onclick = function () {

            //如果学号已存在,取消添加操作

            if (studentNoMsg.style.display == 'inline') return

            //添加一个学生对象

            let stu = {}

            //获取表单数据,将数据赋值给学生对象

            stu.studentNo = studentNo.value

            stu.loginPwd = loginPwd.value

            stu.studentName = studentName.value

            let sexes = document.getElementsByName('sex')

            sexes.forEach(r => {

                if (r.checked) {

                    stu.sex = r.value

                }

            })

            stu.gradeId = gradeId.value

            stu.phone = phone.value

            stu.address = address.value

            stu.bornDate = bornDate.value

            stu.email = email.value

            stu.identityCard = identityCard.value

            //检查用户输入是否完整

            if (!checkInput(stu)) return

            // 发生请求,执行添加

            let xhr = new XMLHttpRequest()

            //定义提交地址

            let url = 'http://www.bingjs.com:81/Student/Add'

            if (this.innerHTML == '修改') {

                //切换提交地址为修改

                url = 'http://www.bingjs.com:81/Student/Update'

            }

            xhr.open('POST', url)

            // 设置请求头信息,定义Content-Type的格式

            // application/x-www-form-urlencoded表示参数数据的格式是url格式

            // xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')

            // application/json表示参数数据的格式是json格式

            xhr.setRequestHeader('Content-Type', 'application/json')

            // GET请求方式的参数,放置在URL的后面

            // POST请求的参数,放置在send方法里面

            // send方法传递的参数,一般有两种格式:1.url格式,2.json格式

            // url格式:name:张三&age=20&sex=女

            // json格式:{"name":"张三","age":20,"sex":"女"}

            // xhr.send($b.objectToStr(stu))

            xhr.send(JSON.stringify(stu))

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    if (xhr.status === 200) {

                        if (xhr.responseText == 'true') {

                            alert('操作成功!')

                            //清空输入框里面的内容

                            clearInput()

                        } else {

                            alert('操作失败!')

                        }

                    }

                }

            }

        }

        //清空输入框内容

        function clearInput() {

            studentNo.value = ''

            loginPwd.value = ''

            studentName.value = ''

            document.getElementsByName('sex')[0].checked = true

            gradeId.value = '0'

            phone.value = ''

            address.value = ''

            bornDate.value = ''

            email.value = ''

            identityCard.value = ''

            studentNoMsg.innerHTML = ''

        }

        //验证输入是否完整

        function checkInput(stu) {

            if (stu.studentNo == '' || stu.loginPwd == '' || stu.gradeId == 0 || stu.phone == '' ||

                stu.address == '' || stu.bornDate == '' || stu.email == '' || stu.identityCard == '') {

                alert('请输入完整信息!')

                return false

            } else {

                return true

            }

        }

        //加载年级信息

        function loadGrade() {

            let xhr = new XMLHttpRequest()

            xhr.open('GET', 'http://www.bingjs.com:81/Grade/GetAll')

            xhr.send()

            xhr.onreadystatechange = function () {

                if (xhr.readyState === 4) {

                    if (xhr.status === 200) {

                        let grades = JSON.parse(xhr.responseText)

                        grades.unshift({ GradeId: 0, GradeName: '请选择年级' })

                        grades.forEach(g => {

                            let option = $b.$c('option')

                            option.value = g.GradeId

                            option.innerHTML = g.GradeName

                            gradeId.appendChild(option)

                        });

                    }

                }

            }

        }

    </script>

</body>

</html>

上一篇 下一篇

猜你喜欢

热点阅读