基于SSM的音乐视频网站的设计与实现

Dear 丶 2022-09-03 15:29 206阅读 0赞

今天给大家分享一个基于SSM框架的音乐视频网站，其包含音乐播放，视频播放，音视频管理等模块，下面开始介绍其详细内容。  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]

## 技术简介： ##

> 基础框架：SSM SpringMVC+Spring+Mybatis  
> 前端框架：Bootstrap  
> 数据库：MySQL 5.7  
> 开发软件及环境：eclipse JDK 1.8 Tomcat 8.0

## 数据库设计 ##

![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]

## 项目功能 ##

**前台功能**

> 音乐列表(音乐播放),类型列表，音乐热度排行榜，歌手列表，视频列表，登录注册

**后台功能**

> 用户管理，视频管理，音乐管理

## 项目展示截图 ##

![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]  
![请添加图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 4]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 5]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 6]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 7]

## 功能流程解析 ##

**下面以后台音乐管理为例介绍其实现流程**  
首先是配置文件：  
applicationContext.xml

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:p="http://www.springframework.org/schema/p" xmlns:context="http://www.springframework.org/schema/context" xmlns:tx="http://www.springframework.org/schema/tx" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-3.2.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.2.xsd http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-3.2.xsd">
    		<context:component-scan base-package="dao,service.impl"/>
    	
    	
    	<bean id="dataSource" class="org.apache.commons.dbcp.BasicDataSource">
    		<property name="driverClassName" value="com.mysql.jdbc.Driver"></property>
    		<property name="url" value="jdbc:mysql://localhost:3306/music"></property>
    		<property name="username" value="root"></property>
    		<property name="password" value="px980305"></property>
    	</bean>
    	
    	<bean id="sqlSessionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
    		
    		<property name="dataSource" ref="dataSource"></property>
    		<property name="mapperLocations" value="classpath:mapper/*.xml"/>
    		
    		
    	</bean>
    	
    	<bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
    		<property name="basePackage" value="dao"></property>
    	</bean>
    </beans>

springmvc-servlet.xml

<?xml version="1.0" encoding="UTF-8"?>
    <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:context="http://www.springframework.org/schema/context" xmlns:mvc="http://www.springframework.org/schema/mvc" xsi:schemaLocation="http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.1.xsd http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.1.xsd">
    
    
    	<context:component-scan base-package="controller"/>
    	<bean class="org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter">  
            <property name="messageConverters">  
                <list>  
                    <bean class="org.springframework.http.converter.json.MappingJacksonHttpMessageConverter"></bean>  
                    
                </list>  
            </property>
        </bean>
        
    	<bean class="org.springframework.web.servlet.handler.SimpleMappingExceptionResolver">
    		<property name="defaultErrorView" value="404"></property>
    		<property name="exceptionAttribute" value="ex"></property>
    	</bean>
    	
    	<mvc:interceptors>
    		<mvc:interceptor>
    			<mvc:mapping path="/*Manager.html"/>
    			<bean class="interceptor.AdminInterceptor"></bean> 
    		</mvc:interceptor>
    	</mvc:interceptors>
    	
    	
    	
    	<bean id="viewResovler" class="org.springframework.web.servlet.view.UrlBasedViewResolver">		
    		
    		<property name="prefix" value="/WEB-INF/jsp/"/>
    		
    		<property name="suffix" value=".jsp"/>
    		
    		<property name="viewClass" value="org.springframework.web.servlet.view.JstlView"/>	
    	</bean>
    	
    	
    	<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver">
    		<property name="defaultEncoding" value="utf-8"></property>   
            <property name="maxUploadSize" value="10485760000"></property>  
            <property name="maxInMemorySize" value="40960"></property>  
    	</bean>
    </beans>

web.xml 伪装

<servlet>
    		<servlet-name>springmvc</servlet-name>
    		<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
    	</servlet>
    	<servlet-mapping>
    		<servlet-name>springmvc</servlet-name>
    		<url-pattern>*.html</url-pattern>
    		
    	</servlet-mapping>

以上便是配置文件的内容，下面开始介绍其实现流程  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 8]  
在musicManager中调用业务层，执行持久层数据库操作并将数据封装为json的方式返还

@RequestMapping("musicManager")
    	public String getAllSong(Model model,PrintWriter out){ 
    		List<Map<String, Object>> list=musicService.selectAllSong();
    		JSONArray jArray = JSONArray.fromObject(list);
    		model.addAttribute("list",jArray);		
    		System.out.println(jArray);
    		return "musicManager";
    	}

Service的具体实现，去调用持久层方法

@Override
    	public List<Map<String, Object>> selectAllSong() { 
    		return dao.selectAllSong();
    	}

Mapper实现

<select id="selectAllSong" resultType="hashmap">
    		SELECT * from music join singer on music.singerId = singer.singerId join
    		musictype on music.musicTypeId=musictype.musicTypeId ORDER BY time DESC
      </select>

至此便将数据获取到了，然后经过层层返还  
，在jsp页面中显示：

<c:if test="${not empty list }">
    <c:forEach var="m" items="${list }">
    <tr>														<td>${m.musicId }</td>														<td>${m.musicName }</td>														<td>${m.musicPhotoURL }</td>														<td>${m.musicHot }</td>														<td>${m.lyricURL }</td>														<td>${m.songURL }</td>														<td>${m.singerName }</td>														<td>${m.musicTypeName }</td>
    </tr>
    </c:forEach>

至此，查询所有音乐便完成了。  
以上便是该项目的部分内容。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70]: /images/20220829/ba128e2136074bd08d9f0688175e353e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 1]: /images/20220829/9fbdc40c3d5c45db992d31469befdf81.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 2]: /images/20220829/7ca971b95ebd4ee39de8ae997334d977.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 3]: /images/20220829/5a7c7e10bcbf4b179680c055930f93ae.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 4]: /images/20220829/738e34a3a70c4845b15e3ffd06cfe345.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 5]: /images/20220829/c31ccaad50c840e494927f3d535f6719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 6]: /images/20220829/d3bb12aba16b47ad86f7ce6d950e6e2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 7]: /images/20220829/8c2a57a02af44d9c98ac5b37dd5e4c4a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Blbmd4aWFuZzE5OTg_size_16_color_FFFFFF_t_70 8]: /images/20220829/b38ebeee70db42348924aab324f4a40d.png