1 项目简介
教务管理系统主要模块：
邮箱注册：用户根据邮箱发送验证码注册用户信息
邮箱登录：用户根据注册的邮箱登录
教师管理：主要包含教师的全部查询，教师信息的修改，添加教师信息，删除教师信息，分页查询教师信息
多条件查询教师信息（教师编号，名称，性别，入职日期），字段排序，导出EXECL表，打印教师信息
学生管理：同教师管理
发送邮件：用户可以给其它老师或者学生发送邮件信息
2 项目环境
| 开发工具 | idea2023.3.5 |
|---|---|
| jdk | jdk17 |
| maven | 3.6.3 |
| SpringBoot | 3.0.2 |
| 数据库 | mysql 10.3.7-MariaDB |
| mybatisplus | 3.5.3.1 |
| layui | 最新版本 |
3 环境搭建
3.1 利用Spring Initializr 快捷创建SpringBoot项目
3.2 添加pom.xml依赖
<dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId><version>3.0.0</version></dependency><dependency><groupId>com.mysql</groupId><artifactId>mysql-connector-j</artifactId><scope>runtime</scope></dependency><!--添加邮件依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId></dependency><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><optional>true</optional></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-test</artifactId><scope>test</scope></dependency><!-- mybatis-plus --><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.3.1</version></dependency><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-devtools</artifactId><optional>true</optional></dependency></dependencies><dependencyManagement><dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-dependencies</artifactId><version>${spring-boot.version}</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement>
3.3 启动主配置类
访问http://localhost:8080 可以看到欢迎页面
4 邮箱注册编写
导入资料里面的项目：layuiAdmin-master
4.1 创建数据库表
CREATE TABLE `user` (`id` INT(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID',`name` VARCHAR(30) COLLATE utf8_bin DEFAULT NULL COMMENT '姓名',`password` VARCHAR(20) COLLATE utf8_bin NOT NULL,`email` VARCHAR(50) COLLATE utf8_bin DEFAULT NULL COMMENT '邮箱',PRIMARY KEY (`id`)
) ENGINE=INNODB AUTO_INCREMENT=2 DEFAULT CHARSET=utf8 COLLATE=utf8_bin;
4.2 注册客户端编写
4.2.1 注册页面完成
注意：在页面需要引入layui.css、jquery.min.js、layui.js
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>注册</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="../../layui/css/layui.css" rel="stylesheet"><script src="../../jquery.min.js"></script>
</head>
<body>
<style>.demo-reg-container{width: 320px; margin: 21px auto 0;}.demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form"><div class="demo-reg-container"><div class="layui-form-item"><div class="layui-row"><div class="layui-col-xs7"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-email"></i></div><input type="text" name="email" value="" lay-verify="required|email" placeholder="邮箱号" lay-reqtext="请填写邮箱" autocomplete="off" class="layui-input" id="reg-cellemail"></div></div><div class="layui-col-xs5"><div style="margin-left: 11px;"><button type="button" id="code_btn" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button></div></div></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-vercode"></i></div><input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-password"></i></div><input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye"></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-password"></i></div><input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye"></div></div><div class="layui-form-item"><div class="layui-input-wrap"><div class="layui-input-prefix"><i class="layui-icon layui-icon-username"></i></div><input type="text" name="nickname" value="" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear"></div></div><div class="layui-form-item"><input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意"><a href="#terms" target="_blank" style="position: relative; top: 6px; left: -15px;"><ins>用户协议</ins></a></div><div class="layui-form-item"><button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button></div><div class="layui-form-item demo-reg-other"><label>社交账号注册</label><span style="padding: 0 21px 0 6px;"><a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a><a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a><a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a></span><a href="#login">登录已有帐号</a></div></div>
</form>
<!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
<script src="../../layui/layui.js"></script></body>
</html>
4.2.2 引入layui相应模块（表单验证）
layui.use(function(){var $ = layui.$;//jquery模块var form = layui.form;//表单模块var layer = layui.layer;//弹出层var util = layui.util;//工具模块});
表单验证
// 自定义验证规则form.verify({// 确认密码confirmPassword: function(value, item){var passwordValue = $('#reg-password').val();if(value !== passwordValue){return '两次密码输入不一致';}}});
4.2.3 邮件发送
客户端：
// 普通事件util.on('lay-on', {// 获取验证码'reg-get-vercode': function(othis){var countdown = 61;var timer= setInterval(function (){//邮件发送后按钮倒计时60Scountdown--;$("#code_btn").text(countdown+"s");$("#code_btn").attr('disabled', "true");if(countdown<0){clearInterval(timer);$("#code_btn").text("获取验证码");$("#code_btn").attr('disabled', false);}},1000)var isvalid = form.validate('#reg-cellemail'); // 主动触发验证，v2.7.0 新增// 验证通过if(isvalid){var data = {name:$("#reg-cellemail").val()}$.post("../../sendEmail2",data,function (data){//此处发送邮件发送的后台接口})}}});
后台application.yml配置
spring:datasource:url: jdbc:mysql://localhost:3306/db9username: rootpassword: rootdriver-class-name: com.mysql.cj.jdbc.Drivermail:host: smtp.qq.com #邮件服务器地址port: 465 #端口号username: 2939608988@qq.compassword: mokilwljwvnodchhdefault-encoding: UTF-8 #默认编码格式properties:mail:debug: true #启动debug调试smtp:socketFactory:class: javax.net.ssl.SSLSocketFactory #SSL连接配置
mybatis-plus:configuration:log-impl: org.apache.ibatis.logging.stdout.StdOutImplmapper-locations: classpath:/mapper/*.xml前提是需要开启qq邮箱的POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务
然后获取授权码：填入到application.yml文件的mail.password中
实体对象编写
实体对象属性和数据库中表字段保持一致
@Data
@TableName("user")
public class User implements Serializable {@TableId(type = IdType.AUTO)private Integer id;private String name;private String password;private String email;
}
Mapper接口编写
public interface UserMapper extends BaseMapper<User> {
}
在启动类上扫描Mapper接口
@SpringBootApplication
@MapperScan("com.gqk.mapper")
public class QueryteacherApplication {public static void main(String[] args) {SpringApplication.run(QueryteacherApplication.class, args);}}util包中编写随机验证码
package com.gqk.util;import org.springframework.context.annotation.Bean;
import org.springframework.stereotype.Component;import java.util.Random;
@Component
public class Code {//定义验证码内容char[] codeSequence = { 'a', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'i', 'J','k', 'L', 'M', 'N', 'o', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'w','X', 'y', 'Z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' };public StringBuilder getCode(){//定义随机数类Random r = new Random();StringBuilder builderCode = new StringBuilder();for (int i = 0; i < 4; i++) {char c = codeSequence[r.nextInt(codeSequence.length)];builderCode.append(c);}return builderCode;}
}Service邮件发送业务编写
@Component
public class MyMailService {@AutowiredJavaMailSender javaMailSender;public void sendMail(String from,String to,String subject,String text){SimpleMailMessage smm = new SimpleMailMessage();smm.setFrom(from);//发送者smm.setTo(to);//收件人//smm.setCc(cc);//抄送人smm.setSubject(subject);//邮件主题smm.setText(text);//邮件内容javaMailSender.send(smm);//发送邮件System.out.println("邮件发送成功================");}
}
Controller编写
package com.gqk.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.gqk.entity.User;
import com.gqk.mapper.UserMapper;
import com.gqk.service.MyMailService;
import com.gqk.util.Code;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;@RestController
@CrossOrigin(origins = "*")////跨域处理
public class UserController {@Autowiredprivate Code code;@Autowiredprivate MyMailService myMailService;StringBuilder strcode = null;@RequestMapping("/sendEmail2")@CrossOrigin(origins = "*")//跨域处理public void sendEmail2(@RequestParam("name") String name){strcode = code.getCode();String text = "【尊敬的用户，您注册的验证码为："+strcode+" 请不要泄露您的验证码】";myMailService.sendMail("2939608988@qq.com",name,"注册验证码",text);}}4.2.4注册提交
发送客户端请求
// 提交事件form.on('submit(demo-reg)', function(data){var field = data.field; // 获取表单字段值// 是否勾选同意if(!field.agreement){layer.msg('您必须勾选同意用户协议才能注册');return false;}$.post("../../regist",field,function (msg){//发送注册请求if(msg=="success"){layer.confirm("注册成功，是否跳转登录页面", {btn: ['确定', '关闭'] //按钮},function (){window.location.href="login.html"})}else{layer.msg("验证码错误...")}})return false; // 阻止默认 form 跳转});
服务端Controller
@RequestMapping("/regist")public String regist(@RequestParam("nickname")String name,@RequestParam("password") String pwd,@RequestParam("email") String email,@RequestParam("vercode") String vercode){if(strcode.toString().equals(vercode)){//校验邮箱验证码User user = new User();user.setEmail(email);user.setName(name);user.setPassword(pwd);System.out.println(user);userMapper.insert(user);return "success";}else{return "验证码错误...";}}
5 邮箱登录
客户端页面：
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>后台登录</title><link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css" /><link rel="stylesheet" type="text/css" href="../../static/admin/css/login.css" /><script src="../../jquery.min.js"></script></head><body><div class="m-login-bg"><div class="m-login"><h3>教务管理系统</h3><div class="m-login-warp"><form class="layui-form"><div class="layui-form-item"><input type="text" name="name" required lay-verify="required" placeholder="邮箱名" autocomplete="off" class="layui-input"></div><div class="layui-form-item"><input type="password" name="password" required lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input"></div><!-- <div class="layui-form-item"><div class="layui-inline"><input type="text" name="verity" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input"></div><div class="layui-inline"><img class="verifyImg" onclick="this.src=this.src+'?c='+Math.random();" src="../../yzm" /></div></div>--><div class="layui-form-item m-login-btn"><div class="layui-inline"><button class="layui-btn layui-btn-normal" lay-submit lay-filter="login">登录</button></div><div class="layui-inline"><button type="button" id="regist" class="layui-btn layui-btn-primary">注册</button></div></div></form></div><p class="copyright">Copyright 2023-2024 by gqk</p></div></div><script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script><script>$(function (){$("#regist").click(function (){window.location.href="regist.html"})})layui.use(['form', 'layedit', 'laydate'], function() {var form = layui.form(),layer = layui.layer;//自定义验证规则form.verify({title: function(value) {if(value.length < 5) {return '标题至少得5个字符啊';}},password: [/(.+){6,12}$/, '密码必须6到12位'],verity: [/(.+){6}$/, '验证码必须是6位'],});//监听提交form.on('submit(login)', function(data) {var field = data.field;console.log(field);$.post("../../login",field,function (msg){if(msg=="success"){//登录成功通过URL传递用户名称window.location.href="index.html?"+field.name}else{layer.alert("用户名或者密码错误",{icon: 2})}})return false;});});// 设置cookie函数</script></body></html>
5.1 服务端
@RequestMapping("/login")@CrossOrigin(origins = "*")public String login(@RequestParam("name")String name,@RequestParam("password") String password){QueryWrapper<User> userQueryWrapper = new QueryWrapper<>();userQueryWrapper.eq("email",name).eq("password",password);User user = userMapper.selectOne(userQueryWrapper);if(user!=null){return "success";}else{return "error";}}
5.2 登录成功后跳转主页面
主页面获取用户登录回显
<script>
var url = location.href;
var num =url.indexOf("?");
var str = url.substr(num+1);
if(str.length==44){
$("#u").html("游客登录");
$("#u").attr("data-url","")
}else{
$("#u").html("欢迎" +str);
}
</script>
6 教师管理模块
导入资料里面的项目：layuiAdmin-master
6.1 分页查询
点击教师信息管理：主页面找到下面代码
<a href="javascript:;" data-url="教师信息页面" data-id='1' data-text="教师信息管理">
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>信息查询</title><link href="/layui/css/layui.css" rel="stylesheet"><script src="../../jquery.min.js"></script><script src="/layui/layui.js"></script>
</head>
<body>
<style>*{padding: 0;margin: 0;}.demo-login-container{width: 1000px; }
</style>
<script type="text/html" id="toolbarDemo"><form class="layui-form layui-row layui-col-space16" ><div class="demo-login-container" ><div class="layui-input-wrap" style="display: inline-block;width: 200px"><div class="layui-input-prefix"><i class="layui-icon layui-icon-username"></i></div><input type="text" name="id" value="" placeholder="请输入编号" class="layui-input" lay-affix="clear"></div><div class="layui-input-wrap" style="display: inline-block;width: 200px"><div class="layui-input-prefix"><i class="layui-icon layui-icon-username"></i></div><input type="text" name="name" value="" placeholder="请输入名称" class="layui-input" lay-affix="clear"></div><div class="layui-input-wrap" style="display: inline-block;width: 200px"><div class="layui-input-prefix"><i class="layui-icon layui-icon-date"></i></div><input type="text" name="hiredate" readonly placeholder="请选择日期" class="layui-input demo-table-search-date"></div><div class="layui-input-wrap" style="display: inline-block;width: 150px"><div class="layui-input-prefix"><i class="layui-icon layui-icon-login-qq"></i></div><select name="sex" lay-search><option value="">请选择性别</option><option value="男">男</option><option value="女">女</option></select></div><button class="layui-btn " lay-submit lay-filter="demo-table-search">查询</button><button class="layui-btn " id="dropdownButton">操作<i class="layui-icon layui-icon-down layui-font-12"></i></button></div></form></script><table class="layui-hide" id="ID-table-demo-search"></table>
</body>
<script>layui.use(function (){var table = layui.table;var form = layui.form;var laydate = layui.laydate;var dropdown = layui.dropdown;// 创建表格实例table.render({elem: '#ID-table-demo-search',url: '../../queryAllTeacherByPage', limits:[5,10,15],toolbar: '#toolbarDemo',cols: [[{type: 'checkbox', title: '😊', fixed: true}, // 单选框{field:'id', title: '编号', sort: true, fixed: true,align:"center"},{field:'name', title: '老师名称',align:"center"},{field:'sex', title: '老师性别',align:"center"},{field:'salary', title: '老师工资',sort: true,align:"center" },{field:'hiredate', title: '入职日期',align:"center"},{field:'tel', title: '联系方式',align:"center"},{field:'address', title: '家庭住址'}]]});// 日期laydate.render({elem: '.demo-table-search-date'});})
</script>
</html>
查询条件实体类对象
package com.gqk.entity;
import lombok.Data;
@Data
public class Query {private Integer id;private String name;private String hiredate;private String sex;private Integer page;private Integer limit;
}分页配置类编写
package com.gqk.config;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configurationpublic class PageConfig {@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}TeacherMapper编写
public interface TeacherMapper extends BaseMapper<Teacher> {}
控制层编写
package com.gqk.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.gqk.entity.Query;
import com.gqk.entity.Teacher;
import com.gqk.mapper.TeacherMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
public class TeacherController {@Autowiredprivate TeacherMapper teacherMapper;@RequestMapping("/queryAllTeacherByPage")public Map<String,Object> queryAllTeacherByPage(Query query){Page<Teacher> pages = new Page<>(query.getPage(), query.getLimit());QueryWrapper<Teacher> queryWrapper = new QueryWrapper<>();Long count = teacherMapper.selectCount(queryWrapper);teacherMapper.selectPage(pages, queryWrapper);List<Teacher> list = pages.getRecords();Map<String,Object> map = new HashMap<>();map.put("code",0);map.put("msg","");map.put("count",count);map.put("data",list);return map;}}6.2 多条件分页查询
客户端发送条件查询
<button class="layui-btn " lay-submit lay-filter="demo-table-search">查询</button>
// 搜索提交form.on('submit(demo-table-search)', function(data){var field = data.field; // 获得表单字段// 执行搜索重载table.reload('ID-table-demo-search', {where:field,done:function (){laydate.render({//解决查询完后时间组件失效elem: '.demo-table-search-date'});}})return false; // 阻止默认 form 跳转});
服务端查询
@RequestMapping("/queryAllTeacherByPage")public Map<String,Object> queryAllTeacherByPage(Query query){Page<Teacher> pages = new Page<>(query.getPage(), query.getLimit());QueryWrapper<Teacher> queryWrapper = new QueryWrapper<>();if(query.getId()!=null && !"".equals(query.getId())){queryWrapper.eq("id",query.getId());}if(query.getName()!=null && !"".equals(query.getName())){queryWrapper.like("name","%"+query.getName()+"%");}if(query.getSex()!=null && !"".equals(query.getSex())){queryWrapper.eq("sex",query.getSex());}if(query.getHiredate()!=null && !"".equals(query.getHiredate())){queryWrapper.eq("hiredate",query.getHiredate());}Long count = teacherMapper.selectCount(queryWrapper);teacherMapper.selectPage(pages, queryWrapper);List<Teacher> list = pages.getRecords();Map<String,Object> map = new HashMap<>();map.put("code",0);map.put("msg","");map.put("count",count);map.put("data",list);return map;}
6.3 添加教师信息
客户端页面：
table.render({elem: '#ID-table-demo-search',url: '../../queryAllTeacherByPage', limits:[5,10,15],toolbar: '#toolbarDemo',cols: [[{type: 'checkbox', title: '😊', fixed: true}, // 单选框{field:'id', title: '编号', sort: true, fixed: true,align:"center"},{field:'name', title: '老师名称',align:"center"},{field:'sex', title: '老师性别',align:"center"},{field:'salary', title: '老师工资',sort: true,align:"center" },{field:'hiredate', title: '入职日期',align:"center"},{field:'tel', title: '联系方式',align:"center"},{field:'address', title: '家庭住址'}]],done:function (){var id = this.id;//下拉渲染dropdown.render({elem: '#dropdownButton',data: [{id: 'add',title: '添加'},{id: 'update',title: '修改'},{id: 'delete',title: '删除'}],click:function (obj){var checkStatus = table.checkStatus(id)var data = checkStatus.data; // 获取选中的数据switch(obj.id){case 'add':layer.open({title: '添加教师',type: 2,area: ['75%','100%'],content: 'add.html',skin:"layui-layer-molv",anim:5});break;case 'update':if(data.length !== 1) return layer.msg('请选择一行');var index = layer.open({title: '修改老师信息',type: 2,area: ['70%','85%'],content: 'update.html',skin:"layui-layer-molv",anim:5,success:function (dom,index){//因为修改的页面是update.html存在传值问题(不是一个页面)var iframeWindow = window['layui-layer-iframe'+ index]iframeWindow.edite(data);}});break;case 'delete':if(data.length === 0){return layer.msg('请选择一行');}var ids = [];for(var i = 0;i<data.length;i++){var idd = data[i].id;ids.push(idd)}layer.confirm('您确定要删除<font color="red">'+ids.length+"</font>条记录吗？", {icon: 3}, function(){$.ajax({type : 'post',url : "deleteTeacherByIds",dataType : 'json',contentType : 'application/json',data : JSON.stringify(ids),success : function (count) { // 返回的RequestResult的json对象if(count>0){layer.msg('删除成功...');table.reload("ID-table-demo-search")}},});}, function(){layer.msg('取消删除',{icon: 1});});break;}}})},page: true,height: 550});
弹窗为添加页面add.html
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>添加老师信息</title><link href="/layui/css/layui.css" rel="stylesheet"><script src="../../jquery.min.js"></script><script src="/layui/layui.js"></script>
</head>
<style>*{padding: 0;margin: 0;}.container{width: 50%;margin:0 auto;border: 2px solid #b2b2b2;margin-top: 20px;}
</style>
<body ><div class="container"><form class="layui-form" style="margin-top: 20px"><div class="layui-form-item"><label class="layui-form-label">教师名称:</label><div class="layui-input-inline"><input type="text" name="name" lay-verify="required" placeholder="请输入教师名称" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">教师性别:</label><div class="layui-input-inline"><input type="radio" name="sex" value="男" title="男" ><input type="radio" name="sex" value="女" title="女"></div></div><div class="layui-form-item"><label class="layui-form-label">教师工资:</label><div class="layui-input-inline"><input type="number" name="salary" lay-verify="required" placeholder="请输入教师工资" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">入职日期:</label><div class="layui-input-wrap" style="display: inline-block;width: 190px"><div class="layui-input-prefix"><i class="layui-icon layui-icon-date"></i></div><input type="text" name="hiredate" readonly placeholder="请选择日期" class="layui-input demo-table-search-date"></div></div><div class="layui-form-item" style="display: none"><div class="layui-inline"><div class="layui-input-inline layui-input-wrap"><input type="text" name="id" value="101" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">联系方式:</label><div class="layui-input-inline layui-input-wrap"><input type="tel" name="tel" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone"></div></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">家庭住址:</label><div class="layui-input-block" style="width: 190px"><textarea placeholder="请输入内容" lay-verify="required" name="address" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit lay-filter="add-submit">立即添加</button><button type="reset" class="layui-btn layui-btn-primary">立即重置</button></div></div></form></div><script>var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引layui.use(function (){var form = layui.form;var laydate = layui.laydate;// 日期laydate.render({elem: '.demo-table-search-date'});//提交表单数据form.on('submit(add-submit)', function(data){var field = data.field; // 获取表单全部字段值$.post("insertTeacher",field,function (data){if(data==1){//parent.layui.table.reload("ID-table-demo-search")//重新加载父页面中的id为ID-table-demo-search的数据表格parent.layui.table.reload("ID-table-demo-search");layer.msg('恭喜您添加成功', {icon: 1,time: 1000}, function(){parent.layer.close(index);});}})return false; // 阻止默认 form 跳转})});</script>
</body>
</html>
TeacherMapper编写
public interface TeacherMapper extends BaseMapper<Teacher> {@Insert(" INSERT INTO teacher ( name, sex, salary, hiredate, tel, address ) VALUES" +" ( #{teacher.name}, #{teacher.sex}, #{teacher.salary}," +" #{teacher.hiredate}, #{teacher.tel}, #{teacher.address} )")void insertTeacher(@Param("teacher") Teacher teacher);}
TeacherController编写
@RequestMapping("/insertTeacher")public Integer insertTeacher(Teacher teacher){teacherMapper.insertTeacher(teacher);return 1;}
6.4 修改教师信息
修改教师信息需要选择要修改的老师，并对老师信息进行回显在修改表单中
update.html弹窗
<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>修改老师信息</title><link href="/layui/css/layui.css" rel="stylesheet"><script src="../../jquery.min.js"></script><script src="/layui/layui.js"></script>
</head>
<style>*{padding: 0;margin: 0;}.container{width: 50%;margin:0 auto;border: 2px solid #b2b2b2;margin-top: 20px;}
</style>
<body ><div class="container" class="layui-layer-iframe" ><form class="layui-form" lay-filter="demo-val-filter" style="margin-top: 20px"><div class="layui-form-item"><label class="layui-form-label">教师名称:</label><div class="layui-input-inline"><input type="text" name="name" lay-verify="required" placeholder="请输入教师名称" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">教师性别:</label><div class="layui-input-inline"><input type="radio" name="sex" id="man" value="男" title="男" ><input type="radio" name="sex" id="women" value="女" title="女"></div></div><div class="layui-form-item"><label class="layui-form-label">教师工资:</label><div class="layui-input-inline"><input type="number" name="salary" lay-verify="required" placeholder="请输入教师工资" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">入职日期:</label><div class="layui-input-wrap" style="display: inline-block;width: 190px"><div class="layui-input-prefix"><i class="layui-icon layui-icon-date"></i></div><input type="text" name="hiredate" readonly placeholder="请选择日期" class="layui-input demo-table-search-date"></div></div><div class="layui-form-item" style="display: none"><div class="layui-inline"><div class="layui-input-inline layui-input-wrap"><input type="text" name="id" value="101" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">联系方式:</label><div class="layui-input-inline layui-input-wrap"><input type="tel" name="tel" lay-verify="required|phone" autocomplete="off" lay-reqtext="请填写手机号" lay-affix="clear" class="layui-input demo-phone"></div></div></div><div class="layui-form-item layui-form-text"><label class="layui-form-label">家庭住址:</label><div class="layui-input-block" style="width: 190px"><textarea placeholder="请输入内容" lay-verify="required" name="address" class="layui-textarea"></textarea></div></div><div class="layui-form-item"><div class="layui-input-block"><button type="submit" class="layui-btn" lay-submit lay-filter="add-submit">立即修改</button><button type="reset" class="layui-btn layui-btn-primary">立即重置</button></div></div></form></div><script>var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引var edite = function (data){layui.use(function (){var form = layui.form;var laydate = layui.laydate;// 日期laydate.render({elem: '.demo-table-search-date'});var sex = data[0].sex;if(sex=="男"){$("#man").attr("checked","checked")}else{$("#women").attr("checked","checked")}console.log(data)//给form表单赋值form.val("demo-val-filter",{"name":data[0].name,"id":data[0].id,"salary":data[0].salary,"hiredate":data[0].hiredate,"tel":data[0].tel,"address":data[0].address,"sex":data[0].sex})//提交表单数据form.on('submit(add-submit)', function(data){var field = data.field; // 获取表单全部字段值$.post("updateTeacher",field,function (data){if(data==1){//parent.layui.table.reload("ID-table-demo-search")//重新加载父页面中的id为ID-table-demo-search的数据表格parent.layui.table.reload("ID-table-demo-search");layer.msg('恭喜您修改成功', {icon: 1,time: 1000}, function(){parent.layer.close(index);});}})return false; // 阻止默认 form 跳转})});}</script>
</body>
</html>
TeacherController编写
@RequestMapping("/updateTeacher")public Integer updateTeacher(Teacher teacher){int i = teacherMapper.updateById(teacher);return i;}
6.5 删除教师信息
客户端请求在添加模块
@RequestMapping("/deleteTeacherByIds")public Integer deleteTeacherByIds(@RequestBody List<Integer> ids){int cout = teacherMapper.deleteBatchIds(ids);return cout;}
7 邮件发送
导入pom.xml(在环境搭建处已经全部导入)
<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-mail</artifactId>
</dependency>
application.yml中配置相关配置
在邮件注册中已经配置（参照邮件注册）
发送请求
在email-write.html中发送
<!DOCTYPE html>
<html class="iframe-h"><head><meta charset="UTF-8"><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>网站后台管理模版</title><link rel="stylesheet" type="text/css" href="../../static/admin/layui/css/layui.css"/><link rel="stylesheet" type="text/css" href="../../static/admin/css/admin.css"/><script src="../../jquery.min.js"></script></head><body class="iframe-h"><div class="email-write"><form class="layui-form"><div class="layui-form-item"><input type="text" name="name" lay-verify="name" autocomplete="off" placeholder="请输入收件人" class="layui-input"></div><div class="layui-form-item"><input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入主题" class="layui-input"></div><div class="layui-form-item layui-form-text"><textarea class="layui-textarea layui-hide" name="content" lay-verify="content" id="LAY_demo_editor"></textarea></div><div class="layui-form-item"><button class="layui-btn layui-btn-normal" lay-submit="" lay-filter="demo1"><i class="layui-icon"></i> 立即发送</button><button type="reset" class="layui-btn layui-btn-primary"><i class="layui-icon">ဆ</i> 放弃</button><button class="layui-btn layui-btn-primary "><i class="layui-icon"></i> 存为草稿</button></div></form></div><script src="../../static/admin/layui/layui.js" type="text/javascript" charset="utf-8"></script><script>var index = parent.layer.getFrameIndex(window.name); // 获取窗口索引layui.use(['form', 'layedit', 'laydate'], function(){var form = layui.form(),layer = layui.layer,layedit = layui.layedit,laydate = layui.laydate;//创建一个编辑器var editIndex = layedit.build('LAY_demo_editor');//监听提交form.on('submit(demo1)', function(data){var mail = {name:data.field.name,title:data.field.title,text:layedit.getContent(editIndex)}$.ajax({type : 'post',url : "../../sendEmail",data : mail,success : function (msg) { // 返回的RequestResult的json对象layer.msg(msg, {icon: 1,time: 1000}, function(){parent.layer.close(index);});},});return false;});});</script>
</body>
</html>
服务端代码
@RequestMapping("/sendEmail")public String sendE0mail(@RequestParam("name") String name,@RequestParam("title") String title,@RequestParam("text") String text){myMailService.sendMail("2939608988@qq.com",name,title,text);return "发送成功...";}
革命还未成功，同志仍需努力；我们后期拥抱Vue+ElementUI
