SpringBoot+Mybatis构建后台管理系统
前言
技术选型：
- SpringBoot 2.6.4
- Mybatis 3.4.6
- mysql 5.1.49
- thymeleaf 2.6.4
开发环境：
- Idea 2020.3
项目地址：
功能演示
账号密码错误提示
CRUD功能
pom.xml如下：
<?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.6.4</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.caq.boot</groupId> <artifactId>sys-admin</artifactId> <version>0.0.1-SNAPSHOT</version> <name>sys-admin</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-thymeleaf</artifactId> </dependency> <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.2.2</version> </dependency> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.4.6</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>5.1.49</version> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-devtools</artifactId> <scope>runtime</scope> <optional>true</optional> </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> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build> </project>
目录结构如下：
sql语句如下：
可在字段定义脚本中添加comment属性来添加注释
DROP TABLE IF EXISTS user; CREATE TABLE user ( id int(20) NOT NULL AUTO_INCREMENT COMMENT '主键ID', name VARCHAR(30) NULL DEFAULT NULL COMMENT '姓名', age INT(11) NULL DEFAULT NULL COMMENT '年龄', email VARCHAR(50) NULL DEFAULT NULL COMMENT '邮箱', PRIMARY KEY (id) ); DELETE FROM user; INSERT INTO user (id, name, age, email) VALUES (1, 'Banana', 18, 'test1@pyy.com'), (2, 'Jack', 20, 'test2@pyy.com'), (3, 'Tom', 28, 'test3@pyy.com'), (4, 'Milk', 21, 'test4@pyy.com'), (5, 'Apple', 24, 'test5@pyy.com');
1.导入静态资源和网页资源
如下：
2.设置主页访问路径
访问/或者/login的时候转发到login页面
@Controller public class LoginController { //跳转到登录页 @GetMapping({"/", "/login"}) public String login() { return "login"; } }
3.完成登录功能
action 属性规定当提交表单时，向何处发送表单数据
name属性在input标签中用于对提交到服务器后的表单数据进行标识（只有设置了name属性的表单元素才能在提交表单时传递它们的值）
标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。
1、更改表单提交的去向，当表单提交数据的时候向/login发送请求（设置表单的action=/login）
<form class="user" method="post" th:action="@{/login}"> <div class="form-group"> <input name="name" type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address..."> </div> <div class="form-group"> <input name="age" type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password"> </div> <div class="form-group"> <div class="custom-control custom-checkbox small"> <input type="checkbox" class="custom-control-input" id="customCheck"> <label class="custom-control-label" for="customCheck">Remember Me</label> </div> </div> <input type="submit" class="btn btn-primary btn-user btn-block"> <hr> <a href="index.html" class="btn btn-google btn-user btn-block"> <i class="fab fa-google fa-fw"></i> Login with Google </a> <a href="index.html" class="btn btn-facebook btn-user btn-block"> <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook </a> </form>
2、在控制层设置@PostMapping来处理表单/login的请求
提交表单的时候我们通过User对象来封装用户输入的username和password
为什么呢封装呢？被框架封装的（百度知道的，先不深入探究）
MVC 模式 代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。
Model（模型） - 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。 View（视图） - 视图代表模型包含的数据的可视化。 Controller（控制器） - 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开
为了防止表单重复提交和限制登录后才能访问资源，所以登录成功到达的页面我们进行重定向，并把登录成功的用户保存到session域中。保存到session与域的作用是能够判断用户是否登录后进行访问，session会话会一直保留直至浏览器关闭。
如果登录失败，则通过model渲染数据，通过thymeleaf返回给前端页面
这里用到了和后端数据库校验的地方，后面我会详细说
@Controller public class LoginController { @Autowired CrudImpl crud; //提交表单进行验证 @PostMapping("/login") public String index(@RequestParam("name") String name, @RequestParam("age") String age, HttpSession session, Model model) { User acc = crud.getAcc(name,age); if (acc != null){ session.setAttribute("login",acc); //重定向防止表单重复提交 return "redirect:/index"; }else { model.addAttribute("msg","账号或密码错误"); return "login"; } }
因为我们是重定向到index页面，所以是属于发送了一个/index.html请求
既然是请求那么我们就要处理这个请求，所以我们在写一个方法
因为前面我们做了一个登录成功将用户保存到session域中的操作，所以我们可以通过判断session域中是否存在登录成功的对象，如果有那么才给访问main页面。如果没有那么在通过model进行渲染通过thymeleaf传到前端页面
// 重定向后的判断 @GetMapping("/index") public String index(HttpSession session, Model model){ Object login = session.getAttribute("login"); if (login != null){ return "index"; }else { model.addAttribute("msg","请重新登录"); return "login"; } }
3、为了实现一个登录成功后，显示登录成功的用户名
定位到页面显示用户名信息的地方
thymeleaf的行内写法
取出登录成功用户的用户名即可实现此功能
（注意是.name不是通过get方法获取的）
[[${session.login.name}}]]
<span class="mr-2 d-none d-lg-inline text-gray-600 small" th:text="${session.login.name}"></span>
