使用layui库来实现学生信息的增删改查

想被带飞的鱼

已于 2022-04-20 10:08:13 修改

阅读量1.8k

点赞数 1

分类专栏： Javascript 文章标签： javascript html layui

于 2022-04-06 21:46:42 首次发布

本文链接：https://blog.csdn.net/m0_62008199/article/details/124000818

版权

Javascript 专栏收录该内容

60 篇文章 2 订阅

订阅专栏

使用layui库来实现学生信息的增删改查

进阶版的信息管理添加了分页和班级管理等多种功能，详情请点连接到资源下载文件
 js实现学生信息的增删改查
 jQuery实现学生信息的增删改查
在这里插入图片描述

不用写ajax代码，layui里面自带

layui注册.html:用户的注册，注册成功，跳转登录页面

layui登录.html:用户的登录，登录成功，跳转页面

layui.js:下载地址：https://layui.itze.cn/

jquery-1.12.4.min.js:https://jquery.com/

mock-min.js:下载地址：http://mockjs.com/

注意：注册信息是放在localStorage本地里面

data.js:是注册和登录的后台验证和判断

studentMock.js和students.js是学生信息的后台验证和js代码

classMock.js和class.js是班级信息的后台验证和js代码，

main.html:主页面，登录成功后跳转的页面

注意：班级信息我把你们的单词全都写成了teacher

实现页面

在这里插入图片描述

打开页面，需要下载vscode插件Live Server，点击右键箭头部分打开页面

在这里插入图片描述

layui注册.html

<!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>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body {
            background-color: cadetblue;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card {
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="layui-card card">
        <div class="layui-card-header">注册</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" required lay-verify="required|username" placeholder="请输入用户名"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="userpassword" required lay-verify="required|pass"
                            placeholder="请输入密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="repassword" required lay-verify="required|pass|repass"
                            placeholder="请确认密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="main">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <script src="./js/mock-min.js"></script>
    <script src="./js/data.js"></script>
    <script src="./layui/layui.js"></script>
    <script>
        layui.define(function () {
            let { $, form } = layui;
            //表单验证
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }

                    //如果不想自动弹出默认提示框，可以直接返回 true，这时你可以通过其他任意方式提示（v2.5.7 新增）
                    if (value === 'xxx') {
                        alert('用户名不能为敏感词');
                        // return true;
                    }
                    //判断用户名是否重复
                    let str;
                    $.ajax({
                        type: "post",
                        url: "/findusers",
                        async: false,
                        processData: false,
                        dataType: "json",
                        data: {
                            username: value
                        },
                        success(res) {
                            if (res.status == 0) {
                                str = "用户名已存在"
                            }
                            console.log(res.status);
                        }
                    })
                    return str;
                },
                pass: function (value, item) {
                    if (!/^[\S]{6,12}$/.test(value)) {
                        return '密码必须6到12位，且不能出现空格';
                    }
                },
                repass: function (value, item) {
                    if ($("[name='userpassword']").val() !== value) {
                        return '你输入的密码不一致';

                    }
                }

            });
            //阻止表单验证事件
            form.on('submit(main)', function (data) {
                console.log(data.field);
                let username = data.field.username;
                let userpwd = data.field.userpassword;
                $.ajax({
                    type: "post",
                    url: "/addusers",
                    processData: false,
                    dataType: "json",
                    data: {
                        username,
                        userpwd
                    },
                    success(res) {
                        layer.alert("注册成功", function () {
                            location.href = "layui登录.html";
                        })

                    }
                })
                // console.log($("[name='username']").val(), $("[name='repassword']").val());
                return false;
            })
            //上传数据

        });
    </script>

</body>

</html>

layui登录.html

