springboot加vue做移动音乐

最新推荐文章于 2025-01-28 05:55:05 发布
最新推荐文章于 2025-01-28 05:55:05 发布
阅读量346 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： html5 html vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/javazhudong/article/details/120240980
博主尝试将SSM架构的非前后端分离系统用Vue3重构成移动端应用，过程中遇到诸多挑战，如Vue版本升级难题、代码规范及业务需求理解不当导致的修改周折，特别指出歌词显示与歌单功能未解，望高手协助。项目前端采用Vue3、Vant及ElementUI，后端基于SpringBoot和MyBatis。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

前几天在github看到一个前后端没有分离的ssm的客户端系统

我就想给它改成移动端给大家分享和学习 真的想死,这里使用是vue2.x我使用vue3改的过程中对于我前端废物的我,真的有点难,但是还是过来,理解了 改这个项目是告诉大家写代码一定要规范,返回不要object,一定要看清业务需求,改这个项目,我木有看清需求,改的过程,出现好多问题,改了一个星期,希望给大家带来学习和规范

效果图

没有解决的问题就是歌词的问题

本人前端基础不怎么好，解决不了，希望有大佬可以进行解决

问题就是下面的歌单的问题解决不了

前端使用是vue3加vaut加element ui

后端使用的是springboot加mybaits

前端的结构

routes: [
    {
      path: '/',
      redirect: '/home',
    },
    {
      path: '/home',
      name: 'home',
      component: HomeApp,
      meta: {
        title: '首页',
        active: '/home'
      }
    },
    {
      path: '/404',
      component: Error,
      meta: {
        title: '404',
        active: '/home'
      }
    },
    {
      path: '*',
      redirect: '/404',
    },
    {
      path: '/mine',
      name: 'mine',
      component: Mine,
      meta: {
        title: '我的',
        active: '/mine'
      }
    },
    {
      path: '/login-in',
      name: 'login-in',
      component: LoginIn,
      meta: {
        title: '密码登录',
        active: '/mine'
      }
    },
    {
      path: '/sign-up',
      name: 'sign-up',
      component: SignUp,
      meta: {
        title: '注册',
        active: '/mine'
      }
    },
    {
      path: '/info',
      name: 'info',
      component: Info,
      meta: {
        title: '编辑个人资料',
        active: '/mine'
      }
    },
    {
      path: '/upload',
      name: 'upload',
      component: Upload,
      meta: {
        title: '修改个人头像',
        active: '/mine'
      }
    },
    {
      path: '/live',
      name: 'live',
      component: Live,
      meta: {
        title: '现场',
        active: '/live'
      }
    },
    {
      path: '/search',
      name: 'search',
      component: Search,
      meta: {
        title: '搜索',
        active: '/home',
        bottomPlayBar: 'true'
      }
    },
    {
      path: '/setting',
      name: 'setting',
      component: Setting,
      meta: {
        title: '设置',
        active: '/home'
      }
    },
    {
      path: '/singer-list',
      name: 'singer-list',
      component: SingerList,
      meta: {
        title: '歌手',
        active: '/home',
        bottomPlayBar: 'true'
      }
    },
    {
      path: '/song-list',
      name: 'song-list',
      component: SongList,
      meta: {
        title: '歌单',
        active: '/home',
        bottomPlayBar: 'true'
      }
    },
    {
      path: '/lyric',
      name: 'lyric',
      component: Lyric,
      meta: {
        title: '歌词',
        active: '/mine'
      }
    },
    {
      path: '/singer-album/:id',
      name: 'singer-album',
      component: SingerAlbum,
      meta: {
        title: '歌手内容',
        active: '/home'
      }
    },
    {
      path: '/song-list-album/:id',
      name: 'song-list-album',
      component: SongListAlbum,
      meta: {
        title: '歌单内容',
        active: '/home'
      }
    },
  ]

后端看mysql的设计(这里是改ssm项目，真的规范，大家要记住)

