基于SSM的影楼售票系统 - 3.影片详情功能 - 《Java笔记》

1.分析流程
在影片列表中，发起详情页的请求跳转（携带film_Id）, 通过查询数据库，找到详细信息，将信息封装成vo，vo通过model传输给页面，页面通过${}的表达式展示出来。
2.在影片列表页中增加跳转 (4、9两行)

            <c:forEach var="filmVo" items="${filmVoList}" begin="0" end="3">
                    <td>
                        <div style="width: 250px; margin: 10px;">
                            <a href="filmInfo?film_id=${filmVo.filmId}">
                                <img src="${pageContext.request.contextPath}${filmVo.poster_path}"
                                 style="width: 250px;height: 380px"/>
                            </a>
                            <div class="piao">
                                <a href="filmInfo?film_id=${filmVo.filmId}" >
                                    <p style="color: white;top:50px">${filmVo.fname}</p>
                                    <p style="color: #fff;top: 50px">导演：${filmVo.director}</p>
                                </a>
                            </div>
                        </div>
                    </td>
            </c:forEach>

FilmController.java

@RequestMapping("filmInfo")
    public String filmInfo(String filmId,Model model){
        // 定义⼀个FilmDetailVo来将数据渲染到⻚⾯中
        FilmDetailVo filmDetailVo= filmService.findFilmById(filmId);
        model.addAttribute("filmDetailVo",filmDetailVo);
        return "detail";
    }

FilmDetailVo.java

package com.duyi.vo;
import java.util.Date;
public class FilmDetailVo {
    private String filmId; // filmId 驼峰也可 需要额外配置
    private String fname;
    private String director;
    private String role;
    private String ftype;
    private String country;
    private int length;
    private String synopsis;
    private Date releaseTime;
    private String posterPath;
    //构造函数、set、get函数省略
}

FilmService.java

//返回影片详情
    public FilmDetailVo findFilmById(String filmId){
        Film film=filmDao.findFilmById(filmId);
        FilmDetailVo filmDetailVo=new FilmDetailVo();
        filmDetailVo.setFilmId(film.getFilm_id());
        filmDetailVo.setFname(film.getFname());
        filmDetailVo.setCountry(film.getCountry());
        filmDetailVo.setDirector(film.getDirector());
        // 剧情 爱情等 可以存储到额外的类型表中
        // 剧情-1 爱情-2 film - type [1,2] 再去type表中取具体的描述
        filmDetailVo.setFtype(film.getFtype());
        filmDetailVo.setLength(film.getLength());
        filmDetailVo.setPosterPath(film.getPoster_path());
        filmDetailVo.setReleaseTime(film.getRelease_time());
        filmDetailVo.setRole(film.getRole());
        filmDetailVo.setSynopsis(film.getSynopsis());
        return filmDetailVo;
    }

FilmDao.java

//根据film_id查找对应影片信息
    @Select("select id,film_id,fname,director,role,ftype,country,length,synopsis,release_time,poster_path from film where film_id = #{filmId}")
    public Film findFilmById(String filmId);

detail.jsp
核心代码（不加样式）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
        <title>影片详情</title>
    </head>
    <body>
        <div>
            <img src="${pageContext.request.contextPath}${filmDetailVo.posterPath}"/>
            <p>导演: ${filmDetailVo.director}</p>
            <p>主演: ${filmDetailVo.role}</p>
            <p>类型: ${filmDetailVo.ftype}</p>
            <p>片长: ${filmDetailVo.length}分钟</p>
            <p>国家: ${filmDetailVo.country}</p>
            <p>剧情简介: ${filmDetailVo.synopsis}</p>
        </div>
    </body>
</html>

加样式

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
    <head>
        <title>影片详情</title>
    </head>
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
    <style type="text/css">
        body {
            background: #2E323B;
        }
        #register table tr {
            height: 50px;
        }
        .detailed {
            background: white;
            border-radius: 20px;
            padding-bottom: 50px;
            margin-top: 20px;
        }
    </style>
    <body>
        <div class="container">
        <div class="container detailed">
            <div class="container" style="margin-top: 20px;">
                <div>
                    <strong id="biaoti" style="font-size: 26px;">${film.name}</strong>
                </div>
                <img style="float: left; display: block; height: 350px; width: 250px; margin-right: 20px;"
                     src="${pageContext.request.contextPath}${filmDetailVo.posterPath}"/>
                <div>
                    <div style="padding-top: 15px;padding-right: 20px;line-height: 25px;">
                        <p>导演: ${filmDetailVo.director}</p>
                        <p>主演: ${filmDetailVo.role}</p>
                        <p>类型: ${filmDetailVo.ftype}</p>
                        <p>片长: ${filmDetailVo.length}分钟</p>
                        <p>国家: ${filmDetailVo.country}</p>
                        <p>剧情简介: ${filmDetailVo.synopsis}</p>
                        <strong>
                            <a href="play?filmId=${vo.filmId}">查看排片信息</a>
                        </strong>
                    </div>
                </div>
            </div>
        </div>
        </div>
    </body>
</html>

此版本引入了bootstrap.css，需要在webapp/css⽂件夹下拷贝此文件
bootstrap.css