从零开始搭建一个JavaSSM作业管理系统（四）

不念不忘少年蓝@ 2022-11-30 12:53 237阅读 0赞

从零开始搭建一个JavaSSM作业管理系统系列

从零开始搭建一个JavaSSM作业管理系统（一）
从零开始搭建一个JavaSSM作业管理系统（二）
从零开始搭建一个JavaSSM作业管理系统（三）
从零开始搭建一个JavaSSM作业管理系统（四）

项目下载地址

说明！！！

1.本系列的文章仅展示搭建SSM作业管理系统的大致流程，文章中不会提供该项目的完整代码，如果需要完整代码可以在提供的链接中自行下载

2.本系列只展示作业管理系统一小部分功能实现（登录功能、管理员界面的学生信息管理功能），大部分功能都是信息的增删改查基本操作，重复度较多，大体步骤也都相同，故不做过多展示，请大家见谅

3.博主本人也算是spring框架的初学者，写此系列的目的旨在分享个人在学习SSM过程中的一些经验，如果大家在博客中发现代码或一些解释有误，还望多多指正

从零开始搭建一个JavaSSM作业管理系统（四）

    • 从零开始搭建一个JavaSSM作业管理系统系列
    • 前言
    • 摘要
    • 说明
    • 登录功能
      • 1.html
      • 2.js
      • 3.Controller层
      • 4.演示
    • 管理员界面-学生信息管理功能
      • 增加学生信息
        • 1.html
        • 2.js
        • 3.Controller层
        • 4.演示
      • 查看学生详细列表
        • 1.html
        • 2.js
        • 3.Controller层
        • 4.Layui工具类
        • 5.演示
      • 删除、修改学生信息
        • 1.html
        • 2.js
        • 3.Controller层
        • 4.演示
    • 结语

前言

在完成底层工作后，下面我们来逐一实现作业管理系统的功能

摘要

本文主要介绍作业管理系统相关功能的实现

  • 登录功能
  • 管理员界面的学生信息管理功能

本文也是该系列的最后一篇

说明

前端我采用了Layui框架
相关代码的使用可以参考Layui官方文档
Layui

登录功能

学生身份

教师身份

管理员身份

登录界面

作业管理系统-学生界面

作业管理系统-教师界面

作业管理系统-管理员界面

1.html

  1. <form class="layui-form zyl_pad_01" action="">
  2.     <div class="layui-col-sm12 layui-col-md12">
  3.         <div class="layui-form-item">
  4.             <input type="text" name="userId" id="userId" lay-verify="required|userId" autocomplete="off" placeholder="账号" class="layui-input">
  5.             <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
  6.         </div>
  7.     </div>
  8.     <div class="layui-col-sm12 layui-col-md12">
  9.         <div class="layui-form-item">
  10.             <input type="password" name="password" id="password" lay-verify="required|password" autocomplete="off" placeholder="密码" class="layui-input">
  11.             <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
  12.         </div>
  13.     </div>
  14.     <div class="layui-col-sm12 layui-col-md12">
  15.         <div class="layui-form-item">
  16.             <select name="type" id="type" lay-filter="">
  17.                 <option value=""></option>
  18.                 <option value="0" selected="">学生</option>
  19.                 <option value="1">教师</option>
  20.                 <option value="2">管理员</option>
  21.             </select>
  22.             <i class="layui-icon layui-icon-friends zyl_lofo_icon"></i>
  23.         </div>
  24.     </div>
  25.     <div class="layui-col-sm12 layui-col-md12">
  26.         <div class="layui-row">
  27.             <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
  28.                 <div class="layui-form-item">
  29.                     <input type="text" name="vercode" id="vercode" lay-verify="required|vercodes" autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
  30.                     <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
  31.                 </div>
  32.             </div>
  33.             <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
  34.                 <div class="zyl_lofo_vercode zylVerCode" onclick="zylVerCode()"></div>
  35.             </div>
  36.         </div>
  37.     </div>
  38.     <div class="layui-col-sm12 layui-col-md12">
  39.         <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">立即登录</button>
  40.     </div>
  41. </form>

