springboot的Web开发及thymeleaf

springboot的Web开发

springboot的Web开发

web开发我们需要导入的依赖有: thymeleaf , Spring Web, mysql Driver, jdbc API, mybatis

<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>
<!--数据库等依赖: 略-->

服务器配置

服务器配置也就是配置我们的servlet

例如: 修改端口号 , 默认的端口号是8080

server.port=8888

配置上下文路径

springboot服务器启动后, 默认的路径是localhost:8080/

我们可以这样配置:

server.servlet.context-path=/MyWeb

这样我们的默认路径就是 localhost:8080/MyWeb/

默认视图跳转

thymeleaf文档[跳转]

thymeleaf模板引擎的默认资源路径是classpath:/templates/ 即 resource/templates/

当然我们也可以手动进行配置, 如下:

# 配置前缀, 默认是`classpath:/templates
spring.thymeleaf.prefix=classpath:/templates/pages/
# 配置后缀
spring.thymeleaf.suffix=.html

这样我们配置好了视图的跳转

例如我们有个controller, controller中有如下方法

@Controller
@RequestMapping("/goods")
public class GoodsController {
    @RequestMapping("/doGoodsUI") 
    public String doGoodsUI(Model model) {
        // 1. 将此view返回给前端控制器
        // 2. 前端控制器会调用师徒解析器对view进行解析, 添加前缀和后缀
        // /templates/pages/goods.html
        // 3. 最后由DespatcherServlert将页面相应到客户端
        return "goods"; // view name
    }
}

那么我们访问:localhost:8080/goods/doGoodsUI 就会跳转到 resource/templates/pages/goods.html

配置文件参考

# server
server.port=80
# datasource
spring.datasource.url=jdbc:mysql://localhost:3306/dbactivity?serverTimezone=GMT%2B8&characterEncoding=utf8
spring.datasource.username=root
spring.datasource.password=123456
# spring mybatis
mybatis.mapper-locations=classpath:/mapper/*/*.xml
# spring
spring.thymeleaf.prefix=classpath:/templates/pages/
spring.thymeleaf.suffix=.html
# log
logging.level.com.cy=debug

视图展示数据(thymeleaf)

thymeleaf文档[跳转]

视图展示数据我们依然可以使用ModelMap后者Model把数据传到前端页面

例如: 查询所有的商品

@RequestMapping("/doGoodsUI") 

	@Autowired
	private GoodsService goodsService;

	public String doGoodsUI(Model model) {
		// 假设goodsService中的findObjects()方法是查询到的所有商品, 我们把它传入model对象中
        // model会把数据发送到前端页面
		model.addAttribute("list", goodsService.findObjects());
		return "goods"; 
	}

现在我们在resource/templates/pages/下创建一个html: goods.html

我已经配置了 spring.thymeleaf.prefix=classpath:/templates/pages/, 所以我把html文件放到了resource/templates/pages/下, 在创建前请确定你配置的路径

我们需要添加xml命名空间, 新版本加不加都无所谓, 老版本可能无法使用th开头的标签属性

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
</head>
<body>
    
</body>

这样就创建好了, 我们需要在body中写入内容

<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>remark</th>
            <th>createdTime</th>
        </tr>
    </thead>
    <tbody>
        <!-- 我们需要遍历controller传过来的集合 -->
    	<tr th:each="g : ${list}">
            <td th:text="${g.id}">1</td>
            <td th:text="${g.name}">MySQL</td>
            <td th:text="${g.remark}">oranges</td>
            <!--thymeleaf日期格式化功能-->
            <td th:text="${#calendars.format(g.createdTime, 'yyyy-MM-dd HH:mm')}">2020-01-01</td>
        </tr>
    </tbody>
</table>

进行测试测试

浏览器输入:localhost:8080/goods/doGoodsUI

可以看到数据库中的数据已经显示到了表格中

扩展: 日期格式化

@DateTimeFormat(pattern = "yyy-MM-dd")

此注解用于描述属性或set方法, 告诉spring mvc按指定格式接收数据, 默认格式为yyyy/MM/dd HH:mm:ss

例如:

public class Activity {
	private Long id;
	private String title;
	// 次注解用于描述属性或set方法, 告诉spring mvc按指定格式接收数据
	@DateTimeFormat(pattern = "yyy-MM-dd")
    private Date startTime;
	@DateTimeFormat(pattern = "yyy-MM-dd")
    private Date endTime;
}

前端显示指定日期的格式, thymeleaf支持日期格式化:

格式: ${#calendars.format(日期对象,格式)}

格式: 年-月-日时:分:秒 -> yyyy-MM-dd HH:mm:ss

Today is: <span th:text="${#calendars.format(today,'dd MMMM yyyy')}">13 May 2011</span>

@JsonFormat(pattern = "yyyy-MM-dd HH:mm", timezone = "GMT+8")

此注解用来告诉日期类型数据转为json字符串的时候, 日期指定的格式, 对应其get方法

pattern: 格式

timezone: 时区, 必须设置, 否则可能差8小时

Thymeleaf数据回显

input回填

<div class="form-group">
    <label class="col-sm-1 control-label">用户名：</label>
    <div class="col-sm-3">
        <input id="username" name="username" th:value="${user.username}" class="form-control" type="text">
    </div>  
</div>

单选回填

<div class="form-group">
    <label class="col-sm-1 col-sm-offset-2 control-label">性别 ：</label>
    <div class="col-sm-3">
        <label class="radio-inline" th:each="sex:${sexList}">
            <input type="radio" id="sex" name="sex" th:value="${sex.value}" th:text="${sex.name}" th:attr="checked=${user.sex == sex.value?true:false}" />
        </label>
    </div>
</div>

时间框回填

<div class="form-group">
    <label class="col-sm-1 control-label">出生日期：</label>
    <div class="col-sm-3">
        <input type="text" class="laydate-icon layer-date form-control" id="birthday" name="birthday" th:value="${user.birthday}==null?null:${#dates.format(user.birthday,'yyyy-MM-dd')}" οnclick="laydate({istime: true, format: 'YYYY-MM-DD'})" style="background-color: #fff;" readonly="readonly" />
    </div>
</div>

下拉回填

<div class="form-group">
    <label class="col-sm-1 col-sm-offset-2 control-label">职业：</label>
    <div class="col-sm-3">
        <select data-placeholder="--选择类别--" name="profession" id="profession" class="form-control chosen-select" tabindex="2" required>
            <option value="">--选择类别--</option>
            <option th:selected="${user.profession eq profession.value}" th:each="profession:${professionTypeList}" th:value="${profession.value}" th:text="${profession.name}"></option>
        </select>
    </div>
</div>

textarea数据回显

thymeleaf的textarea数据回显用th:text，th:value不能回显

集合的非空判断

th:if="${not #lists.isEmpty(自定义集合)}"

字符串拼接

<span th:text="|Welcome to HeBei, ${user.name}!|">
//这实际上相当于：
<span th:text="'Welcome to HeBei, ' + ${user.name} + '!'">
//文字替换可以与其他类型的表达相结合：
<span th:text="${onevar} + ' ' + |${twovar}, ${threevar}|">

小数(四舍五入)

//显示1.24
th:text="${#numbers.formatDecimal(1.235, 1, 2)}"

a标签-超链接

<a th:href="@{/user/doUpdate/(id=${companyUser.id},username=${user.username})}">view</a>
<a th:href="@{/user/{user.id}/getUserByUserName>view</a>

三元运算符判断

th:text="'Execution mode is ' + ( ('0'!='0')? 'Development' : 'Production')"