剑鸣秋朔

Appearance

章节导航

新增学生信息 ​

点击弹出新增学生框 ​

index.html ​

html
<button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-left: 10px; line-height:30px"
                lay-event="saveStudentInfo">
            <i class="layui-icon"></i>新增
        </button>

lay-event="saveStudentInfo" 为新增按钮监听事件

index.js 弹窗 ​

javascript
function toolBar(table) {
    table.on('toolbar(layFilter)', function (obj) {
        ......
        
        if ('saveStudentInfo' === obj.event) {
            layer.open({
                type: 2,
                title: '新增',
                content: path + '/add',
                area: ['60%', '80%'],
                fix: false,
                maxmin: false,
                shade: 0.3,
                shadeClose: false,
                success: function (layero, index) {
                    layer.iframeAuto(index);
                },
            });
        }
        
    })
}

StudentInfoController 添加跳转路径 ​

/***
     * 跳转到新增页面
     *
     * @author 王大宸
     * @date 2023/8/12 22:20
     * @return java.lang.String
     */
    @GetMapping("/add")
    public String add() {
        return "student/add";
    }

前端 ​

新增页面 ​

在 templates/student 目录下新建 add.html

html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title text="新增学生信息"></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <link href="/static/layui/css/layui.css" rel="stylesheet" media="all"/>
    <script type="text/javascript" src="/static/jquery-3.6.4.min.js"></script>
    <script type="text/javascript" src="/static/layui/layui.js"></script>
    <script src="/static/student/add.js" charset="utf-8"></script>

    <style>

        .required {
            color: red;
            margin-right: 5px;
        }

        .form-footer {
            width: 100%;
            margin-bottom: 0;
            bottom: 0;
            padding: 10px 60px 10px 14px;
            position: fixed;
            background: #FFF;
            border-top: #f3f3f3 1px solid;
            text-align: right;
            left: 0;
        }


        .layui-form-body {
            margin-right: 30px;
            margin-bottom: 70px;
            padding-top: 10px;
        }

        .button-sub {
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
            background: #52cbbe;
            border: #17B3A3 1px solid;
            color: #FFFFFF;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            margin-right: 6px;
            padding: 0 15px;
        }

        .button-sub:hover {
            background-color: #5ac9bd;
        }

        .button-close {
            display: inline-block;
            white-space: nowrap;
            text-align: center;
            border-radius: 2px;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            padding: 0 15px;
            border: 1px solid #C9C9C9;
            background-color: #fff;
            color: #555;
            margin-right: 30px;
        }

        .button-close:hover {
            background-color: #e8f7f6;
            border-color: #b9e8e3;
            color: #17B3A3;
        }

    </style>

</head>
<body>

<form class="layui-form" id="addStudentInfoForm">
    <div class="layui-form-body">
        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>姓名
            </label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name"
                       autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>所属学校
            </label>
            <div class="layui-input-block">
                <select id="schoolId" name="schoolId" lay-filter="aihao">
                    <option value="">请所属学校</option>
                    <option value="0">湖北大学</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>所属学院
            </label>
            <div class="layui-input-block">
                <select id="academyId" name="academyId">
                    <option value="">请所属学院</option>
                    <option value="1">计算机与信息工程学院</option>
                    <option value="2">数学与统计学学院</option>
                    <option value="3">材料科学与工程学院</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>出生日期
            </label>
            <div class="layui-input-block">
                <input type="text" id="birthday" name="birthday"
                       autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>学号
            </label>
            <div class="layui-input-block">
                <input type="text" id="stuNo" name="stuNo"
                       autocomplete="off" lay-verify="required" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                <span class="required">*</span>性别
            </label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked>
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">
                描述
            </label>
            <div class="layui-input-block">
                        <textarea id="remarks" name="remarks" maxlength="200"
                                  autocomplete="off" class="layui-textarea"></textarea>
            </div>
        </div>

    </div>
    <div class="form-footer">
        <button type="button" class="button-sub" lay-submit lay-filter="saveStudentInfo">保存</button>
        <button type="button" class="button-close" id="buttonClose">关闭</button>
    </div>
</form>

</body>
</html>

add.js ​

在 static/student 目录下新建 add.js

javascript
layui.use(['form', 'laydate'], function () {
    let form = layui.form;
    let laydate = layui.laydate;
    form.render();

    /* 出生日期, 日期选择组件 */
    laydate.render({
        elem: '#birthday'
    });


    /* 提交 */
    form.on('submit(saveStudentInfo)', function (data) {
        $.ajax('/student/info', {
            type: 'POST',
            data: JSON.stringify(data.field),
            contentType: 'application/json',
            datatype: 'json',
            success: function (res) {
                console.log(res)
                if (200 === res.status) {
                    // 刷新父页面表格
                    parent.reloadTableData();

                    /* 弹窗提示操作成功 */
                    layer.alert(res.msg, {title: "系统提示", icon: 1}, function () {
                        /* 关闭当前弹窗 */
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });

                } else {
                    layer.alert(res.msg, {
                        icon: 2,
                        title: "系统提示",
                        btn: ['确认'], btnclass: ['btn btn-primary'],
                    });
                }
            }
        })
    });


    /* 关闭弹窗 */
    $("#buttonClose").click(function () {
        parent.layer.close(parent.layer.getFrameIndex(window.name));
    });

});

后端 ​

StudentInfoController ​

/***
     * 新增学生信息
     *
     * @author 王大宸
     * @date 2023/8/12 23:30
     * @param studentInfoDTO studentInfoDTO
     * @return com.github.itdachen.common.response.ServerResponse<com.github.itdachen.sdk.vo.StudentInfoVO>
     */
    @PostMapping("")
    @ResponseBody
    public ServerResponse<StudentInfoVO> saveStudentInfo(@RequestBody StudentInfoDTO studentInfoDTO) throws Exception {
        return ServerResponse.okData(studentInfoService.saveStudentInfo(studentInfoDTO));
    }

