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 (){//邮件发送后按钮倒计时60S
countdown--;
$("#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/db9
username: root
password: root
driver-class-name: com.mysql.cj.jdbc.Driver
mail:
host: smtp.qq.com #邮件服务器地址
port: 465 #端口号
username: [email protected]
password: mokilwljwvnodchh
default-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.StdOutImpl
mapper-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 {
@Autowired
JavaMailSender 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 {
@Autowired
private Code code;
@Autowired
private MyMailService myMailService;
StringBuilder strcode = null;
@RequestMapping("/sendEmail2")
@CrossOrigin(origins = "*")//跨域处理
public void sendEmail2(@RequestParam("name") String name){
strcode = code.getCode();
String text = "【尊敬的用户，您注册的验证码为："+strcode+" 请不要泄露您的验证码】";
myMailService.sendMail("[email protected]",
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: '
标签：function,管理系统,教务,layui,field,var,import,data
From： https://www.cnblogs.com/520gqk/p/18236442