实体类

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Admin implements Serializable {
    /*Serializable是一个对象序列化的接口，一个类只有实现了Serializable接口，它的对象才是可序列化的。
    *因此如果要序列化某些类的对象，这些类就必须实现Serializable接口。
    *而实际上，Serializable是一个空接口，没有什么具体内容，它的目的只是简单的标识一个类的对象可以被序列化。
    */
//    主键
    private Integer id;
//    账号
    private String name;
//    密码
    private String password;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Collect implements Serializable {
    /*主键*/
    private Integer id;
    /*用户id*/
    private Integer userId;
    /*收藏类型（0歌曲1歌单）*/
    private Byte type;
    /*歌曲id*/
    private Integer songId;
    /*歌单id*/
    private Integer songListId;
    /*收藏时间*/
    private Date createTime;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Comment {
    /*主键*/
    private Integer id;
    /*用户id*/
    private Integer userId;
    /*评论类型（0歌曲1歌单）*/
    private Byte type;
    /*歌曲id*/
    private Integer songId;
    /*歌单id*/
    private Integer songListId;
    /*评论内容*/
    private String content;
    /*评论时间*/
    private Date createTime;
    /*评论点赞数*/
    private Integer up;
}
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Consumer implements Serializable {
    /*主键*/
    private Integer id;
    /*账号*/
    private String username;
    /*密码*/
    private String password;
    /*性别*/
    private Byte sex;
    /*手机号*/
    private String phoneNum;
    /*电子邮箱*/
    private String email;
    /*生日*/
    private Date birth;
    /*签名*/
    private String introduction;
    /*地区*/
    private String location;
    /*头像*/
    private String avator;
    /*创建时间*/
    private Date createTime;
    /*更新时间*/
    private Date updateTime;
}
@Data
@AllArgsConstructor
@NoArgsConstructor
public class ListSong implements Serializable {

    private Integer id;     //主键

    private Integer songId; //歌曲id

    private Integer songListId; //歌单id

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getSongId() {
        return songId;
    }

    public void setSongId(Integer songId) {
        this.songId = songId;
    }

    public Integer getSongListId() {
        return songListId;
    }

    public void setSongListId(Integer songListId) {
        this.songListId = songListId;
    }
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Rank {
    /*主键*/
    private Integer id;
    /*歌单id*/
    private Integer songListId;
    /*用户id*/
    private Integer consumerId;
    /*评分*/
    private Integer score;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class SecnceType implements Serializable {
    private Integer scenetypeid;
    private String scenetypename;
    private List<Sence>  secnce;
}
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Sence  implements Serializable {
    private Integer  sceneid;
    private String scenename;
    private String sceneimg;
    private Integer typename;
    private SecnceType secnceType;

}
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Singer implements Serializable {
    /*主键*/
    private Integer id;
    /*账号*/
    private String name;
    /*性别*/
    private Byte sex;
    /*头像*/
    private String pic;
    /*生日*/
    private Date birth;
    /*地区*/
    private String location;
    /*简介*/
    private String introduction;
}
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Song implements Serializable {
    /*主键*/
    private Integer id;
    /*歌手id*/
    private Integer singerId;
    /*歌名*/
    private String name;
    /*简介*/
    private String introduction;
    /*创建时间*/
    private Date createTime;
    /*更新时间*/
    private Date updateTime;
    /*歌曲图片*/
    private String pic;
    /*歌词*/
    private String lyric;
    /*歌曲地址*/
    private String url;
}
@Data
@AllArgsConstructor
@NoArgsConstructor
public class SongList implements Serializable {
    /*主键*/
    private Integer id;
    /*歌单标题*/
    private String title;
    /*歌单图片*/
    private String pic;
    /*简介*/
    private String introduction;
    /*风格*/
    private String style;
}

@Data
@AllArgsConstructor
@NoArgsConstructor
public class Swiper implements Serializable {
    /*主键*/
    private Integer id;
    /*轮播图名字*/
    private String name;
    /*轮播图地址*/
    private String url;
}


配置

server:
  port: 8888
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/ws_music?serverTimezone=Asia/Shanghai&useUnicode=true&characterEncoding=utf8&useSSL=false
    username: root
    password: 123456
    driver-class-name: com.mysql.cj.jdbc.Driver
    type: com.alibaba.druid.pool.DruidDataSource
  jackson:
    date-format: yyyy-MM-dd HH:mm:ss
    time-zone: GMT+8
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB
mybatis:
  type-aliases-package: com.ws.musicserver.domain
  mapper-locations: classpath:mapper/*.xml
logging:
  level:
    com:
      javaclimb:
        music:
          dao: debug
root-path: http://localhost:${server.port}
music-file:
  #歌手文件夹
  accessPath: /employee
  artistphotoaddress: D:\llll\artistphotoaddress\
  #歌单图片地址
  songlistpictureaddressPath: /songlistpictureaddress
  songlistpictureaddress: D:\llll\songlistpictureaddress\
  #歌曲图片地址
  songpictureaddressPath:  /songpictureaddress
  songpictureaddress: D:\llll\songpictureaddress\
  #歌曲地址
  songaddressPath: /songaddress
  songaddress: D:\llll\songaddress\
    #前端用户头像地址
  frontenduseravataraddressPath: /frontenduseravataraddress
  frontenduseravataraddress: D:\llll\frontenduseravataraddress\
  #用户头像默认地址
  useravatardefaultaddressPath: /useravatardefaultaddress
  useravatardefaultaddress: D:\llll\useravatardefaultaddress\

  swiper:  D:\llll\swiper\
  swiperPath: /img/swiper
  #现场地址的map4
  secnse:  D:\llll\secnse\
  secnsePath: /secnse
springaop对请求进行记录
@Aspect
@Component
@Slf4j
public class CotrollerAop {

    @Pointcut("execution( * com.misic.wed.*.*(..))")
    public void LogAspect(){

    }
    @Before("LogAspect()")
    public void doBEfore(JoinPoint joinPoint) {
        ServletRequestAttributes attributes= (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        HttpServletRequest request = attributes.getRequest();

        String  url=request.getRequestURI().toString();
        String ip=request.getRemoteAddr();
        String  classMethod=joinPoint.getSignature().getDeclaringTypeName()+"."+joinPoint.getSignature().getName();
        Object [] args=joinPoint.getArgs();
        Requesstlog requesstlog=new Requesstlog(url,ip,classMethod,args);//记录 前端控制器的请求路径
        //   ip地址  和  控制器的类名   传递的参数
        log.info("--------------Request--------------------"+requesstlog);

    }
    @After("LogAspect()")
    public void doAften(JoinPoint point) {

    }
    //@AfterReturning 在方法执行后返回一个结果后执行
  @AfterReturning(pointcut = "LogAspect()",returning="returnValue")
  public void log(JoinPoint point, Object returnValue) {
        System.out.println("模拟日志记录功能...");
        System.out.println("目标方法为：" +
                point.getSignature().getDeclaringTypeName() +
                "." + point.getSignature().getName());
        System.out.println("参数为：" +
                Arrays.toString(point.getArgs()));
        System.out.println("返回值为：" + returnValue);
     System.out.println("被织入的目标对象为：" + point.getTarget());
    }

    private class Requesstlog{
        private String url;
        private String  ip;
        private String  classMenrhod;
        private Object[] args;
        public Requesstlog(String url, String ip, String classMenrhod, Object[] args) {
            this.url = url;
            this.ip = ip;
            this.classMenrhod = classMenrhod;
            this.args = args;
        }
        @Override
        public String toString() {
            return "Requesstlog{" +
                    "url='" + url + '\'' +
                    ", ip='" + ip + '\'' +
                    ", classMenrhod='" + classMenrhod + '\'' +

            ", args=" + Arrays.toString(args) +
                    '}';
        }}
}
跨域的解决
@Configuration
public class WebMvcConfig extends WebMvcConfigurerAdapter {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .allowCredentials(true);
    }
}
资源路径的映射
@Configuration
public class FileConfig   implements WebMvcConfigurer {
    @Autowired
    private FileUploadProperties fileUploadProperties;

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {

        registry
                .addResourceHandler(fileUploadProperties.getAccessPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getArtistphotoaddress());
        registry
                .addResourceHandler(fileUploadProperties.getSonglistpictureaddressPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getSonglistpictureaddress());
        registry
                .addResourceHandler(fileUploadProperties.getSongpictureaddressPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getSongpictureaddress());
        registry
                .addResourceHandler(fileUploadProperties.getSongaddressPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getSongaddress());
        registry
                .addResourceHandler(fileUploadProperties.getFrontenduseravataraddressPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getFrontenduseravataraddress());
        registry
                .addResourceHandler(fileUploadProperties.getUseravatardefaultaddressPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getUseravatardefaultaddress());
        registry
                .addResourceHandler(fileUploadProperties.getSwiperPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getSwiper());
        registry
                .addResourceHandler(fileUploadProperties.getSwiperPath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getSwiper());
        registry
                .addResourceHandler(fileUploadProperties.getSecnsePath() + "/**")
                .addResourceLocations("file:"+fileUploadProperties.getSecnse());
    }

}
@Data
@Component
@ConfigurationProperties(prefix = "music-file")
public class FileUploadProperties {

    private String accessPath;
    private String artistphotoaddress;
    private String songlistpictureaddressPath;
    private String songlistpictureaddress;
    private String songpictureaddressPath;
    private String songpictureaddress;
    private String songaddressPath;
    private String songaddress;
    private String frontenduseravataraddressPath;
    private String frontenduseravataraddress;
    private String useravatardefaultaddressPath;
    private String useravatardefaultaddress;
    private String swiper;
    private String swiperPath;
    /**
     * secnse:  D:\llll\secnse\
     *   secnsePath: /secnse
     */
    private String  secnse;
    private String  secnsePath;
}


mybits的xml

轮播图

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.SwiperMapper">
    <resultMap id="BaseResultMap" type="com.misic.pojo.Swiper" >
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="name" jdbcType="VARCHAR" property="name"/>
        <result column="url" jdbcType="VARCHAR" property="url"/>
    </resultMap>


    <sql id="Base_Column_List">
        id,name,url
    </sql>


    <insert id="insert" parameterType="com.misic.pojo.Swiper">
        insert into swiper
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="name != null">
                name,
            </if>
            <if test="url != null">
                url,
            </if>
        </trim>

        <trim prefix=" values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id},
            </if>
            <if test="name != null">
                #{name},
            </if>
            <if test="url != null">
                #{url},
            </if>
        </trim>
    </insert>

    <update id="update" parameterType="com.misic.pojo.Swiper">
        update swiper
        <set>
            <if test="name != null">
                name = #{name},
            </if>
            <if test="url != null">
                url = #{url},
            </if>
        </set>
        where id = #{id}
    </update>

    <delete id="delete" parameterType="java.lang.Integer">
        delete from swiper
        where id=#{id}
    </delete>

    <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer">
        select
        <include refid="Base_Column_List"/>
        from swiper
        where id=#{id}
    </select>

    <select id="allSwiper" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from swiper
    </select>


</mapper>
dao
@Repository
@Mapper
public interface SwiperMapper {
    /**
     *增加
     */
    public int insert(Swiper swiper);

    /**
     *修改
     */
    public int update(Swiper swiper);

    /**
     * 删除
     */
    public int delete(Integer id);

    /**
     * 根据主键查询整个对象
     */
    public Swiper selectByPrimaryKey(Integer id);

    /**
     * 查询所有轮播图
     * @return
     */
//  @Select("select * from swiper")
    public List<Swiper> allSwiper();

}

请求
@RestController
@RequestMapping("/swiper")
public class SwiperController {
    @Autowired
    private SwiperService swiperService;

    /**
     * 查询所有歌曲
     */
    @GetMapping(value = "/allSwiper")
    public Object allSwiper(){
        return swiperService.allSwiper();
    }
}

我的

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.ConsumerMapper">
    <resultMap id="BaseResultMap" type="com.misic.pojo.Consumer" >
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="username" jdbcType="VARCHAR" property="username"/>
        <result column="password" jdbcType="VARCHAR" property="password"/>
        <result column="sex" jdbcType="TINYINT" property="sex"/>
        <result column="phone_num" jdbcType="CHAR" property="phoneNum"/>
        <result column="email" jdbcType="CHAR" property="email"/>
        <result column="birth" jdbcType="TIMESTAMP" property="birth"/>
        <result column="introduction" jdbcType="VARCHAR" property="introduction"/>
        <result column="location" jdbcType="VARCHAR" property="location"/>
        <result column="avator" jdbcType="VARCHAR" property="avator"/>
        <result column="create_time" jdbcType="TIMESTAMP" property="createTime"/>
        <result column="update_time" jdbcType="TIMESTAMP" property="updateTime"/>
    </resultMap>

    <sql id="Base_Column_List">
        id,username,password,sex,phone_num,email,birth,introduction,location,avator,create_time,update_time
    </sql>

    <insert id="insert" parameterType="com.misic.pojo.Consumer">
        insert into consumer
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="username != null">
                username,
            </if>
            <if test="password != null">
                password,
            </if>
            <if test="sex != null">
                sex,
            </if>
            <if test="phoneNum != null">
                phone_num,
            </if>
            <if test="email != null">
                email,
            </if>
            <if test="birth != null">
                birth,
            </if>
            <if test="introduction != null">
                introduction,
            </if>
            <if test="location != null">
                location,
            </if>
            <if test="avator != null">
                avator,
            </if>
            create_time,update_time,
        </trim>
        <trim prefix=" values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id},
            </if>
            <if test="username != null">
                #{username},
            </if>
            <if test="password != null">
                #{password},
            </if>
            <if test="sex != null">
                #{sex},
            </if>
            <if test="phoneNum != null">
                #{phoneNum},
            </if>
            <if test="email != null">
                #{email},
            </if>
            <if test="birth != null">
                #{birth},
            </if>
            <if test="introduction != null">
                #{introduction},
            </if>
            <if test="location != null">
                #{location},
            </if>
            <if test="avator != null">
                #{avator},
            </if>
            now(),now(),
        </trim>
    </insert>

    <update id="update" parameterType="com.misic.pojo.Consumer">
        update consumer
        <set>
            <if test="username != null">
                username = #{username},
            </if>
            <if test="password != null">
                password = #{password},
            </if>
            <if test="sex != null">
                sex = #{sex},
            </if>
            <if test="phoneNum != null">
                phone_num = #{phoneNum},
            </if>
            <if test="email != null">
                email = #{email},
            </if>
            <if test="birth != null">
                birth = #{birth},
            </if>
            <if test="introduction != null">
                introduction = #{introduction},
            </if>
            <if test="location != null">
                location = #{location},
            </if>
            <if test="avator != null">
                avator = #{avator},
            </if>
            update_time = now(),
        </set>
        where id = #{id}
    </update>

    <delete id="delete" parameterType="java.lang.Integer">
        delete from consumer
        where id=#{id}
    </delete>

    <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer">
        select
        <include refid="Base_Column_List"/>
        from consumer
        where id=#{id}
    </select>

    <select id="allConsumer" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from consumer
    </select>

    <select id="verifyPassword" resultType="java.lang.Integer" parameterType="java.util.HashMap">
        select count(*)
        from consumer
        where username = #{username} and password = #{password}
    </select>

    <select id="getByUsername" resultMap="BaseResultMap" parameterType="java.lang.String">
        select
        <include refid="Base_Column_List"/>
        from consumer
        where username = #{username}
    </select>

</mapper>
dao
@Repository
@Mapper
public interface ConsumerMapper {
    /**
     *增加
     */
    public int insert(Consumer consumer);

    /**
     *修改
     */
    public int update(Consumer consumer);

    /**
     * 删除
     */
    public int delete(Integer id);

    /**
     * 根据主键查询整个对象
     */
    public Consumer selectByPrimaryKey(Integer id);

    /**
     * 查询所有用户
     */
    public List<Consumer> allConsumer();

    /**
     * 验证密码
     */
    public int verifyPassword(String username,String password);

    /**
     * 根据账号查询
     */
    public Consumer getByUsername(String username);
}
cotroller
@RestController
@RequestMapping("/consumer")
public class ConsumerController {
    @Autowired
    private ConsumerService consumerService;
    @PostMapping(value = "/login")
    public Object login(Consumer consumer){
        JSONObject jsonObject = new JSONObject();
//        String username = request.getParameter("username").trim();     //账号
//        String password = request.getParameter("password").trim();     //密码
        if(consumer.getUsername()==null||consumer.getUsername().equals("")){
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"用户名不能为空");
            return jsonObject;
        }
        if(consumer.getPassword()==null||consumer.getPassword().equals("")){
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"密码不能为空");
            return jsonObject;
        }

//        //保存到前端用户的对象中
//        Consumer consumer = new Consumer();
//        consumer.setUsername(username);
//        consumer.setPassword(password);
        boolean flag = consumerService.verifyPassword(consumer.getUsername(),consumer.getPassword());
        if(flag){   //验证成功
            jsonObject.put(Consts.CODE,1);
            jsonObject.put(Consts.MSG,"登录成功");
            jsonObject.put("userMsg",consumerService.getByUsername(consumer.getUsername()));
            return jsonObject;
        }
        jsonObject.put(Consts.CODE,0);
        jsonObject.put(Consts.MSG,"用户名或密码错误");
        return jsonObject;
    }
    /**
     * 根据主键查询整个对象
     */
    @GetMapping(value = "/selectByPrimaryKey")
    public Object selectByPrimaryKey(@RequestParam(value = "id") Integer id){
//        String id = request.getParameter("id").trim();          //主键
        return consumerService.selectByPrimaryKey(id);
    }
    @PostMapping(value = "/update")
    public Object updateConsumer(Consumer consumer){
        System.out.println(consumer.toString());
        JSONObject jsonObject = new JSONObject();
//        String id = request.getParameter("id").trim();          //主键
//        String username = request.getParameter("username").trim();     //账号
//        String password = request.getParameter("password").trim();     //密码
//        String sex = request.getParameter("sex").trim();               //性别
//        String phoneNum = request.getParameter("phoneNum").trim();     //手机号
//        String email = request.getParameter("email").trim();           //电子邮箱
//        String birth = request.getParameter("birth").trim();           //生日
//        String introduction = request.getParameter("introduction").trim();//签名
//        String location = request.getParameter("location").trim();      //地区

        if(consumer.getUsername()==null||consumer.getUsername().equals("")){
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"用户名不能为空");
            return jsonObject;
        }
        if(consumer.getPassword()==null||consumer.getPassword().equals("")){
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"密码不能为空");
            return jsonObject;
        }
        //把生日转换成Date格式
//        DateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
//        Date birthDate = new Date();
//        try {
//            birthDate = dateFormat.parse(consumer.getBirth());
//        } catch (ParseException e) {
//            e.printStackTrace();
//        }
        //保存到前端用户的对象中
//        Consumer consumer = new Consumer();
//        consumer.setId(Integer.parseInt(id));
//        consumer.setUsername(username);
//        consumer.setPassword(password);
//        consumer.setSex(new Byte(sex));
//        consumer.setPhoneNum(phoneNum);
//        consumer.setEmail(email);
//        consumer.setBirth(birthDate);
//        consumer.setIntroduction(introduction);
//        consumer.setLocation(location);
        boolean flag = consumerService.update(consumer);
        if(flag){   //保存成功
            jsonObject.put(Consts.CODE,1);
            jsonObject.put(Consts.MSG,"修改成功");
            return jsonObject;
        }
        jsonObject.put(Consts.CODE,0);
        jsonObject.put(Consts.MSG,"修改失败");
        return jsonObject;
    }

}

