《5K入门级项目实战：好来屋在线影院》之第 11 战 —— 用户端首页、BootStrap 分页（中）

OK，这一节我们开发 API 接口，把需要的数据返回给客户端。

我们先来解决：

1、indexMovie.html 里的热门电影接口数据

2、index.html 文件里的相关接口，如截图：

实际的流程是这样：

用户请求首页（即地址栏请求“/”）的时候，会进入到 IndexMovieController 这个类的 “/” 请求中，然后我们查询对应的数据，返回到 index.html （即 view 视图），thymeleaf 模板就可以获取到数据了。

修改 IndexMovieController 请求类，完整代码：

package com.movie.controller.consumer;import com.movie.entity.MovieDynamicEntity;
import com.movie.entity.MovieInfoEntity;
import com.movie.manage.MovieDynamicManage;
import com.movie.manage.MovieInfoManage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;import javax.servlet.http.HttpServletRequest;
import java.util.List;/*** @author biandan* @signature 让天下没有难写的代码* @create 2019-12-01 下午 5:01*/
@Controller
public class IndexMovieController {//注入电影信息的接口对象@Autowiredprivate MovieInfoManage movieInfoManage;//注入电影动态信息的接口对象@Autowiredprivate MovieDynamicManage movieDynamicManage;//请求首页@RequestMapping("/")public ModelAndView index(HttpServletRequest request) {//查询热门电影List<MovieInfoEntity> hotMovieList = movieInfoManage.getHotMovieList();//查询最新电影（右边信息栏）List<MovieInfoEntity> latestMovieList = movieInfoManage.latestMovieList();//查询最新电影动态信息（右边信息栏）List<MovieDynamicEntity> movieDynamicList = movieDynamicManage.movieDynamicList();ModelAndView view = new ModelAndView();view.addObject("title", "首页");view.addObject("mainPage", "consumer/indexMovie");view.addObject("mainPageKey", "#keyId");view.addObject("hotMovieList",hotMovieList);view.addObject("latestMovieList",latestMovieList);view.addObject("movieDynamicList",movieDynamicList);view.setViewName("index");//返回 index.html 页面return view;}
}

注意：我们的 view 对象在方法 addObject 里的 key，要对应前端的 key，一字不漏。否则无法对应到数据。

接下来，我们需要修改 MovieInfoManage、MovieDynamicManage 两个接口，增加对应的方法：

MovieInfoManage 接口增加代码：

    //查询热门电影List<MovieInfoEntity> getHotMovieList();//查询最新电影List<MovieInfoEntity> latestMovieList();

MovieDynamicManage 接口增加代码：

    //查询最新电影动态信息List<MovieDynamicEntity> movieDynamicList();

对应的，它们的实现类也要实现上述的方法。

MovieInfoManageImpl 实现类增加代码，注意我们默认查询的记录数，定义在实现类上，可以根据实际需要修改数字大小：

    private static int HOT_SIZE = 20;//热门电影查询前 20 条记录private static int MSG_SIZE = 10;//列表信息查询 10 条记录//查询热门电影@Overridepublic List<MovieInfoEntity> getHotMovieList(){List<MovieInfoEntity> list = new ArrayList<>();try{list = movieInfoService.getHotMovieList(HOT_SIZE);}catch (Exception e){e.printStackTrace();}return list;}//查询最新电影@Overridepublic List<MovieInfoEntity> latestMovieList(){List<MovieInfoEntity> list = new ArrayList<>();try{list = movieInfoService.latestMovieList(MSG_SIZE);}catch (Exception e){e.printStackTrace();}return list;}

MovieDynamicManageImpl 实现类增加代码：

 private static int MSG_SIZE = 10;//列表信息查询 10 条记录//查询最新电影动态信息@Overridepublic List<MovieDynamicEntity> movieDynamicList(){List<MovieDynamicEntity> list = new ArrayList<>();try{list = movieDynamicService.movieDynamicList(MSG_SIZE);}catch (Exception e){e.printStackTrace();}return list;}

对应的，它们的 Service 类也要增加对应的方法：

MovieInfoService 增加代码：

    //查询热门电影@Transactional(readOnly = true)public List<MovieInfoEntity> getHotMovieList(int size){return movieInfoDao.getHotMovieList(size);}//查询最新电影@Transactional(readOnly = true)public List<MovieInfoEntity> latestMovieList(int size){return movieInfoDao.latestMovieList(size);}

MovieDynamicService 增加代码：

    //查询最新电影动态信息@Transactional(readOnly = true)public List<MovieDynamicEntity> movieDynamicList(Integer size){return movieDynamicDao.movieDynamicList(size);}

对应的，它们的 DAO 层也要增加代码：