IStudentInfoService ​

/***
     * 新增学生信息
     *
     * @author 王大宸
     * @date 2023/8/12 23:30
     * @param studentInfoDTO studentInfoDTO
     * @return com.github.itdachen.sdk.vo.StudentInfoVO
     */
    StudentInfoVO saveStudentInfo(StudentInfoDTO studentInfoDTO) throws Exception;

StudentInfoConvert ​

新建 StudentInfoConvert 类, 添加 DTO 转 Entity 方法 和 Entity 转 VO 方法

public static StudentInfo toJavaObject(StudentInfoDTO StudentInfoDTO) {
        if (null == StudentInfoDTO) {
            return null;
        }
        StudentInfo studentInfo = new StudentInfo();
        studentInfo.setId(StudentInfoDTO.getId());
        studentInfo.setName(StudentInfoDTO.getName());
        studentInfo.setSchoolId(StudentInfoDTO.getSchoolId());
        studentInfo.setAcademyId(StudentInfoDTO.getAcademyId());
        studentInfo.setBirthday(StudentInfoDTO.getBirthday());
        studentInfo.setStuNo(StudentInfoDTO.getStuNo());
        studentInfo.setSex(StudentInfoDTO.getSex());
        studentInfo.setRemarks(StudentInfoDTO.getRemarks());
        return studentInfo;
    }
    
    
    public static StudentInfoVO toJavaObjectVo(StudentInfo studentInfo) {
        if (null == studentInfo) {
            return null;
        }
        StudentInfoVO StudentInfoVO = new StudentInfoVO();
        StudentInfoVO.setId(studentInfo.getId());
        StudentInfoVO.setName(studentInfo.getName());
        StudentInfoVO.setSchoolId(studentInfo.getSchoolId());
        StudentInfoVO.setAcademyId(studentInfo.getAcademyId());
        StudentInfoVO.setBirthday(studentInfo.getBirthday());
        StudentInfoVO.setStuNo(studentInfo.getStuNo());
        StudentInfoVO.setSex(studentInfo.getSex());
        StudentInfoVO.setRemarks(studentInfo.getRemarks());
        return StudentInfoVO;
    }

StudentInfoServiceImpl ​

/***
     * 新增学生信息
     *
     * @author 王大宸
     * @date 2023/8/12 23:30
     * @param studentInfoDTO studentInfoDTO
     * @return com.github.itdachen.sdk.vo.StudentInfoVO
     */
    @Override
    @Transactional(rollbackFor = Exception.class)
    public StudentInfoVO saveStudentInfo(StudentInfoDTO studentInfoDTO) throws Exception {
        StudentInfo javaObject = StudentInfoConvert.toJavaObject(studentInfoDTO);
        javaObject.setId(UUID.randomUUID().toString().replaceAll("-",""));
        studentInfoMapper.saveStudentInfo(javaObject);
        return StudentInfoConvert.toJavaObjectVo(javaObject);
    }

IStudentInfoMapper ​

/***
     * 新增学生信息
     *
     * @author 王大宸
     * @date 2023/8/12 23:33
     * @param studentInfo studentInfo
     * @return void
     */
    void saveStudentInfo(StudentInfo studentInfo);

StudentInfoMapper.xml ​

xml
<insert id="saveStudentInfo" parameterType="com.github.itdachen.entity.StudentInfo">
        INSERT INTO fly_student_info
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="null != id  and '' != id ">id,
            </if>
            <if test="null != name  and '' != name ">name,
            </if>
            <if test="null != schoolId  and '' != schoolId ">school_id,
            </if>
            <if test="null != academyId  and '' != academyId ">academy_id,
            </if>
            <if test="null != birthday  and '' != birthday ">birthday,
            </if>
            <if test="null != stuNo  and '' != stuNo ">stu_no,
            </if>
            <if test="null != sex  and '' != sex ">sex,
            </if>
            <if test="null != remarks  and '' != remarks ">remarks,
            </if>
            <if test="null != createTime ">create_time,
            </if>
            <if test="null != createUserId  and '' != createUserId ">create_user_id,
            </if>
            <if test="null != createUser  and '' != createUser ">create_user,
            </if>
            <if test="null != updateTime ">update_time,
            </if>
            <if test="null != updateUserId  and '' != updateUserId ">update_user_id,
            </if>
            <if test="null != updateUser  and '' != updateUser ">update_user,
            </if>
        </trim>
        <trim prefix="values (" suffix=")" suffixOverrides=",">
            <if test="null != id  and '' != id">#{id},
            </if>
            <if test="null != name  and '' != name">#{name},
            </if>
            <if test="null != schoolId  and '' != schoolId">#{schoolId},
            </if>
            <if test="null != academyId  and '' != academyId">#{academyId},
            </if>
            <if test="null != birthday  and '' != birthday">#{birthday},
            </if>
            <if test="null != stuNo  and '' != stuNo">#{stuNo},
            </if>
            <if test="null != sex  and '' != sex">#{sex},
            </if>
            <if test="null != remarks  and '' != remarks">#{remarks},
            </if>
            <if test="null != createTime ">#{createTime},
            </if>
            <if test="null != createUserId  and '' != createUserId">#{createUserId},
            </if>
            <if test="null != createUser  and '' != createUser">#{createUser},
            </if>
            <if test="null != updateTime ">#{updateTime},
            </if>
            <if test="null != updateUserId  and '' != updateUserId">#{updateUserId},
            </if>
            <if test="null != updateUser  and '' != updateUser">#{updateUser},
            </if>
        </trim>
    </insert>