评论功能

@RestController
@RequestMapping("/collect")
public class CollectController {
    @Autowired
    private CollectService collectService;
    /**
     * 添加收藏  评论功能
     *
     */
    @PostMapping(value = "/add")
    public Object addCollect(Collect collect){
        JSONObject jsonObject = new JSONObject();
//        String userId = request.getParameter("userId");           //用户id
//        String type = request.getParameter("type");               //收藏类型（0歌曲1歌单）
//        String songId = request.getParameter("songId");           //歌曲id
        if(collect.getUserId()==null || collect.getUserId().equals("")){
            jsonObject.put(Consts.CODE,0);
            jsonObject.put(Consts.MSG,"收藏歌曲为空");
            return jsonObject;
        }
        if(collectService.existSongId(collect.getUserId(),collect.getSongId())){
            jsonObject.put(Consts.CODE,2);
            jsonObject.put(Consts.MSG,"已收藏");
            return jsonObject;
        }

        //保存到收藏的对象中
//        Collect Collect = new Collect();
//        Collect.setUserId(Integer.parseInt(userId));
//        Collect.setType(new Byte(type));
//        Collect.setSongId(Integer.parseInt(songId));

        boolean flag = collectService.insert(collect);
        if(flag){   //保存成功
            jsonObject.put(Consts.CODE,1);
            jsonObject.put(Consts.MSG,"收藏成功");
            return jsonObject;
        }
        jsonObject.put(Consts.CODE,0);
        jsonObject.put(Consts.MSG,"收藏失败");
        return jsonObject;
    }

