• SSM项目实战——哈哈音乐（四）前台模块开发

    1、项目准备

    ①导入依赖和前端资源

    1. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    2.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/maven-v4_0_0.xsd">
    3.     <parent>
    4.         <artifactId>hami-parent</artifactId>
    5.         <groupId>com.qcby</groupId>
    6.         <version>1.0-SNAPSHOT</version>
    7.     </parent>
    8.     <modelVersion>4.0.0</modelVersion>
    9.     <artifactId>hami-portal</artifactId>
    10.     <packaging>war</packaging>
    11.     <name>hami-portal Maven Webapp</name>
    12.     <dependencies>
    13.         <dependency>
    14.             <groupId>com.qcby</groupId>
    15.             <version>1.0-SNAPSHOT</version>
    16.             <artifactId>hami-core</artifactId>
    17.         </dependency>
    18.  
    19.         <dependency>
    20.             <groupId>org.springframework</groupId>
    21.             <artifactId>spring-web</artifactId>
    22.         </dependency>
    23.  
    24.         <dependency>
    25.             <groupId>org.springframework</groupId>
    26.             <artifactId>spring-webmvc</artifactId>
    27.         </dependency>
    28.         <dependency>
    29.             <groupId>javax.servlet</groupId>
    30.             <artifactId>servlet-api</artifactId>
    31.             <scope>provided</scope>
    32.         </dependency>
    33.  
    34.         <dependency>
    35.             <groupId>javax.servlet.jsp</groupId>
    36.             <artifactId>jsp-api</artifactId>
    37.             <scope>provided</scope>
    38.         </dependency>
    39.  
    40.         <dependency>
    41.             <groupId>jstl</groupId>
    42.             <artifactId>jstl</artifactId>
    43.         </dependency>
    44.     </dependencies>
    45.  
    46. </project>

     

    ②在resources下导入创建springmvc.xml

    1. <?xml version="1.0" encoding="UTF-8"?>
    2. <beans xmlns="http://www.springframework.org/schema/beans"
    3.        xmlns:mvc="http://www.springframework.org/schema/mvc"
    4.        xmlns:context="http://www.springframework.org/schema/context"
    5.        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    6.        xsi:schemaLocation="
    7.         http://www.springframework.org/schema/beans
    8.         http://www.springframework.org/schema/beans/spring-beans.xsd
    9.         http://www.springframework.org/schema/mvc
    10.         http://www.springframework.org/schema/mvc/spring-mvc.xsd
    11.         http://www.springframework.org/schema/context
    12.         http://www.springframework.org/schema/context/spring-context.xsd">
    13.     <mvc:annotation-driven>
    14.         <mvc:message-converters>
    15.             <bean class="com.alibaba.fastjson.support.spring.FastJsonHttpMessageConverter">
    16.                 <property name="supportedMediaTypes" value="text/html;charset=UTF-8"/>
    17.                 <property name="features">
    18.                     <array>
    19.                         <value>WriteMapNullValue</value>
    20.                         <value>WriteNullStringAsEmpty</value>
    21.                     </array>
    22.  
    23.                 </property>
    24.                 <property name="dateFormat" value="yyyy-MM-dd"></property>
    25.             </bean>
    26.         </mvc:message-converters>
    27.  
    28.     </mvc:annotation-driven>
    29.     <context:component-scan base-package="com.qcby.controller"/>
    30.  
    31.     <bean id="viewResource" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
    32.         <property name="prefix" value="/WEB-INF/page/"></property>
    33.         <property name="suffix" value=".jsp"></property>
    34.     </bean>
    35.  
    36.     <mvc:view-controller path="/index" view-name="index"></mvc:view-controller>
    37.     <mvc:default-servlet-handler/>
    38. </beans>

    ③配置web.xml

    1. <web-app
    2.         version="2.5"
    3.         xmlns="http://java.sun.com/xml/ns/javaee"
    4.         xmlns:xml="http://www.w3.org/XML/1998/namespace"
    5.         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    6.         xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    7.  
    8.   <filter>
    9.     <filter-name>SpringCharacterEncodingFilter</filter-name>
    10.     <filter-class>org.springframework.web.filter.CharacterEncodingFilter</filter-class>
    11.     <init-param>
    12.       <param-name>encoding</param-name>
    13.       <param-value>UTF-8</param-value>
    14.     </init-param>
    15.   </filter>
    16.   <filter-mapping>
    17.     <filter-name>SpringCharacterEncodingFilter</filter-name>
    18.     <url-pattern>/*</url-pattern>
    19.   </filter-mapping>
    20.  
    21.  
    22.   <servlet>
    23.     <servlet-name>dispatcher</servlet-name>
    24.     <servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    25.     <init-param>
    26.       <param-name>contextConfigLocation</param-name>
    27.       <param-value>classpath:springmvc.xml</param-value>
    28.     </init-param>
    29.     <load-on-startup>1</load-on-startup>
    30.   </servlet>
    31.   <servlet-mapping>
    32.     <servlet-name>dispatcher</servlet-name>
    33.     <url-pattern>/</url-pattern>
    34.   </servlet-mapping>
    35.  
    36.   <listener>
    37.     <listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
    38.   </listener>
    39.   <context-param>
    40.     <param-name>contextConfigLocation</param-name>
    41.     <param-value>classpath:applicationContext.xml</param-value>
    42.   </context-param>
    43. </web-app>
    44.  
    45.

    2、歌曲界面

    ①展示所有歌曲

    启动tomcat后，进入index.jsp页面，发送dofindAll，可以根据条件查询歌曲也可以查询所有歌曲信息

    1. <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    2. <html>
    3. <head>
    4.     <title>Title</title>
    5. </head>
    6. <body>
    7.     <jsp:forward page="/song/dofindAll"></jsp:forward>
    8. </body>
    9. </html>

     创建SongController，编写dofindAll，给search.jsp页面返回歌曲和所有专辑信息

    1. package com.qcby.controller;
    2.  
    3. import com.qcby.model.Mtype;
    4. import com.qcby.model.Page;
    5. import com.qcby.model.Song;
    6. import com.qcby.query.SongQuery;
    7. import com.qcby.service.MtypeService;
    8. import com.qcby.service.SongService;
    9. import com.qcby.service.SongerService;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.stereotype.Controller;
    12. import org.springframework.ui.Model;
    13. import org.springframework.web.bind.annotation.RequestMapping;
    14. import org.springframework.web.bind.annotation.ResponseBody;
    15.  
    16. import javax.servlet.http.Cookie;
    17. import javax.servlet.http.HttpServletRequest;
    18. import javax.servlet.http.HttpServletResponse;
    19. import java.io.UnsupportedEncodingException;
    20. import java.net.URLDecoder;
    21. import java.net.URLEncoder;
    22. import java.util.ArrayList;
    23. import java.util.List;
    24.  
    25.  
    26. @Controller
    27. @RequestMapping("/song")
    28. public class SongController {
    29.     @Autowired
    30.     private SongService songService;
    31.     @Autowired
    32.     private MtypeService mtypeService;
    33.  
    34.     @RequestMapping("/dofindAll")
    35.     public String list(SongQuery mq, Model model){
    36.  
    37.         if(mq.getPageNo() == 0){
    38.             mq.setPageNo(1);
    39.         }
    40.         Page page = songService.selectObjectByCondition(mq);
    41.         model.addAttribute("page", page);
    42.         model.addAttribute("mq", mq);
    43.         List mtypes = mtypeService.selectObjectAll();
    44.         model.addAttribute("mtypes", mtypes);
    45.         return "search";
    46.     }

    research.jsp界面展示歌曲信息

    1. <div id="body" class="gap">
    2.     <input id="tid" type="hidden" value="${mq.tid}">
    3.     <input id="isHot" type="hidden" value="${mq.isHot}">
    4.     <input id="isNew" type="hidden" value="${mq.isNew}">
    5.     <div class="wrapper">
    6.         <div class="content_wrapper">
    7.             <div class="content">
    8.                 <div class="filter" data-spm="1392350033">
    9.                     <dl>
    10.                         <dt>流派&nbsp;:</dt>
    11.                         <dd>
    12.                             <p>
    13.                                 <a href="#" ftype="mtype" value="" class="current">全部</a>
    14.                                 <c:forEach items="${mtypes}" var="mtype">
    15.                                     <a href="#" ftype="mtype" value="${mtype.tid}">${mtype.tname}</a>
    16.                                 </c:forEach>
    17.                             </p>
    18.                         </dd>
    19.                     </dl>
    20.                     <dl>
    21.                         <dt>热门&nbsp;:</dt>
    22.                         <dd>
    23.                             <p>
    24.                                 <a href="#" ftype="isHot" value="" class="current">全部</a>
    25.                                 <a href="#" ftype="isHot" value="1">热门</a>
    26.  
    27.                             </p>
    28.                         </dd>
    29.                     </dl>
    30.                     <dl>
    31.                         <dt>新歌&nbsp;:</dt>
    32.                         <dd>
    33.                             <p>
    34.                                 <a href="#" ftype="isNew" value="" class="current">全部</a>
    35.                                 <a href="#" ftype="isNew" value="1">最新</a>
    36.                             </p>
    37.                         </dd>
    38.                     </dl>
    39.                 </div>
    40.                 <div class="chart" data-spm="1392350021">
    41.                     <table>
    42.                         <thead>
    43.                         <tr>
    44.                             <td width="40"></td>
    45.                             <td width="45"></td>
    46.                             <td></td>
    47.                             <td width="180"></td>
    48.                             <td width="180"></td>
    49.                             <td width="130"></td>
    50.                         </tr>
    51.                         <tr>
    52.                             <th align="right"><input type="checkbox" checked onclick="selectall(this);"></th>
    53.                             <th align="left" colspan="5"><b class="play" onclick="playsongs();"></b>
    54.                             </th>
    55.                         </tr>
    56.                         </thead>
    57.                         <tbody id="content">
    58.  
    59.                         <c:forEach items="${page.list}" var="song" varStatus="status">
    60.                             <tr data-index="0">
    61.                                 <td align="right"><input type="checkbox" name="chartids" checked="checked"
    62.                                                          value="${song.sid}"></td>
    63.                                 <td align="center">${status.count}</td>
    64.                                 <td>
    65.                                     <div class="song">
    66.                                         <div class="image">
    67.                                             <img src="${filePath}${song.songer.pic}" alt="Every Breath You Take"
    68.                                                  height="55" width="55"/>
    69.                                             <b></b>
    70.                                         </div>
    71.                                         <div class="info"><p><strong><a target="_blank" title="Every Breath You Take"
    72.                                                                         href="#">${song.sname}</a></strong></p></div>
    73.                                     </div>
    74.                                 </td>
    75.                                 <td><span>
    76.                                             <a target="_blank" href="#" title="Karen Souza">${song.songer.srname}</a>
    77.                                     	</span></td>
    78.                                 <td><span>
    79.                 <a target="_blank" title="Essentials" href="#">${song.album.aname}</a>
    80.             </span></td>
    81.                                 <td>
    82.                                     <div class="action">
    83.                                         <button class="play" onclick="play(${song.sid});" title="试听">试听</button>
    84.                                         <button class="download" title="下载">下载</button>
    85.                                         <button class="offline" title="发送到">发送到</button>
    86.                                     </div>
    87.                                 </td>
    88.                             </tr>
    89.  
    90.                         </c:forEach>
    91.  
    92.  
    93.                         </tbody>
    94.                     </table>
    95.                 </div>
    96.                 <input type="hidden" id="pageNoPortal" value="${mq.pageNoPortal}">
    97.                 <c:if test="${page.pageNo < page.totalPage}">
    98.                     <div class="loadr" id="loader"><a href="javascript:void(0);" onclick="loadMore()"><b></b>查看更多</a>
    99.                     </div>
    100.                 </c:if>
    101.                 <c:if test="${page.pageNo == page.totalPage}">
    102.                     <div class="loadr" id="nomore" style="font-size: 18px;">没有更多啦!</div>
    103.                 </c:if>
    104.             </div>
    105.         </div>
    106.         <div class="sidebar" data-spm="1392350021">
    107.             <div class="nav">
    108.                 <a class="index" href="#"><b></b>发现</a>
    109.                 <a class="top" href="#"><b></b>排行榜</a>
    110.                 <a class="magazines" href="#"><b></b>音乐人企划</a>
    111.                 <a class="artists" href="/songer/dofindAll"><b></b>音乐人</a>
    112.                 <a class="songs current" href="/song/dofindAll"><b></b>歌曲</a>
    113.                 <a class="albums" href="#"><b></b>专辑<sup>无损</sup></a>
    114.             </div>
    115.             <div class="genre">
    116.                 <c:forEach items="${mtypes}" var="mtype">
    117.                     <a href="/song/dofindAll?tid=${mtype.tid}"><b></b>${mtype.tname}</a>
    118.                 </c:forEach>
    119.             </div>
    120.         </div>
    121.     </div>
    122.  
    123. </div>

     

    ②根据条件搜索歌曲 

    search.jsp页面的js请求

    1. <script>
    2.  
    3.         var tid = "";
    4.         var isHot = "";
    5.         var isNew = "";
    6.  
    7.         $(function () {
    8.             //指定点击事件
    9.             $(".filter p a").click(function () {
    10.                 //移除同辈的a链接的样式
    11.                 $(this).siblings().removeClass("current");
    12.                 //把点击的a链接的样式加上
    13.                 $(this).addClass("current");
    14.                 //获得流派的选中值
    15.                 var tid = $("a[ftype='mtype'][class='current']").attr("value");
    16.                 var isHot = $("a[ftype='isHot'][class='current']").attr("value");
    17.                 var isNew = $("a[ftype='isNew'][class='current']").attr("value");
    18.                 //alert(tid+"   "+isHot+"   "+isNew);
    19.                 window.location.href = "/song/dofindAll?tid=" + tid + "&isHot=" + isHot + "&isNew=" + isNew;
    20.             })
    21.  
    22.             tid = $("#tid").val();
    23.             isHot = $("#isHot").val();
    24.             isNew = $("#isNew").val();
    25.             //流派的回显
    26.             $("a[ftype='mtype'][class='current']").removeClass("current");
    27.             $("a[ftype='mtype'][value='" + tid + "']").addClass("current");
    28.             //热门回显
    29.             $("a[ftype='isHot'][class='current']").removeClass("current");
    30.             $("a[ftype='isHot'][value='" + isHot + "']").addClass("current");
    31.  
    32.             //新歌回显
    33.             $("a[ftype='isNew'][class='current']").removeClass("current");
    34.             $("a[ftype='isNew'][value='"+ isNew + "']").addClass("current");
    35.  
    36.         })

    ③查看更多

     js代码

    1. function loadMore() {
    2.             //2  111111  5 10 15 20
    3.             var pageNoPortal = parseInt($("#pageNoPortal").val());
    4.             //计算pageSize
    5.             var pageSize = 5 * (++pageNoPortal);
    6.             window.location.href = "/song/dofindAll?tid=" + tid + "&isHot=" + isHot + "&isNew=" + isNew + "&pageSize=" + pageSize + "&pageNoPortal=" + pageNoPortal;
    7.         }

    前端代码

    1. <c:if test="${page.pageNo < page.totalPage}">
    2. <div class="loadr" id="loader"><a href="javascript:void(0);" onclick="loadMore()"><b></b>查看更多</a>
    3. </div>
    4. </c:if>
    5. <c:if test="${page.pageNo == page.totalPage}">
    6. <div class="loadr" id="nomore" style="font-size: 18px;">没有更多啦!</div>
    7. </c:if>

    上面三个功能都是通过controller中dofindAll这一个请求来实现，只是所传的参数不一致 

    对于展示所有歌曲，dofindAll不传任何参数，直接查询所有的歌曲信息

    对于根据条件搜索歌曲，传入歌曲流派、是否热门、是否是新歌这三个信息作为筛选条件进行歌曲搜索

    对于查看更多，除了传入三个搜索条件还传入页面大小和当前页码作为条件进行查询

    ④歌曲播放

    功能：可以通过点试听，单个歌曲播放，也可以选取多个歌曲放入播放列表中按顺序播放

    实现思路：对于单个歌曲播放功能，直接根据当前传入的歌曲id查询歌曲信息，将歌曲信息传给play.jsp页面进行歌曲播放

    对于播放列表播放歌曲，首先通过cookie获取上一次未播放完的歌曲id，然后本次传入的歌曲id列表加上上次的歌曲id列表，变成一个新的歌曲id列表，并将新的歌曲id列表存入cookie中。根据歌曲id列表查询歌曲信息，将其交给paly.jsp页面，进行歌曲播放

    js代码

    1. function selectall(checkallObj) {
    2.             var checked = $(checkallObj).attr("checked");
    3.             if(checked =="checked"){
    4.                 $("tbody tr td input[type='checkbox']").attr("checked","checked");
    5.             }else{
    6.                 $("tbody tr td input[type='checkbox']").removeAttr("checked");
    7.             }
    8.         }
    9.  
    10.         function playsongs() {
    11.             //拿到所有的复选框选中的元素
    12.             var songs = $("tbody tr td input[type='checkbox']:checked")
    13.             var sids = ""; //"1,2,3,4,5,"
    14.             songs.each(function () {
    15.                 var sid = $(this).val();
    16.                 sids = sids + sid+","
    17.             })
    18.             window.open("/song/play?sids="+sids,"play");
    19.         }
    20.  
    21.         function play(sid) {
    22.             window.open("/song/play?sids="+sid,"play");
    23.         }
    24.  
    25.     </script>

    controller代码

    1. /**
    2.      * 实现歌曲播放列表
    3.      * @param sids   选中的歌曲列表
    4.      * @param model
    5.      * @param request
    6.      * @param response
    7.      * @return
    8.      * @throws UnsupportedEncodingException
    9.      */
    10.     @RequestMapping("/play")
    11.     public String play(String sids, Model model, HttpServletRequest request, HttpServletResponse response) throws UnsupportedEncodingException {
    12.         //1、处理sids字符串，变成集合给后台查询，变成cookie作为下一次使用的记录
    13.         //idList记录歌曲播放列表，就是本次新添加的播放歌曲sids+上一次的播放歌曲列表
    14.         List<String> idList = new ArrayList<>();
    15.         String[] idArr = null;
    16.         //程序严谨性判断
    17.         if(sids != null && !"".equals(sids)){
    18.             idArr = sids.split(",");
    19.             for (String s : idArr) {
    20.                 idList.add(s);
    21.             }
    22.         }
    23.  
    24.         //如果是第一次添加歌曲列表，不考虑，否则需要拿到cookie查看上次播放记录
    25.         //pids存储的是上次歌曲播放值
    26.         String pids = "";
    27.         Cookie[] cookies = request.getCookies();
    28.         if(cookies != null && cookies.length > 0){
    29.             for (Cookie cookie : cookies) {
    30.                 String name = cookie.getName();
    31.                 if("playids".equals(name)){
    32.                     //解码  防止乱码
    33.                     pids = URLDecoder.decode(cookie.getValue(),"UTF-8");
    34.  
    35.                 }
    36.             }
    37.         }
    38.  
    39.         //oldArr存放的是上一次播放的歌曲列表
    40.         String[] oldArr = pids.split(",");
    41.         for (int i = 0; i < oldArr.length; i++) {
    42.             //保证不重复添加相同的歌曲，如果上次歌曲播放列表中含有本次添加的播放列表，则不添加到新的播放列表
    43.             if(!idList.contains(oldArr[i])){
    44.                 idList.add(oldArr[i]);
    45.             }
    46.         }
    47.  
    48.         //创建新的歌曲播放列表，原来存储的播放歌曲列表为list<String>类型，idsList变成list<Integer>，用于后台查询
    49.         List<Integer> idsList = new ArrayList<>();
    50.         //字符串类型的新的播放列表，用于cookie传值给前端作为上一次播放列表
    51.         String playids = "";
    52.         for (String s : idList) {
    53.             if(!"".equals(s)){
    54.                 idsList.add(new Integer(s));
    55.                 playids = playids + s+",";
    56.             }
    57.         }
    58.  
    59.         List<Song> songs = new ArrayList<>();
    60.         if(idsList.size() > 0)
    61.             songs = songService.getSongByIds(idsList);
    62.  
    63.  
    64.         model.addAttribute("songs",songs);
    65.         System.out.println(songs);
    66.         System.out.println(playids);
    67.         playids = URLEncoder.encode(playids, "UTF-8");
    68.         Cookie cookie = new Cookie("playids", playids);
    69.         //cookie的有效时间
    70.         cookie.setMaxAge(60*60*24*30);
    71.         //设置cookie的访问有效路径
    72.         cookie.setPath("/");
    73.  
    74.         response.addCookie(cookie);
    75.         return "player";
    76.     }
    77.  
    78.  /**
    79.      * 获取播放的歌曲信息，实现歌曲播放
    80.      * @param sid
    81.      * @return
    82.      */
    83.     @ResponseBody
    84.     @RequestMapping("/getSong")
    85.     public Song getSong(Integer sid){
    86.         Song song = songService.getSong(sid);
    87.         System.out.println(song);
    88.         return song;
    89.     }

     通过歌曲id获取歌曲信息的service接口

    1.  //添加播放列表
    2.     public List<Song> getSongByIds(List<Integer> idsList);
    3. //实现歌曲播放
    4.     Song getSong(Integer sid);

    通过歌曲id获取歌曲信息的service实现类

    1.  @Override
    2.     public List<Song> getSongByIds(List idsList) {
    3.         return songMapper.getSongByIds(idsList);
    4.     }
    5. //实现歌曲播放
    6.  @Override
    7.     public Song getSong(Integer sid) {
    8.         return songMapper.getSong(sid);
    9.     }

    通过歌曲id获取歌曲信息的mapper接口

    1. //实现添加播放列表
    2.     List<Song> getSongByIds(List<Integer> idsList);
    3. //实现歌曲播放
    4.     Song getSong(Integer sid);

    通过歌曲id获取歌曲信息的sql

    1. <resultMap id="getSongByIdsRM" type="com.qcby.model.Song" extends="ResultMapWithBLOBs">
    2.     <association property="songer" javaType="com.qcby.model.Songer" resultMap="com.qcby.dao.SongerMapper.BaseResultMap"></association>
    3.   </resultMap>
    4.  
    5. <!--  查询要播放的歌曲集合返回-->
    6.   <select id="getSongByIds" parameterType="java.util.List" resultMap="selectObjectByConditionRM">
    7.     select * from song s left join mtype m on s.tid=m.tid left join songer sr on s.srid=sr.srid left join album a on s.aid=a.aid
    8.     <where>
    9.       s.sid in
    10.       <if test="list!=null">
    11.         <foreach collection="list" open="(" close=")" separator="," item="sid">
    12.           #{sid}
    13.         </foreach>
    14.       </if>
    15.       order by field (s.sid,
    16.       <foreach collection="list" separator="," item="sid">
    17.         #{sid}
    18.       </foreach>
    19.       )
    20.     </where>
    21.   </select>
    22.  
    23. <resultMap id="getSongRM" type="com.qcby.model.Song" extends="ResultMapWithBLOBs">
    24.     <association property="songer" javaType="com.qcby.model.Songer" resultMap="com.qcby.dao.SongerMapper.BaseResultMap"></association>
    25.   </resultMap>
    26.  
    27. <!--  实现歌曲播放-->
    28.   <select id="getSong" parameterType="int" resultMap="getSongRM">
    29.     select * from song left join songer on song.srid=songer.srid where song.sid=#{sid}
    30.   </select>

    play.jsp页面

    1. <c:forEach items="${songs}" var="song" varStatus="status">
    2. 								<li class="songList">
    3. 									<div class="songLMain">
    4. 										<div class="check">
    5. 											<input class="checkIn" type="checkbox" select="0" value="${song.sid}">
    6. 										</div>
    7. 										<div class="start" >
    8. 											<em sonN="${status.count}" msid="${song.sid}">${status.count}</em>
    9. 										</div>
    10. 										<div class="songBd">
    11. 											<div class="col colsn">${song.sname}</div>
    12. 											<div class="col colcn">${song.songer.srname}</div>
    13. 											<div class="col">${song.album.aname}</div>
    14. 										</div>
    15. 										<div class="control">
    16. 											<a class="cicon love"></a>
    17. 											<a class="cicon more" style="display:none"></a>
    18. 											<a class="cicon dele" style="display:none"></a>
    19. 										</div>
    20. 									</div>									
    21. 								</li>
    22. </c:forEach>

    3、音乐人界面

    ①展示所有音乐人

    创建SongerController，编写controller

    1. package com.qcby.controller;
    2.  
    3. import com.qcby.model.Mtype;
    4. import com.qcby.model.Page;
    5. import com.qcby.model.Songer;
    6. import com.qcby.query.SongerQuery;
    7. import com.qcby.service.MtypeService;
    8. import com.qcby.service.SongService;
    9. import com.qcby.service.SongerService;
    10. import org.springframework.beans.factory.annotation.Autowired;
    11. import org.springframework.stereotype.Controller;
    12. import org.springframework.ui.Model;
    13. import org.springframework.web.bind.annotation.RequestMapping;
    14.  
    15. import java.util.ArrayList;
    16. import java.util.List;
    17.  
    18. @Controller
    19. @RequestMapping("/songer")
    20. public class SongerController {
    21.     @Autowired
    22.     private SongerService songerService;
    23.     @Autowired
    24.     private MtypeService mtypeService;
    25.  
    26.     @RequestMapping("/dofindAll")
    27.     public String listType(SongerQuery mq, Model model) {
    28.         if (mq.getPageNo() == 0) {
    29.             mq.setPageNo(1);
    30.         }
    31.         mq.setPageSize(20);
    32.         Page<Songer> page = songerService.selectObjectByCondition(mq);
    33.         List<Mtype> mtypes = mtypeService.selectObjectAll();
    34.  
    35.         List<List<Songer>> list = new ArrayList<>();
    36.         List<Songer> slist = (List<Songer>) page.getList();
    37.         List<Songer> list1 = null;
    38.         for (int i = 0; i < 20; i++) {
    39.             if (i % 5 == 0) {
    40.                 list1 = new ArrayList<>();
    41.                 list.add(list1);
    42.             }
    43.             Songer s = null;
    44.             if (i < slist.size()) {
    45.                 s = slist.get(i);
    46.                 list1.add(s);
    47.             }
    48.         }
    49.         model.addAttribute("sList", list);
    50.         model.addAttribute("page", page);
    51.         model.addAttribute("mq", mq);
    52.         model.addAttribute("mtypes", mtypes);
    53.         return "songers";
    54.     }

    前端songers.jsp页面展示

    1. <div id="body" class="gap">
    2.     <input id="tid" type="hidden" value="${mq.tid}">
    3.     <input id="isHot" type="hidden" value="${mq.isHot}">
    4.     <div class="wrapper">
    5.         <div class="content_wrapper">
    6.             <div class="content">
    7.                 <div class="filter" data-spm="1392350033">
    8.                     <dl>
    9.                         <dt>流派&nbsp;:</dt>
    10.                         <dd>
    11.                             <p>
    12.                                 <a href="#" ftype="mtype" value="" class="current">全部</a>
    13.                                 <c:forEach items="${mtypes}" var="mtype">
    14.                                     <a href="#" ftype="mtype" value="${mtype.tid}">${mtype.tname}</a>
    15.                                 </c:forEach>
    16.                             </p>
    17.                         </dd>
    18.                     </dl>
    19.                     <dl>
    20.                         <dt>热门&nbsp;:</dt>
    21.                         <dd>
    22.                             <p>
    23.                                 <a href="#" ftype="isHot" value="" class="current">全部</a>
    24.                                 <a href="#" ftype="isHot" value="1">热门</a>
    25.  
    26.                             </p>
    27.                         </dd>
    28.                     </dl>
    29.                 </div>
    30.  
    31.  
    32.                 <div class="albums" data-spm="1392350021">
    33.                     <c:forEach items="${sList}" var="subList">
    34.                         <div class="album_list">
    35.                             <c:forEach items="${subList}" var="songer">
    36.                                 <div class="album" data-needpay="0" data-playstatus="1" data-downloadstatus="1">
    37.                                     <div class="image">
    38.                                         <a target="_blank" title="${songer.srname}" href="/songer/getSonger?srid=${songer.srid}">
    39.                                             <img src="${filePath}${songer.pic}" alt="${songer.srname}">
    40.  
    41.                                             <b class="icon toplay" onclick="playalbum(406532);return false;" style="display: none;"></b>
    42.                                             <dl style="display: none;">
    43.                                                 <dt>
    44.                                                     <b class="icon toheart"></b>
    45.                                                     <b class="icon todropmenu"></b>
    46.                                                 </dt>
    47.                                                 <dd style="display: none;">
    48.                                                     <ul>
    49.                                                         <li onclick="tag(406532,5);return false;"><b class="icon tofavourite"></b>收藏</li>
    50.                                                         <li onclick="album2collect(406532);return false;"><b class="icon tocollect"></b>添加到</li>
    51.                                                         <li onclick="recommend(406532,33);return false;"><b class="icon toshare"></b>分享到</li>
    52.                                                     </ul>
    53.                                                 </dd>
    54.                                             </dl>
    55.                                             <sup title="${songer.srname}"></sup>			</a>
    56.                                     </div>
    57.                                     <div class="info">
    58.  
    59.                                         <p>
    60.                                             <a target="_blank" title="${songer.srname}" href="#">${songer.srname}</a>
    61.                                         </p>
    62.                                     </div>
    63.                                 </div>
    64.                             </c:forEach>
    65.                         </div>
    66.                     </c:forEach>
    67.  
    68.  
    69.                 </div>
    70.  
    71.                 <input type="hidden" id="pageNoPortal" value="${mq.pageNoPortal}">
    72.                 <c:if test="${page.pageNo < page.totalPage}">
    73.                     <div class="loadr" id="loader"><a href="javascript:void(0);" onclick="loadMore01()"><b></b>查看更多</a></div>
    74.                 </c:if>
    75.                 <c:if test="${page.pageNo == page.totalPage}">
    76.                     <div class="loadr" id="nomore" style="font-size: 18px;">没有更多啦!</div>
    77.                 </c:if>
    78.             </div>
    79.         </div>
    80.         <div class="sidebar" data-spm="1392350021">
    81.             <div class="nav">
    82.                 <a class="index" href="#"><b></b>发现</a>
    83.                 <a class="top" href="#"><b></b>排行榜</a>
    84.                 <a class="magazines" href="#"><b></b>音乐人企划</a>
    85.                 <a class="artists current" href="#"><b></b>音乐人</a>
    86.                 <a class="songs " href="/song/dofindAll"><b></b>歌曲</a>
    87.                 <a class="albums" href="#"><b></b>专辑<sup>无损</sup></a>
    88.             </div>
    89.             <div class="genre">
    90.                 <c:forEach items="${mtypes}" var="mtype">
    91.                     <a href="/songer/dofindAll?tid=${mtype.tid}"><b></b>${mtype.tname}</a>
    92.                 </c:forEach>
    93.             </div>
    94.         </div>
    95.     </div>
    96.  
    97. </div>

    ②根据条件搜索音乐人

    songers.jsp页面的js请求

    1. <script>
    2.         $(function () {
    3.             var tid = "";
    4.             var isHot = "";
    5.             $(function () {
    6.  
    7.                 //指定点击事件
    8.                 $(".filter p a").click(function () {
    9.                     //移除同辈的a链接的样式
    10.                     $(this).siblings().removeClass("current");
    11.                     //把点击的a链接的样式加上
    12.                     $(this).addClass("current");
    13.                     //获得流派的选中值
    14.                     var tid = $("a[ftype='mtype'][class='current']").attr("value");
    15.                     var isHot = $("a[ftype='isHot'][class='current']").attr("value");
    16.                     //alert(tid+"   "+isHot+"   "+isNew);
    17.  
    18.                     window.location.href = "/songer/dofindAll?tid="+tid+"&isHot="+isHot;
    19.                 })
    20.  
    21.  
    22.                 tid = $("#tid").val();
    23.                 isHot = $("#isHot").val();
    24.                 //流派的回显
    25.                 $("a[ftype='mtype'][class='current']").removeClass("current");
    26.                 $("a[ftype='mtype'][value='"+tid+"']").addClass("current");
    27.                 //热门回显
    28.                 $("a[ftype='isHot'][class='current']").removeClass("current");
    29.                 $("a[ftype='isHot'][value='"+isHot+"']").addClass("current");
    30.  
    31.  
    32.  
    33.             })

    ③查看更多

    songers.jsp页面的js请求

    1.  function loadMore01() {
    2.                 var pageNoPortal = parseInt($("#pageNoPortal").val());
    3.                 //计算pageSize
    4.                 var pageSize = 5*(++pageNoPortal);
    5.                 window.location.href = "/song/dofindAll?tid="+tid+"&isHot="+isHot+"&pageSize="+pageSize+"&pageNoPortal="+pageNoPortal;
    6.             }

    这里前三个共用一个请求—dofindAll，和歌曲界面相似，也只是请求参数不一样 

    ④查看音乐人的详细信息

    点击音乐人的图片，就可以查看音乐人的详细信息，发送getSonger请求，并带有音乐人的id

    <a target="_blank" title="${songer.srname}" href="/songer/getSonger?srid=${songer.srid}">

    controller编写，根据音乐人的id联表查询歌曲信息，将其返回给songer,jsp页面

    1. @RequestMapping("/getSonger")
    2.     public String getSong(Integer srid, Model model) {
    3.         Songer songer = songerService.getSongs(srid);
    4.         model.addAttribute("songer",songer);
    5.         System.out.println(songer);
    6.         return "songer";
    7.     }

    根据音乐人的id联表查询歌曲信息的service接口

    1. //根据歌手id联表查询歌曲信息
    2.     public Songer getSongs(Integer srid);

    根据音乐人的id联表查询歌曲信息的service实现类

    1. @Override
    2.     public Songer getSongs(Integer srid) {
    3.         return songerMapper.getSongs(srid);
    4.     }

    根据音乐人的id联表查询歌曲信息的mapper接口

    1.  //根据歌手id联表查询歌曲信息
    2.     public Songer getSongs(Integer srid);

    根据音乐人的id联表查询歌曲信息的sql

    1.  <resultMap id="getSongsRM" type="com.qcby.model.Songer" extends="ResultMapWithBLOBs">
    2.     <collection property="songs" ofType="com.qcby.model.Song" resultMap="com.qcby.dao.SongMapper.BaseResultMap"></collection>
    3.     <collection property="mtype" ofType="com.qcby.model.Mtype" resultMap="com.qcby.dao.MtypeMapper.BaseResultMap"></collection>
    4.   </resultMap>
    5.  
    6.   <select id="getSongs" parameterType="Integer" resultMap="getSongsRM">
    7.     select sr.srid, sr.srname, sr.area, sr.intro, sr.pic, m.*, s.* from songer sr left join mtype m on sr.tid=m.tid left join song s on sr.srid=s.srid where sr.srid=#{srid}
    8.   </select>

    songer.jsp页面

    1.  <div id="artist_info">
    2.                             <table>
    3.                                 <tbody>
    4.                                 <tr>
    5.                                     <td width="56" valign="top" class="item">地区：</td>
    6.                                     <td valign="top">${songer.area}</td>
    7.                                 </tr>
    8.                                 <tr>
    9.                                     <td width="56" valign="top" class="item">风格：</td>
    10.                                     <td valign="top"><a href="/songer/dofindAll?tid="${songer.mtype.tid}>
    11.                                         ${songer.mtype.tname}</a>
    12.                                     </td>
    13.                                 </tr>
    14.                                 <tr>
    15.                                     <td width="56" valign="top" class="item">档案：</td>
    16.                                     <td valign="top">
    17.                                         <div class="record">
    18.                                             ${songer.intro}
    19.                                         </div>
    20.                                     </td>
    21.                                 </tr>
    22.                                 </tbody>
    23.                             </table>
    24.                         </div>
    25.                         <div id="artist_photo">
    26.                             <a id="cover_lightbox"
    27.                                href="#" target="_blank"
    28.                                title="${songer.srname}" data-lightbox="lightbox"> <img
    29.                                     src="${filePath}${songer.pic}"
    30.                                     alt="${songer.srname}"/></a>
    31.                         </div>

    至此，一个哈哈音乐项目就全部完成啦!!!

  • 相关阅读:
    【Proteus仿真】L297驱动步进电机
    SAP 10策略测试及简介
    张益唐的朗道-西格尔零点猜想的论文公布，专家认为该论文尚未完整解决零点猜想
    Photoshop图层混合模式公式(Unity，CG实现)
    基于opencv的图像阴影消除&车辆变道检测
    什么是原生IP？原生IP与住宅IP有何区别？
    Docker基本使用和认识
    多媒体应用设计师 第5章 多媒体信息显示、发布及搜索技术
    毕设 JAVA JSPsqlserver_基于J2EE的论坛论文
    如何选择高频器件功分器和耦合器的PCB材料
  • 原文地址：https://blog.csdn.net/weixin_47480200/article/details/137402648