MovieInfoDao 增加代码：

    //查询热门电影List<MovieInfoEntity> getHotMovieList(@Param("size") int size);//查询最新电影List<MovieInfoEntity> latestMovieList(@Param("size") int size);

MovieDynamicDao 增加代码：

    //查询最新电影动态信息List<MovieDynamicEntity> movieDynamicList(Integer size);

最后，它们的 mapper 文件也要增加对应的查询方法。

MovieInfoEntityMapper.xml 增加代码：

 <!-- 查询热门电影 --><select id="getHotMovieList" parameterType="java.lang.Integer" resultMap="BaseResultMap">select *from movie_infowhere hot = 1order by id desclimit 0,#{size,jdbcType=INTEGER}</select><!-- 查询最新电影 --><select id="latestMovieList" parameterType="java.lang.Integer" resultMap="BaseResultMap">select *from movie_infoorder by id desclimit 0,#{size,jdbcType=INTEGER}</select>

MovieDynamicEntityMapper.xml 增加代码：

  <!-- 查询电影动态 --><select id="movieDynamicList" parameterType="java.lang.Integer" resultMap="BaseResultMap">select d.*,i.movie_namefrom movie_dynamic as dLEFT JOIN movie_info as iON d.movie_id = i.idorder by d.id desclimit 0,#{size,jdbcType=INTEGER}</select>

OK，我们代码编写完成，启动服务测试效果：http://localhost:8080/

OK，我们已经搞定了首页的信息。

接下来，我们继续开发 API 接口：点击电影查看详情的接口，即 indexMovie.html 文件的 a 链接，以及 index.html 里的电影动态信息链接。

OK，我们新建一个类：ConsumerMovieController，用来处理点击电影详情的请求，放在 consumer 包下：

package com.movie.controller.consumer;import com.movie.entity.MovieDynamicEntity;
import com.movie.entity.MovieInfoEntity;
import com.movie.manage.MovieDynamicManage;
import com.movie.manage.MovieInfoManage;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;import java.util.List;/*** @author biandan* @signature 让天下没有难写的代码* @create 2019-12-01 下午 4:59*/
@RestController
@RequestMapping(value = "/consumerMovie")
public class ConsumerMovieController {@Autowiredprivate MovieInfoManage movieInfoManage;@Autowiredprivate MovieDynamicManage movieDynamicManage;//根据id查询电影详细信息@RequestMapping("/{id}")public ModelAndView view(@PathVariable("id") Integer id){//根据电影 id 查询电影信息MovieInfoEntity movie = movieInfoManage.selectById(id);///构造分页信息，根据当前电影 id 获取上一个电影、下一个电影的信息String pageCode = movieInfoManage.getPageCode(id);//查询最新电影（右边信息栏）List<MovieInfoEntity> latestMovieList = movieInfoManage.latestMovieList();//查询最新电影动态信息（右边信息栏）List<MovieDynamicEntity> movieDynamicList = movieDynamicManage.movieDynamicList();//查询该对应对应的动态信息（电影信息下面）List<MovieDynamicEntity> dynamicList = movieDynamicManage.dynamicList(id);ModelAndView view = new ModelAndView();view.addObject("pageCode", pageCode);view.addObject("title", movie.getMovieName());view.addObject("mainPage", "consumer/view");view.addObject("mainPageKey", "#mId");view.addObject("movie", movie);view.addObject("latestMovieList",latestMovieList);view.addObject("movieDynamicList",movieDynamicList);view.addObject("dynamicList",dynamicList);view.setViewName("index");return view;}
}

说明：

1、mainPage 和 mainPageKey 这里指定的值，对应 view.html 和 id=mId 需要我们创建。

2、pageCode 是我们的分页信息，可以查看 BootStrap 文档：https://www.runoob.com/bootstrap/bootstrap-pagination.html

这里我们使用最简单的分页

<ul class="pager"><li><a href="#">Previous</a></li><li><a href="#">Next</a></li>
</ul>

3、我们还要新增一个接口，用于查询该电影对应的动态信息。

//查询该对应对应的动态信息（电影信息下面）List<MovieDynamicEntity> dynamicList = movieDynamicManage.dynamicList(id);

OK，接下来，我们先在前端的 consumer 目录下创建 view.html