    /**
     * 删除收藏
     */
    @GetMapping(value = "/delete")
    public Object deleteCollect(@RequestParam("userId")Integer userId,@RequestParam("songId")Integer songId){
//        String userId = request.getParameter("userId");           //用户id
//        String songId = request.getParameter("songId");           //歌曲id
        boolean flag = collectService.deleteByUserIdSongId(userId,songId);
        return flag;
    }
    /**
     * 查询某个用户的收藏列表
     */
    @GetMapping(value = "/collectOfUserId")
    public Object collectOfUserId(@RequestParam("userId")Integer  userId){
//        String userId = request.getParameter("userId");          //用户id
        return collectService.collectOfUserId(userId);
    }
    /**
     * 查询所有收藏
     */
    @GetMapping(value = "/allCollect")
    public Object allCollect(){
        return collectService.allCollect();
    }

}
xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.CollectMapper">
    <resultMap id="BaseResultMap" type="com.misic.pojo.Collect" >
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="user_id" jdbcType="INTEGER" property="userId"/>
        <result column="type" jdbcType="TINYINT" property="type"/>
        <result column="song_id" jdbcType="INTEGER" property="songId"/>
        <result column="song_list_id" jdbcType="INTEGER" property="songListId"/>
        <result column="create_time" jdbcType="TIMESTAMP" property="createTime"/>
    </resultMap>

    <sql id="Base_Column_List">
        id,user_id,type,song_id,song_list_id,create_time
    </sql>

    <insert id="insert" parameterType="com.misic.pojo.Collect">
        insert into collect
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="userId != null">
                user_id,
            </if>
            <if test="type != null">
                type,
            </if>
            <if test="songId != null">
                song_id,
            </if>
            <if test="songListId != null">
                song_list_id,
            </if>
            create_time,
        </trim>
        <trim prefix=" values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id},
            </if>
            <if test="userId != null">
                #{userId},
            </if>
            <if test="type != null">
                #{type},
            </if>
            <if test="songId != null">
                #{songId},
            </if>
            <if test="songListId != null">
                #{songListId},
            </if>
            now(),
        </trim>        
    </insert>

    <delete id="delete">
        delete from collect
        where id=#{id}
    </delete>

    <delete id="deleteByUserIdSongId" parameterType="java.lang.Integer">
        delete from collect
        where user_id = #{userId} and song_id = #{songId}
    </delete>

    <select id="allCollect" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from collect
    </select>

    <select id="collectOfUserId" resultMap="BaseResultMap" parameterType="java.lang.Integer">
        select
        <include refid="Base_Column_List"/>
        from collect
        where user_id = #{userId}
    </select>

    <select id="existSongId" resultType="java.lang.Integer">
        select count(*)
        from collect
        where user_id = #{userId} and song_id = #{songId}
    </select>

