基于Spring+SpringMVC+MyBatis-Plus开发书评网图书详情模块开发之获取图书信息并展示

Posted 2021-05-18 被雨遗忘的夏天

一、 读取图书信息

目的

通过图书ID获取图书信息

 

前提

图书实体类、图书Mapper接口、图书mapper.xml在前面的章节开发中已经写好，此处可以复用。

实体类、Mpper接口和mapper.xml看这里！！！

 

二、 开发流程

1、 Service层的BookService接口添加方法

package com.imooc.reader.service;

import com.baomidou.mybatisplus.core.metadata.IPage;
import com.imooc.reader.entity.Book;

/**
 * @ClassName BookService
 * @Description TODO
 * @date 2021/5/9 19:28
 * @Param
 * @return
 */
public interface BookService {
    
    /**
     * 根据图书编号查询图书对象
     * @param bookId 图书编号
     * @return 图书对象
     */
    public Book selectById(Long bookId);


}

 

2、 实现BookService接口新方法

/**
     * 根据图书编号查询图书对象
     *
     * @param bookId 图书编号
     * @return 图书对象
     */
    public Book selectById(Long bookId) {
        Book book = bookMapper.selectById(bookId);
        return book;
    }

 

3、 Controller层的BookController的修改

 // URL绑定，使用springMVC路径变量进行捕获
    @GetMapping("/book/{id}")
    // @PathVariable： 路径变量
    public ModelAndView showDetail(@PathVariable("id") Long id, HttpSession session) {
        // 通过selectById(id)获取图书对象
        Book book = bookService.selectById(id);
        // 跳转到名字为detail的freemaker页面
        ModelAndView mav = new ModelAndView("/detail");
        // 将查询到的book对象放入到ModelAndView中
        mav.addObject("book", book);

        return mav;
    }

 

4、 前端页面的开发

<div class="container mt-2 p-2 m-0" style="background-color:rgb(127, 125, 121)">
        <div class="row">
            <div class="col-4 mb-2 pl-0 pr-0">
                <img style="width: 110px;height: 160px"
                     src="${book.cover}">
            </div>
            <div class="col-8 pt-2 mb-2 pl-0">
                <h6 class="text-white">${book.bookName}</h6>
                <div class="p-1 alert alert-warning small" role="alert">
                    ${book.subTitle}
                </div>
                <p class="mb-1">
                    <span class="text-white-50 small">${book.author}</span>
                </p>
                <div class="row pl-1 pr-2">
                    <div class="col-6 p-1">
                        <button type="button" data-read-state="1" class="btn btn-light btn-sm w-100">
                            <img style="width: 1rem;" class="mr-1"
                                 src="https://img3.doubanio.com/f/talion/cf2ab22e9cbc28a2c43de53e39fce7fbc93131d1/pics/card/ic_mark_todo_s.png"/>想看
                        </button>
                    </div>
                    <div class="col-6 p-1">
                        <button type="button" data-read-state="2" class="btn btn-light btn-sm  w-100">
                            <img style="width: 1rem;" class="mr-1"
                                 src="https://img3.doubanio.com/f/talion/78fc5f5f93ba22451fd7ab36836006cb9cc476ea/pics/card/ic_mark_done_s.png"/>看过
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="background-color: rgba(0,0,0,0.1);">
            <div class="col-2"><h2 class="text-white">${book.evaluationScore}</h2></div>
            <div class="col-5 pt-2">
                <span class="stars" data-score="4.9"></span>
            </div>
            <div class="col-5  pt-2"><h5 class="text-white">${book.evaluationQuantity}人已评</h5></div>
        </div>
    </div>
    <div class="row p-2 description">
        ${book.description}
    </div>

 

三、 效果图