java音乐播放使其循环播放 java 音乐

记录第一次JAVA WEB（SSM）框架开发项目经验

• 时间：2021年4月15日20:07:34
• （一）感想
• （二）项目介绍
• （三）项目所用的技术
• （四）项目的环境搭建

• 首先我们来导入Maven依赖，把我们项目所需要的所有依赖都分类好然后，一次性导入。

• 4.1 然后我们来分类 maven应该导入那些包
• 4.2 然后我们配置好Mybatis Spring 和SpringMVC
• 1. Mybatis 数据库连接参数
• 2. mybatis-config.xml文件
• 3. dao层
• 5. Service层
• 6. Controller层
• 最后吧三层的xml 配置到主applicationContext.xml里面
• 项目总结
• 
  

时间：2021年4月15日20:07:34

（一）感想

第一次的项目经验是不太舒服的 (🐶大二的代码狗瑟瑟发抖)，但总的来说自己写体验过一次做项目了.
在网络上遨游搜索问题时候还是发现了自己的能力界限啊，而且有好多新东西我都不知道，自己还得学好多知识啊…
在做项目的过程中还是可以学到许多的东西所以我选择来记录 一下自己的第一次写项目经验，也顺便给自己做做笔记吧。

（二）项目介绍

这次呢选择做了一个自己的心仪许久的在线音乐网站，因为我自己太喜欢听歌了，感觉我写代码的时候离不开音乐啊，写算法的时候除外，不然写不出容易分心，哈哈哈哈哈哈😂。
这个音乐网站整体呢是一个简约风格的音乐网站，虽然前后都是我来做的，但是我认为并没有做的很好，而且功能也没有做全，只能搜搜歌听，看看音乐的MV吧。。

（三）项目所用的技术

Spring + SpringMVC + Mybatis + jsp
依赖：Maven

（四）项目的环境搭建

竟然看到了我用到了ssm 那么项目首先肯定是搭建环境对吧，（顺便记录一下如何搭建好SSM环境）。

首先我们来导入Maven依赖，把我们项目所需要的所有依赖都分类好然后，一次性导入。

• XML文件的静态资源导出，因为怕tomocat不会自动编译xml文件所以我们手动导出

<!--  xml 文件 静态资源导出 -->
        <resources>
            <resource>
                <directory>src/main/java</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
            <resource>
                <directory>src/main/resources</directory>
                <includes>
                    <include>**/*.properties</include>
                    <include>**/*.xml</include>
                </includes>
                <filtering>false</filtering>
            </resource>
        </resources>

4.1 然后我们来分类 maven应该导入那些包

1. Servlet的包

<!-- servlet依赖 -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <!-- servlet-jstl依赖  -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>jstl</artifactId>
            <version>1.2</version>
        </dependency>

2. okhttp3 和okio3 包（因为我们这里是从网络服务器上请求的数据接口所以我们通过这个去得到网络请求数据）

<!--   okhttp3 maven依赖 -->
        <dependency>
            <groupId>com.squareup.okhttp3</groupId>
            <artifactId>okhttp</artifactId>
            <version>4.9.0</version>
        </dependency>
        <!-- okio3 依赖-->
        <dependency>
            <groupId>com.squareup.okio</groupId>
            <artifactId>okio</artifactId>
            <version>2.7.0</version>
        </dependency>

3. Json解析包

<!-- json解析jar包 -->
        <dependency>
            <groupId>org.json</groupId>
            <artifactId>json</artifactId>
            <version>20180813</version>
        </dependency>
        <!-- Jackson包  -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-core</artifactId>
            <version>2.12.1</version>
        </dependency>
        <!-- Jackson-databind包  -->
        <dependency>
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.1</version>
        </dependency>

4. 数据库连接池 以及 mybatis依赖

<!-- mysql数据库驱动 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>5.1.47</version>
        </dependency>

        <!-- c3p0数据库连接池 -->
        <dependency>
            <groupId>com.mchange</groupId>
            <artifactId>c3p0</artifactId>
            <version>0.9.5.2</version>
        </dependency>

        <!-- mybatis-spring -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis-spring</artifactId>
            <version>2.0.6</version>
        </dependency>
        <!-- mybatis 3.5.6 -->
        <dependency>
            <groupId>org.mybatis</groupId>
            <artifactId>mybatis</artifactId>
            <version>3.5.6</version>
        </dependency>

5. SpringMVC 以及 lombok插件

<!-- spring  mvc  -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.4</version>
        </dependency>
        <!-- spring-jdbc -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-jdbc</artifactId>
            <version>5.3.4</version>
        </dependency>

        <!-- lombok -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.16</version>
            <scope>provided</scope>
        </dependency>

4.2 然后我们配置好Mybatis Spring 和SpringMVC

1. Mybatis 数据库连接参数

