综合案例
前面介绍了Freemaker,这节介绍SpringBoot整合MyBatis,同时结合Freemaker展现数据
5.1 项目创建
添加相关的依赖
代码语言:javascript复制<?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.9.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.bobo</groupId>
<artifactId>springboot-demo09</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-demo09</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-freemarker</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</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>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>1.3.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.0.14</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
添加相关的配置文件
代码语言:javascript复制server.port=8082
# 配置JDBC的相关信息
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/logistics?characterEncoding=utf-8&serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=123456
# 配置连接池
spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
# 配置MyBatis的package 设置别名
mybatis.type-aliases-package=com.bobo.pojo
创建实体对象
代码语言:javascript复制package com.bobo.pojo;
public class User {
private String user_id ;
private String user_name ;
private String real_name ;
private String password ;
private String email ;
private String phone ;
private String u1 ;
private String u2 ;
public String getUser_id() {
return user_id;
}
public void setUser_id(String user_id) {
this.user_id = user_id;
}
public String getUser_name() {
return user_name;
}
public void setUser_name(String user_name) {
this.user_name = user_name;
}
public String getReal_name() {
return real_name;
}
public void setReal_name(String real_name) {
this.real_name = real_name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getU1() {
return u1;
}
public void setU1(String u1) {
this.u1 = u1;
}
public String getU2() {
return u2;
}
public void setU2(String u2) {
this.u2 = u2;
}
}
5.2 查询用户信息
创建接口
代码语言:javascript复制package com.bobo.mapper;
import com.bobo.pojo.User;
import java.util.List;
public interface UserMapper {
List<User> query();
}
创建映射文件
代码语言:javascript复制<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.bobo.mapper.UserMapper">
<select id="query" resultType="user">
select * from t_user
</select>
</mapper>
属性文件中添加Mapper映射文件的路径
创建Service
代码语言:javascript复制package com.bobo.service;
import com.bobo.pojo.User;
import java.util.List;
public interface IUserService {
List<User> query();
}
代码语言:javascript复制package com.bobo.service.impl;
import com.bobo.mapper.UserMapper;
import com.bobo.pojo.User;
import com.bobo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class UserServiceImpl implements IUserService {
@Autowired
private UserMapper mapper;
@Override
public List<User> query() {
return mapper.query();
}
}
创建控制器
代码语言:javascript复制package com.bobo.controller;
import com.bobo.pojo.User;
import com.bobo.service.IUserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import java.util.List;
@Controller
@RequestMapping("/user")
public class UserController {
@Autowired
private IUserService service;
@RequestMapping("/query")
public String query(Model model){
List<User> list = service.query();
model.addAttribute("list",list);
return "/user";
}
}
属性文件中配置Freemaker的后缀
创建Freemaker模板文件,并且展示数据
代码语言:javascript复制<html>
<head>
<title>用户管理</title>
<meta charset="UTF-8">
</head>
<body>
<h1>用户管理</h1>
<table>
<tr>
<th>编号</th>
<th>账号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
<#list list as user>
<tr>
<td>${user.user_id}</td>
<td>${user.user_name}</td>
<td>${user.real_name!""}</td>
<td>${user.email!""}</td>
<td>${user.phone!""}</td>
<td>...</td>
</tr>
</#list>
</table>
</body>
</html>
启动操作之前我们需要添加 MyBatis接口的扫描路径
访问测试
5.3 添加用户
代码语言:javascript复制<html>
<head>
<title>用户管理</title>
<meta charset="UTF-8">
</head>
<body>
<h1>用户管理</h1>
<form action="/user/userUpdate" method="post" >
<label>账号</label><input type="text" name="user_name"><br>
<label>姓名</label><input type="text" name="real_name"><br>
<label>邮箱</label><input type="text" name="email"><br>
<label>电话</label><input type="text" name="phone"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
5.4 更新用户
代码语言:javascript复制<html>
<head>
<title>用户管理</title>
<meta charset="UTF-8">
</head>
<body>
<h1>用户管理</h1>
<form action="/user/userUpdate" method="post" >
<input type="hidden" name="user_id" value="${user.user_id}">
<label>账号</label><input type="text" name="user_name" value="${user.user_name}"><br>
<label>姓名</label><input type="text" name="real_name" value="${user.real_name!""}"><br>
<label>邮箱</label><input type="text" name="email" value="${user.email!""}"><br>
<label>电话</label><input type="text" name="phone" value="${user.phone!""}"><br>
<input type="submit" value="提交">
</form>
</body>
</html>
5.5 删除用户
代码语言:javascript复制<html>
<head>
<title>用户管理</title>
<meta charset="UTF-8">
</head>
<body>
<h1>用户管理</h1>
<h2>
<a href="/user/dispatchUpdate">添加用户</a>
</h2>
<table>
<tr>
<th>编号</th>
<th>账号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
<#list list as user>
<tr>
<td>${user.user_id}</td>
<td>${user.user_name}</td>
<td>${user.real_name!""}</td>
<td>${user.email!""}</td>
<td>${user.phone!""}</td>
<td>
<a href="/user/dispatchUpdate?id=${user.user_id}">更新</a>
<a href="/user/deleteUser?id=${user.user_id}">删除</a>
</td>
</tr>
</#list>
</table>
</body>
</html>
6. Thymeleaf
Thymeleaf是SpringBoot中推荐使用的前端模板框架。所以比较重要
6.1 SpringBoot整合
创建一个SpringBoot项目,然后添加对应的依赖
代码语言:javascript复制<?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.9.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.bobo</groupId>
<artifactId>springboot-demo10</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>springboot-demo10</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>
<!-- 使用Thymeleaf需要添加的依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</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>
创建Thymeleaf文件,Thymeleaf的后缀就是html,我在template目录下直接创建一个html页面即可,但是为了能够使用Thymeleaf中的标签提示,我们添加对应的xmlns即可
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf介绍</title>
</head>
<body>
<h1>Hello Thymeleaf</h1>
</body>
</html>
添加跳转的控制器
代码语言:javascript复制@Controller
public class UserController {
@RequestMapping("/hello")
public String hello(){
System.out.println("hello ....");
return "/user";
}
}
启动服务测试
访问成功,说明整合搞定~
6.2 Thymeleaf基本使用
Thymeleaf表达式只能放置在Thymeleaf的自定义属性中(html标签中)。
6.2.1 变量输出
控制器中绑定数据
代码语言:javascript复制@RequestMapping("/hello")
public String hello(Model model){
System.out.println("hello ....");
model.addAttribute("hello","Hello Thymeleaf");
model.addAttribute("msg","hahaha");
model.addAttribute("now",new Date());
model.addAttribute("flag",true);
model.addAttribute("age",18);
return "/user";
}
模板文件
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf介绍</title>
</head>
<body>
<h1>Hello Thymeleaf</h1>
<label th:text="hello"></label><br>
<label th:text="${hello}"></label><br>
<label th:text="${now}"></label><br>
<label th:text="${flag}"></label><br>
<label th:text="${age}"></label><br>
<h2>th:value的使用</h2>
<input type="text" value="aaa"><br>
<input type="text" th:value="${msg}"><br>
</body>
</html>
显示效果
6.2.2 内置函数
我们通过上面的案例发现显示Model中的数据很方便,但是显示的数据的格式可能不满足我们的需求,这时我们需要调整就需要借助内置的函数来帮助我们实现,我们主要介绍字符串和时间相关的函数,
注意点
- 调用内置函数对象一定要使用#
- 大部分的内置函数都以 s 结尾, 比如 strings numbers dates
字符串的处理
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf介绍</title>
</head>
<body>
<h1>string类型介绍</h1>
hello:<span th:text="${hello}"></span><br>
hello是否为空:<span th:text="${#strings.isEmpty(hello)}"></span><br>
hello字符串是否包含"th":<span th:text="${#strings.contains(hello,'th')}"></span><br>
hello字符串是否包含"Th":<span th:text="${#strings.contains(hello,'Th')}"></span><br>
hello以H开头:<span th:text="${#strings.startsWith(hello,'H')}"></span><br>
hello以a开头:<span th:text="${#strings.startsWith(hello,'a')}"></span><br>
hello以H结尾:<span th:text="${#strings.endsWith(hello,'H')}"></span><br>
hello以a结尾:<span th:text="${#strings.endsWith(hello,'a')}"></span><br>
hello的长度:<span th:text="${#strings.length(hello)}"></span><br>
hello都大写:<span th:text="${#strings.toUpperCase(hello)}"></span><br>
hello都小写:<span th:text="${#strings.toLowerCase(hello)}"></span><br>
</body>
</html>
日期时间类型的处理
代码语言:javascript复制 <h1>日期时间处理</h1>
时间:<span th:text="${now}"></span><br>
时间:<span th:text="${#dates.format(now)}"></span><br>
时间:<span th:text="${#dates.format(now,'yy/MM/dd')}"></span><br>
时间:<span th:text="${#dates.format(now,'yy/MM/dd hh:ss:mm')}"></span><br>
时间:<span th:text="${#dates.format(now,'yy/MM/dd HH:ss:mm')}"></span><br>
年份:<span th:text="${#dates.year(now)}"></span><br>
月份:<span th:text="${#dates.month(now)}"></span><br>
日期:<span th:text="${#dates.day(now)}"></span><br>
本周的第几天:<span th:text="${#dates.dayOfWeek(now)}"></span><br>
小时:<span th:text="${#dates.hour(now)}"></span><br>
6.2.3 条件判断
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf介绍</title>
</head>
<body>
<h1>条件判断</h1>
<h2>if语句</h2>
<span th:if="${sex} == '男'">男</span>
<span th:unless="${sex} =='男'">女</span>
<br>
<!-- and or not -->
<span th:if="${flag or false}">
or的使用11
</span>
<span th:unless="${flag or false}">
or的使用12
</span>
<br>
<span th:if="${flag and false}">
and的使用21
</span>
<span th:unless="${flag and false}">
and的使用22
</span>
<br>
<span th:if="${not flag}">
not的使用11
</span>
<span th:unless="${not flag}">
not的使用22
</span>
<br>
<!-- 三木运算符 -->
<span th:text="true?'A':'B'"></span><br>
<!-- switch语句 -->
<hr>
<div th:switch="${age}">
<div th:case="17">
17岁
</div>
<div th:case="18">
18岁
</div>
<div th:case="19">
19岁
</div>
<div th:case="*">其他...</div>
</div>
</body>
</html>
6.2.4 循环语句
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf介绍</title>
</head>
<body>
<h1>循环判断</h1>
<div th:each="c : ${list1}">
<span th:text="${c}"></span><br>
</div>
<hr>
<div th:each="user : ${list2}">
<span th:text="${user.id}"></span>
<span th:text="${user.userName}"></span>
<span th:text="${user.address}"></span><br>
</div>
<hr>
<div th:each="m : ${map}">
<!-- 每次循环获取的是一个KV对 -->
<span th:text="${m.getKey() ':' m.getValue().getId()}"></span>
<span th:text="${m.getKey() ':' m.getValue().getUserName()}"></span>
<span th:text="${m.getKey() ':' m.getValue().getAddress()}"></span>
</div>
<hr>
<div th:each="user,iter : ${list2}">
<span th:text="${iter.count}"></span>
<span th:text="${iter.index}"></span>
<span th:text="${user.id}"></span>
<span th:text="${user.userName}"></span>
<span th:text="${user.address}"></span><br>
</div>
</body>
</html>
6.2.5 域对象的操作
也就是我们怎么在Thymeleaf中获取三大作用域中绑定的数据
代码语言:javascript复制 @RequestMapping("/hello4")
public String hello4(HttpServletRequest request){
request.setAttribute("req","request msg ...");
request.getSession().setAttribute("sess","session msg ....");
request.getServletContext().setAttribute("app","application msg ....");
return "/user4";
}
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf介绍</title>
</head>
<body>
<h1>域对象使用</h1>
<h2>request:</h2>
<span th:text="${#httpServletRequest.getAttribute('req')}"></span><br>
<span th:text="${#request.getAttribute('req')}"></span><br>
<span th:text="${req}"></span><br>
<h2>session:</h2>
<span th:text="${#httpSession.getAttribute('sess')}"></span><br>
<span th:text="${#session.getAttribute('sess')}"></span><br>
<h2>servletContext:</h2>
<span th:text="${#servletContext.getAttribute('app')}"></span><br>
</body>
</html>
效果
6.2.6 URL表达式
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Thymeleaf介绍</title>
</head>
<body>
<h1>URL使用</h1>
<a href="http://www.baidu.com">百度</a><br>
<a th:href="@{http://www.baidu.com}">百度</a><br>
<hr>
<a th:href="@{/show}">相对路径</a><br>
<a th:href="@{~/project2/app1}">相对于服务器的根</a><br>
<a th:href="@{/show(id=1,name=aaa)}">相对路径--参数传递</a><br>
<a th:href="@{/path/{id}/show(id=66,name=123)}">RestFul支持</a>
</body>
</html>
6.2.7 整合案例改造
我们可以将前面介绍的SpringBoot MyBatis Freemaker的案例改为SpringBoot MyBatis Thymeleaf的案例,涉及到的页面代码如下
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>用户管理</h1>
<h2>
<a th:href="@{/user/dispatchUpdate}">添加用户</a>
</h2>
<table>
<tr>
<th>编号</th>
<th>账号</th>
<th>姓名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
<tr th:each="user : ${list}">
<td th:text="${user.user_id}"></td>
<td th:text="${user.user_name}"></td>
<td th:text="${user.real_name}"></td>
<td th:text="${user.email}"></td>
<td th:text="${user.phone}"></td>
<td>
<a th:href="@{/user/dispatchUpdate(id=${user.user_id})}">更新</a>
<a th:href="@{/user/deleteUser(id=${user.user_id})}">删除</a>
</td>
</tr>
</table>
</body>
</html>
代码语言:javascript复制<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form th:action="@{/user/userUpdate}" method="post" >
<span th:if="${user}">
<input type="hidden" name="user_id" th:value="${user.user_id}">
</span>
<label>账号</label><input type="text" name="user_name" th:value="${ user==null ?'':user.user_name}"><br>
<label>姓名</label><input type="text" name="real_name" th:value="${user==null ?'':user.real_name}"><br>
<label>邮箱</label><input type="text" name="email" th:value="${user==null ?'':user.email}"><br>
<label>电话</label><input type="text" name="phone" th:value="${user==null ?'':user.phone}"><br>
<input type="submit" value="提交">
</form>
</body>
</html>