SpringBoot + thymeleaf 集成前端项目
SpringBoot 项目集成前端项目
项目结构
其中static是中是可以直接访问的静态资源,templates中存放的是.html文件。
Thymeleaf
添加必要依赖
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
配置资源文件
spring:
thymeleaf:
cache: false
suffix: .html
springboot默认跳转的是static/index.html
,配置thymeleaf组件后,会动态跳转,默认/templates/index.html
,若要修改路径可以配置thymeleaf.prefix: classpath:/自定义路径/
。在配置文件内配置thymeleaf.suffix: .html
后,跳转时不需要加上html后缀。
注意: 如果在Controller方法中通过return "index";
的形式跳转页面的话,则该Controller要使用@Controller
注解,不能使用@RestController
,因为后者返回的是JSON,此时如果方法返回值需要跳转,那么方法的返回类型必须是View 或者ModelAndView。
实现增删改查
编写Controller类,方法体都在后文中
@Controller
@RequestMapping("/policy/publish")
public class PolicyPublishController{
@Autowired
private PolicyPublishService policyPublishService;
private boolean isFirst = true;
}
查询所有数据
policyList.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script th:src="@{bootstrap/index.js}"></script>
</head>
<body>
<div class="container-fluid">
<div class="col-sm-12 column">
<ol class="breadcrumb">
<li class="active">菜单
</li>
<li class="active">政策管理
</li>
</ol>
<div class="panel panel-default">
<div class="panel-body">
<form role="form" class="form-inline" style="display: inline">
<div class="form-group">
<label for="name">标题</label>
<input type="text" class="form-control" id="name" placeholder="请输入政策标题">
</div>
<div class="form-group">
<label for="name">状态</label>
<select class="form-control">
<option>正常</option>
<option>禁用</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">开始搜索</button>
</div>
</form>
<div style="display: inline">
<a href="/policy/publish/input" class="btn btn-success pull-right">发布政策</a>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped ">
<thead>
<tr>
<th>机构代码</th>
<th>发布日期</th>
<th>发布人id</th>
<th>发布人</th>
<th>政策标题</th>
<th>政策内容</th>
<th>文件路径</th>
</tr>
</thead>
<tbody>
<!--
这里的 policyPublishDetailDtoList
是 Controller 通过 model.addAttribute("policyPublishDetailDtoList", list);传过来的
th:each th:text都是thymeleaf中常用的标签
-->
<tr th:each="policyPublishDetailDto:${policyPublishDetailDtoList}">
<td th:text="${policyPublishDetailDto.orgCode}" style="text-align:center;vertical-align:middle;"></td>
<td th:text="${#dates.format(policyPublishDetailDto.publishDate, 'yyyy-MM-dd')}" style="text-align:center;vertical-align:middle;"></td>
<td th:text="${policyPublishDetailDto.publisherId}" style="text-align:center;vertical-align:middle;"></td>
<td th:text="${policyPublishDetailDto.publisher}" style="text-align:center;vertical-align:middle;"></td>
<td th:text="${policyPublishDetailDto.policyTitle}" style="text-align:center;vertical-align:middle;"></td>
<td th:text="${policyPublishDetailDto.policyContent}" style="text-align:center;vertical-align:middle;"></td>
<td th:text="${policyPublishDetailDto.fileUrl}" style="text-align:center;vertical-align:middle;"></td>
<td>
<div class="btn-group">
<!-- <a class="btn btn-default" data-target="#myInputModal" data-toggle="modal">修改</a><a class="btn btn-danger">删除</a>-->
<a class="btn btn-default" th:href="@{/policy/publish/update/} ${policyPublishDetailDto.getId()}">修改</a>
<!-- <a class="btn btn-danger" name="del_button" th:href="https://blog.csdn.net/weixin_44320429/article/details/@{/policy/publish/} ${policyPublishDetailDto.id}">删除</a>-->
<button class="btn btn-danger" th:attr="del_url=@{/policy/publish/} ${policyPublishDetailDto.getId()}" name="del_button">删除</button>
<!--删除操作-->
<form method="post" id="form_delete">
<input type="hidden" name="_method" value="DELETE"/>
</form>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<ul class="pagination" style="float: right;">
<li><a href="#">«</a></li>
<li class="active"><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">»</a></li>
</ul>
</div>
</div>
</body>
</html>
编写Controller
@GetMapping("")
public String query(@RequestParam(required = false) String name,
@RequestParam(required = false) String title,
@RequestParam(required = false) Integer userId,
Model model,
HttpServletRequest request) {
PolicyPublishQueryVo vo = new PolicyPublishQueryVo();
vo.setName(name);
vo.setTitle(title);
vo.setUserId(userId);
List<PolicyPublishDetailDto> list = policyPublishService.query(vo);
model.addAttribute("policyPublishDetailDtoList", list);
model.addAttribute("policyPublishRequestDto", new PolicyPublishRequestDto());
request.getSession().removeAttribute("relativePath");
// 跳转到policyList.html页面
return "policyList";
}
浏览器请求:
注意:由于在policyList.html
中使用了${policyPublishDetailDtoList}
所以在Controller里面一定要model.addAttribute()
添加对应的属性,否则在访问页面的时候thymeleaf会报错。
addPolicy.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>发布政策</title>
<script th:src="@{bootstrap/index.js}"></script>
</head>
<body>
<form action="#" th:action="@{/files/doUpload}" th:method="post" enctype="multipart/form-data">
上传文件:<input type="file" name="file">
<input type="submit" value="确认上传">
</form>
<form action="#" th:action="@{/policy/publish}" th:object="${policyPublishRequestDto}" th:method="post">
<br>
机构代码:<input type="text" th:field="*{orgCode}" id="orgCode"><br>
发布日期:<input type="date" th:field="*{publishDate}" id="publishDate" placeholder="格式: yyyy-MM-dd"><br>
发布人Id:<input type="text" th:field="*{publisherId}" id="publisherId"><br>
政策标题:<input type="text" th:field="*{policyTitle}" id="policyTitle"><br><br>
政策内容:<textarea th:field="*{policyContent}" id="policyContent" rows="8"></textarea><br><br>
文件路径:[[${relativePath}]]
<br><br>
<input type="submit" value="发布政策">
</form>
</body>
</html>
编写Controller
@GetMapping("/input")
public String input(Model model, HttpServletRequest request){
model.addAttribute("policyPublishRequestDto", new PolicyPublishRequestDto());
isFirst = new ModelAttributeUtils().setModelAttribute(isFirst,model,request,null);
// 通过这个Controller进入到addPolicy.html
return "addPolicy";
}
@PostMapping("")
public String addNewRecord(@ModelAttribute(value = "policyPublishRequestDto") PolicyPublishRequestDto dto, HttpServletRequest request) {
dto.setFileUrl((String) request.getSession().getAttribute("relativePath"));
boolean flag = policyPublishService.addNewRecord(dto);
// 插入数据成功后,重定向到index.html
return flag ? "redirect:/index" : "error";
}
整个请求流程大致就是这样:
修改数据
updatePolicy.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>修改政策信息</title>
<script th:src="@{bootstrap/index.js}"></script>
</head>
<body>
<form action="#" th:action="@{/files/doUpload}" th:method="post" enctype="multipart/form-data">
上传文件:<input type="file" name="file">
<input type="submit" value="确认上传">
</form>
<form action="#" th:action="@{/policy/publish}" method="post" th:object="${policyPublishDetailDto}">
<input type="hidden" name="_method" value="PUT">
<br>
机构代码:<input type="text" th:field="*{orgCode}" id="orgCode"><br>
发布日期:<input type="date" th:field="*{publishDate}" id="publishDate"><br>
发布人Id:<input type="text" th:field="*{publisherId}" id="publisherId"><br>
政策标题:<input type="text" th:field="*{policyTitle}" id="policyTitle"><br><br>
政策内容:<textarea th:field="*{policyContent}" id="policyContent" rows="8" th:placeholder="*{policyContent}"></textarea><br><br>
文件路径:[[${relativePath}]]
<br><br>
<input type="submit" value="确认修改">
</form>
</body>
</html>
编写Controller
@GetMapping("/update/{id}")
public String update(@PathVariable("id") Integer id, Model model, HttpServletRequest request){
PolicyPublishDetailDto dto = policyPublishService.load(id);
request.getSession().setAttribute("dtoId", id);
model.addAttribute("policyPublishDetailDto", dto);
isFirst = new ModelAttributeUtils().setModelAttribute(isFirst,model,request,dto.getFileUrl());
return "updatePolicy";
}
@PutMapping("")
public String updateRecord(PolicyPublishRequestDto dto,
HttpServletRequest request) {
dto.setId((Integer) request.getSession().getAttribute("dtoId"));
dto.setFileUrl((String) request.getSession().getAttribute("relativePath"));
boolean flag = policyPublishService.update(dto);
return flag ? "redirect:/index" : "error";
}
注意: 使用Restful时修改操作使用的是PUT请求方法,但是form表单的提交方式只有GET 和POST ,此时需要指明form表单的请求方式为POST,并且在form表单里要写一个input隐藏域,并指明name="_method" value="PUT"
来修改请求方式。后面的修改操作就修改value为DELETE。
删除数据
删除数据的按钮写在policyList.html里了
<div class="btn-group">
<a class="btn btn-default" th:href="@{/policy/publish/update/} ${policyPublishDetailDto.getId()}">修改</a>
<button class="btn btn-danger" th:attr="del_url=@{/policy/publish/} ${policyPublishDetailDto.getId()}" name="del_button">删除</button>
<!--删除操作-->
<form method="post" id="form_delete">
<!--这里要修改form表单的请求方式-->
<input type="hidden" name="_method" value="DELETE"/>
</form>
</div>
通过js实现删除按钮的点击事件:
$(function () {
//name='del_button'的按钮的点击事件
$("button[name='del_button']").click(function () {
alert("删除成功!" $(this).attr("del_url"));
//点击删除按钮之后,让id="form_delete"的表单提交
$("#form_delete").prop("action", $(this).attr("del_url")).submit();
});
});
编写Controller
@DeleteMapping("/{id}")
public String deleteRecord(@PathVariable Integer id) {
boolean flag = policyPublishService.delete(id);
return flag ? "redirect:/index" : "error";
}
注意: 在 Spring Boot 的 META-INF/spring-configuration-metadata.json 配置文件中默认是关闭 Spring 的 hiddenmethod 过滤器的,此时直接在表单提交的数据中添加 “_method” 数据并不起作用。
## 将hiddenmethod 过滤器设置为启用即可
spring:
mvc:
hiddenmethod:
filter:
enabled: true
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhhbcfck
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11