springboot整合mybaits-plusmybaits实现用户登陆界面(适合入门)+唯美界面
springboot整合mybaits-plus/mybaits实现用户登陆界面(一步步解析)+唯美界面
文章目录
- springboot整合mybaits-plus/mybaits实现用户登陆界面(一步步解析)+唯美界面
- 前言
- 1.演示画面
- 2.项目的创建+依赖
- 2.检查一下自己的项目依赖
- 3.编写springboot核心文件yml文件
- 4.创建数据库+连接数据库
- 5.分层的思想
- 1.实体层(entity)
- 2.mapper层
- 小测试一下
- 3.service层
- 前端页面的编写
- login.html
- register.html
- success.html
- showall.html
- 来看我们的controller层
- 结语
- mapper.xml模版
- themleaf模版(这个写在我们的HTML开头就行)
前言
因为这也是一个小白对这个整合框架的理解,加入了一些自己的想法,还是希望与大家交流,
所以这里所有的解释都算是非常通俗易懂,直接看就行了。
1.演示画面
直接让大家先看看最终结果咋样,还是比较可以的(个人认为)
springboot+mybaits实现用户登陆系统
2.项目的创建+依赖
我圈出来的这几个就足够了,
简单说一下这几个都是干嘛的,springweb就是用于我们网页的,因为我们要做一个前后端可以进行交互的,并且属于javaweb范畴的,
thymeleaf这个就是写前端页面的,而且借助这个模版引擎,可以很好的帮助我们和后端数据库建立很好的联系,(待会你就知道了)。
sql这几个就是我们的mybaits框架和mysql驱动,直接选择就行了。
然后在我们的pom.xml
文件下加入mybaits-plus的环境
虽然这次我们的项目,没有用到,但是加上,很简单,maven会帮助我们装包,而且这个帮助我们完成了很多的封装好的增删改查。
2.检查一下自己的项目依赖
如果你是上面这些就ok了
3.编写springboot核心文件yml文件
可能你们找不到在哪,因为他其实默认的名字是application.propoties结尾的,但是我们重命名一下改成和我的一样,
其实按照原本的也是可以的,但是springboot官方也是推荐我们使用yml文件,那我们就听官方的,不要发生不必要的麻烦出来。
然后填写我们的数据
这里大家先直接复制我下面的代码,然后我们后面告诉大家哪里需要修改,并且解释一下都是干嘛的这些代码
server:port: 80
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/spring?serverTimezone=Asia/Shanghaiusername: rootpassword: rootthymeleaf:cache: falsemybatis-plus:mapper-locations: classpath:mapper/**/*.xmlconfiguration:map-underscore-to-camel-case: true
下面解释一下
server: #这个是配置我们的端口号 就是配置好之后我们直接输入就可以运行 不用写8080端口port: 80
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driver --这个是我们的数据库驱动 直接写我的就行url: jdbc:mysql://localhost:3306/spring?serverTimezone=Asia/Shanghai-- 这个是配置我们数据库的路径 其实你只需要改一个位置就行 就是/spring 这个改成你自己的数据库名称就行 后面和前面都是固定格式username: root-- 这个写你们自己的数据库名称password: rootthymeleaf:--这个是将我们的thymeleaf缓存设置为FALSE,便于我们测试cache: falsemybatis-plus:mapper-locations: classpath:mapper/**/*.xml //这个就是注册我们的xml文件,先写上,我后面创建的时候解释configuration:map-underscore-to-camel-case: true -- 这个是支持驼峰命名法,写上之后我们从数据库传来的数据就可以直接改写成驼峰命名法 比如说数据库是user_name 你在我们的实体类中就可以写成userName 不过这个不重要
4.创建数据库+连接数据库
使用idea连接我们的数据库
点击之后进入我们的连接页面
连接成功
你就应该会看到和下面这张图片类似的情况
可以看见你的表就说明成功了
5.分层的思想
简单说一下如何进行分层处理
先看一下我的整个目录
1.实体层(entity)
里面就是存放我们和数据库进行映射的数据,就是数据里面的字段是什么我们在这里就写什么
注意大家建包的位置 不要建错了,可以仿照我的来
上代码
package com.example.demo002.entity;/*** @author yt1105* @version 1.0*/
public class User {private String username;private String password;@Overridepublic String toString() {return "User{" +"username='" + username + '\'' +", password='" + password + '\'' +'}';}public User() {}public User(String username, String password) {this.username = username;this.password = password;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}
}
这一个层很简单,只需要写一下就行,然后字段和你自己数据库的字段对应起来就行。
2.mapper层
这个层你可以理解为这个是给数据库提供了一个接口,可以对数据的库的数据进行交互处理,
这里我们采用注解的操作进行对数据库操作(这里你也可以选择使用xml文件进行操作,这个我们待会说)
package com.example.demo002.mapper;import com.example.demo002.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;/*** @author yt1105* @version 1.0*/
@Mapper
public interface UserMapper {@Insert("INSERT INTO spring VALUES(#{username},#{password})")int add(User user);@Select("SELECT * FROM spring")List<User> queryAll();
}
需要注意的是 大家不要忘记加@Mapper 注解 这个加上是为了告诉我们的springboot这个是mapper 方便它的管理 不要忘记
注解里面就是写如何对数据库进行操作,都是数据库的基本语法 除了这个#{username},#{password},为什么要加#{},
这个就是一个语法 这样写代表这个数据是我们从外部传来的,大家记住就行。
当然大家也可以采用xml文件配置
我这里没用 因为查询的语句比较简单,大家看一下就行
然后在这里面去写我们的一些模版 大家要是想用 就先把这个写进去
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.dao.UserDao"><select id="queryAll" resultType="com.example.demo.pojo.UserLogin">select * from userLogin</select></mapper>
这个是模版,然后里面写你想写的sql语句 需要注意一下 这几个参数是干嘛的namespace=“com.example.dao.UserDao”
这个要改成你自己的mapper路径
id=“queryAll” 这个是你的查询名称是什么就是什么 这个就是你在mapper接口里面写的方法名, resultType是代表你返回类型,写你的实体类的路径就行
注意你要是不用就不要建立这个包,不然建立了就会报错,所以就不要建立了,直接安装按照我的思路走先。
由于我这次没有用 就解释这些。
小测试一下
这个时候大家可以测试一下自己写的有没有错误,也即是看看自己的数据可不可以显示
在这个位置下进行书写
package com.example.demo002;import com.example.demo002.entity.User;
import com.example.demo002.mapper.UserMapper;
import com.example.demo002.service.UserServiceInterface;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;import java.util.List;@SpringBootTest
class Demo002ApplicationTests {
@Autowired
private UserMapper userMapper;@Testvoid contextLoads() {User user = new User("HHH","ASD");userMapper.add(user);List<User> users = userMapper.queryAll();users.forEach(System.out::println);}}
然后要是可以打印数据说明没有问题。
3.service层
这里实现我们的一些业务
直接上coding
这个是UserService类
package com.example.demo002.service;import com.example.demo002.entity.User;
import com.example.demo002.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;import java.util.List;/*** @author yt1105* @version 1.0*/
@Service
public class UserService implements UserServiceInterface{@Autowiredprivate UserMapper userMapper;@Overridepublic int add(User user) {return userMapper.add(user);}@Overridepublic List<User> queryAll() {return userMapper.queryAll();}
}
package com.example.demo002.service;import com.example.demo002.entity.User;import java.util.List;/*** @author yt1105* @version 1.0*/
public interface UserServiceInterface {int add(User user);List<User> queryAll();
}
前端页面的编写
这个编写之前 controller之前 我先编写一下 我们的前端页面
然后说一下我的思路
我要实现的是一个用户输入账号和密码之后可以登陆的那么一件事
然后我希望的是登陆完之后还有一个查询一共有多少用户登陆的一个页面
然后还有一个用户登陆成功会欢迎的界面
然后上我的前端代码
login.html
<!DOCTYPE html>
<!--引入我们的模版引擎-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><style>body{background: #30cfd0;/*background-image: url(../static/img1/虎年.jpg);*/background-repeat: no-repeat;background-size:100%;background-position: 0px -50px;}#login-box{background-color: #00000068;border-radius: 13px;text-align: center;margin: 0px auto;margin-top: 80px;width: 350px;height: 400px;}#login-box h1{padding-top: 60px;color: #ffffff;}#login-box .input-box{margin-top: 30px;}#login-box .input-box input{border: none;background: none;border-bottom: #FFFFFF 2px solid;padding: 5px 10px;outline: none;color: #FFFFFF;}#login-box button{line-height:30px;margin-top: 30px;width: 130px;height: 30px;border-radius:13px ;outline: none;border: none;background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);color: #FFFFFF;}#login-box button:hover{background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);}#login-box .input-box i{color: #FFFFFF;}</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>Sign in</title><link rel="stylesheet" type="text/css"href="./css/index.css"/><link rel="stylesheet" type="text/css"href="./css/iconfont.css"/>
</head>
<body>
<div id="login-box"><h1>Login</h1><form method="get" action="/LoginSuccess"><div class="input-box"><i class="iconfont"></i><span th:text="${data}" style="text-color:#ff0000;font-size: 10px"></span><input type="text" name="username" placeholder="请输入用户名" required/><br><br></div><div class="input-box"><i class="iconfont"></i><input type="password" name="password" placeholder="请输入密码" required/><br><br></div><input type="submit" value="登录"></form><br><form method="get" action="/toRegister"><input type="submit" value="注册"></form><form method="get" action="/toMessage"><input type="submit" value="查询登陆用户的信息"></form>
</div></body>
</html></body>
</html>
说一下这个form表单就是我们要进行提交的东西,里面的action属性和我们的controller里面的requestmapper相对应
这个登陆和注册界面都是经过美化的,大家直接用就行,比较漂亮
register.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"><head><meta charset="UTF-8"><title>Title</title><style>body{background: #30cfd0;/*background-image: url(../static/img1/虎年.jpg);*/background-repeat: no-repeat;background-size:100%;background-position: 0px -50px;}#login-box{background-color: #00000068;border-radius: 13px;text-align: center;margin: 0px auto;margin-top: 80px;width: 350px;height: 400px;}#login-box h1{padding-top: 60px;color: #ffffff;}#login-box .input-box{margin-top: 30px;}#login-box .input-box input{border: none;background: none;border-bottom: #FFFFFF 2px solid;padding: 5px 10px;outline: none;color: #FFFFFF;}#login-box button{line-height:30px;margin-top: 30px;width: 130px;height: 30px;border-radius:13px ;outline: none;border: none;background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);color: #FFFFFF;}#login-box button:hover{background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);}#login-box .input-box i{color: #FFFFFF;}</style>
</head>
<body>
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>Sign in</title><link rel="stylesheet" type="text/css"href="./css/index.css"/><link rel="stylesheet" type="text/css"href="./css/iconfont.css"/>
</head>
<body><div id="login-box"><h1>Register</h1><form method="get" action="/RegisterSuccess"><div class="input-box"><i class="iconfont"></i><input type="text" name="username" placeholder="请输入用户名" required/><br><br></div><div class="input-box"><i class="iconfont"></i><input type="password" name="password" placeholder="请输入密码" required/><br><br><input type="password" name="password2" placeholder="请确认密码" required/><br><br></div><input type="submit" value="注册"></form></div></body>
</html></body>
</html>
success.html
<!DOCTYPE html>
<html lang="en" xmlns: th="http://www.thymeleaf.org" xmlns:th="http://www.w3.org/1999/xhtml">
<head><meta charset="UTF-8"><title>Title</title><style>body{background: aquamarine;}</style>
</head>
<body>
<!--这里是进行联系 我们借助的是"${kkk} 这个语句"-->
<h1 style="text-align: center ;background: cadetblue;border-radius: inherit" >注册成功</h1>
<span th:text="${kkk}" style="background: aqua ;font-size: 40px; text-align: center"> </span>
<!---->
<p style="text-align: center; background: salmon; font-size: 40px ">新年快乐</p>
</body>
</html>
showall.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>Title</title><style>table{border-collapse: collapse;margin: auto;}th,td{border: salmon solid 1px;padding: 5px;}</style>
</head>
<body>
<table><tr><th>用户姓名</th><th>用户密码</th></tr><tr th:each="user:${users}"><td th:text="${user.getUsername()}"></td><td th:text="${user.getPassword()}"></td></tr></table>
</body>
</html>
来看我们的controller层
package com.example.demo002.controller;import com.example.demo002.entity.User;
import com.example.demo002.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.RequestMapping;/*** @author yt1105* @version 1.0*/
@Controller
public class UserController {@Autowiredpublic UserService userService;@RequestMapping("/toLogin")//当你在浏览器输入/toLogin,我们会直接跳转到登陆界面public String toLogin(){return "login";}@RequestMapping("/LoginSuccess")//这个是判断是否成功登陆public String LoginSuccess(Model model,User user){if(user.getUsername()!=null){model.addAttribute("kkk",user.getUsername());return "success";//我们就返回到我们的成功页面上边去}else {model.addAttribute("data","请输入你的密码");return "login";}}@RequestMapping("/toRegister")//这个是注册页面public String toRegister(){return "register";}@RequestMapping("/RegisterSuccess")//判断注册成功,然后将我们的数据放入数据库public String RegisterSuccess(User user){int add = userService.add(user);return "login";}@RequestMapping("/toMessage")//这个是显示我们的用户登陆信息(对应我们的显示用户信息按钮)public String toMessage(Model model){model.addAttribute("users",userService.queryAll());return "showAll";}}
结语
以上就是我的代码
大家有需要原码的直接来我们的gitee仓库
获取就行
SpringBoot: 简单的用户登陆实现(mybaits结合themleaf模版) (gitee.com)
最后附上我们的
mapper.xml模版
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.mybatis.example.BlogMapper"><select id="selectBlog" resultType="Blog">select * from Blog where id = #{id}</select>
</mapper
themleaf模版(这个写在我们的HTML开头就行)
<html xmlns:th="http://www.thymeleaf.org">
springboot整合mybaits-plusmybaits实现用户登陆界面(适合入门)+唯美界面相关推荐
- SpringBoot整合Mybaits开发报java.lang.IllegalArgumentException: At least one base package must be specifie
SpringBoot整合Mybaits开发报Caused by: java.lang.IllegalArgumentException: At least one base package must ...
- 五、Springboot 整合Shiro---03认证---第三方QQ登陆
本章节基于:四.Springboot 整合Shiro---02认证---记住我 在开始之前,先要理解一下oauth2: 推荐去看一下(六.授权码模式):阮一峰讲解的oauth2 下面附上一张阮一峰博客 ...
- springboot整合shiro,mybatis-plus实现用户角色,权限管控.(完整demo)
资源下载链接:https://download.csdn.net/download/dayonglove2018/13960978 shiro是轻量级的权限管控框架.很早前就接触过.不过一直没有实现了 ...
- 【BackEnd】SpringBoot整合MybatisPlus实现登录注册功能(适合初学者)
一.引言 作者将代码上传到了Gitee,小伙伴可以直接Clone项目到本地 项目地址:https://gitee.com/cai-zijing/SpringBoot_MybatisPlus_Login ...
- Springboot整合SpringSecurity 04-启用登出logout功能
Springboot整合SpringSecurity 04-启用登出logout功能 前面Springboot整合SpringSecurity 02-使用自定义登陆页面我们讲过了SpringSecur ...
- springboot整合springsecurity安全框架(后端spring_security模块代码可直接使用,根据需求自定义修改)
SpringSecurity简介 最下面有与springboot整合的模块代码 用户认证和用户授权 主要包含两部分:用户认证和用户授权 用户认证:进入用户登录时候,输入用户名密码,查询数据库查看是否正 ...
- Spring-Boot整合微信登陆、微信支付、邮箱发送、支付宝支付和阿里云短信
Spring-Boot整合 1. 发送邮件 2. 支付宝支付 3. 阿里云短信 4. 微信登陆 5. 微信支付 6. Swargger2 前后端API接口信息文档 7. ehcache缓存缓存 8. ...
- vue-element-admin整合spring-boot实现权限控制之用户管理篇
vue-element-admin整合spring-boot实现权限控制之用户管理篇 0 引言 距离笔者上次利用vue-element-admin项目整合后台spring-boot项目打通前后端权限控 ...
- SpringBoot整合Shiro实现权限管理与登陆注册
前言 Shiro解决了什么问题? 互联网无非就是一些用户C想要使用一些服务S的资源去完成某件事,S的资源不能说给谁用就给谁用,因此产生了权限的概念,即C必须有权限才能操作S的资源.S如何确定C就是C呢 ...
最新文章
- 用Python爬取b站弹幕,看大家还会接受《爱情公寓5》吗?
- 博客园模板 样式优化
- 华为终于放出方舟编译器源代码!开源平台同步亮相,网友:硬核项目
- torch的拼接函数_从零开始深度学习Pytorch笔记(13)—— torch.optim
- Struts2配置文件中传递参数的一个小问题
- 更改软件typera的编辑页面背景色
- not found for dependency: expected at least 1 bean which qualifies as autowire
- Macaca上手体验
- Spring Boot的Maven插件 spring-boot-maven-plugin
- 从2-3-4树谈到Red-Black Tree(红黑树)
- 孙河php_2月20日出走孙河桥-温榆河-沙河水库
- awk 系列Part7:awk 怎么从标准输入(STDIN)读取输入
- 谍影重重,由片名想起
- TextBox的OnTextboxChanged事件里对Text重新赋值带中文, 导致崩溃
- abb变频器580系列改中文,ACS580变频器参数设置.pdf
- python源代码制作星空_用python画星空源代码是什么
- mysql dump hbase_mysqldump 导出数据库 结构
- 【elasticsearch】——用ILM策略自动完成冷热数据分离
- 员工信息表,增删查改程序
- ssm基于微信小程序的游泳馆管理系统 uinapp 计算机毕业设计