实验报告2-前端框架和模板引擎实现视图

资源下载

实验报告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)
    }
相关推荐
Wx-bishekaifayuan11 分钟前
django电商易购系统-计算机设计毕业源码61059
java·spring boot·spring·spring cloud·django·sqlite·guava
customer0815 分钟前
【开源免费】基于SpringBoot+Vue.JS周边产品销售网站(JAVA毕业设计)
java·vue.js·spring boot·后端·spring cloud·java-ee·开源
Yaml41 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
LuckyLay2 小时前
Spring学习笔记_27——@EnableLoadTimeWeaving
java·spring boot·spring
佳佳_3 小时前
Spring Boot 应用启动时打印配置类信息
spring boot·后端
程序媛小果3 小时前
基于java+SpringBoot+Vue的宠物咖啡馆平台设计与实现
java·vue.js·spring boot
狂放不羁霸6 小时前
idea | 搭建 SpringBoot 项目之配置 Maven
spring boot·maven·intellij-idea
计算机学长felix6 小时前
基于SpringBoot的“校园交友网站”的设计与实现(源码+数据库+文档+PPT)
数据库·spring boot·毕业设计·交友
码农派大星。6 小时前
Spring Boot 配置文件
java·spring boot·后端
江深竹静,一苇以航6 小时前
springboot3项目整合Mybatis-plus启动项目报错:Invalid bean definition with name ‘xxxMapper‘
java·spring boot