1.了解项目和创建springboot文件
2.编写pom.xml文件
学生管理系统所使用的技术主要是soringboot+jsp+ajax+SSM，所以我们需要引入的包大概有这些：
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.3.3.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com</groupId> <artifactId>student_system</artifactId> <version>0.0.1-SNAPSHOT</version> <name>student_system</name> <description>Demo project for Spring Boot</description> <properties> <java.version>1.8</java.version> </properties> <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>2.1.3</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </dependency> <dependency> <groupId>org.apache.commons</groupId> <artifactId>commons-lang3</artifactId> <version>3.9</version> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>com.alibaba</groupId> <artifactId>druid</artifactId> <version>1.1.22</version> </dependency> <dependency> <groupId>log4j</groupId> <artifactId>log4j</artifactId> <version>1.2.17</version> </dependency> <dependency> <groupId>org.apache.tomcat.embed</groupId> <artifactId>tomcat-embed-jasper</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> <exclusions> <exclusion> <groupId>org.junit.vintage</groupId> <artifactId>junit-vintage-engine</artifactId> </exclusion> </exclusions> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> </project> 复制代码
3.编写application.properties
spring.application.name=student_system server.servlet.context-path=/student_system server.servlet.jsp.init-parameters.development=true spring.datasource.username=root spring.datasource.password= spring.datasource.url=jdbc:mysql://localhost:3306/student_system?useSSL=false&serverTimezone=UTC&characterEncoding=utf-8 spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver spring.mvc.view.prefix=/ spring.mvc.view.suffix=.jsp mybatis.mapper-locations=classpath:com/mapper/*.xml mybatis.type-aliases-package=com.pojo logging.level.root=info logging.level.com.baizhi.dao=debug 复制代码
4.数据库设计
/*用户表*/ create table t_user( id int(6) primary key auto_increment, name varchar(40), password varchar(20), status varchar(10), regtime timestamp, role varchar(10) ); /*城市表*/ create table t_city( id int(6) primary key auto_increment, name varchar(40), createtime timestamp, numbers int(8) ); /*标签表*/ create table t_tag( id int(6) primary key auto_increment, name varchar(40), type varchar(20), createtime timestamp ); /*班级表*/ create table t_clazz( id int(6) primary key auto_increment, name varchar(40), tagid int(6) references t_tag(id) ); /*小组表*/ create table t_group( id int(6) primary key auto_increment, name varchar(40), content varchar(200), clazzid int(6) references t_clazz(id) ); /*学生表*/ create table t_student( id int(6) primary key auto_increment, name varchar(40), age int(3), bir timestamp, phone varchar(11), qq varchar(16), attr varchar(6), starts varchar(14), mark varchar(200), cityid int(6) references t_city(id), clazzid int(6) references t_clazz(id), groupid int(6) references t_group(id) ); /*学生标签关系表*/ create table t_student_tag( id int(6) primary key auto_increment, studentid int(6) references t_student(id), tagid int(6) references t_tag(id), ); 建立数据库: student_system UTF-8 复制代码
5.用户登陆功能的实现（jsp）
a.登陆
由于我们这次没有使用thymeleaf模板引擎，所以还需要在main下面创建一个webapp目录来保存jsp。前端的页面去网上cope了一个还算美观整洁的页面，自带表单验证功能和一些好看的UI设计，让我这个后端的小白还是很喜欢的。
<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>登陆</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="robots" content="all,follow"> <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/4.2.1/css/bootstrap.min.css"> <link rel="stylesheet" href="statics/css/style.default.css" id="theme-stylesheet"> </head> <body> <div class="page login-page"> <div class="container d-flex align-items-center"> <div class="form-holder has-shadow"> <div class="row"> <!-- Logo & Information Panel--> <div class="col-lg-6"> <div class="info d-flex align-items-center"> <div class="content"> <div class="logo"> <h1>欢迎登录</h1> </div> <p>班级管理系统</p> </div> </div> </div> <!-- Form Panel --> <div class="col-lg-6 bg-white"> <div class="form d-flex align-items-center"> <div class="content"> <form method="post" class="form-validate" id="loginFrom"> <div class="form-group"> <input id="login-username" type="text" name="name" required data-msg="请输入用户名" placeholder="用户名" value="admin" class="input-material"> </div> <div class="form-group"> <input id="login-password" type="password" name="password" required data-msg="请输入密码" placeholder="密码" class="input-material"> </div> <div class="form-group"> <input id="login-code" style="width: 60%;float: left" type="text" name="code" required data-msg="请输入验证码" placeholder="验证码" class="input-material"> <img src="${pageContext.request.contextPath}/user/getImage" id="image"> </div> <button id="logBtn" type="button" class="btn btn-primary">登录</button> <div style="margin-top: -40px;"> <!-- <input type="checkbox" id="check1"/> <span>记住密码</span> <input type="checkbox" id="check2"/> <span>自动登录</span> --> <div class="custom-control custom-checkbox " style="float: right;"> <input type="checkbox" class="custom-control-input" id="check2" > <label class="custom-control-label" for="check2">自动登录</label> </div> <div class="custom-control custom-checkbox " style="float: right;"> <input type="checkbox" class="custom-control-input" id="check1" > <label class="custom-control-label" for="check1">记住密码 </label> </div> </div> </form> <br> <br> <small>没有账号?</small><a href="regist.jsp" class="signup"> 注册</a> </div> </div> </div> </div> </div> </div> </div> </body> </html> <!-- JavaScript files--> <script src="statics/js/jquery.min.js"></script> <script src="statics/layui/layui.js"></script> <script src="statics/js/bootstrap.min.js"></script> <script src="statics/vendor/jquery-validation/jquery.validate.min.js"></script><!--表单验证--> <script> $(function () { // 绑定登陆按钮的单击事件 $("#logBtn").click(function () { $.post("${pageContext.request.contextPath}/user/login",$("#loginFrom").serialize(),function (res) { if (res.statue) { layui.use("layer",function () { layer.alert(res.msg+",点击确定跳转至主页", { skin: 'layui-layer-molv' //样式类名 ,closeBtn: 0 }); // var layer=layui.layer; // layer.alert(res.msg+",点击确定跳转至主页"); }); location.href = "${pageContext.request.contextPath}/back/index.jsp"; }else( layui.use("layer",function () { var layer=layui.layer; layer.msg(res.msg, {icon: 5}); }) ) }) }); //更换验证码 $("#image").click(function () { $("#image").attr("src","${pageContext.request.contextPath}/user/getImage"); }) }); $(function(){ /*判断上次是否勾选记住密码和自动登录*/ var check1s=localStorage.getItem("check1"); var check2s=localStorage.getItem("check2"); var oldName=localStorage.getItem("userName"); var oldPass=localStorage.getItem("passWord"); if(check1s=="true"){ $("#login-username").val(oldName); $("#login-password").val(oldPass); $("#check1").prop('checked',true); }else{ $("#login-username").val(''); $("#login-password").val(''); $("#check1").prop('checked',false); } if(check2s=="true"){ $("#check2").prop('checked',true); $("#loginFrom").submit(); //location="https://www.baidu.com?userName="+oldName+"&passWord="+oldPass;//添加退出当前账号功能 }else{ $("#check2").prop('checked',false); } $("#login").click(function(){ var userName=$("#login-username").val(); var passWord=$("#login-password").val(); /*获取当前输入的账号密码*/ localStorage.setItem("userName",userName) localStorage.setItem("passWord",passWord) /*获取记住密码 自动登录的 checkbox的值*/ var check1 = $("#check1").prop('checked'); var check2 = $('#check2').prop('checked'); localStorage.setItem("check1",check1); localStorage.setItem("check2",check2); }) /*$("#check2").click(function(){ var flag=$('#check2').prop('checked'); if(flag){ var userName=$("#login-username").val(); var passWord=$("#login-password").val(); $.ajax({ type:"post", url:"http://localhost:8080/powers/pow/regUsers", data:{"userName":userName,"passWord":passWord}, async:true, success:function(res){ alert(res); } }); } })*/ }) </script> 复制代码
创建一个实体类User（偷懒了使用了lombok）
package com.pojo; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import lombok.ToString; import lombok.experimental.Accessors; import java.util.Date; @Data @AllArgsConstructor @NoArgsConstructor @ToString @Accessors(chain = true) public class User { private String id; private String name; private String password; private String status; private Date regtime; private String role; } 复制代码
编写Mapper接口（UserMapper）
package com.mapper; import com.pojo.User; import org.apache.ibatis.annotations.Mapper; @Mapper public interface UserMapper { User findByName(String name); } 复制代码
编写Mapper.xml（UserMapper）
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.mapper.UserMapper"> <select id="findByName" parameterType="string" resultType="com.pojo.User"> select * from t_user where name = #{name} </select> </mapper> 复制代码
编写Service接口（UserService）
package com.service; import com.pojo.User; public interface UserService { User login (User user); } 复制代码
顺便写了实现类（UserServiceImpl）
package com.service.impl; import com.mapper.UserMapper; import com.pojo.User; import com.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import java.util.Date; @Service public class UserServiceImpl implements UserService { @Autowired UserMapper userMapper; @Override public User login(User user) { User u=userMapper.findByName(user.getName()); if (u!=null){ if (u.getPassword().equals(user.getPassword())){ return u; }else { throw new RuntimeException("密码输入错误"); } } throw new RuntimeException("用户名输入错误，请从新输入"); } } 复制代码
还漏了一个很重要的东西—验证码！我在网上找了一个很不错的验证码的工具类，可以码起来，有需要的时候可以拿！
package com.utils; import javax.imageio.ImageIO; import java.awt.*; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.util.Arrays; import java.util.Random; public class VerifyCodeUtils{ //使用到Algerian字体，系统里没有的话需要安装字体，字体只显示大写，去掉了1,0,i,o几个容易混淆的字符 public static final String VERIFY_CODES = "23456789ABCDEFGHJKLMNPQRSTUVWXYZ"; private static Random random = new Random(); /** * 使用系统默认字符源生成验证码 * @param verifySize 验证码长度 * @return */ public static String generateVerifyCode(int verifySize){ return generateVerifyCode(verifySize, VERIFY_CODES); } /** * 使用指定源生成验证码 * @param verifySize 验证码长度 * @param sources 验证码字符源 * @return */ public static String generateVerifyCode(int verifySize, String sources){ if(sources == null || sources.length() == 0){ sources = VERIFY_CODES; } int codesLen = sources.length(); Random rand = new Random(System.currentTimeMillis()); StringBuilder verifyCode = new StringBuilder(verifySize); for(int i = 0; i < verifySize; i++){ verifyCode.append(sources.charAt(rand.nextInt(codesLen-1))); } return verifyCode.toString(); } /** * 生成随机验证码文件,并返回验证码值 * @param w * @param h * @param outputFile * @param verifySize * @return * @throws IOException */ public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException{ String verifyCode = generateVerifyCode(verifySize); outputImage(w, h, outputFile, verifyCode); return verifyCode; } /** * 输出随机验证码图片流,并返回验证码值 * @param w * @param h * @param os * @param verifySize * @return * @throws IOException */ public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException{ String verifyCode = generateVerifyCode(verifySize); outputImage(w, h, os, verifyCode); return verifyCode; } /** * 生成指定验证码图像文件 * @param w * @param h * @param outputFile * @param code * @throws IOException */ public static void outputImage(int w, int h, File outputFile, String code) throws IOException{ if(outputFile == null){ return; } File dir = outputFile.getParentFile(); if(!dir.exists()){ dir.mkdirs(); } try{ outputFile.createNewFile(); FileOutputStream fos = new FileOutputStream(outputFile); outputImage(w, h, fos, code); fos.close(); } catch(IOException e){ throw e; } } /** * 输出指定验证码图片流 * @param w * @param h * @param os * @param code * @throws IOException */ public static void outputImage(int w, int h, OutputStream os, String code) throws IOException{ int verifySize = code.length(); BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Random rand = new Random(); Graphics2D g2 = image.createGraphics(); g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING,RenderingHints.VALUE_ANTIALIAS_ON); Color[] colors = new Color[5]; Color[] colorSpaces = new Color[] { Color.WHITE, Color.CYAN, Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.YELLOW }; float[] fractions = new float[colors.length]; for(int i = 0; i < colors.length; i++){ colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)]; fractions[i] = rand.nextFloat(); } Arrays.sort(fractions); g2.setColor(Color.GRAY);// 设置边框色 g2.fillRect(0, 0, w, h); Color c = getRandColor(200, 250); g2.setColor(c);// 设置背景色 g2.fillRect(0, 2, w, h-4); //绘制干扰线 Random random = new Random(); g2.setColor(getRandColor(160, 200));// 设置线条的颜色 for (int i = 0; i < 20; i++) { int x = random.nextInt(w - 1); int y = random.nextInt(h - 1); int xl = random.nextInt(6) + 1; int yl = random.nextInt(12) + 1; g2.drawLine(x, y, x + xl + 40, y + yl + 20); } // 添加噪点 float yawpRate = 0.05f;// 噪声率 int area = (int) (yawpRate * w * h); for (int i = 0; i < area; i++) { int x = random.nextInt(w); int y = random.nextInt(h); int rgb = getRandomIntColor(); image.setRGB(x, y, rgb); } shear(g2, w, h, c);// 使图片扭曲 g2.setColor(getRandColor(100, 160)); int fontSize = h-4; Font font = new Font("Algerian", Font.ITALIC, fontSize); g2.setFont(font); char[] chars = code.toCharArray(); for(int i = 0; i < verifySize; i++){ AffineTransform affine = new AffineTransform(); affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize/2, h/2); g2.setTransform(affine); g2.drawChars(chars, i, 1, ((w-10) / verifySize) * i + 5, h/2 + fontSize/2 - 10); } g2.dispose(); ImageIO.write(image, "jpg", os); } private static Color getRandColor(int fc, int bc) { if (fc > 255) fc = 255; if (bc > 255) bc = 255; int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } private static int getRandomIntColor() { int[] rgb = getRandomRgb(); int color = 0; for (int c : rgb) { color = color << 8; color = color | c; } return color; } private static int[] getRandomRgb() { int[] rgb = new int[3]; for (int i = 0; i < 3; i++) { rgb[i] = random.nextInt(255); } return rgb; } private static void shear(Graphics g, int w1, int h1, Color color) { shearX(g, w1, h1, color); shearY(g, w1, h1, color); } private static void shearX(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(2); boolean borderGap = true; int frames = 1; int phase = random.nextInt(2); for (int i = 0; i < h1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(0, i, w1, 1, (int) d, 0); if (borderGap) { g.setColor(color); g.drawLine((int) d, i, 0, i); g.drawLine((int) d + w1, i, w1, i); } } } private static void shearY(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(40) + 10; // 50; boolean borderGap = true; int frames = 20; int phase = 7; for (int i = 0; i < w1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(i, 0, 1, h1, 0, (int) d); if (borderGap) { g.setColor(color); g.drawLine(i, (int) d, i, 0); g.drawLine(i, (int) d + h1, i, h1); } } } public static void main(String[] args) throws IOException { //获取验证码 String s = generateVerifyCode(4); //将验证码放入图片中 outputImage(260,60,new File("/Users/chenyannan/Desktop/安工资料/aa.jpg"),s); System.out.println(s); } } 复制代码
最后就是编写我们的Controller进行测试啦（UserController）
package com.controller; import com.Result.Result; import com.mapper.UserMapper; import com.pojo.User; import com.service.UserService; import com.utils.VerifyCodeUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; @Controller @RequestMapping("/user") public class UserController { @Autowired UserService userService; @RequestMapping("login") @ResponseBody public Result login(String code,User user,HttpSession session){ Result result =new Result(); // 取出验证码 String imagecode = (String) session.getAttribute("code"); try { if (imagecode.equalsIgnoreCase(code)){ User u = userService.login(user); session.setAttribute("user",u);//把用户存到session中 result.setMsg("登陆成功"); result.setStatue(true); return result; } throw new RuntimeException("验证码输入错误！！"); }catch (Exception e){ e.printStackTrace(); result.setStatue(false); result.setMsg(e.getMessage()); } return result; } // 生成验证码 @RequestMapping("getImage") public void getImage(HttpSession session, HttpServletResponse response) throws IOException { // 1.获取随机数 String code = VerifyCodeUtils.generateVerifyCode(4);//获取4位随机数 // 2.将数字存入session中 session.setAttribute("code", code); // 3.生成验证码图片 VerifyCodeUtils.outputImage(120, 43, response.getOutputStream(), code); } } 复制代码
结语：这样我们的登陆功能就写好啦，如果有bug可以留言噢
b.注册
注册的功能其实和登陆如出一辙，一个是去数据库里面根据用户名查询，然后检验密码是否正确，注册就是往数据库里面添加一条数据，首先是页面的引入
<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Bootstrap Material Admin</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="robots" content="all,follow"> <!-- Bootstrap CSS--> <link rel="stylesheet" href="statics/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins:300,400,700"> <link rel="stylesheet" href="statics/css/style.default.css" id="theme-stylesheet"> </head> <body> <div class="page login-page"> <div class="container d-flex align-items-center"> <div class="form-holder has-shadow"> <div class="row"> <!-- Logo & Information Panel--> <div class="col-lg-6"> <div class="info d-flex align-items-center"> <div class="content"> <div class="logo"> <h1>欢迎注册</h1> </div> <p>注册登录界面模板</p> </div> </div> </div> <!-- Form Panel --> <div class="col-lg-6 bg-white"> <div class="form d-flex align-items-center"> <div class="content"> <form id="regForm"> <div class="form-group"> <input id="register-username" class="input-material" type="text" name="name" placeholder="请输入用户名/姓名" > <div class="invalid-feedback"> 用户名必须在2~10位之间 </div> </div> <div class="form-group"> <input id="register-password" class="input-material" type="password" name="password" placeholder="请输入密码" > <div class="invalid-feedback"> 密码必须在6~10位之间 </div> </div> <div class="form-group"> <input id="register-passwords" class="input-material" type="password" name="passwords" placeholder="确认密码" > <div class="invalid-feedback"> 两次密码必须相同 且在6~10位之间 </div> </div> <div class="form-group"> <label for="role"></label> <select class="form-control" name="role" id="role"> <option value="admin">管理员</option> <option value="student">学生</option> </select> </div> <br> <div class="form-group"> <button id="regBtn" type="button" name="registerSubmit" class="btn btn-primary">注册</button> </div> <small>已有账号?</small><a href="login.html" class="signup"> 登录</a> </form> </div> </div> </div> </div> </div> </div> </div> <!-- JavaScript files--> <script src="statics/js/jquery.min.js"></script> <script src="statics/layui/layui.js"></script> <script src="statics/js/bootstrap.min.js"></script> <script> $(function(){ //注册 $("#regBtn").click(function(){ $.post("${pageContext.request.contextPath}/user/register",$("#regForm").serialize(),function (res) { if(res.statue){ layui.use("layer",function () { var layer=layui.layer; layer.alert(res.msg+",点击确定跳转至登录页面", {icon: 6}); }); location.href = "${pageContext.request.contextPath}/back/login.jsp"; }else{ layui.use("layer",function () { var layer=layui.layer; layer.msg(res.msg, {icon: 5}); }); } }); }); /*错误class form-control is-invalid 正确class form-control is-valid*/ var flagName=false; var flagPas=false; var flagPass=false; /*验证用户名*/ var name,passWord,passWords; $("#register-username").change(function(){ name=$("#register-username").val(); if(name.length<2||name.length>10){ $("#register-username").removeClass("form-control is-valid") $("#register-username").addClass("form-control is-invalid"); flagName=false; }else{ $("#register-username").removeClass("form-control is-invalid") $("#register-username").addClass("form-control is-valid"); flagName=true; } }) /*验证密码*/ $("#register-password").change(function(){ passWord=$("#register-password").val(); if(passWord.length<6||passWord.length>18){ $("#register-password").removeClass("form-control is-valid") $("#register-password").addClass("form-control is-invalid"); flagPas=false; }else{ $("#register-password").removeClass("form-control is-invalid") $("#register-password").addClass("form-control is-valid"); flagPas=true; } }) /*验证确认密码*/ $("#register-passwords").change(function(){ passWords=$("#register-passwords").val(); if((passWord!=passWords)||(passWords.length<6||passWords.length>18)){ $("#register-passwords").removeClass("form-control is-valid") $("#register-passwords").addClass("form-control is-invalid"); flagPass=false; }else{ $("#register-passwords").removeClass("form-control is-invalid") $("#register-passwords").addClass("form-control is-valid"); flagPass=true; } }) $("#regbtn").click(function(){ if(flagName&&flagPas&&flagPass){ localStorage.setItem("name",name); localStorage.setItem("passWord",passWord); location="login.html" }else{ if(!flagName){ $("#register-username").addClass("form-control is-invalid"); } if(!flagPas){ $("#register-password").addClass("form-control is-invalid"); } if(!flagPass){ $("#register-passwords").addClass("form-control is-invalid"); } } }) }) </script> </body> </html> 复制代码
编写Mapper接口
package com.mapper; import com.pojo.User; import org.apache.ibatis.annotations.Mapper; @Mapper public interface UserMapper { void save(User user); User findByName(String name); } 复制代码
编写Mapper.xml（一定要注意namespace的值和Mapper的名字要相同）
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.mapper.UserMapper"> <insert id="save" parameterType="com.pojo.User" useGeneratedKeys="true" keyProperty="id"> insert into t_user values (#{id},#{name},#{password},#{status},#{regtime},#{role}) </insert> <select id="findByName" parameterType="string" resultType="com.pojo.User"> select * from t_user where name = #{name} </select> </mapper> 复制代码
编写Service接口
package com.service; import com.pojo.User; public interface UserService { void register(User user); User login (User user); } 复制代码
编写ServiceImpl
package com.service.impl; import com.mapper.UserMapper; import com.pojo.User; import com.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import org.springframework.transaction.annotation.Transactional; import java.util.Date; @Service public class UserServiceImpl implements UserService { @Autowired UserMapper userMapper; @Override public void register(User user) { User u = userMapper.findByName(user.getName()); if (u!=null){ throw new RuntimeException("当前用户名已被注册"); }else { user.setRegtime(new Date()); user.setStatus("激活"); userMapper.save(user); } } @Override public User login(User user) { User u=userMapper.findByName(user.getName()); if (u!=null){ if (u.getPassword().equals(user.getPassword())){ return u; }else { throw new RuntimeException("密码输入错误"); } } throw new RuntimeException("用户名输入错误，请从新输入"); } } 复制代码
最后就是到了Controller的时候了
package com.controller; import com.Result.Result; import com.mapper.UserMapper; import com.pojo.User; import com.service.UserService; import com.utils.VerifyCodeUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; @Controller @RequestMapping("/user") public class UserController { @Autowired UserService userService; // 用户退出 @RequestMapping("logout") public String logout(HttpSession session){ session.invalidate(); return "redirect:/back/login.jsp"; } @RequestMapping("login") @ResponseBody public Result login(String code,User user,HttpSession session){ Result result =new Result(); // 取出验证码 String imagecode = (String) session.getAttribute("code"); try { if (imagecode.equalsIgnoreCase(code)){ User u = userService.login(user); session.setAttribute("user",u);//把用户存到session中 result.setMsg("登陆成功"); result.setStatue(true); return result; } throw new RuntimeException("验证码输入错误！！"); }catch (Exception e){ e.printStackTrace(); result.setStatue(false); result.setMsg(e.getMessage()); } return result; } @RequestMapping("register") @ResponseBody public Result register(User user) { Result result = new Result(); try { userService.register(user); result.setMsg("注册成功"); result.setStatue(true); return result; } catch (Exception e) { e.printStackTrace(); result.setStatue(false); result.setMsg(e.getMessage()); return result; } } // 生成验证码 @RequestMapping("getImage") public void getImage(HttpSession session, HttpServletResponse response) throws IOException { // 1.获取随机数 String code = VerifyCodeUtils.generateVerifyCode(4);//获取4位随机数 // 2.将数字存入session中 session.setAttribute("code", code); // 3.生成验证码图片 VerifyCodeUtils.outputImage(120, 43, response.getOutputStream(), code); } } 复制代码
c.跳转首页（略丑，轻喷）
头部jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/> <script src="${pageContext.request.contextPath}/back/statics/js/jquery-1.8.3.min.js"></script> <body > <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">班级管理系统 <small>V1.0</small> </a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right"> <c:if test="${sessionScope.user!=null}"> <li><a href="javascript:;">欢迎: <span class="text-danger">${sessionScope.user.name}</span></a></li> <a href="${pageContext.request.contextPath}/user/logout" target="_top" type="button" class="btn btn-danger navbar-btn">退出</a> </c:if> <c:if test="${sessionScope.user==null}"> <li><a href="javascript:;"><span class="text-info">您当前还是访客身份,赶紧去登录吧~~</span></a></li> <a href="${pageContext.request.contextPath}/back/login.jsp" target="_top" type="button" class="btn btn-primary navbar-btn">登录</a> </c:if> </ul> </div> </div> </nav> </body> 复制代码
菜单jsp
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/> <script src="${pageContext.request.contextPath}/back/statics/js/jquery-1.8.3.min.js"></script> <style> body,ul,li{ background:#eee; } .list-group-item{ background: #eee; } </style> <body> <ul class="list-group text-center" style="margin-top: 70px;"> <li class="list-group-item"><a href="${pageContext.request.contextPath}/student/findAll" target="content">学生管理</a> </li> <c:if test="${sessionScope.user.role=='admin'}"> <li class="list-group-item"><a href="${pageContext.request.contextPath}/group/findAll" target="content">小组管理</a> </li> <li class="list-group-item"><a href="${pageContext.request.contextPath}/clazz/findAll" target="content">班级管理</a> </li> <li class="list-group-item"><a href="${pageContext.request.contextPath}/tag/findAll" target="content">标签管理</a> </li> <li class="list-group-item"><a href="${pageContext.request.contextPath}/city/findAll" target="content">城市管理</a> </li> </c:if> </ul> </body> 复制代码
主页jsp
<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"/> <div class="jumbotron"> <div class="container"> <h1>Hello, world!</h1> <p>This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or informatio...</p> <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p> <p>磁盘使用率:(40%)</p> <div class="progress"> <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%"> <span class="sr-only">40% Complete (success)</span> </div> </div> <p>内存使用率:(20%)</p> <div class="progress"> <div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 20%"> <span class="sr-only">20% Complete</span> </div> </div> <p>cpu使用率:(60%)</p> <div class="progress"> <div class="progress-bar progress-bar-warning progress-bar-striped" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"> <span class="sr-only">60% Complete (warning)</span> </div> </div> <p>数据库使用率:(80%)</p> <div class="progress"> <div class="progress-bar progress-bar-danger progress-bar-striped" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"> <span class="sr-only">80% Complete (danger)</span> </div> </div> <div class="row" style="margin-top: 20px;"> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <%--<img src="${pageContext.request.contextPath}/back/statics/images/home.jpeg" >--%> <div class="caption"> <h3>班级管理系统V1.0</h3> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <%--<img src="${pageContext.request.contextPath}/back/statics/images/home.jpeg" >--%> <div class="caption"> <h3>班级管理系统V1.0</h3> </div> </div> </div> <div class="col-sm-6 col-md-4"> <div class="thumbnail"> <img src="${pageContext.request.contextPath}/back/statics/images/home.jpeg" > <div class="caption"> <h3>班级管理系统V1.0</h3> </div> </div> </div> </div> </div> </div> 复制代码
主页引用
<%@page contentType="text/html; UTF-8" pageEncoding="UTF-8" isELIgnored="false" %> <!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>Document</title> </head> <frameset rows="50px,*" border="1px" borderColor="black" scrolling="no" noresize="noresize"> <%--引入标题--%> <frame src="${pageContext.request.contextPath}/back/main/head.jsp"> <frameset cols="200px,*"> <frame src="${pageContext.request.contextPath}/back/main/menu.jsp"> <%--中心布局--%> <frame src="${pageContext.request.contextPath}/back/main/home.jsp" name="content"> </frameset> </frameset> </html> 复制代码
6.结语
day01就结束了，简单的写一个注册和登陆功能，明天会开始正式进入业务实现功能和编码，如果想获取源码的话可以移步我的码云，不做白嫖党（坏笑），喜欢的小朋友可以给一个start