</mapper>

歌曲

@RestController
@RequestMapping("/listSong")
public class ListSongController {
    @Autowired
    private ListSongService listSongService;
    /**
     * 根据歌单id查询歌曲
     */
    @GetMapping(value = "/detail")
    public List<ListSong> detail(@RequestParam("songListId")Integer songListId){
//        String songListId = request.getParameter("songListId");
        return listSongService.listSongOfSongListId(songListId);
    }

}
xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.ListSongMapper">
    <resultMap id="BaseResultMap" type="com.misic.pojo.ListSong" >
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="song_id" jdbcType="INTEGER" property="songId"/>
        <result column="song_list_id" jdbcType="INTEGER" property="songListId"/>
    </resultMap>

    <sql id="Base_Column_List">
        id,song_id,song_list_id
    </sql>

    <insert id="insert" parameterType="com.misic.pojo.ListSong">
        insert into list_song
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="songId != null">
                song_id,
            </if>
            <if test="songListId != null">
                song_list_id,
            </if>
        </trim>
        <trim prefix=" values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id},
            </if>
            <if test="songId != null">
                #{songId},
            </if>
            <if test="songListId != null">
                #{songListId},
            </if>
        </trim>
    </insert>

    <update id="update" parameterType="com.misic.pojo.ListSong">
        update list_song
        <set>
            <if test="songId != null">
                song_id = #{songId},
            </if>
            <if test="songListId != null">
                song_list_id = #{songListId},
            </if>
        </set>
        where id = #{id}
    </update>

    <delete id="delete" parameterType="java.lang.Integer">
        delete from list_song
        where id=#{id}
    </delete>

    <delete id="deleteBySongIdAndSongListId" parameterType="java.util.HashMap">
        delete from list_song
        where song_id=#{songId} and song_list_id=#{songListId}
    </delete>

    <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer">
        select
        <include refid="Base_Column_List"/>
        from list_song
        where id=#{id}
    </select>

    <select id="allListSong" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from list_song
    </select>

    <select id="listSongOfSongListId" resultMap="BaseResultMap" parameterType="java.lang.Integer">
        select
        <include refid="Base_Column_List"/>
        from list_song
        where song_list_id=#{songListId}
    </select>
</mapper>
dao
@Repository
@Mapper
public interface ListSongMapper {
    /**
     *增加
     */
    public int insert(ListSong listSong);

    /**
     *修改
     */
    public int update(ListSong listSong);

    /**
     * 删除
     */
    public int delete(Integer id);

    /**
     * 根据歌曲id和歌单id删除
     */
    public int deleteBySongIdAndSongListId(Integer songId,Integer songListId);

    /**
     * 根据主键查询整个对象
     */
    public ListSong selectByPrimaryKey(Integer id);

    /**
     * 查询所有歌单里面的歌曲
     */
    public List<ListSong> allListSong();

    /**
     * 根据歌单id查询所有的歌曲
     */
    public List<ListSong> listSongOfSongListId(Integer songListId);
}

歌词的分数的计算

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.RankMapper">
    <resultMap id="BaseResultMap" type="com.misic.pojo.Rank" >
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="song_list_id" jdbcType="INTEGER" property="songListId"/>
        <result column="consumer_id" jdbcType="INTEGER" property="consumerId"/>
        <result column="score" jdbcType="INTEGER" property="score"/>
    </resultMap>

    <insert id="insert" parameterType="com.misic.pojo.Rank">
        insert into rank
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="songListId != null">
                song_list_id,
            </if>
            <if test="consumerId != null">
                consumer_id,
            </if>
            <if test="score != null">
                score,
            </if>
        </trim>
        <trim prefix=" values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id},
            </if>
            <if test="songListId != null">
                #{songListId},
            </if>
            <if test="consumerId != null">
                #{consumerId},
            </if>
            <if test="score != null">
                #{score},
            </if>
        </trim>        
    </insert>

    <select id="selectScoreSum" resultType="java.lang.Integer" parameterType="java.lang.Integer">
        select COALESCE(sum(score),0) as score
        from rank
        where song_list_id = #{songListId}
    </select>

    <select id="selectRankNum" resultType="java.lang.Integer" parameterType="java.lang.Integer">
        select COALESCE(count(id),0) as num
        from rank
        where song_list_id = #{songListId}
    </select>
</mapper>
@Repository
@Mapper
public interface RankMapper {
    /**
     *增加
     */
    public int insert(Rank rank);

    /**
     * 查总分
     */
    public int selectScoreSum(Integer songListId);

    /**
     * 查总评分人数
     */
    public int selectRankNum(Integer songListId);
}
@RestController
public class RankController {
    @Autowired
    private RankService rankService;
    /**
     * 计算平均分
     */
    @GetMapping(value = "/rank")
    public int rankOfSongListId(@RequestParam("songListId")Integer songListId){
//        String songListId = request.getParameter("songListId");
        return rankService.rankOfSongListId(songListId);
    }
}

查询现场

@RestController
@AllArgsConstructor
public class SecnceCotroller {
    private final SecnceServise secnceServise;

    /**
     * 查询现场
     * @return
     */
    @GetMapping("/secnse")
    public  List<SecnceType> quertSencnse(){
        return secnceServise.querySecnceType();
    }

}
这里是一对多,项目中没有写这个,这个是我加上的
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.Secncedao">
    <resultMap id="querySecnceType1" type="com.misic.pojo.SecnceType">
        <result column="scenetypeid" property="scenetypeid"/>
        <result column="scenetypename" property="scenetypename"/>
        <collection property="secnce" ofType="com.misic.pojo.Sence">
            <result column="sceneid" property="sceneid" />
            <result column="scenename" property="scenename"/>
            <result column="sceneimg"  property="sceneimg" />
            <result column="typename"  property="typename" />
        </collection>
    </resultMap>

<select id="querySecnceType" resultMap="querySecnceType1">
    SELECT * FROM  scenetype s INNER JOIN  scene sc on  sc.typename=s.scenetypeid
