有点小弱的学生系统静态代码

lh15766518127

已于 2024-07-12 10:35:51 修改

阅读量794

点赞数 21

文章标签：前端 javascript 开发语言

于 2024-07-11 16:31:11 首次发布

本文链接：https://blog.csdn.net/lh15766518127/article/details/140355755

版权

第一份代码有些小缺陷，建议看第二份

第一份代码功能不是很全，缺少删除部分的代码

第二份是完全的，但跟第一份有较多改变

1、第一份

<!DOCTYPE html>
<html lang="en">
  // 代码保存那里有点小问题，在思考中，有会的可以教一下我
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
</head>

<body style="background-color: antiquewhite;">
    <div id="app">
        <div>
            <div style="text-align: center;">
                <input type="text" placeholder="请输入学生姓名" v-model:value="studentName" style="text-align: center;" />
                <button id="search" @click="query">查询</button>
            </div>

            <hr>
            <ul>
                <li v-for="item in studentLIst" :key="item.id">
                    <h5>姓名：{{item.name}}</h5>
                    <h5>性别：{{item.sex}}</h5>
                    <h5>地址：{{item.adress}}</h5>
                    <button v-show="item.id!==editid" @click="edit(item)">编辑</button>
                    <button v-show="item.id==editid" @click="save(item.id)">保存</button>
                </li>
            </ul>

            <hr>
            <!-- <div id="add" :hidden="hid" style="border: 1px solid slategrey;">
                <input type="text" placeholder="请输入学生姓名" v-model="addsName"><br>
                <input type="text" placeholder="请输入学生性别" v-model="addsSex"><br>
                <input type="text" placeholder="请输入学生地址" v-model="addsAdress"><br>
            </div> -->
        </div>
        <div style="text-align: center;">
            <button id="adds" @click="add">添加</button>
        </div>

    </div>




    <script src="./vue.js"></script>
    <script>
        const studentlist1 = [
            {
                id: "1",
                name: "小明",
                sex: '男',
                adress: "xxx.xxx.xxx"
            },
            {
                id: "2",
                name: "小红",
                sex: '女',
                adress: "xxx.xxx.xxx"
            },

        ]
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    studentName: "",
                    addsName: "",
                    addsSex: "",
                    addsAdress: "",
                    editid: -1,
                    studentLIst: [{
                        id: "0",
                        name: "小明",
                        sex: '男',
                        adress: "xxx.xxx.xxx"
                    },
                    {
                        id: "0",
                        name: "小红",
                        sex: '女',
                        adress: "xxx.xxx.xxx"
                    },]
                }
            },
            methods: {
                //查询学生
                query() {
                    app.studentLIst = studentlist1.filter(function (el) {
                        //return el.name === app.studentName //全查询
                        return el.name.indexOf(app.studentName) >= 0 //模糊查询
                    })
                },
                //添加学生
                add() {
                    app.addsName = prompt("请输入学生姓名：")
                    app.addsSex = prompt("请输入学生性别：")
                    app.addsAdress = prompt("请输入学生地址：")
                    // const add = document.getElementById("add")
                    const student = {
                        id: app.studentLIst.length + 1,
                        name: app.addsName,
                        sex: app.addsSex,
                        adress: app.addsAdress
                    }
                    studentlist1.unshift(student)
                    app.studentLIst.unshift(student)
                },
                //编辑学生
                edit(item) {
                    // app.studentLIst[item.id].id = item.id
                    this.editid = item.id
                    app.studentLIst[item.id].name = prompt("请输入学生姓名：", item.name)
                    app.studentLIst[item.id].sex = prompt("请输入学生性别：", item.sex)
                    app.studentLIst[item.id].adress = prompt("请输入学生地址：", item.adress)

                },
                //保存学生
                save(id) {
                    this.editid = -1
                }
            },

        })


    </script>
</body>

</html>

2、第二份

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生管理系统</title>
</head>