2.js

  1. layui.use(['form'], function(){ 
  2.     var form = layui.form;
  4.     //自定义验证规则
  5.     form.verify({ 
  6.         userId: function(value){ 
  7.             if(hasLetter(value) == true || isChina(value) == true){ 
  8.                 return '账号不能含有英文字母或中文';
  9.             }
  10.         }
  11.         ,password: [/^[\S]{5,12}$/,'密码必须5到12位，且不能出现空格']
  12.         ,vercodes: function(value){ 
  13.             //获取验证码
  14.             var zylVerCode = $(".zylVerCode").html();
  15.             if(value!=zylVerCode){ 
  16.                 return '验证码错误（区分大小写）';
  17.             }
  18.         }
  19.         ,content: function(value){ 
  20.             layedit.sync(editIndex);
  21.         }
  22.     });
  24.                 //监听提交
  25.     form.on('submit(login)', function(data){ 
  26.                     //用ajax时需要注意你的url接口、采用哪一种方式type获取，它的使用的哪种数据类型datatype
  27.         $.ajax({ 
  28.             url:'/home/login',
  29.             type:'get',
  30.             dataType:'json',
  31.             data:data.field,
  32.             beforeSend:function(){ 
  33.                 //弹出的lodinng层
  34.                 layer.load(2,{ 
  35.                     shade:[0.5,"#02fff0"]
  36.                 });
  37.             },
  38.             success:function(res){ 
  39.                 if (res.redirect) { 
  40.                     window.location.href = res.url;
  41.                 } else { 
  42.                     layer.msg("无法进入系统，输入的账号或密码错误");
  43.                 }
  44.             },
  45.             error:function(){ 
  46.                 //用户输入与接口内容不对应，显示文字
  47.                 layer.msg("访问失败")
  48.             },
  49.             complete:function(){ 
  50.                 //关掉loading
  51.                 layer.closeAll("loading")
  52.             }
  53.         })
  54.         return false;//不会跳转到网址栏，只会跳转到你要的界面 一定要写。
  55.     });
  57. });

（1）layui.use() 主要用来导入所需要用到的Layui模块，这里我导入了form，即Layui的表单模块，同时所有js代码也需要写在use()的function里面

如果在js代码里使用form需要定义var form = layui.form

具体详细用法可以参考Layui的官方文档

（2）form.verify() 主要定义表单内元素的验证规则，如果表单内某个标签需要自定义验证规则，需要在该标签内添加lay-verify=“名字”，如

  1. <input type="text" lay-verify="required|name" class="layui-input">

required|name - 添加’required’则设置该标签为必需填写的标签，’|’后的name则相当于验证ID

验证时只需在js代码中编写：

  1. form.verify({ 
  2.     name:验证的规则
  3. })

（3）form.on(‘submit(login)’, function(data){}) 为监听表单提交的函数

对应button如下：

  1. <button class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="login">立即登录</button>

在button标签里加入lay-filter即可监听提交

3.Controller层

  1. @Controller
  2. @RequestMapping("/home")
  3. public class HomeManagementController { 
  4.     @Autowired
  5.     private StudentService studentService;
  6.     @Autowired
  7.     private TeacherService teacherService;
  8.     @Autowired
  9.     private AdminService adminService;
  11.      //登录信息处理
  12.     @RequestMapping(value = "/login",method = RequestMethod.GET)
  13.     @ResponseBody
  14.     private Map<String, Object> login(HttpServletRequest request){ 
  15.         Map<String, Object> modelMap = new HashMap<>();
  17.         int type = HttpServletRequestUtil.getInt(request,"type");
  18.         long userId = HttpServletRequestUtil.getLong(request,"userId");
  19.         String inputPassword = HttpServletRequestUtil.getString(request,"password");
  20.         String realPassword;
  22.         if (type == 0){ 
  23.             Student student = studentService.getStudentById(userId);
  24.             realPassword = student.getPassword();
  25.             if (realPassword.equals(inputPassword)){ 
  26.                 request.getSession().setAttribute("studentId",userId);
  27.                 modelMap.put("redirect",true);
  28.                 modelMap.put("url","/home/studentIndex?studentId="+student.getStudentId());
  29.             }else { 
  30.                 modelMap.put("redirect",false);
  31.             }
  32.         }else if (type == 1){ 
  33.             Teacher teacher = teacherService.getTeacherById(userId);
  34.             realPassword = teacher.getPassword();
  35.             if (realPassword.equals(inputPassword)){ 
  36.                 request.getSession().setAttribute("teacherId",userId);
  37.                 modelMap.put("redirect",true);
  38.                 modelMap.put("url","/home/teacherIndex?teacherId="+teacher.getTeacherId());
  39.             }else { 
  40.                 modelMap.put("redirect",false);
  41.             }
  42.         }else if (type == 2){ 
  43.             Admin admin = adminService.getAdminById(userId);
  44.             realPassword = admin.getPassword();
  45.             if (realPassword.equals(inputPassword)){ 
  46.                 request.getSession().setAttribute("adminId",userId);
  47.                 modelMap.put("redirect",true);
  48.                 modelMap.put("url","/home/adminIndex?adminName="+admin.getAdminName());
  49.             }else { 
  50.                 modelMap.put("redirect",false);
  51.             }
  52.         }else { 
  53.             modelMap.put("redirect",false);
  54.         }
  55.         return modelMap;
  56.     }
  57. }