</select>
</mapper>
@Mapper
@Repository
public interface Secncedao {
    List<SecnceType> querySecnceType();

}

歌手

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.SingerMapper">
    <resultMap id="BaseResultMap" type="com.misic.pojo.Singer" >
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="name" jdbcType="VARCHAR" property="name"/>
        <result column="sex" jdbcType="TINYINT" property="sex"/>
        <result column="pic" jdbcType="VARCHAR" property="pic"/>
        <result column="birth" jdbcType="TIMESTAMP" property="birth"/>
        <result column="location" jdbcType="VARCHAR" property="location"/>
        <result column="introduction" jdbcType="VARCHAR" property="introduction"/>
    </resultMap>

    <sql id="Base_Column_List">
        id,name,sex,pic,birth,location,introduction
    </sql>

    <insert id="insert" parameterType="com.misic.pojo.Singer">
        insert into singer
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="name != null">
                name,
            </if>
            <if test="sex != null">
                sex,
            </if>
            <if test="pic != null">
                pic,
            </if>
            <if test="birth != null">
                birth,
            </if>
            <if test="location != null">
                location,
            </if>
            <if test="introduction != null">
                introduction,
            </if>
        </trim>
        <trim prefix=" values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id},
            </if>
            <if test="name != null">
                #{name},
            </if>
            <if test="sex != null">
                #{sex},
            </if>
            <if test="pic != null">
                #{pic},
            </if>
            <if test="birth != null">
                #{birth},
            </if>
            <if test="location != null">
                #{location},
            </if>
            <if test="introduction != null">
                #{introduction},
            </if>
        </trim>        
    </insert>
    
    <update id="update" parameterType="com.misic.pojo.Singer">
        update singer
        <set>
            <if test="name != null">
                name = #{name},
            </if>
            <if test="sex != null">
                sex = #{sex},
            </if>
            <if test="pic != null">
                pic = #{pic},
            </if>
            <if test="birth != null">
                birth = #{birth},
            </if>
            <if test="location != null">
                location = #{location},
            </if>
            <if test="introduction != null">
                introduction = #{introduction},
            </if>
        </set>
        where id = #{id}
    </update>

    <delete id="delete" parameterType="java.lang.Integer">
        delete from singer
        where id=#{id}
    </delete>

    <select id="selectByPrimaryKey" resultMap="BaseResultMap" parameterType="java.lang.Integer">
        select
        <include refid="Base_Column_List"/>
        from singer
        where id=#{id}
    </select>

    <select id="allSinger" resultMap="BaseResultMap">
        select
        <include refid="Base_Column_List"/>
        from singer
    </select>

    <select id="singerOfName" resultMap="BaseResultMap" parameterType="java.lang.String">
        select
        <include refid="Base_Column_List"/>
        from singer
        where name like #{name}
    </select>

    <select id="singerOfSex" resultMap="BaseResultMap" parameterType="java.lang.Integer">
        select
        <include refid="Base_Column_List"/>
        from singer
        where sex = #{sex}
    </select>

</mapper>
dao
@Repository
public interface SingerMapper {
    /**
     *增加
     */
    public int insert(Singer singer);

    /**
     *修改
     */
    public int update(Singer singer);

    /**
     * 删除
     */
    public int delete(Integer id);

    /**
     * 根据主键查询整个对象
     */
    public Singer selectByPrimaryKey(Integer id);

    /**
     * 查询所有歌手
     */
    public List<Singer> allSinger();

    /**
     * 根据歌手名字模糊查询列表
     */
    public List<Singer> singerOfName(String name);

    /**
     * 根据性别查询
     */
    public List<Singer> singerOfSex(Integer sex);
}
@RestController
@RequestMapping("/singer")
public class SingerController {
    @Autowired
    private SingerService singerService;
    /**
     * 查询所有歌手
     */
    @GetMapping(value = "/allSinger")
    public List<Singer> allSinger(){
        return singerService.allSinger();
    }
}

歌曲歌曲

@RestController
@RequestMapping("/song")
public class SongController {
    @Autowired
    private SongService songService;
    /**
     * 根据歌曲id查询歌曲对象
     */
    @GetMapping(value = "/detail")
    public Song detail(@RequestParam("songId") Integer songId){

        return songService.selectByPrimaryKey(songId);
    }
    /* * 根据歌手id查询歌曲
     */
    @GetMapping(value = "/singer/detail")
    public List<Song> songOfSingerId(@RequestParam("singerId")Integer singerId){
//        String singerId = request.getParameter("singerId");
        return songService.songOfSingerId(singerId);
    }
    /**
     * 根据歌手名字模糊查询歌曲
     */
    @GetMapping(value = "/likeSongOfName")
    public List<Song> likeSongOfName(@Param("songName")String songName){
//        String songName = request.getParameter("songName");
        return songService.likeSongOfName(songName);
    }

}
xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC
        "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.misic.dao.SongMapper">
    <resultMap id="BaseResultMap" type="com.misic.pojo.Song" >
        <id column="id" jdbcType="INTEGER" property="id"/>
        <result column="singer_id" jdbcType="VARCHAR" property="singerId"/>
        <result column="name" jdbcType="VARCHAR" property="name"/>
        <result column="introduction" jdbcType="VARCHAR" property="introduction"/>
        <result column="create_time" jdbcType="TIMESTAMP" property="createTime"/>
        <result column="update_time" jdbcType="TIMESTAMP" property="updateTime"/>
        <result column="pic" jdbcType="VARCHAR" property="pic"/>
        <result column="url" jdbcType="VARCHAR" property="url"/>
    </resultMap>

    <resultMap id="ResultMapWithBLOBs" type="com.misic.pojo.Song" extends="BaseResultMap">
        <result column="lyric" jdbcType="LONGVARCHAR" property="lyric"/>
    </resultMap>

    <sql id="Base_Column_List">
        id,singer_id,name,introduction,create_time,update_time,pic,url
    </sql>

    <sql id="Blob_Column_List">
        id,singer_id,name,introduction,create_time,update_time,pic,lyric,url
    </sql>

    <insert id="insert" parameterType="com.misic.pojo.Song">
        insert into song
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">
                id,
            </if>
            <if test="singerId != null">
                singer_id,
            </if>
            <if test="name != null">
                name,
            </if>
            <if test="introduction != null">
                introduction,
            </if>
            create_time,update_time,
            <if test="pic != null">
                pic,
            </if>
            <if test="lyric != null">
                lyric,
            </if>
            <if test="url != null">
                url,
            </if>
        </trim>
        <trim prefix=" values (" suffix=")" suffixOverrides=",">
            <if test="id != null">
                #{id},
            </if>
            <if test="singerId != null">
                #{singerId},
            </if>
            <if test="name != null">
                #{name},
            </if>
            <if test="introduction != null">
                #{introduction},
            </if>
            now(),now(),
            <if test="pic != null">
                #{pic},
            </if>
            <if test="lyric != null">
                #{lyric},
            </if>
            <if test="url != null">
                #{url},
            </if>
        </trim>
    </insert>

    <update id="update" parameterType="com.misic.pojo.Song">
        update song
        <set>
            <if test="singerId != null">
                singer_id = #{singerId},
            </if>
            <if test="name != null">
                name = #{name},
            </if>
            <if test="introduction != null">
                introduction = #{introduction},
            </if>
            update_time = now(),
            <if test="pic != null">
                pic = #{pic},
            </if>
            <if test="lyric != null">
                lyric = #{lyric},
            </if>
            <if test="url != null">
                url = #{url},
            </if>
        </set>
        where id = #{id}
    </update>

    <delete id="delete" parameterType="java.lang.Integer">
        delete from song
        where id=#{id}
    </delete>

    <select id="selectByPrimaryKey" resultMap="ResultMapWithBLOBs" parameterType="java.lang.Integer">
        select
        <include refid="Blob_Column_List"/>
        from song
        where id=#{id}
    </select>

    <select id="allSong" resultMap="ResultMapWithBLOBs">
        select
        <include refid="Blob_Column_List"/>
        from song
    </select>

    <select id="songOfName" resultMap="ResultMapWithBLOBs" parameterType="java.lang.String">
        select
        <include refid="Blob_Column_List"/>
        from song
        where name = #{name}
    </select>

    <select id="likeSongOfName" resultMap="ResultMapWithBLOBs" parameterType="java.lang.String">
        select
        <include refid="Blob_Column_List"/>
        from song
        where name like #{name}
    </select>

    <select id="songOfSingerId" resultMap="ResultMapWithBLOBs" parameterType="java.lang.Integer">
        select
        <include refid="Blob_Column_List"/>
        from song
        where singer_id = #{singerId}
    </select>