<meta charset="UTF-8"/>
<div id="mId"><div class="data_list"><div class="data_list_movieName"><img src="/static/images/movie_icon.png"></img>电影详细信息</div><div><div class="movie_movieName"><h3><strong th:text="${movie.movieName}"></strong></h3></div></div><div class="movie_createTime">发布时间：<font th:text="${#dates.format(movie.createTime,'yyyy-MM-dd')}"></font></div><div class="movie_content" th:utext="${movie.movieContent}"></div><div class="movie_lastAndNextPage"><ul class="pager" th:utext="${pageCode}"></ul></div></div><div class="data_list"><div class="data_list_movieName"><img src="/static/images/list_icon.png"/>电影动态信息列表</div><div><table class="table"><thead><tr><th>序号</th><th>动态信息</th><th>发布日期</th></tr></thead><tbody><tr th:each="dynamicInfo,sequence:${dynamicList}"><th scope="row" th:text="${sequence.index+1}"></th><td><a th:href="${dynamicInfo.movieUrl}" th:text="${dynamicInfo.dynamic}"th:title="${dynamicInfo.dynamic}" target="_blank"></a></td><td th:text="${#dates.format(dynamicInfo.createTime,'yyyy-MM-dd')}" ></td></tr></tbody></table></div></div></div>

说明：

这个属性要对应后台返回的属性值，否则无法找到数据。以及下面的分页信息。

我们来处理一下分页的：

MovieInfoManage 增加方法；

    //根据当前电影 id 获取上一个电影、下一个电影的信息String getPageCode(Integer id);

MovieInfoManageImpl 实现类增加方法：

    //根据当前电影 id 获取上一个电影、下一个电影的信息@Overridepublic String getPageCode(Integer id){String pageCode = null;try{//查询上一个电影信息MovieInfoEntity lastInfoEnity = movieInfoService.getLastEntity(id);//查询下一个电影信息MovieInfoEntity nextInfoEnity = movieInfoService.getNextEntity(id);//构建分页pageCode = PageCodeUtil.getPageCode(lastInfoEnity,nextInfoEnity);}catch (Exception e){e.printStackTrace();}return pageCode;}

这里我们需要一个我们自己的工具类 PageCodeUtil，创建在 util 包下，代码如下，具体逻辑自行理解：

package com.movie.util;import com.movie.entity.MovieInfoEntity;/*** 构造分页对象* @author biandan* @signature 让天下没有难写的代码* @create 2019-12-03 下午 11:01*/
public class PageCodeUtil {/*** 构造分页对象方法* @param lastEntity 上一个电影信息实体* @param nextEntity 下一个电影信息实体* @return*/public static String getPageCode(MovieInfoEntity lastEntity, MovieInfoEntity nextEntity) {StringBuilder builder = new StringBuilder();if (lastEntity == null || lastEntity.getId() == null) {builder.append("<p>上一部：没有了</p>");} else {builder.append("<p>上一部：<a href='/consumerMovie/" + lastEntity.getId() + "'>" + lastEntity.getMovieName() + "</a></p>");}if (nextEntity == null || nextEntity.getId() == null) {builder.append("<p>下一部：没有了</p>");} else {builder.append("<p>下一部：<a href='/consumerMovie/" + nextEntity.getId() + "'>" + nextEntity.getMovieName() + "</a></p>");}return builder.toString();}
}

MovieInfoService 类增加2个方法：

    //根据 id 查询上一个电影信息@Transactional(readOnly = true)public MovieInfoEntity getLastEntity(Integer id){return movieInfoDao.getLastEntity(id);}//根据 id 查询下一个电影信息@Transactional(readOnly = true)public MovieInfoEntity getNextEntity(Integer id){return movieInfoDao.getNextEntity(id);}

MovieInfoDao 增加2个方法：

    //根据 id 查询上一个电影信息MovieInfoEntity getLastEntity(Integer id);//根据 id 查询下一个电影信息MovieInfoEntity getNextEntity(Integer id);