<!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>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <style>
        body{
            background-color: cadetblue;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .card{
            width: 400px;
            height: 300px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="layui-card card">
        <div class="layui-card-header">登录</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">用户名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="userpassword" required lay-verify="required" placeholder="请输入密码"
                            autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <script src="./js/mock-min.js"></script>
    <script src="./js/data.js"></script>
    <script src="./layui/layui.js"></script>

    <script>
        layui.define(function(){
            let {$,form} = layui;
            
            form.on('submit(formDemo)',function(data){
                let str;
                console.log(data.field);
                let username = data.field.username;
                let userpwd =  data.field.userpassword;
                $.ajax({
                    type:"post",
                    url:"/login",
                    processData: false,
                    dataType: "json",
                    data:{
                        username,
                        userpwd
                    },
                    success(res){
                        if(res.status==0){
                           alert("用户不存在");
                           return false;
                        }
                        console.log(res.status);
                        location.href = "main.html";
                    }
                })
                return false;
            })
        });
    </script>
</body>

</html>

data.js

//添加用户
Mock.mock("/addusers","post",function(options){
    let {username,userpwd} = options.body;
    console.log(options.body,username,userpwd);
    let users = JSON.parse(localStorage.getItem('users') || '[]');
    users.push({
        username,userpwd
    })
    localStorage.setItem('users',JSON.stringify(users));
    return {
        msg:"注册成功"
    }
})
//查找用户是否有相同
Mock.mock("/findusers","post",function(options){
    let {username} = options.body;
    if(!localStorage.getItem("users")){
        return{
            status:1
        }
    }
    let users = JSON.parse(localStorage.getItem("users") || '[]');
    console.log(users);
    if(users.find(item=>item.username == username)){
        return{
            status:0
        }
    }else{
        return{
            status:1
        }
    }
});
//登录判断账户是否存在
Mock.mock('/login','post',function(options){
    let {username,userpwd} = options.body;
    let users = JSON.parse(localStorage.getItem("users") || '[]');
    console.log(options.body,username,userpwd);
    if(users.find(item=>item.username == username && item.userpwd == userpwd)){
       console.log("你好");
        return{
            status:1
        }
    }else{
        return{
            status:0
        }
    }
})

main.html

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 管理系统大布局 - Layui</title>
    <link rel="stylesheet" href="./layui/css/layui.css">
</head>

<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header">
            <div class="layui-logo layui-hide-xs layui-bg-black">学生信息管理系统</div>
            <!-- 头部区域（可配合layui 已有的水平导航） -->
            <ul class="layui-nav layui-layout-left">
                <!-- 移动端显示 -->
                <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                    <i class="layui-icon layui-icon-spread-left"></i>
                </li>

                <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
                <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
                <li class="layui-nav-item">
                    <a href="javascript:;">nav groups</a>
                    <dl class="layui-nav-child">
                        <dd><a href="">menu 11</a></dd>
                        <dd><a href="">menu 22</a></dd>
                        <dd><a href="">menu 33</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item layui-hide layui-show-md-inline-block">
                    <a href="javascript:;">
                        <img src="./img/12.jpg"
                            class="layui-nav-img">
                        tester
                    </a>
                    <dl class="layui-nav-child">
                        <dd><a href="">Your Profile</a></dd>
                        <dd><a href="">Settings</a></dd>
                        <dd><a href="">Sign out</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                    <a href="javascript:;">
                        <i class="layui-icon layui-icon-more-vertical"></i>
                    </a>
                </li>
            </ul>
        </div>

        <div class="layui-side layui-bg-black">
            <div class="layui-side-scroll">
                <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
                <ul class="layui-nav layui-nav-tree" lay-filter="information">
                    <li class="layui-nav-item layui-nav-itemed">
                        <a class="" href="javascript:;">信息管理</a>
                        <dl class="layui-nav-child">
                            <dd><a href="#student">学生信息</a></dd>
                            <dd><a href="#class">班级信息</a></dd>
                            <dd><a href="#teacher">老师信息</a></dd>
                        </dl>
                    </li>
                </ul>
            </div>
        </div>

        <div class="layui-body">
            <!-- 内容主体区域 -->
            <div style="padding: 15px;" id="content"></div>
        </div>

        <div class="layui-footer">
            <!-- 底部固定区域 -->
            底部固定区域
        </div>
    </div>
    <script src="./js/mock-min.js"></script>
    <script src="./layui/layui.js"></script>
    <script>
        //引入外部信息
        layui.define(function(){
            let {$,element} = layui;
            element.on("nav(information)",function(ele){
                console.log(ele.attr("href").substring(1));
                $("#content").load(ele.attr("href").substring(1)+".html")
            })
        });
        //JS 
        layui.use(['element', 'layer', 'util'], function () {
            var element = layui.element
                , layer = layui.layer
                , util = layui.util
                , $ = layui.$;

            //头部事件
            util.event('lay-header-event', {
                //左侧菜单事件
                menuLeft: function (othis) {
                    layer.msg('展开左侧菜单的操作', { icon: 0 });
                }
                , menuRight: function () {
                    layer.open({
                        type: 1
                        , content: '<div style="padding: 15px;">处理右侧面板的操作</div>'
                        , area: ['260px', '100%']
                        , offset: 'rt' //右上角
                        , anim: 5
                        , shadeClose: true
                    });
                }
            });

        });
    </script>
</body>

</html>

students.html

<!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>
    <!-- <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./layui/css/layui.css"> -->
    <style>
        .content {
            width: 350px;
            height: 200px;
        }

        .selectList {
            width: 100px;
            height: 90px;
        }

        .movename {
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <!-- 表头 -->
    <script type="text/html" id="tools">
        <form action="" class="layui-form" lay-filter="searchContent">
            <div class="layui-form-item" >
                <div class="layui-inline inlineStrle">
                    <button type="button" class="layui-btn" lay-event="addBtn" >增加</button>
                </div>
                <div class="layui-inline inlineStrle" style="width: 120px;">
                    <select name="selectstudents" lay-verify="" lay-filter="selectBtn">
                        <option value="">请选择分类</option>
                        <option value="name">姓名</option>
                        <option value="age">年龄</option>
                        <option value="gender">性别</option>
                    </select>
                </div>
                <div class="layui-inline inlineStrle">
                    <input type="text" name="search" required lay-verify="required" placeholder="请输入需要搜索的内容" autocomplete="off" lay-event="valueBtn"
                        class="layui-input">
                </div>
                <div class="layui-inline inlineStrle">
                    <button type="button" class="layui-btn" lay-event="searchBtn" name="="searchBtnname><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </form>
    </script>
    <!-- 表格 -->
    <table id="studentsTable" lay-filter="clickBtn"></table>
    <!-- 表格自定义参数 -->
    <script type="text/html" id="operation">
        <a class="layui-btn layui-btn-sm" lay-event="editBtn">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delBtn">删除</a>
    </script>

    <!-- <script src="./js/mock-min.js"></script>
    <script src="./layui/layui.js"></script> -->
    <script src="./js/studentMock.js"></script>
    <script src="./js/students.js"></script>   
</body>

</html>

studentMock.js

//获取学生信息
Mock.mock('/findStudents', 'post', function (options) {
    console.log(options.body);
    // console.log(typeof options.body,options.body,options.body.type,options.body.value);
    if(typeof options.body == "string"){
        options.body = JSON.parse(options.body);
    }
    //搜索传过来的数据
    let indexText = options.body.selectstudents;
    let valueName = options.body.search;
    console.log(indexText,valueName);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    if(indexText){
        students = students.filter(item=>item[indexText].toString().search(valueName) >= 0)
    }
    console.log(typeof students);
    return {
        code:0,
        data:students
    };

})
//添加学生
Mock.mock('/addStudents', 'post', function (options) {
    let { name, age, gender } = options.body;
    console.log(options.body, name, age, gender);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    let id = 1;
    //判断studens的长度是否大于0，大于0的话，就把students的最后一个元素的id加1
    if (students.length > 0) {
        id = students[students.length - 1].id + 1;
    }
    students.push({
        name,
        age,
        gender,
        id
    })
    localStorage.setItem("students", JSON.stringify(students));
    return {
        code:0,
        data:{
            students
        }
    };
})
//删除学生数据
Mock.mock('/deleteStudents', 'post', function (options) {
    console.log(options.body.deleBtn);
    let { deleBtn } = options.body;
    //获取我点击删除按钮的id
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    students = students.filter(item => item.id != deleBtn);
    console.log(students);
    localStorage.setItem("students", JSON.stringify(students));
    return {
        msg: "删除成功"
    }
})
//修改学生数据
Mock.mock("/reviseStudents", 'post', function (options) {
    let { deleBtn } = options.body;
    let students = JSON.parse(localStorage.getItem('students') || "[]");
    let student = students.find(item => item.id == deleBtn);
    console.log(student);
    return {
        student
        // msg: "修改上传成功"
    }
})
//把修改的学生数据传入新的students
Mock.mock("/reviseStudentsTrue", 'post', function (options) {
    let { name, age, gender, id } = options.body;
    console.log(name,age,gender,id,options.body);
    let students = JSON.parse(localStorage.getItem('students') || '[]');
    console.log(students);
    //可以使用方法一，那边调用就使用返回的student用res.信息就行了
    let student = students.find(item => item.id == id);
    student.name = name;
    student.age = age;
    student.gender = gender;
    localStorage.setItem("students", JSON.stringify(students));
    return {
        code:0,
        data:students
    }
})
//更具id来获取信息
Mock.mock('/findById','post',function(options){
    let {id} = options.body;
    let students = JSON.parse(localStorage.getItem("students") || "[]");
    console.log(id,students);
    let student = students.find(item => item.id == id);
    
    return {
        student
    }
});

students.js


layui.define(function () {
    let { $, layer, table, form } = layui;
    //表格显示信息
    let temp = table.render({
        elem: '#studentsTable',
        method: 'post',
        contentType: 'application/json'
        , toolbar: '#tools'
        , url: '/findStudents' //数据接口
        , cols: [[ //表头
            { field: 'id', title: 'ID', sort: true, }
            , { field: 'name', title: '姓名',}
            , { field: 'age', title: '年龄', sort: true,}
            , { field: 'gender', title: '性别',}
            , { title: '操作', templet: '#operation', }
            // , {title: '操作', width: 200, templet: '#operation',height:100}
        ]]
    });
    //toolbar:工具栏里面的事件，tool为表格里面的事件
    //触发工具栏里面的事件
    table.on('toolbar(clickBtn)', function (obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        console.log(obj.table);
        //增加
        if (layEvent === 'addBtn') {
            layer.open({
                type: 1,
                success: function () {
                    form.render()
                },
                //添加学生信息
                yes: function (index) {
                    console.log(form.val("addContent"));
                    layer.close(index);
                    $.ajax({
                        type: "post",
                        url: "/addStudents",
                        processData: false,
                        dataType: "json",
                        data: form.val("addContent"),
                        success(res) {
                            layer.close(index);
                            temp.reload({
                                where: {}
                            });
                        }
                    })
                },
                btn: ['确定', '取消'],
                title: "增加学生信息",
                content: `
                    <form action="" class="layui-form content addContent" lay-filter="addContent">
                        <div class="layui-form-item movename">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-inline">
                                <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">单选框</label>
                            <div class="layui-input-block">
                                <input type="radio" name="gender" value="男" title="男">
                                <input type="radio" name="gender" value="女" title="女">
                            </div>
                        </div>        
                    </form>
                `
            });
        }
        //搜索
        else if (layEvent === 'searchBtn') { //搜索
            console.log(form.val("searchContent"));
            temp.reload({
                where: form.val("searchContent")
            })
        }
    });
    //触发表格里面的事件
    table.on('tool(clickBtn)', function (obj) {
        let data = obj.data; //获得当前行数据
        let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        //编辑
        if (layEvent === 'editBtn') {
            layer.open({
                type: 1,
                title: "学生信息",
                success: function () {
                    //将信息放在弹出框里面
                    //简易方法，但是有多人登录已经修改信息后，我们获取的还是表单的信息，所以要用调用ajax来获取后台的信息
                    // form.val("editContent", {
                    //     "name": data.name,
                    //     "age": data.age,
                    //     "gender": data.gender
                    // });

                    //从信息库里获取数据
                    $.ajax({
                        type: "post",
                        url: "/findById",
                        processData: false,
                        dataType: "json",
                        data: {
                            id: data.id
                        },
                        success(res) {
                            form.val("editContent", res.student)
                        }
                    })
                },
                //编辑学生信息
                yes: function (index) {
                    console.log(form.val("editContent").name, data, index);
                    $.ajax({
                        type: "post",
                        url: "/reviseStudentsTrue",
                        processData: false,
                        dataType: "json",
                        data: {
                            id: data.id,
                            ...form.val("editContent")
                        },
                        success(res) {
                            layer.close(index);
                            temp.reload();
                        }
                    })
                },
                btn: ['确定', '取消'],
                content: `
                <form action="" class="layui-form content editContent" lay-filter="editContent">
                        <div class="layui-form-item movename">
                            <label class="layui-form-label">姓名</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">年龄</label>
                            <div class="layui-input-inline">
                                <input type="text" name="age" required lay-verify="required" placeholder="请输入年龄" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">单选框</label>
                            <div class="layui-input-block">
                                <input type="radio" name="gender" value="男" title="男">
                                <input type="radio" name="gender" value="女" title="女">
                            </div>
                        </div>        
                    </form>
                `
            })
        }
        //删除
        else if (layEvent === 'delBtn') {
            layer.confirm('确定删除这一行吗？', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "/deleteStudents",
                    processData: false,
                    dataType: "json",
                    data: {
                        deleBtn: data.id
                    }
                })
            })

            console.log(data.id, data);
        }
    })
});