Controller层主要接受前端传过来的数据：
type-用户类型
userId-账号
password-密码

前后端处理数据流程如下：
首先根据type判断用户的类型，再根据账号和密码判断该用户的账号和密码是否正确，如果正确，返回相应的url和success（状态为true），前端再根据返回的url跳转的相应界面；如果不正确只返回success（状态为false）

4.演示

此处只演示学生界面的登录
登录界面演示

管理员界面-学生信息管理功能

学生信息管理

增加学生信息

删除学生信息

修改学生信息

查看学生详细列表

增加学生信息

1.html

  1. <form class="layui-form" action="" lay-filter="add-studentInfo">
  3.   <div class="layui-form-item">
  4.     <div class="layui-inline">
  5.       <label class="layui-form-label">学生头像</label>
  6.       <input type="file" name="profileImg">
  7.     </div>
  8.   </div>
  9.   <div class="layui-form-item">
  10.     <div class="layui-inline">
  11.       <label class="layui-form-label">学生号</label>
  12.       <div class="layui-input-inline">
  13.         <input type="text" name="studentId" lay-verify="required|studentId" autocomplete="off" class="layui-input">
  14.       </div>
  15.     </div>
  16.     <div class="layui-inline">
  17.       <label class="layui-form-label">学生姓名</label>
  18.       <div class="layui-input-inline">
  19.         <input type="text" name="studentName" lay-verify="required|studentName" autocomplete="off" class="layui-input">
  20.       </div>
  21.     </div>
  22.   </div>
  23.   <div class="layui-form-item">
  24.     <label class="layui-form-label">性别</label>
  25.     <div class="layui-input-block">
  26.       <input type="radio" name="gender" value="男" title="男">
  27.       <input type="radio" name="gender" value="女" title="女">
  28.     </div>
  29.   </div>
  30.   <div class="layui-form-item">
  31.     <label class="layui-form-label">邮箱</label>
  32.     <div class="layui-input-block">
  33.       <input type="text" name="email" lay-verify="email" placeholder="" autocomplete="off" class="layui-input">
  34.     </div>
  35.   </div>
  36.   <div class="layui-form-item layui-form-text">
  37.     <label class="layui-form-label">简介</label>
  38.     <div class="layui-input-block">
  39.       <textarea name="studentDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
  40.     </div>
  41.   </div>
  42.   <div class="layui-form-item">
  43.     <label class="layui-form-label">所属班级</label>
  44.     <div class="layui-input-block">
  45.       <div class="layui-col-md6">
  46.         <select id="clazz">
  47.         </select>
  48.       </div>
  49.     </div>
  50.   </div>
  52.   <div class="layui-form-item layui-layout-admin">
  53.     <div class="layui-input-block">
  54.       <div class="layui-footer" style="left: 0;">
  55.         <button class="layui-btn" lay-submit="" lay-filter="add-student">立即提交</button>
  56.         <button type="reset" class="layui-btn layui-btn-primary">重置</button>
  57.       </div>
  58.     </div>
  59.   </div>
  61. </form>

