Vue实现学生信息管理系统

一.页面结构1、学生信息列表组件编辑添加图片注释，不超过 140 字（可选）2、添加或修改学生信息组编辑添加图片注释，不超过 140 字（可选）3、统计信息组件编辑添加图片注释，不超过 140 字（可选）4、系统日志组件编辑添加图片注释，不超过 140 字（可选）二、首页1、显示两个按钮学生信息列表按钮和系统日志列表按钮2、点击学生信息列表按钮显示学生信息列表且隐藏系统日志

雀食帅

10951人浏览 · 2022-05-18 12:30:00

雀食帅 · 2022-05-18 12:30:00 发布

一.页面结构

1、学生信息列表组件

编辑

添加图片注释，不超过 140 字（可选）

2、添加或修改学生信息组

编辑

添加图片注释，不超过 140 字（可选）

3、统计信息组件

编辑

添加图片注释，不超过 140 字（可选）

4、系统日志组件

编辑

添加图片注释，不超过 140 字（可选）

二、首页

1、显示两个按钮学生信息列表按钮和系统日志列表按钮

2、点击学生信息列表按钮显示学生信息列表且隐藏系统日志列表按钮

3、点击系统日志列表按钮显示系统日志列表按钮且隐藏学生信息列表按钮

4、首页默认显示学生信息列表按钮

三、学生信息列表组件

1、列表显示班级、姓名、英文名、性别、年龄、点赞按钮、修改按钮、删除按钮。其中英文名始终为小写字母。（通过filter过滤进行小写处理）

2、列表上方有一个添加学生按钮

3、列表下方显示学生总数、总点击数、点赞数、vue实例创建时长

4、列表下方最右有一个统计信息按钮

5、学生总数：使用computed 自动实时统计学生总数并显示

6、总点击数：对于学生信息列表，鼠标每点击一次，增加一次总点击数。总点击数实时显示。（@click="totleClickNum++"放到合适的标签上）

7、点赞数：列表中点赞按钮，每点击一次增加一次点赞数。每个学生的点赞按钮只能点赞一次，且不触发列表点击次数。（@click.once @click.stop）

8、vue实例创建时长：统计vue实例创建毫秒时长，实时显示。（钩子函数beforeCreate和created中分别获取当前毫秒时间，并相减得到时长。）

9、添加按钮和修改按钮：点击隐藏学生信息列表组件且显示添加或修改学生信息组件

10、点击删除按钮，删除此条数据

四、添加或修改学生信息组件

1、点击添加按钮，显示添加或修改学生信息组件且内容为空白

2、点击修改按钮，显示添加或修改学生信息组件且内容为该条学生的信息

3、该页面包含字段：班级、姓名、英文名、性别、年龄

4、班级：可下拉选择班级，可选项为2个：软化s20-13 和软件s20-14

5、姓名：可以为任意字符串，提交时判断为空则弹窗提示alert("姓名不能为空")。

6、姓名：自定义指令 v-color 用语姓名<input 是的输入的文字显示为蓝色

编辑

添加图片注释，不超过 140 字（可选）

7、英文名：进行严格校验，必须是全英文字母，长度必须大于等于2个英文字母且小于等于10个英文字母，否则输入框实时显示红色框，正确后恢复。（使用watch实时监控）

编辑

添加图片注释，不超过 140 字（可选）

8、英文名：提交时如果不符合如上校验，则弹窗提示alert。

9、性别：可选项为2个：男女校验必选。

10、年龄：必选。

11、提交按钮：所有输入不能为空。如果有空或不符合如上校验，则alert弹窗提示。且不隐藏当前添加或修改学生信息组件。

12、提交按钮：若所有输入校验同。对于新增数据则新增。对于修改数据则修改。隐藏当前添加或修改学生信息组件。

编辑

添加图片注释，不超过 140 字（可选）

五、统计信息组件

1、点击统计信息按钮隐藏当前学生信息列表组件且显示子组件统计信息组件

2、显示统计的数据，包括男生数量、女生数量、全部人数

3、返回按钮：点击返回按钮，隐藏当前统计信息组件且显示学生信息列表组件

编辑

添加图片注释，不超过 140 字（可选）

六、系统日志组件

1、点击系统日志列表按钮，隐藏学生信息列表组件且显示系统日志组件

2、系统日志列表组件包含字段：姓名、操作、内容、日期、时间

3、在学生信息列表组件中，点击修改按钮和删除按钮，则进行系统日志记录。记录信息在系统日志列表组件中显示

七、全局配置

要求浏览器控制台不显示vue产品提示+不显示warn警告日志+关闭vuetools插件。（开发最后执行）

代码：

<head>
    <title>学生列表</title>
    <script src="../vue.js"></script>
    <style>
        .inputstudent {
            border-style: solid;
            border-width: 1px;
            width: 300px;
        }

        .warnTip {
            border-color: red;
            outline: none;
        }
    </style>
</head>

