SpringBoot整合Mybatis+HTML完成一个简单的登录注册界面（附效果图和源码） |
您所在的位置：网站首页 › 前后端分离实现登录验证 › SpringBoot整合Mybatis+HTML完成一个简单的登录注册界面（附效果图和源码） |
SpringBoot整合Mybatis+HTML完成一个简单的登录注册界面（附效果图和源码）
|
目录
一、效果演示1.1、登录演示1.2、注册演示1.3、项目结构
二、代码实现2.1、前端代码2.2、源码地址2.2、后端代码1、创建数据库2、配置pom.xml文件，导入相关的jar包3、创建实体类5、创建数据库访问层Mapper以及Mapper.xml6、创建Service服务类7、创建Controller控制类
三、总结开发思路：总结：
一、效果演示
1.1、登录演示
简介：这里我是根据之前做的一个登录界面稍微修改了一下实现功能的，其中js没有修改，这里就不放在这里占内存了。有需要的可以点击该链接复制js来使用: js下载的地址 2.2、源码地址源码地址：https://gitee.com/jingtian99/spring-boot_-login 登录注册界面 DOCTYPE html > 登录注册界面 注册账号 欢迎登录 记住密码 自动登录 忘记密码? 已有账号，直接登录 没有账号，点击注册登录成功界面 DOCTYPE html> 主界面 * { margin: 0; padding: 0; } ul { width: 800px; height: 40px; line-height: 40px; text-align: center; margin: 0 auto; } ul li { position: relative; float: left; list-style: none; background-color: deepskyblue; color: black; box-shadow: 1px 2px 8px darkgrey; width: 19.5%; } ul li a { text-decoration: none; } ul li:hover { background-color: skyblue; } 首页 音乐 电影 动漫 登录 2.2、后端代码开发步骤 1、创建数据库 -- 创建数据库 CREATE DATABASE login -- 创建表 CREATE TABLE `user`( `id` INT(10) NOT NULL AUTO_INCREMENT COMMENT '序号', `username` VARCHAR(20) NOT NULL COMMENT '用户名', `password` VARCHAR(20) NOT NULL COMMENT '密码', `email` VARCHAR(20) NOT NULL COMMENT '邮箱', PRIMARY KEY(id) )ENGINE=INNODB DEFAULT CHARSET=utf8 -- 插入数据 INSERT INTO user(id,username,password,email) VALUES (1,"123","123","[email protected]"),(2,"1234","1234","[email protected]") 2、配置pom.xml文件，导入相关的jar包 4.0.0 org.springframework.boot spring-boot-starter-parent 2.5.3 com.tian SpringBoot-Login 0.0.1-SNAPSHOT SpringBoot-Login Demo project for Spring Boot 1.8 org.springframework.boot spring-boot-starter-thymeleaf org.springframework.boot spring-boot-starter-web org.mybatis.spring.boot mybatis-spring-boot-starter 2.1.3 mysql mysql-connector-java runtime com.alibaba druid 1.0.14 org.springframework.boot spring-boot-starter-jdbc org.projectlombok lombok true org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-maven-plugin org.projectlombok lombok src/main/java **/*.xml src/main/resources 3、创建实体类 import lombok.Data; @Data public class User { private int id; private String username; private String password; //第一次输入的密码 private String password1; //第二次输入的密码 private String email; }4、application.properties文件的配置 #对thymeleaf的静态资源的访问 #过滤规则为/static/** spring.mvc.static-path-pattern=/static/** #静态资源位置为classpath:/static/ spring.web.resources.static-locations=classpath:/static/ #数据库链接 spring.datasource.type=com.alibaba.druid.pool.DruidDataSource spring.datasource.url=jdbc:mysql:///数据库名 spring.datasource.username=数据库账号 spring.datasource.password=数据库密码 5、创建数据库访问层Mapper以及Mapper.xmlMapper import com.tian.pojo.User; import org.apache.ibatis.annotations.Mapper; import org.springframework.stereotype.Repository; @Repository @Mapper public interface UserMapper { //注册用户 int addUser(User user); //验证用户名 User findUserName(String userName); //验证密码 String findPassword(String username); }Mapper .xml insert into user(username, password, email) value (#{username}, #{password}, #{email}) select * from user where username = #{username} select password from user where username = #{username} 6、创建Service服务类 import com.tian.map.UserMapper; import com.tian.pojo.User; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; @Service public class UserService { @Autowired UserMapper userMapper; //添加用户 public int addUser(User user) { return userMapper.addUser(user); } //查找用户名 public User findUserName(String userName) { return userMapper.findUserName(userName); } //查找账号密码 public String findPassword(String username) { return userMapper.findPassword(username); } } 7、创建Controller控制类 import com.tian.pojo.User; import com.tian.service.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.PostMapping; import javax.servlet.http.HttpSession; @Controller public class UserController { @Autowired UserService userService; @GetMapping(value = {"/", "login"}) public String loginPage() { return "login"; } @PostMapping("login2") public String loginSuccess(User user, HttpSession session, Model model) { try { //先查找一下有没有该账号 User userName = userService.findUserName(user.getUsername()); if (userName != null) { //如果有账号则判断账号密码是否正确 String password = userService.findPassword(user.getUsername()); if (password.equals(user.getPassword())) { //添加到session保存起来 session.setAttribute("loginUser", user); return "redirect:/success.html"; } else { //如果密码错误，则提示输入有误 model.addAttribute("msg", "账号或者密码有误"); return "login"; } } else { model.addAttribute("msg", "账号或者密码有误"); return "login"; } } catch (Exception e) { e.printStackTrace(); return e.getMessage(); } } @GetMapping("success.html") public String successPage(HttpSession session, Model model) { Object loginUser = session.getAttribute("loginUser"); if (loginUser != null) { return "success"; } else { model.addAttribute("msg", "请登录"); return "login"; } } //注册用户 @PostMapping("register") public String RegisterUser(User user, Model model) { try { User userName = userService.findUserName(user.getUsername()); //没有用户可以进行注册 if (userName == null) { if (user.getPassword().equals("") || user.getPassword1().equals("") || user.getUsername().equals("") || user.getEmail().equals("")) { //错误一:输入框有空值 model.addAttribute("tip", "请填写好信息"); return "login"; } else if (!user.getPassword().equals(user.getPassword1())) {//错误二:输入两次密码前后不一致 model.addAttribute("tip", "密码前后不一致"); return "login"; } else { int i = userService.addUser(user); if (i > 0) { model.addAttribute("tip", "注册成功"); } return "login"; } } else { model.addAttribute("tip", "用户已存在,请登录"); return "login"; } } catch (Exception e) { e.printStackTrace(); return e.getMessage(); } } } 三、总结 开发思路：1、先创建好数据库并加载相关的jar包 2、编写好前端代码 3、根据登录以及注册这两个功能进行编写mapper 4、登录功能： 从数据库获取用户的账号密码账号密码进行判断，如果正确则跳转到新页面，否则提示用户输入有误5、注册功能： 先判断用户是否存在，如果不存在则可以进行注册判断用户输入的信息、格式是否有误，如果没有异常则可以进行注册 总结：虽然功能能够实现，但也是简单的进行注册验证而言，还有一些记住密码、忘记密码这些功能并没有实现，没有使用过滤器以及对用户输入的信息都没有进行一个很好的格式校验。 |
【本文地址】
今日新闻 |
推荐新闻 |