MovieInfoEntityMapper.xml 增加两个查询方法：

    <!-- 根据 id 查询上一个电影信息，注意左尖括号的使用 --><select id="getLastEntity" parameterType="java.lang.Integer" resultMap="BaseResultMap">select id, movie_name, movie_title, hot, image_name, movie_content,create_timefrom movie_info<where><![CDATA[ id < #{id,jdbcType=INTEGER} ]]></where>order by id desclimit 0,1</select><!-- 根据 id 查询下一个电影信息 --><select id="getNextEntity" parameterType="java.lang.Integer" resultMap="BaseResultMap">select id, movie_name, movie_title, hot, image_name, movie_content,create_timefrom movie_infowhere id > #{id,jdbcType=INTEGER}order by id asclimit 0,1</select>

说明：

1、mapper 文件里不允许使用 < 尖括号，会被误以为是html 的符号，需要使用 <![CDATA[ ]]> 包装起来

2、查询上一个、下一个电影的 id 逻辑，一个是把 id 倒序排，然后取最大的；另一个是 id 顺序排，取最小的值。

接下来讲解查询某个电影动态信息的 API 接口：

MovieDynamicManage 增加方法：

    //查询该对应对应的动态信息（电影信息下面）List<MovieDynamicEntity> dynamicList(Integer id);

MovieDynamicManageImpl 实现类：

    //查询该对应对应的动态信息（电影信息下面）@Overridepublic List<MovieDynamicEntity> dynamicList(Integer id){List<MovieDynamicEntity> list = new ArrayList<>();try{list = movieDynamicService.dynamicList(id);}catch (Exception e){e.printStackTrace();}return list;}

MovieDynamicService 增加方法：

    //查询该对应对应的动态信息（电影信息下面）@Transactional(readOnly = true)public List<MovieDynamicEntity> dynamicList(Integer id){return movieDynamicDao.dynamicList(id);}

MovieDynamicDao 增加方法：

    //查询该对应对应的动态信息（电影信息下面）List<MovieDynamicEntity> dynamicList(Integer id);

MovieDynamicEntityMapper.xml 增加方法：

  <!-- 查询该对应对应的动态信息（电影信息下面） --><select id="dynamicList" parameterType="java.lang.Integer" resultMap="BaseResultMap">select d.*,i.movie_namefrom movie_dynamic as dLEFT JOIN movie_info as iON d.movie_id = i.idwhere d.movie_id = #{id,jdbcType=INTEGER}</select>

OK，我们启动服务，测试：http://localhost:8080/

效果出来了：

为了直观的看到效果，我们可以去数据库 movie_dynamic 修改一些动态信息，对应具体的电影的，如下图；

效果如下图：

OK，我们的测试成功。如果电脑链接网络，还可以看视频，快和你的朋友分享喜悦吧！perfect！

《5K入门级项目实战：好来屋在线影院》之第 11 战 —— 用户端首页、BootStrap 分页（中）相关推荐

《5K入门级项目实战：好来屋在线影院》之第 9 战 —— 电影信息管理
OK,这一节讲解后台管理的最后一个功能:电影信息管理.主要对"添加电影信息"的列表管理. 我们先在 html 目录下,创建一个 movieManage.html 文件 <!D ...
Java EE Web开发与项目实战_【手把手】JavaWeb 入门级项目实战 -- 文章发布系统（第一节）...
312334546574820.jpg 序前一段时间有很多朋友来问我各种问题,比如java怎么学,c,c++,c#,java,还有php等等,到底学哪个好,哪个好就业?其中不乏刚毕业找不到工作的学生 ...
【机器学习项目实战】Python基于协同过滤算法进行电子商务网站用户行为分析及服务智能推荐
说明:这是一个机器学习实战项目(附带数据+代码+文档+代码讲解),如需数据+代码+文档+代码讲解可以直接到文章最后获取. 1.项目背景电子商务网站数量迅速上升,将电子商务网站浏览者变为实际消费者,满 ...
【手把手】JavaWeb 入门级项目实战 -- 文章发布系统（第六节）
继续上一节的内容,首先我们将配置方法写在static块里面吧,不然每次调用DataBaseUtils都需要去配置一下,这样比较麻烦. static {config("jdbc.propert ...
JavaWeb 入门级项目实战 -- 文章发布系统（第六节）
继续上一节的内容,首先我们将配置方法写在static块里面吧,不然每次调用DataBaseUtils都需要去配置一下,这样比较麻烦. static {config("jdbc.propert ...
springboot+微信小程序入门级项目实战
学习b站up主码神之路的项目笔记视频地址 https://www.bilibili.com/video/BV17y4y1L78u?spm_id_from=333.337.search-card.al ...
【SSH网上商城项目实战23】完成在线支付功能
转自:https://blog.csdn.net/eson_15/article/details/51464415 上一节我们做好了支付页面的显示,从上一节支付页面显示的jsp代码中可以看出,当用户点 ...
【手把手】JavaWeb 入门级项目实战 -- 文章发布系统（第九节）
1. 根据静态页面完成JavaBean设计在上一节中,我们完成了文章封面的制作,这些都属于静态页面的部分. 从图片中可以看到,一篇文章的主要信息有:文章标题,文章名称,作者,还有摘要描述. 在< ...
【手把手】JavaWeb 入门级项目实战 -- 文章发布系统（第七节）
01 国庆长假终于结束了,博主想到以往这个时候,自己就已经回到学校,和一群基友扯扯犊子,顺便吹吹牛,好不快活,可惜这种生活不会再有了.虽说如此,但是参加了工作以后,毕竟有更多的时间去做自己想做的事情, ...

《5K入门级项目实战：好来屋在线影院》之第 11 战 —— 用户端首页、BootStrap 分页（中）

《5K入门级项目实战：好来屋在线影院》之第 11 战 —— 用户端首页、BootStrap 分页（中）相关推荐

最新文章

热门文章