</mapper>
@Repository
@Mapper
public interface SongMapper {
    /**
     *增加
     */
    public int insert(Song song);

    /**
     *修改
     */
    public int update(Song song);

    /**
     * 删除
     */
    public int delete(Integer id);

    /**
     * 根据主键查询整个对象
     */
    public Song selectByPrimaryKey(Integer id);

    /**
     * 查询所有歌曲
     */
    public List<Song> allSong();

    /**
     * 根据歌名精确查询列表
     */
    public List<Song> songOfName(String name);

    /**
     * 根据歌名模糊查询列表
     */
    public List<Song> likeSongOfName(String name);

    /**
     * 根据歌手id查询
     */
    public List<Song> songOfSingerId(Integer singerId);
}

前端

main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video;
// 导入Mui框架样式
import './lib/mui/css/mui.css'
import './lib/mui/css/icons-extra.css'
// 导入mint-ui样式
import 'mint-ui/lib/style.css'
// eslint-disable-next-line no-unused-vars
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
// eslint-disable-next-line no-unused-vars
import { Header, Swipe, SwipeItem, Field, Lazyload, Button, Cell, IndexList, IndexSection, Switch, Range, MessageBox } from 'mint-ui';
// Vue.use(MintUI)
import './assets/css/my-mint.scss'
// Mint-UI
Vue.use(Lazyload)
Vue.component(Header.name, Header)
Vue.component(Swipe.name, Swipe)
Vue.component(SwipeItem.name, SwipeItem)
Vue.component(Field.name, Field)
Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
Vue.component(IndexList.name, IndexList)
Vue.component(IndexSection.name, IndexSection)
Vue.component(Switch.name, Switch)
Vue.component(Range.name, Range)
Vue.prototype.$messagebox = MessageBox
Vue.use(ElementUI)
Vue.config.productionTip = false
// 添加路由导航守卫，用来动态设置标题内容
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title + ' - 朱董董音乐网'
  }
  next()  //放行函数，不加无法继续运行
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

安装vaut安装MintUI 安装vido.js 安装element-ui

store

import Vue from 'vue'
import Vuex from 'vuex'
import configure from "./moudels/configure";
import user from "./moudels/user";
import song from "./moudels/song";
Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    configure,
    user,
    song
  }
})

configure
const configure = {
    state:{
        HOST: 'http://127.0.0.1:8888',  //后台访问地址根目录
        activeName: '',                  //当前选中的菜单名
        showAside: false,               //是否显示播放中的歌曲列表
        loginIn: false,                 //用户是否已登录
        isActive: false,                //当前歌曲是否已收藏
    },
    getters: {
        activeName: state => {
            let activeName = state.activeName
            if(!activeName){
                activeName = JSON.parse(window.sessionStorage.getItem('activeName'))
            }
            return activeName
        },
        showAside: state => {
            let showAside = state.showAside
            if(!showAside){
                showAside = JSON.parse(window.sessionStorage.getItem('showAside'))
            }
            return showAside
        },
        loginIn: state => {
            let loginIn = state.loginIn
            if(!loginIn){
                loginIn = JSON.parse(window.sessionStorage.getItem('loginIn'))
            }
            return loginIn
        },
        isActive: state => {
            let isActive = state.isActive
            if(!isActive){
                isActive = JSON.parse(window.sessionStorage.getItem('isActive'))
            }
            return isActive
        }
    },
    mutations: {
        setActiveName: (state,activeName) => {
            state.activeName = activeName
            window.sessionStorage.setItem('activeName',JSON.stringify(activeName))
        },
        setShowAside: (state,showAside) => {
            state.showAside = showAside
            window.sessionStorage.setItem('showAside',JSON.stringify(showAside))
        },
        setLoginIn: (state,loginIn) => {
            state.loginIn = loginIn
            window.sessionStorage.setItem('loginIn',JSON.stringify(loginIn))
        },
        setIsActive: (state,isActive) => {
            state.isActive = isActive
            window.sessionStorage.setItem('isActive',JSON.stringify(isActive))
        }
    }
}