2.js

  1. layui.use(['index', 'form'], function(){ 
  2.     var $ = layui.$
  3.     ,layer = layui.layer
  4.     ,form = layui.form;
  6.     form.render(null, 'add-studentInfo');
  8.     /* 自定义验证规则 */
  9.     form.verify({ 
  10.       studentId: function(value){ 
  11.         if(hasLetter(value) === true || isChina(value) === true){ 
  12.           return '学生号不能含有中文';
  13.         }
  14.       }
  15.       ,studentName: function(value){ 
  16.         if(containsNumber(value) === true){ 
  17.           return '学生姓名不能含有数字';
  18.         }
  19.       }
  20.     });
  22.     getClazzList();
  24.     // 获取班级列表
  25.     function getClazzList(){ 
  26.       $.get('/admin/listClazzMap', function(res) { 
  27.         if (res.success){ 
  28.           var tempHtml = '';
  29.           //根据班级列表动态拼接html
  30.           res.clazzList.map(function (item, index) { 
  31.             tempHtml += '<option data-id="' + item.clazzId + '">'
  32.                     + item.clazzDesc + '</option>';
  33.           });
  34.           $('#clazz').html(tempHtml);
  35.           form.render('select');
  36.         }
  37.       });
  38.     }
  40.     var student = { };
  42.     /* 监听提交 */
  43.     form.on('submit(add-student)', function(data){ 
  44.       // 获取缩略图文件流
  45.       var studentImg = $('input[name="profileImg"]')[0].files[0];
  47.       student.studentId = $('input[name="studentId"]').val();
  48.       student.studentName = $('input[name="studentName"]').val();
  49.       student.gender = $('input[name="gender"]:checked').val();
  50.       student.email = $('input[name="email"]').val();
  51.       student.studentDesc = $('textarea[name="studentDesc"]').val();
  52.       student.clazz = { 
  53.         clazzId : $('#clazz').find('option').not(function () { 
  54.           return !this.selected;
  55.         }).data('id')
  56.       };
  58.       var formData = new FormData();
  59.       formData.append('studentImg', studentImg);
  60.       formData.append('studentStr',JSON.stringify(student));
  62.       //用ajax时需要注意你的url接口、采用哪一种方式type获取，它的使用的哪种数据类型datatype
  63.       $.ajax({ 
  64.         url:'/admin/addStudent',
  65.         type:'post',
  66.         data:formData,
  67.         contentType : false,
  68.         processData : false,
  69.         success:function(res){ 
  70.           if (res.success){ 
  71.             layer.msg("添加学生信息成功");
  72.           }else { 
  73.             layer.msg("添加学生信息失败" + res.errMsg);
  74.           }
  75.         }
  76.       })
  77.       return false;
  78.     });
  80.   });

form.render(null, ‘add-studentInfo’) 主要对表单所有元素更新渲染，相当于初始化表单

form.render(‘select’) 主要对表单中select标签更新渲染，由于学生表单中select标签为动态插入，Layui中form模块的自动化渲染是会对其失效的，所以需要在动态插入select标签里的元素后再进行一次渲染

有关表单渲染的详细介绍可以参考Layui的官方文档

3.Controller层

  1. @Controller
  2. @RequestMapping("/admin")
  3. public class StudentManagementController { 
  4.     @Autowired
  5.     private StudentService studentService;
  7.     //添加学生信息
  8.     //获取前端ajax传递的字符串，解析字符串为相应的student实体，根据解析好的数据添加学生信息
  9.     @RequestMapping(value = "/addStudent",method = RequestMethod.POST)
  10.     @ResponseBody
  11.     private Map<String,Object> addStudent(HttpServletRequest request){ 
  12.         Map<String,Object> modelMap = new HashMap<>();
  14.         //1.接受并转化相应的参数
  15.         //获取前端传过来的学生信息，并将它转换成实体类；
  16.         //同时获取前端传递过来的文件流，将它接受到studentImg里面去
  17.         String studentStr = HttpServletRequestUtil.getString(request,"studentStr");
  18.         if (studentStr == null){ 
  19.             modelMap.put("success",false);
  20.             modelMap.put("errMsg","请输入学生信息");
  21.             return modelMap;
  22.         }
  23.         ObjectMapper mapper = new ObjectMapper();
  24.         Student student;
  25.         try { 
  26.             student = mapper.readValue(studentStr,Student.class);
  27.         } catch (JsonProcessingException e) { 
  28.             e.printStackTrace();
  29.             modelMap.put("success",false);
  30.             modelMap.put("errMsg",e.getMessage());
  31.             return modelMap;
  32.         }
  33.         CommonsMultipartFile studentImg;
  34.         CommonsMultipartResolver commonsMultipartResolver =
  35.                 new CommonsMultipartResolver(
  36.                         request.getSession().getServletContext()
  37.                 );
  38.         MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
  39.         studentImg = (CommonsMultipartFile) multipartHttpServletRequest.getFile("studentImg");
  41.         //2.添加学生信息
  42.         StudentExecution studentExecution;
  43.         try { 
  44.             ImageHolder imageHolder = null;
  45.             if (studentImg != null){ 
  46.                 imageHolder = new ImageHolder(studentImg.getOriginalFilename(),studentImg.getInputStream());
  47.             }
  48.             studentExecution = studentService.addStudent(student,imageHolder);
  49.             if (studentExecution.getState() == StudentStateEnum.SUCCESS.getState()){ 
  50.                 modelMap.put("success",true);
  51.             }else{ 
  52.                 modelMap.put("success",false);
  53.                 modelMap.put("errMsg",studentExecution.getStateInfo());
  54.             }
  55.         } catch (IOException e) { 
  56.             modelMap.put("success",false);
  57.             modelMap.put("errMsg",e.getMessage());
  58.         }
  59.         return modelMap;
  60.         //3.返回结果
  61.     }
  62. }