class.html

<!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>
    <!-- <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./layui/css/layui.css"> -->
    <style>
        .content {
            width: 350px;
            height: 200px;
        }

        .selectList {
            width: 100px;
            height: 90px;
        }

        .movename {
            padding-top: 30px;
        }
    </style>
</head>

<body>
    <!-- 表头 -->
    <script type="text/html" id="tools">
        <form action="" class="layui-form" lay-filter="searchContent">
            <div class="layui-form-item" >
                <div class="layui-inline inlineStrle">
                    <button type="button" class="layui-btn" lay-event="addBtn" >增加</button>
                </div>
                <div class="layui-inline inlineStrle" style="width: 120px;">
                    <select name="selectstudents" lay-verify="" lay-filter="selectBtn">
                        <option value="">请选择分类</option>
                        <option value="classname">班级名称</option>
                        <option value="classnum">班级人数</option>
                        <option value="classteacher">任课老师</option>
                        <option value="classtime">开班时间</option>
                    </select>
                </div>
                <div class="layui-inline inlineStrle timeDis">
                    <input type="text" name="search" required lay-verify="required" placeholder="请输入需要搜索的内容" autocomplete="off" lay-event="valueBtn"
                        class="layui-input">                    
                </div>
                <div class="layui-inline inlineStrle">
                    <button type="button" class="layui-btn" lay-event="searchBtn" name="="searchBtnname><i class="layui-icon">&#xe615;</i></button>
                </div>
            </div>
        </form>
    </script>
    <!-- 表格 -->
    <table id="teachersTable" lay-filter="clickBtn"></table>
    <!-- 表格自定义参数 -->
    <script type="text/html" id="operation">
        <a class="layui-btn layui-btn-sm" lay-event="editBtn">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delBtn">删除</a>
    </script>

    <!-- <script src="./js/mock-min.js"></script>
    <script src="./layui/layui.js"></script> -->
    <script src="./js/classMock.js"></script>
    <script src="./js/class.js"></script>