export default configure
user
const user = {
    state:{
        userId: '',                 //用户id
        username: '',               //用户账号
        avator: '',               //用户头像
    },
    getters: {
        userId: state => {
            let userId = state.userId
            if(!userId){
                userId = JSON.parse(window.sessionStorage.getItem('userId'))
            }
            return userId
        },
        username: state => {
            let username = state.username
            if(!username){
                username = JSON.parse(window.sessionStorage.getItem('username'))
            }
            return username
        },
        avator: state => {
            let avator = state.avator
            if(!avator){
                avator = JSON.parse(window.sessionStorage.getItem('avator'))
            }
            return avator
        }

    },
    mutations: {
        setUserId: (state,userId) => {
            state.userId = userId
       &nb
SPRINGBOOT+VUE集成语音听写/语音识别
p6448777的博客
05-16 2060
SPRINGBOOT+VUE集成语音听写/语音识别
JavaWeb向浏览器返回一个音频流
weixin_30279751的博客
12-30 2147
浏览器直接播放音频文件,1是直接访问一个html的音频文件,,2 是返回一个Java音频流给浏览器解析. 下面实现一个java的wav文件音频流,可以直接播放音频文件 1 package org.lib.speech.test; 2 import javax.servlet.http.HttpServlet; 3 import javax.servlet.http.HttpSer...
springboot+vue前后端分离在线音乐系统
07-27
WEB 端音乐播放 用户登录注册 用户信息编辑 歌曲、歌单搜索 歌单打分 歌单、歌曲评论 分页显示 歌词同步显示 音乐收藏、下载、拖动控制 后台对用户、歌曲、歌手、歌单信息的管理，UI超级漂亮。 技术栈 后端：springboot+mybatis 前端：vue + vue-router + vuex 详细说明：https://www.educy.top//article/265
SpringBoot_Vue实现音乐网站
xiaocao1223的博客
06-16 800
1.技术介绍 java+springBoot+spring+mysql+mybatis+Vue 开发工具：eclipse或IDEA 2.主要功能说明： 1）用户 2）管理员 网站前台功能： 注册、登录、首页、歌手、榜单、我的音乐、个人中心 后台管理功能： 首页图标展示、用户管理、歌手管理、歌单管理、歌曲管理、音乐类型管理 3.部门代码展示: ...
springboot+mybatis后台vue.js实现前端的音乐网站项目大学生毕业设计
06-27
看界面效果可以在百度搜素“springboot结合mybatis多套druid数据源入门级音乐网站后台”那篇博客，里边有后台实现的代码，还有几张前台的照片。
springboot+vue音乐歌曲分享试听网站java
qq840612233的博客
08-23 291
本文首先介绍了原创歌曲分享管理的技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对平台选取适用的语言和开发平台，根据需求分析制定模块并设计数据库结构，再根据平台总体功能模块的设计绘制平台的功能模块图，流程图以及E/R图。任何平台都要遵循平台设计的基本流程，本平台也不例外，同样需要经过市场进行调研，论文需求进行分析，概要设计，平台详细设计，测试和编码等步骤，设计并实现了原创歌曲分享平台。平台主要包括首页，个人中心，用户管理，音乐分类管理，音乐分享管理，举报管理，平台管理等功能模块。
青哥Springboot+Vue后台管理系统SpringBoot-Vue.zip
05-19
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
SpringBoot+Vue图书电子商务网站答辩PPT.pptx
09-08
综上所述，"SpringBoot+Vue图书电子商务网站"的设计与实现是计算机毕业设计的一次成功实践，它展示了移动互联网背景下电子商务应用的创新与技术融合，同时也反映出个人专业技能的提升和对知识的深入理解。
SpringBoot+Vue图书管理系统答辩PPT.pptx
09-08
【SpringBoot+Vue图书管理系统答辩PPT】是一个关于计算机毕业设计的项目，主要涉及SpringBoot、SSM（Spring、SpringMVC、MyBatis）和Vue.js这三种技术框架。这个系统旨在实现一个图书管理的信息化平台，提高图书管理...
基于Springboot+vue的校园社团管理系统server.zip
05-14
该项目利用了基于springboot + vue + mysql的开发模式框架实现的课设系统，包括了项目的源码资源、sql文件、相关指引文档等等。 【项目资源】：包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理...
SpringBoot+Vue秒杀系统答辩PPT.pptx
09-08
在当今互联网时代，移动互联网已经成为主流，智能手机的普及使得人们随时随地都能接入网络，进行各种业务处理。在这种背景下，开发一款基于Spring Boot的秒杀系统，旨在满足用户对快速、便捷的在线购物体验的需求。...
一款基于Springboot➕vue开发的网欲音乐系统 包含数据库设计文档，需求分析文档等 开发环境：idea，MySQL5.6以上，jdk1.8
m0_60372619的博客
07-21 267
一款基于Springboot➕vue开发的网欲音乐系统 包含数据库设计文档，需求分析文档等 开发环境：idea，MySQL5.6以上，jdk1.8
SpringBoot 视频流和音频流（输出到浏览器）
风吹淡了悲伤
04-21 6845
记录一次处理视频输出到浏览器,就想输出图片到浏览器一样效果。 第一步：添加如下设置 package com.shishi.springbootweb.config; import org.springframework.core.io.FileSystemResource; import org.springframework.core.io.Resource; import org.springframework.stereotype.Component; import org.springframew
Spring Boot 视频流和音频流（预加载效果）接口
热门推荐
assiduous_me的博客
03-11 1万+
正常编写的文件上传和下载，利用 HttpServletResponse 对象的 OutputStream 流，去输出文件内容的接口是无法完成网页上的视频播放、音频播放的预加载效果，这个预加载效果是我自己创的一个词吧，实际的问题是：当你在播放视频或音频的时候，你点击进度条，无法实现指定位置进行播放，莫名的不爽，这是因为后台接口写的有问题！ 实际效果： 实现代码：基于 Spring Boo...
Spring Boot 返回图片、音视频等流数据（多种方式）
最新发布
2501_90404929的博客
01-28 1065
前言项目开发中，会经常遇到需要下载的功能，即后台返回图片、音视频这类的文件流，记录下多种实现方式。Resource图像下载的最基本方法是直接针对_响应_对象实现：发出以下请求将在浏览器中呈现图像：由于来自_org.apache.commons.io_包的_IOUtils_，实现非常简单明了。用*@ResponseBody*注释来注释控制器方法。
Spring Boot入门（13)自制音乐平台
山阴少年
07-08 3355
  经过笔者这几天的辛勤劳作（其实就是苦逼地码代码），一个新的网站已经上线啦！该网站是用Spring Boot工具写的，主要实现的功能如下： 根据歌曲名称和音乐平台搜索歌曲，并实现歌曲的在线播放； 歌曲的下载功能； 网页统计量功能； 开发历史介绍。 该网站的首页网址为： http://musicdownload.cfapps.io/index ，页面如下： 在输入框中输入“2...
java音乐网站源码_Vue + SpringBoot + MyBatis 音乐网站
weixin_39934296的博客
11-23 1541
一、前言这里对音乐网站这个项目的开发流程做一下描述，我觉得了解了具体实现的来龙去脉，上手自己做就容易得多了，要知道数据是怎么从数据库一步步跑到前端页面的，当知道了整个的流程再去处理中间的细节，具体实现的细节等有时间了就补充，接下来我们就开始吧。二、开发环境操作系统：MacJDK：jdk-8u141mysql：mysql-5.7.21-1-macos10.13-x86_64node：v12...
流行的Spring Boot + Vue架构整合开发的网易云+QQ音乐（附源码）！
程序员小乐
02-24 1785
点击上方 "程序员小乐"关注,星标或置顶一起成长每天凌晨00点00分,第一时间与你相约每日英文Don't put your happiness in ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值