4.演示

添加学生演示

查看学生详细列表

1.html

  1. <table class="layui-hide" id="student-list" lay-filter="student-list"></table>

2.js

  1. layui.use(['table'], function(){ 
  2.     var table = layui.table
  4.     table.render({ 
  5.       elem: '#student-list'
  6.       ,id: 'studentTable'
  7.       ,url: '/admin/listStudent'
  8.       ,toolbar: '#operation'
  9.       ,title: '学生信息列表'
  10.       ,cols: [[
  11.          { field:'studentId', title:'学生ID号', width:120, fixed: 'left', unresize: true, sort: true},
  12.          { field:'password', title:'密码', width:150},
  13.          { field:'studentName', title:'学生姓名', width:120, sort: true},
  14.          { field:'gender', title:'性别', width:80},
  15.          { field:'email', title:'邮箱', width:150, templet: function(res){ 
  16.           return '<em>'+ res.email +'</em>'
  17.         }},
  18.          { field:'studentDesc', title:'简介', width:250},
  19.          { title:'班级ID号', width:120, sort: true, templet: function(data){ 
  20.              return data.clazz.clazzId;
  21.            }},
  22.          { title:'班级名', width:150, sort: true, templet: function(data){ 
  23.              return data.clazz.clazzDesc;
  24.            }},
  25.          { title:'创建时间', width:120, templet: function(res){ 
  26.              return new Date(res.createTime).Format("yyyy-MM-dd");
  27.         }},
  28.          { title:'最近一次更新时间', width:160, templet: function(res){ 
  29.              if (res.lastEditTime != null){ 
  30.                return new Date(res.lastEditTime).Format("yyyy-MM-dd");
  31.              }else { 
  32.                return "暂未更新";
  33.              }
  34.          }},
  35.          { fixed: 'right', title:'操作', toolbar: '#operation', width:150}
  36.       ]]
  37.       ,page: true
  38.     });
  40. });

(1)elem对应于html中id为student-list的table标签

(2)url是将要访问的接口

(3)cols，与controller层返回的集合相关联，里面的field值对应着集合里面相同名字的字段，如果需要更改controller层返回的某一个字段的格式，需要用到templet

示例如下：

  1. { field:'email', title:'邮箱', width:150, templet: function(res){ 
  2.           return '<em>'+ res.email +'</em>'
  3. }}

此处代码是将后端传递过来的字段email通过templet读取，并用html的标签将字段值包裹起来

最终显示如下，这是其中一行的数据：

最终显示
可以看到，表格中邮箱那一列下面的值是斜体的，可见templet生效了

(4)toolbar控件-工具条

示例如下：

  1. { fixed: 'right', title:'操作', toolbar: '#operation', width:150}
  3. <script type="text/html" id="operation">
  4.     <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  5.     <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  6. </script>

通过定义的id为operation的组件，Layui的table便能显示出工具条
显示出工具条

3.Controller层

  1. @Controller
  2. @RequestMapping("/admin")
  3. public class StudentManagementController { 
  4.     @Autowired
  5.     private StudentService studentService;
  7.     //列出所有学生列表-返回为Layui类型
  8.     @RequestMapping(value = "/listStudent",method = RequestMethod.GET)
  9.     @ResponseBody
  10.     public Layui listStudent(){ 
  11.         //查询显示列表数据
  12.         List<Student> studentList = studentService.getStudentList();
  13.         return Layui.data(studentList.size(),studentList);
  14.     }
  15. }

4.Layui工具类