jdbc.driver=com.mysql.jdbc.Driver
# 如果使用的mysql 8.0以上的 还得增加一个时区的配置 serverTimezone=UTC
# java数据库连接使用UTC时区（世界标准时间），即serverTimezone=UTC
jdbc.url=jdbc:mysql://localhost:3306/music?useSSL=true&useUnicode=true&characterEncoding=utf8
jdbc.username=root
jdbc.password=123456

2. mybatis-config.xml文件

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE configuration
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
    <!-- 别名，自动扫描com.szy.bean下的类型，
    使得在后续配置文件Mapper.xml中使用resultType的时候，
    可以直接使用TestBean,而不必写全com.szy.bean.TestBean -->
    <typeAliases>
        <package name="com.szy.bean"/>
    </typeAliases>
    <!-- 映射Mapper接口   -->
    <mappers>
        <mapper class="com.szy.dao.MusicMapper" />
    </mappers>
</configuration>

3. dao层

然后就是写dao层的接口，和dao层的Mapper.xml
dao层的接口

package com.szy.dao;

import com.szy.bean.Music_song_bean;
import java.util.List;

public interface MusicMapper {
	// 查询10条数据
    List<Music_song_bean> Select_ten_data();
}

dao层的Mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.szy.dao.MusicMapper">
	<select id="Select_ten_data" resultType="com.szy.bean.Music_song_bean">
        select * from music limit 10
    </select>
</mapper>

4. Spring-dao.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"
       xsi:schemaLocation="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-4.3.xsd">
    <!-- 关联数据库配置文件 1   -->
    <context:property-placeholder location="classpath:database.properties"/>

    <!-- 连接池 2
    dbcp:半自动化操作 不能自动连接
    c3p0:自动化操作（自动化的加载配置文件，并且可以自动设置到对象中）
    druid：公司企业用
    hikari：Springboot2.0默认连接池
    -->
    <bean id="dataSource" class="com.mchange.v2.c3p0.ComboPooledDataSource">
        <property name="driverClass" value="${jdbc.driver}" />
        <property name="jdbcUrl" value="${jdbc.url}"/>
        <property name="user" value="${jdbc.username}"/>
        <property name="password" value="${jdbc.password}"/>

        <!-- c3p0连接池的私有属性 -->
        <property name="maxPoolSize" value="15"/>
        <property name="minPoolSize" value="3"/>
        <!-- 指定连接数据库连接池的连接的最大空闲时间 -->
        <property name="maxIdleTime" value="30000" />
        <!-- 关闭连接后不自动commit -->
        <property name="autoCommitOnClose" value="false"/>
        <!-- 获取连接超时时间 -->
        <property name="checkoutTimeout" value="30000"/>
        <!-- 当获取连接失败重试次数 -->
        <property name="acquireRetryAttempts" value="2"/>
    </bean>

    <!-- sqlSessionFactory 3 -->
    <bean id="sqlSeesionFactory" class="org.mybatis.spring.SqlSessionFactoryBean">
        <property name="dataSource" ref="dataSource"/>
        <property name="configLocation" value="classpath:mybatis-config.xml"/>
    </bean>

    <bean class="org.mybatis.spring.mapper.MapperScannerConfigurer">
        <!--  注入 sqlSessionFactory      -->
        <property name="sqlSessionFactoryBeanName" value="sqlSeesionFactory"/>
        <!--  要扫描dao层的包      -->
        <property name="basePackage" value="com.szy.dao"/>
    </bean>

</beans>

5. Service层

Service层接口

package com.szy.service;

import com.szy.bean.Music_song_bean;
import java.util.List;

public interface MusicService {

    //    查询10条数据
    List<Music_song_bean> Select_ten_data();
}

Service层 实现类

package com.szy.service;

import com.szy.bean.Music_song_bean;
import com.szy.bean.Music_userinfo_bean;
import com.szy.dao.MusicMapper;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import java.util.List;
import java.util.Map;

public class MusicServiceImpl implements MusicService{

//    service 调 dao层
    private static MusicMapper musicMapper;

    public void setMusicMapper(MusicMapper musicMapper) {
        this.musicMapper = musicMapper;
    }

    public static void setMusicMapper(){
        ApplicationContext context =new ClassPathXmlApplicationContext("spring-dao.xml");
        musicMapper = context.getBean("musicMapper",MusicMapper.class);
    }

    //    查询10条数据
    public List<Music_song_bean> Select_ten_data() {
        //这里可以加具体的业务操作
        setMusicMapper();
        return musicMapper.Select_ten_data();
    }
}

Spring-service.xml 配置