</body>

</html>

classMock.js

//获取老师信息
Mock.mock('/findTeacher', 'post', function (options) {
    // console.log(options.body);
    // console.log(typeof options.body,options.body,options.body.type,options.body.value);
    if(typeof options.body == "string"){
        options.body = JSON.parse(options.body);
    }
    //搜索传过来的数据
    let indexText = options.body.selectstudents;
    let valueName = options.body.search;
    let searchStart = options.body.searchStart;
    let searchEnd = options.body.searchEnd;
    let teachers = JSON.parse(localStorage.getItem('teachers') || '[]');
    if(indexText){
        teachers = teachers.filter(item=>item[indexText].toString().search(valueName) >= 0)
    }  
    console.log(options.body.searchStart,options.body.searchEnd);
    if(searchStart){
        teachers = teachers.filter(item=>item.classtime >= searchStart);
    }
    if(searchEnd){
        teachers = teachers.filter(item=>item.classtime <= searchEnd);
    }
    return {
        code:0,
        data:teachers
    };

})

//添加老师
Mock.mock('/addTeacher', 'post', function (options) {
    let { classname, classnum, classteacher,classtime } = options.body;
    console.log(options.body, classname, classnum, classteacher,classtime);
    let teachers = JSON.parse(localStorage.getItem('teachers') || '[]');
    let id = 1;
    //判断studens的长度是否大于0，大于0的话，就把teachers的最后一个元素的id加1
    if (teachers.length > 0) {
        id = teachers[teachers.length - 1].id + 1;
    }
    teachers.push({
        classname,
        classnum,
        classteacher,
        classtime,
        id
    })
    localStorage.setItem("teachers", JSON.stringify(teachers));
    return {
        code:0,
        data:{
            teachers
        }
    };
})
//删除学生数据
Mock.mock('/deleteTeachers', 'post', function (options) {
    console.log(options.body.deleBtn);
    let { deleBtn } = options.body;
    //获取我点击删除按钮的id
    let teachers = JSON.parse(localStorage.getItem('teachers') || '[]');
    teachers = teachers.filter(item => item.id != deleBtn);
    console.log(teachers);
    localStorage.setItem("teachers", JSON.stringify(teachers));
    return {
        msg: "删除成功"
    }
})
//修改学生数据
Mock.mock("/reviseTeachers", 'post', function (options) {
    let { deleBtn } = options.body;
    let teachers = JSON.parse(localStorage.getItem('teachers') || "[]");
    let teacher = teachers.find(item => item.id == deleBtn);
    console.log(teacher);
    return {
        teacher
        // msg: "修改上传成功"
    }
})
//把修改的学生数据传入新的teachers
Mock.mock("/reviseTeachersTrue", 'post', function (options) {
    let {classname, classnum, classteacher,classtime , id } = options.body;
    console.log(classname, classnum, classteacher,classtime ,id,options.body);
    let teachers = JSON.parse(localStorage.getItem('teachers') || '[]');
    console.log(teachers);
    //可以使用方法一，那边调用就使用返回的teacher用res.信息就行了
    let teacher = teachers.find(item => item.id == id);
    teacher.classname = classname;
    teacher.classnum = classnum;
    teacher.classteacher = classteacher;
    teacher.classtime = classtime;
    localStorage.setItem("teachers", JSON.stringify(teachers));
    return {
        code:0,
        data:teachers
    }
})
//更具id来获取信息
Mock.mock('/findById','post',function(options){
    let {id} = options.body;
    let teachers = JSON.parse(localStorage.getItem("teachers") || "[]");
    console.log(id,teachers);
    let teacher = teachers.find(item => item.id == id);
    
    return {
        teacher
    }
});