Layui的table有规定的数据格式，所以需要定义一个Layui工具类封装查询到的列表数据

  1. public class Layui  extends HashMap<String, Object> { 
  3.     public static Layui data(Integer count, List<?> data){ 
  4.         Layui r = new Layui();
  5.         r.put("code", 0);
  6.         r.put("msg", "");
  7.         r.put("count", count);
  8.         r.put("data", data);
  9.         return r;
  10.     }
  11. }

返回数据格式如下：
返回数据格式

5.演示

列表演示

删除、修改学生信息

1.html

  1. <table class="layui-hide" id="student-list" lay-filter="student-list"></table>
  3. <script type="text/html" id="operation"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script>

2.js

（1）表单监听，通过工具条控件中lay-event的值来进行情况判断

  1. //监听行工具事件
  2. table.on('tool(student-list)', function(obj){ 
  3.     var data = obj.data;
  4.     if(obj.event === 'del'){ 
  5.       layer.confirm('确定要删除吗', function(index){ 
  6.         delStudentById(data.studentId);
  7.         layer.close(index);
  8.       });
  9.     } else if(obj.event === 'edit'){ 
  10.       layer.open({ 
  11.         //layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
  12.         type: 1,
  13.         title: "修改学生信息",
  14.         area: ['600px', '400px'],
  15.         content: $("#popUpdateStudent")//引用的弹出层的页面层的方式加载修改界面表单
  16.     });
  17.       //动态向表传递赋值可以参看文章进行修改界面的更新前数据的显示，当然也是异步请求的要数据的修改数据的获取
  18.       setFormValue(obj,data);
  19.     }
  20. });

（2）修改界面表单

  1. <!--这里是弹出层的表单信息-->
  2. <!--style是在本页隐藏，只有点击编辑才会弹出-->
  3.   <div class="layui-row" id="popUpdateStudent" style="display:none;">
  4.     <div class="layui-col-md10">
  5.       <form class="layui-form layui-from-pane" action="" style="margin-top:20px" lay-filter="modify-student">
  6.         <div class="layui-form-item">
  7.           <div class="layui-inline">
  8.             <label class="layui-form-label">学生头像</label>
  9.             <input type="file" name="profileImg">
  10.           </div>
  11.         </div>
  12.         <div class="layui-form-item">
  13.           <div class="layui-inline">
  14.             <label class="layui-form-label">学生号</label>
  15.             <div class="layui-input-inline">
  16.               <input type="text" name="studentId" class="layui-input" readonly>
  17.             </div>
  18.           </div>
  19.           <div class="layui-inline">
  20.             <label class="layui-form-label">学生姓名</label>
  21.             <div class="layui-input-inline">
  22.               <input type="text" name="studentName" lay-verify="required|studentName" class="layui-input">
  23.             </div>
  24.           </div>
  25.         </div>
  26.         <div class="layui-form-item">
  27.           <label class="layui-form-label">性别</label>
  28.           <div class="layui-input-block">
  29.             <input type="radio" name="gender" value="男" title="男">
  30.             <input type="radio" name="gender" value="女" title="女">
  31.           </div>
  32.         </div>
  33.         <div class="layui-form-item">
  34.           <label class="layui-form-label">邮箱</label>
  35.           <div class="layui-input-block">
  36.             <input type="text" name="email" lay-verify="email" class="layui-input">
  37.           </div>
  38.         </div>
  39.         <div class="layui-form-item layui-form-text">
  40.           <label class="layui-form-label">简介</label>
  41.           <div class="layui-input-block">
  42.             <textarea name="studentDesc" placeholder="请输入内容" class="layui-textarea"></textarea>
  43.           </div>
  44.         </div>
  45.         <div class="layui-form-item">
  46.           <label class="layui-form-label">所属班级</label>
  47.           <div class="layui-input-block">
  48.             <div class="layui-col-md6">
  49.               <select id="clazz">
  50.               </select>
  51.             </div>
  52.           </div>
  53.         </div>
  55.         <div class="layui-form-item layui-layout-admin">
  56.           <div class="layui-input-block">
  57.             <div class="layui-footer" style="left: 0;">
  58.               <button class="layui-btn" lay-submit="" lay-filter="edit-student">立即提交</button>
  59.             </div>
  60.           </div>
  61.         </div>
  62.       </form>
  63.     </div>
  64.   </div>