<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"
       xsi:schemaLocation="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-4.3.xsd">

    <!-- 1.扫描service相关的bean -->
    <context:component-scan base-package="com.szy.service"/>

    <!-- 2.BookServiceImpl注入到IOC容器中-->
    <bean id="MusicServiceImpl" class="com.szy.service.MusicServiceImpl">
        <property name="musicMapper" ref="musicMapper"/>
    </bean>

    <!--  3.声明式事务配置  -->
    <bean id="transactionManager" class="org.springframework.jdbc.datasource.DataSourceTransactionManager">
        <property name="dataSource" ref="dataSource"/>
    </bean>

    <!-- 4.AOP横切事务   -->
    
</beans>

6. Controller层

Spring-mvc.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:mvc="http://www.springframework.org/schema/mvc"
       xmlns:context="http://www.springframework.org/schema/context"
       xmlns:xsd="http://www.springframework.org/schema/tool"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd
        http://www.springframework.org/schema/mvc
        https://www.springframework.org/schema/mvc/spring-mvc.xsd
        http://www.springframework.org/schema/context
        https://www.springframework.org/schema/context/spring-context.xsd">

    <mvc:annotation-driven />

    <!-- 2. 静态资源过滤   -->
    <mvc:default-servlet-handler/>

    <!-- 3. 扫描Controller层的包   -->
    <context:component-scan base-package="com.szy.controller"/>

    <!-- 4. 配置视图解析器   -->
    <bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
</beans>

Controller测试类

package com.szy.controller;

import com.szy.bean.Music_song_bean;
import com.szy.service.MusicService;
import com.szy.service.MusicServiceImpl;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
public class AjaxController {
    private MusicService musicService = new MusicServiceImpl();

    @RequestMapping("/ajaxs")
    public List<Music_song_bean> ajaxDemo(Model model) {
        List<Music_song_bean> songlist = musicService.Select_ten_data();
        return songlist;
    }
}

最后吧三层的xml 配置到主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"
       xsi:schemaLocation="http://www.springframework.org/schema/beans
        http://www.springframework.org/schema/beans/spring-beans.xsd">

    <import resource="spring-dao.xml"/>
    <import resource="spring-service.xml"/>
    <import resource="spring-mvc.xml"/>
</beans>

环境配置大概就这么多了。

项目总结

1. 学习到的知识：

• 学会了SSM环境的基本整合。
• 知道了lombok的方便 ————真滴爽。
• 第一次使用了数据库连接池，大概的了解了其作用，我这一次使用的是c3p0。
• 然后知道了如果要从后台吧json数据显示到页面还是要用到jackson-databind。
• 再次联系了解析复杂json的方法，但是我用的方法不一定好，但是我自己用的方便也熟练，但还是要 学习更好的知识来增加自己的编写能力。
• 了解了Spring的强大 以及 方便，框架带来的新世界。
• 了解Spring里面的IOC思想
• 然后知道了 XML如果不在pom.xml maven里面配置一下idea编译器是不会自动去编译xml文件所以就会导致许多繁琐的报错！
• 然后如果在WEB-INF 下面创建其他的新的文件夹需要在tomocat里面添加一下deployment才能正常加载里面的资源或者文件。具体操作办法是（Tomocat EditConfiguration ----》 Deployment -----》 +号 —》 external source 选择你新创建的还没有在tomocat里面加载的文件或者文件夹 ）
• 如果在这里的jsp文件里面引入css 或者 js 或者 img 图片 音频 视频 什么的一系列要引用路径的资源文件要在前面加上他的绝对路径引用 用jsp标记语言 （${pageContext.request.contextPath}/）

2. 了解到的新知识，但是还没学习 接下来准备学习了解的。

• 数据库连接池
• Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。
  Sass 是一个 CSS 预处理器。
  Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。
  Sass 完全兼容所有版本的 CSS。
  Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。
• fetch 是全局量 window 的一个方法，它的主要特点有：
  1、第一个参数是URL:
  2、第二个是可选参数，可以控制不同配置的 init 对象
  3、使用了 JavaScript Promises 来处理结果/回调:
• axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范，它本身具有以下特征：
  1.从浏览器中创建 XMLHttpRequest
  2.支持 Promise API
  3.客户端支持防止CSRF
  4.提供了一些并发请求的接口（重要，方便了很多的操作）
  5.从 node.js 创建 http 请求
  6.拦截请求和响应
  7.转换请求和响应数据
  8.取消请求
  9.自动转换JSON数据
  PS:防止CSRF:就是让你的每个请求都带一个从cookie中拿到的key, 根据浏览器同源策略，假冒的网站是拿不到你cookie中得key的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。

Fetch和Ajax的比较ajax和axios、fetch的区别

• postcss-pxtorem（自动处理 rem，妈妈再也不用担心屏幕太大太小了）
• workbox-webpack-plugin 谷歌开发的利用 Service Worker 实现页面预缓存的插件。
  差不多到这了吧…