<body>
    <div id="app" align="center">
        <p>
            <button @click="studentListFlag=true,systemLogFlag=false">学生信息列表</button>
            <button @click="studentListFlag=false,systemLogFlag=true">系统日志列表</button>
        </p>
        <p>
            <student-list v-show="studentListFlag"></student-list>
            <system-log-list v-show="systemLogFlag" v-bind:operationloglist="operationLogList"></system-log-list>
        </p>
    </div>

    <template id="studentList">
        <div>
            <div v-show="innerListFlag">
                <button @click="inputStuFlag=true">添加学生</button>
                <input-student v-show="inputStuFlag" v-bind:student="studentDTO" v-bind:index='indexDTO'
                    @callback="addOrUpdateStudent">
                </input-student>
                <table border="5px" width="50%" @click="totleClick++">
                    <tr>
                        <th>班级</th>
                        <th>姓名</th>
                        <th>英文名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>点赞</th>
                        <th>修改</th>
                        <th>删除</th>
                    </tr>
                    <tr align="center" v-for="(item,index) in students">
                        <td>{{item.class}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.enName | toLowerCase}}</td>
                        <td>{{item.gender}}</td>
                        <td>{{item.age}}</td>
                        <td><button @click.stop @click.once="totleLike++">点赞</button></td>
                        <td><button @click="showUpdatePage(index)">修改</button></td>
                        <td><button @click="delStudent(index)">删除</button></td>
                    </tr>
                </table>
                学生总数：{{totleStudent}} | 总点击数：{{totleClick}} | 点赞数：{{totleLike}} | vue实例创建时长：{{vueDuration}}毫秒
                <button @click='showStatisticsPage'>统计信息</button>
            </div>
            <statistics v-show="statisticsFlag" v-bind:statisticsinfo="statisticsDTO"></statistics>
        </div>
    </template>

    <template id="systemLogList">
        <div>
            <table border="5px" width="50%">
                <tr>
                    <th>姓名</th>
                    <th>操作</th>
                    <th>内容</th>
                    <th>日期</th>
                    <th>时间</th>
                </tr>
                <tr align="center" v-for="(item,index) in operationloglist">
                    <td>{{item.name}}</td>
                    <td>{{item.operation}}</td>
                    <td>{{item.options}}</td>
                    <td>{{item.date}}</td>
                    <td>{{item.time}}</td>
                </tr>
            </table>
        </div>
    </template>

    <template id="statistics">
        <div class="inputstudent">
            <p>男生数量：{{statisticsinfo.boyNums}}</p>
            <p>女生数量：{{statisticsinfo.girlNums}}</p>
            <p>全部人数：{{statisticsinfo.totleNums}}</p>
            <p><button @click="back">返回</button></p>
        </div>
    </template>

    <template id="inputStudent">
        <div class="inputstudent">
            <p>班级：
                <select v-model="student.class" style="width: 180px;height: 24px;">
                    <option value="13">软件s20-13</option>
                    <option value="14">软件s20-14</option>
                </select>
            </p>
            <p>姓名：<input type="text" v-model="student.name" v-color="'blue'"></p>
            <p>英文名：
                <input type="text" v-model="student.enName" v-bind:class={warnTip}>
            </p>
            <p>性别：
                <select v-model="student.gender" style="width: 180px;height: 24px;">
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </p>
            <p>年龄：<input type="text" v-model="student.age"></p>
            <p><button @click="submit">提交</button></p>
        </div>
    </template>

    <script>
        Vue.config.productionTip = false
        Vue.directive('color', {
            // 使用该钩子函数，因为需要在v-model生效后执行该钩子函数
            bind(el, binding) {
                el.style.color = binding.value;
            }
        })

        Vue.component('student-list', {
            template: '#studentList',
            data() {
                return {
                    students: [],
                    likeTotleNum: 0,
                    studentDTO: {},
                    indexDTO: -1,
                    statisticsDTO: {},
                    inputStuFlag: false,
                    statisticsFlag: false,
                    innerListFlag: true,
                    totleClick: 0,
                    totleLike: 0,
                    vueDuration: 0
                }
            },
            created() {
                var student1 = {
                    class: 13,
                    name: "张三",
                    enName: "lilei",
                    gender: "男",
                    age: 18
                }
                var student2 = {
                    class: 14,
                    name: "李四",
                    enName: "hanmeimei",
                    gender: "女",
                    age: 19
                }
                this.students.push(student1, student2)
                console.log(this.students)
            },
            mounted() {
                this.vueDuration = this.$root.duration
            },
            methods: {
                addStudent(student) {
                    this.students.push(student)
                },
                addOrUpdateStudent(student, index) {
                    console.log("addOrUpdateStudent")
                    console.log(student, index)
                    if (index == -1) {
                        this.students.push(student)
                    } else {
                        this.students[index] = student
                    }
                    this.clearInputPage()
                },
                delStudent(index) {
                    this.$root.systemLog("删除按钮", this.students[index].name)
                    this.students.splice(index, 1)
                },
                showUpdatePage(index) {
                    console.log("showUpdatePage")
                    this.$root.systemLog("修改按钮", this.students[index].name)
                    var stu = this.students[index]
                    this.studentDTO = stu
                    this.indexDTO = index
                    this.inputStuFlag = true

                },
                showStatisticsPage() {
                    console.log("showStatisticsPage")
                    this.innerListFlag = false
                    this.statisticsFlag = true
                    var temp = {
                        boyNums: 0,
                        girlNums: 0,
                        totleNums: 0
                    }
                    this.students.forEach(function (item) {
                        if (item.gender == "男") {
                            temp.boyNums++
                        } else {
                            temp.girlNums++
                        }
                        temp.totleNums++
                    })
                    this.statisticsDTO = temp
                },
                clearInputPage() {
                    this.inputStuFlag = false
                    this.studentDTO = {}
                    this.indexDTO = -1
                },
                like() {
                    this.likeTotleNum++
                }
            },
            filters: {
                toLowerCase(str) {
                    return str ? str.toLowerCase() : ''
                }
            },
            computed: {
                totleStudent() {
                    return this.students.length
                }
            }
        })

        Vue.component('system-log-list', {
            template: "#systemLogList",
            props: ["operationloglist"]
        })

        Vue.component('statistics', {
            template: "#statistics",
            props: ["statisticsinfo"],
            methods: {
                back() {
                    console.log("back")
                    this.$parent.innerListFlag = true
                    this.$parent.statisticsFlag = false
                }
            }
        })

        Vue.component('input-student', {
            template: "#inputStudent",
            props: ["student", "index"],
            data() {
                return {
                    warnTip: ''  // input输入框警告样式
                }
            },
            methods: {
                submit() {
                    console.log("submit")
                    console.log("aaa".length)
                    this.stu = this.$props.student
                    this.i = this.$props.index
                    if (this.stu.name == null
                        || this.stu.name == undefined
                        || this.stu.name == '') {
                        alert("姓名不能为空！")
                        return
                    }

                    if (this.stu.enName == null
                        || this.stu.enName == undefined
                        || this.stu.enName == '') {
                        alert("英文名不能为空！")
                        return
                    }
                    // 正则表达式判断字符串中是否只有英文
                    var reg = /^[A-Za-z]+$/
                    var onlyEnglish = reg.test(this.stu.enName)
                    var enName = this.stu.enName
                    if (enName == null
                        || enName == undefined
                        || enName == '') {
                        this.warnTip = 'warnTip'
                    } else if (!onlyEnglish) {
                        // 字符串不是纯英文
                        alert("英文名必须是纯英文字母！")
                        return
                    } else if (enName.length < 2
                        || enName.length > 10) {
                        alert("英文名长度必须大于等于2且小于等于10个字母！")
                        return
                    }
                    if (this.stu.class == null
                        || this.stu.class == undefined) {
                        alert("班级不能为空！")
                        return
                    }
                    if (this.stu.gender == null
                        || this.stu.gender == undefined
                        || this.stu.gender == '') {
                        alert("性别不能为空！")
                        return
                    }
                    if (this.stu.age == null
                        || this.stu.age == undefined) {
                        alert("年龄不能为空！")
                        return
                    }
                    this.$emit('callback', this.stu, this.i)
                    this.clear()
                },
                clear() {
                    this.stu = {}
                    this.i = -1
                }
            },
            watch: {
                'student.enName'(newValue, oldValue) {
                    console.log(newValue, oldValue)
                    // 正则表达式判断字符串中是否只有英文
                    var temp = newValue
                    var reg = /^[A-Za-z]+$/
                    var onlyEnglish = reg.test(temp)
                    console.log(onlyEnglish)
                    if (temp == null
                        || temp == undefined
                        || temp == '') {
                        this.warnTip = 'warnTip'
                    } else if (!onlyEnglish) {
                        console.log(!onlyEnglish)
                        this.warnTip = 'warnTip'
                    } else if (temp.length < 2 || temp.length > 10) {
                        this.warnTip = 'warnTip'
                    } else {
                        this.warnTip = ''
                    }
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                studentListFlag: true,
                systemLogFlag: false,
                operationLogList: [],
                duration: 0
            },
            beforeCreate() {
                var date = new Date()
                this.duration = date.getMilliseconds()
            },
            created() {
                var date = new Date()
                this.duration = date.getMilliseconds() - this.duration
                console.log("duration=" + this.duration)
            },
            methods: {
                systemLog(operation, options) {
                    if (operation == null || operation == undefined || operation == "") {
                        console.log("operation=" + operation)
                        return
                    }
                    var myDate = new Date();
                    var log = {}
                    log.name = "当前用户名"
                    log.operation = operation
                    log.time = myDate.getHours() + ":" + myDate.getMinutes() + ":" + myDate.getSeconds()
                    log.date = myDate.getFullYear() + "-" + (myDate.getMonth() + 1) + "-" + myDate.getDate()
                    log.options = options
                    this.operationLogList.push(log)
                }
            }
        })
    </script>
</body>