3.Controller层

  1. @Controller
  2. @RequestMapping("/admin")
  3. public class StudentManagementController { 
  4.     @Autowired
  5.     private StudentService studentService;
  7.     //修改学生信息
  8.     //获取前端ajax传递的字符串，解析字符串为相应的student实体，根据解析好的数据修改学生信息
  9.     @RequestMapping(value = "/modifyStudent",method = RequestMethod.POST)
  10.     @ResponseBody
  11.     public Map<String,Object> modifyTeacher(HttpServletRequest request) throws IOException { 
  12.         Map<String, Object> modelMap = new HashMap<>();
  13.         // 接收前端参数的变量的初始化
  14.         ObjectMapper mapper = new ObjectMapper();
  15.         Student student;
  17.         // 若请求中存在文件流，则取出相关的文件
  18.         CommonsMultipartFile studentImg = null;
  19.         CommonsMultipartResolver commonsMultipartResolver =
  20.                 new CommonsMultipartResolver(
  21.                         request.getSession().getServletContext()
  22.                 );
  23.         if (commonsMultipartResolver.isMultipart(request)){ 
  24.             MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest) request;
  25.             studentImg = (CommonsMultipartFile) multipartHttpServletRequest.getFile("studentImg");
  26.         }
  28.         try { 
  29.             String studentStr = HttpServletRequestUtil.getString(request, "studentStr");
  30.             // 尝试获取前端传过来的表单string流并将其转换成Student实体类
  31.             student = mapper.readValue(studentStr, Student.class);
  32.         } catch (Exception e) { 
  33.             modelMap.put("success", false);
  34.             modelMap.put("errMsg", e.toString());
  35.             return modelMap;
  36.         }
  37.         try { 
  38.             ImageHolder imageHolder = null;
  39.             // 开始进行学生信息变更操作
  40.             if (studentImg != null){ 
  41.                 imageHolder = new ImageHolder(studentImg.getOriginalFilename(),studentImg.getInputStream());
  42.             }
  43.             StudentExecution studentExecution = studentService.modifyStudent(student, imageHolder);
  44.             if (studentExecution.getState() == StudentStateEnum.SUCCESS.getState()) { 
  45.                 modelMap.put("success", true);
  46.             } else { 
  47.                 modelMap.put("success", false);
  48.                 modelMap.put("errMsg", studentExecution.getStateInfo());
  49.             }
  50.         } catch (RuntimeException e) { 
  51.             modelMap.put("success", false);
  52.             modelMap.put("errMsg", e.toString());
  53.             return modelMap;
  54.         }
  55.         return modelMap;
  56.     }
  58.     //删除学生信息
  59.     //根据前端路由路径中传递的studentId值删除指定学生信息
  60.     @RequestMapping(value = "/deleteStudent",method = RequestMethod.GET)
  61.     @ResponseBody
  62.     public Map<String,Object> deleteStudent(@RequestParam("studentId") Long studentId){ 
  63.         Map<String,Object> modelMap = new HashMap<>();
  64.         studentService.deleteStudent(studentId);
  65.         modelMap.put("success",true);
  66.         return modelMap;
  67.     }
  68. }

4.演示

演示一
演示二

结语

本系列虽然结束了，但是作业管理系统要实现的功能还有很多，其实系统的各种功能都涉及信息的增删改查功能，大体实现方法均可以仿照我实现学生信息管理的流程来设计

我个人而言，对于每个功能的设计流程如下：

dao层

service层

controller层

前端界面

每设计完一个层级的功能后，便对该层进行测试

  • 对dao层和service层进行UT测试即可（UT测试的流程我已经在前面展示过了）
  • 对controller层的测试一般与前端相关联，比较简单的方法是将数据以map形式返回到前端，在浏览器的网址直接输入对应的路由

关于作业管理系统，还有很多复杂的功能，例如文件上传、文件下载、图像处理等等，这些我并没有在该系列里展示出来。就我个人理解，这些功能都是在基本功能上的扩展，如果理解了SSM框架增删改查四种基本操作实现方法的话，相信其他功能的实现方法自然很好理解

最后也再次说明一下，我也是spring框架的初学者，写这个系列的目的也是希望像我一样初学SSM框架的人有所帮助吧，通过这个系列向大家展示搭建SSM框架的整个流程

关于这个系列的所有代码和解释如果大家发现哪里有错误的话，欢迎指正

发表评论

表情：
评论列表 （有 0 条评论，237人围观）

还没有评论，来说两句吧...

相关阅读