<body style="background-color: antiquewhite;">
    <div id="app">
        <div>
            <div style="text-align: center;">
                <input type="text" placeholder="请输入学生姓名" v-model:value="studentName" style="text-align: center;" />
                <button id="search" @click="query">查询</button>
            </div>

            <hr>
            <ul>
                <li v-for="item in studentLIst" :key="item.id">
                    <h5>姓名：{{item.name}}</h5>
                    <h5>性别：{{item.sex}}</h5>
                    <h5>地址：{{item.adress}}</h5>
                    <button @click="edit(item)">编辑</button>
                    <button @click="deleteStudent(item.id)">删除</button>

                </li>
            </ul>

            <hr>
            <div id="add" :hidden="editid"
                style="border: 1px solid slategrey; text-align: center; width: 16%; height: 100px; position: absolute; top: 10%; left: 42%; background-color: aliceblue;">
                <input type="text" placeholder="请输入学生姓名" v-model="addsName" style="text-align: center; width: 80%;"><br>
                <input type="text" placeholder="请输入学生性别" v-model="addsSex" style="text-align: center; width: 80%;"><br>
                <input type="text" placeholder="请输入学生地址" v-model="addsAdress"
                    style="text-align: center; width: 80%;"><br>
                <button @click="save(id)" style="margin-top: 5px;">保存</button>
                <button @click="cancel(1)" style="margin-top: 5px; margin-left: 10px;">取消</button>
            </div>

            <div :hidden="deleteid"
                style="border: 1px solid slategrey; background-color: aliceblue; text-align: center; width: 16%; position: absolute; top: 10%; left: 42%;">
                <p>你确定要删除这个数据吗</p>
                <button style="margin-top: 5px;" @click="determine(id)">确定</button>
                <button style="margin-top: 5px; margin-left: 10px;" @click="cancel(2)">取消</button>
            </div>
        </div>
        <div style="text-align: center;">
            <button id="adds" @click="add">添加</button>
        </div>

    </div>




    <script src="./vue.js"></script>
    <script>
        // const add = document.getElementById("add")
        let studentlist1 = [
            {
                id: "0",
                name: "小明",
                sex: '男',
                adress: "xxx.xxx.xxx"
            },
            {
                id: "1",
                name: "小红",
                sex: '女',
                adress: "xxx.xxx.xxx"
            },

        ]
        const app = new Vue({
            el: "#app",
            data() {
                return {
                    studentName: "",
                    addsName: "",
                    addsSex: "",
                    addsAdress: "",
                    editid: true,
                    deleteid: true,
                    id: -1,
                    studentLIst: [{
                        id: "0",
                        name: "小明",
                        sex: '男',
                        adress: "xxx.xxx.xxx"
                    },
                    {
                        id: "1",
                        name: "小红",
                        sex: '女',
                        adress: "xxx.xxx.xxx"
                    },]
                }
            },
            methods: {
                //查询学生
                query() {
                    const that = this //要注意，再次嵌套的this不再是原先的了，可以用这种方法来引用this
                    this.studentLIst = studentlist1.filter(function (el) {
                        // console.log(el.name.indexOf(that.studentName) >= 0);
                        //return el.name === app.studentName //全查询
                        return el.name.indexOf(that.studentName) >= 0 //模糊查询
                    })
                },
                //添加学生
                add() {
                    this.editid = false
                    this.id = -1
                },
                //编辑学生
                edit(item) {
                    this.editid = false
                    this.addsName = item.name
                    this.addsSex = item.sex
                    this.addsAdress = item.adress
                    this.id = item.id
                },
                //保存学生
                save(num) {
                    if (num < 0) {
                        const student = {
                            id: app.studentLIst.length,
                            name: app.addsName,
                            sex: app.addsSex,
                            adress: app.addsAdress
                        }
                        studentlist1.push(student)
                        app.studentLIst = studentlist1
                        // console.log(app.studentLIst);
                        app.addsName = ''
                        app.addsSex = ''
                        app.addsAdress = ''
                        app.editid = true
                    } else {
                        app.studentLIst[num].name = app.addsName
                        app.studentLIst[num].sex = app.addsSex
                        app.studentLIst[num].adress = app.addsAdress
                        app.studentLIst = [...app.studentLIst]
                        studentlist1 = app.studentLIst
                        app.editid = true
                        app.addsName = ''
                        app.addsSex = ''
                        app.addsAdress = ''
                    }
                },
                //取消
                cancel(num) {
                    if (num == 1) {  //取消修改或添加
                        this.editid = true
                        app.addsName = ''
                        app.addsSex = ''
                        app.addsAdress = ''
                    } else {         //取消删除
                        app.deleteid = true
                    }

                },
                //删除
                deleteStudent(id) {
                    this.deleteid = false
                    this.id = id


                },
                //确定
                determine(id) {
                    studentlist1.splice(id, 1)
                    this.studentLIst = studentlist1
                    this.deleteid = true
                }
            }

        })


    </script>
</body>

</html>