class.js

layui.define(function () {
    let { $, layer, table, form, laydate } = layui;

    //表格显示信息
    let temp = table.render({
        elem: '#teachersTable',
        method: 'post',
        contentType: 'application/json'
        , toolbar: '#tools'
        , url: '/findTeacher' //数据接口
        , cols: [[ //表头
            { field: 'id', title: 'ID', sort: true, }
            , { field: 'classname', title: '班级名称' }
            , { field: 'classnum', title: '班级人数', sort: true, }
            , { field: 'classteacher', title: '班主任' }
            , { field: 'classtime', title: '开班时间' }
            , { title: '操作', templet: '#operation', }
            // , {title: '操作', width: 200, templet: '#operation',height:100}
        ]]
    });

    //toolbar:工具栏里面的事件，tool为表格里面的事件
    //触发工具栏里面的事件
    table.on('toolbar(clickBtn)', function (obj) {
        var data = obj.data; //获得当前行数据
        var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        console.log(obj.table);
        //增加
        if (layEvent === 'addBtn') {
            layer.open({
                type: 1,
                success: function () {
                    form.render();
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#test1', //指定元素
                        value: '2017-09-10',
                        trigger: 'click',采用click弹出
                    });
                },
                //添加学生信息
                yes: function (index) {
                    console.log(form.val("addContent"));
                    layer.close(index);
                    $.ajax({
                        type: "post",
                        url: "/addTeacher",
                        processData: false,
                        dataType: "json",
                        data: form.val("addContent"),
                        success(res) {
                            layer.close(index);
                            temp.reload({
                                where: {}
                            });
                        }
                    })
                },
                btn: ['确定', '取消'],
                title: "增加班级信息",
                content: `
                    <form action="" class="layui-form content addContent" lay-filter="addContent">
                        <div class="layui-form-item movename">
                            <label class="layui-form-label">班级名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classname" required lay-verify="required" placeholder="请输入班级名称"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">班级人数</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classnum" required lay-verify="required" placeholder="请输入班级人数" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">班主任</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classteacher" required lay-verify="required" placeholder="请输入班主任" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>    
                        <div class="layui-form-item">
                        <label class="layui-form-label">开班时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="test1"  name="classtime" required lay-verify="required" placeholder="yyyy-mm-dd">
                        </div>
                    </div>    
                    </form>
                `
            });
        }
        //搜索
        else if (layEvent === 'searchBtn') { //搜索
            console.log(form.val("searchContent"));
            console.log(form.val("searchContent").selectstudents,form.val("searchContent"). searchStart,form.val("searchContent"). searchEnd);
            temp.reload({
                where: form.val("searchContent")
            })
        }
    });
    //触发表格里面的事件
    table.on('tool(clickBtn)', function (obj) {
        let data = obj.data; //获得当前行数据
        let layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
        let tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
        //编辑
        if (layEvent === 'editBtn') {
            layer.open({
                type: 1,
                title: "学生信息",
                success: function () {
                    //执行一个laydate实例
                    laydate.render({
                        elem: '#test1', //指定元素
                        value: '2017-09-10',
                        trigger: 'click',采用click弹出
                    });

                    //从信息库里获取数据
                    $.ajax({
                        type: "post",
                        url: "/findById",
                        processData: false,
                        dataType: "json",
                        data: {
                            id: data.id
                        },
                        success(res) {
                            form.val("editContent", res.teacher)
                        }
                    })
                },
                //编辑学生信息
                yes: function (index) {
                    console.log(form.val("editContent").classname, data, index);
                    $.ajax({
                        type: "post",
                        url: "/reviseTeachersTrue",
                        processData: false,
                        dataType: "json",
                        data: {
                            id: data.id,
                            ...form.val("editContent")
                        },
                        success(res) {
                            layer.close(index);
                            temp.reload();
                        }
                    })
                },
                btn: ['确定', '取消'],
                content: `
                    <form action="" class="layui-form content editContent" lay-filter="editContent">
                        <div class="layui-form-item movename">
                            <label class="layui-form-label">班级名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classname" required lay-verify="required" placeholder="请输入班级名称"
                                    autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">班级人数</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classnum" required lay-verify="required" placeholder="请输入班级人数" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">班主任</label>
                            <div class="layui-input-inline">
                                <input type="text" name="classteacher" required lay-verify="required" placeholder="请输入班主任" autocomplete="off"
                                    class="layui-input">
                            </div>
                        </div>    
                        <div class="layui-form-item">
                        <label class="layui-form-label">开班时间</label>
                        <div class="layui-input-inline">
                            <input type="text" class="layui-input" id="test1"  name="classtime" required lay-verify="required" placeholder="yyyy-mm-dd">
                        </div>
                    </div>    
                </form>           
                `
            })
        }
        //删除
        else if (layEvent === 'delBtn') {
            layer.confirm('确定删除这一行吗？', function (index) {
                obj.del();
                layer.close(index);
                $.ajax({
                    type: "post",
                    url: "/deleteTeachers",
                    processData: false,
                    dataType: "json",
                    data: {
                        deleBtn: data.id
                    }
                })
            })

            console.log(data.id, data);
        }
    })

    //点击select里面的点击事件
    form.on('select(selectBtn)', function (data) {
        if (data.value == "classtime") {            
            console.log(form.val("searchContent"), form.val("searchContent").selectstudents);
            $(".timeDis").html(
                `
                    <div class="layui-inline timeEnd" id="test-range">
                        <div class="layui-input-inline">
                            <input type="text" id="startDate" class="layui-input" readonly readeonly placeholder="开始日期" name="searchStart">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline">
                            <input type="text" id="endDate" class="layui-input" readonly placeholder="结束日期" name="searchEnd">
                        </div>
                    </div>
                `
            )
            laydate.render({
                elem: '#test-range' //开始时间和结束时间所在 input 框的父选择器
                //设置开始日期、日期日期的 input 选择器
                , range: ['#startDate', '#endDate'] //数组格式为 layui 2.6.6 开始新增
                , change: function (value, date, endDate) {
                    console.log(value); //得到日期生成的值，如：2017-08-18
                    console.log(date); //得到日期时间对象：{year: 2017, month: 8, date: 18, hours: 0, minutes: 0, seconds: 0}
                    console.log(endDate); //得结束的日期时间对象，开启范围选择（range: true）才会返回。对象成员同上。
                }
            })
        } else {
            $(".timeDis").html(
                `
                    <input type="text" name="search" required lay-verify="required" placeholder="请输入需要搜索的内容" autocomplete="off" lay-event="valueBtn"
                class="layui-input">    
                `
            )
        }
    }); 
});

想被带飞的鱼

关注

1
点赞
踩
13

收藏

觉得还不错? 一键收藏
0
评论
使用layui库来实现学生信息的增删改查

使用layui库来实现学生信息的增删改查js实现学生信息的增删改查jQuery实现学生信息的增删改查不用写ajax代码，layui里面自带layui注册.html:用户的注册，注册成功，跳转登录页面layui登录.html:用户的登录，登录成功，跳转页面layui.js:下载地址：https://layui.itze.cn/jquery-1.12.4.min.js:https://jquery.com/mock-min.js:下载地址：http://mockjs.com/注意：注册信息
复制链接

扫一扫