实验报告2-前端框架和模板引擎实现视图
一、实现思路
Spring Boot整合Thymeleaf实现图书管理案例。要求:
1、项目使用Spring Boot整合Thymeleaf,项目展示的页面效果全部通过Thymeleaf的模板文件实现。
2、查询所有图书。访问http://localhost:8080/book/list时,查询所有图书,并展示在页面中。
3、选择性显示按钮。当Session中存在用户角色为"admin"时,显示"新增"按钮,否则不显示该按钮。
4、按条件查询图书。单击"查询"按钮时,根据搜索框中的查询条件查询对应的图书信息。
5、借阅图书。当图书状态为可借阅时,对应的"借阅"按钮为可用状态,并且单击"借阅"按钮时,将当前申请借阅图书的编号发送到后台。
二、实验步骤
1、新建项目
Name:Exp2,GroupID:com.sw
引入pom.xml文件、定义SpringBoots入口函数
2、测试Html静态页面
com.sw.controller包,BookController.java
java
@Controller
@RequestMapping("/book")
public class BookController {
@RequestMapping("/list")
public ModelAndView list(){
ModelAndView modelAndView = new ModelAndView("list");
return modelAndView;
}
}
resources/static目录,导入css和js文件
resources/templates目录,导入list.html
html
<link rel="stylesheet" th:href="@{/css/bootstrap.css}">
<script th:src="@{/js/jquery.min.js}"></script>
3、实现功能
(1)选择性显示按钮
选择性显示按钮。当Session中存在用户角色为"admin"时,显示"新增"按钮,否则不显示该按钮。
com.sw.pojo包,User.java
java
@Data
public class User {
private String username;
private String role;
public User(String username, String role) {
this.username = username;
this.role = role;
}
}
com.sw.controller包,BookController.java
java
@RequestMapping("/list")
public ModelAndView list(String role, HttpSession session){
ModelAndView modelAndView = new ModelAndView("list");
session.removeAttribute("user");
if (!ObjectUtils.isEmpty(role)){
session.setAttribute("user",new User("zhangsan",role));
}
return modelAndView;
}
resources/templates目录,list.html
html
<div class="pull-left" th:if="${#session.getAttribute('user')!=null and #session.getAttribute('user').role=='admin'}">
<div class="btn-group">
<button type="button" class="btn btn-default">新增</button>
</div>
</div>
(2)查询所有图书
访问http://localhost:8080/book/list时,查询所有图书,并展示在页面中。
com.sw.pojo包,Book.java
java
@Data
public class Book {
private Integer id;
private String name;
private String author;
private String press;
private Date publishDate;
private BigDecimal price;
private Integer status;
}
com.sw.pojo包,Database.java
java
public class Database {
public static List<Book> getBookList(){
List<Book> bookList = new ArrayList<>();
Book book1 = new Book();
book1.setPrice(new BigDecimal(66));
Calendar calendar = Calendar.getInstance();
calendar.set(2021,9,10);
book1.setPublishDate(calendar.getTime());
bookList.add(book1);
bookList.add(new Book());
bookList.add(new Book());
return bookList;
}
}
com.sw.controller包,BookController.java
java
modelAndView.addObject("bookList", Database.getBookList());
resources/templates目录,list.html
html
<tr th:each="book : ${bookList}">
<td th:text="${book.name}"></td>
<td th:text="${book.author}"></td>
<td th:text="${book.press}"></td>
<td th:text="${#dates.format(book.publishDate,'yyyy-MM-dd')}"></td>
<td th:text="${#numbers.formatCurrency(book.price)}"></td>
<td>
<th:block th:if="${book.status==1}">可借阅</th:block>
<th:block th:if="${book.status==2}">借阅中</th:block>
<th:block th:if="${book.status==3}">归还中</th:block>
</td>
<td class="text-center">
<button th:if="${book.status==1}" type="button" class="btn btn-primary btn-xs">借阅</button>
<button th:if="${book.status==2 || book.status==3}" type="button" class="btn btn-primary btn-xs" disabled="disabled">借阅</button>
</td>
</tr>
(3)按条件查询图书
单击"查询"按钮时,根据搜索框中的查询条件查询对应的图书信息。
resources/templates目录,list.html
html
<form method="post" action="/book/search">
图书名称:<input name="name">图书作者:<input name="author">
<input class="btn btn-default" type="submit" value="查询">
</form>
com.sw.controller包,BookController.java
java
@RequestMapping("/search")
public ModelAndView search(Book bookFront){
ModelAndView modelAndView = new ModelAndView("list");
List<Book> bookList = new ArrayList<>();
if (ObjectUtils.isEmpty(bookFront) ||
(!ObjectUtils.isEmpty(bookFront)
&& ObjectUtils.isEmpty(bookFront.getName())
&& ObjectUtils.isEmpty(bookFront.getAuthor()))){
bookList = Database.getBookList();
}else {
for (Book book : Database.getBookList()) {
if (!ObjectUtils.isEmpty(bookFront.getName()) && !ObjectUtils.isEmpty(bookFront.getAuthor())){
if (book.getName().contains(bookFront.getName()) && book.getAuthor().contains(bookFront.getAuthor())){
bookList.add(book);
}
}else if(!ObjectUtils.isEmpty(bookFront.getName())){
if (book.getName().contains(bookFront.getName())){
bookList.add(book);
}
}else if(!ObjectUtils.isEmpty(bookFront.getAuthor())){
if (book.getAuthor().contains(bookFront.getAuthor())){
bookList.add(book);
}
}
}
}
modelAndView.addObject("bookList", bookList);
return modelAndView;
}
(4)借阅图书
当图书状态为可借阅时,对应的"借阅"按钮为可用状态,并且单击"借阅"按钮时,将当前申请借阅图书的编号发送到后台。
resources/templates目录,list.html
html
<button th:if="${book.status==1}" type="button" class="btn btn-primary btn-xs" th:onclick="findBookById([[${book.id}]])">借阅</button>
com.sw.controller包,BookController.java
java
@RequestMapping("/find/{id}")
public ModelAndView find(@PathVariable Integer id){
ModelAndView modelAndView = new ModelAndView("list");
for (Book book : Database.getBookList()) {
if (book.id == id){
bookList.add(book);
}
}
modelAndView.addObject("bookList", bookList);
return modelAndView;
}
resources/templates目录,list.html
javascript
function findBookById(id) {
window.location = "/book/find/" + id
// $.get("/book/find/" + id)
// alert("findBookById:" + id)
}