zoukankan      html  css  js  c++  java
  • vue10----axios拦截器、js-base64歌词解码、lyric-parser解析歌词、watch的用法:当data中的值发生变化时触发、播放和暂停歌词,点击进度条跳转到对应歌词

    ### axios Interceptors(拦截器)(P-lyric.vue)

        类似于node中的中间件,在请求和响应之间做一次处理。
     
        axios从接收到数据请求到then之间的过程中,拦截器进行拦截。正常的axios请求返回的response对象里有:data、status、statusText、headers、config、request、__propto__,可以通过响应拦截,只返回data。请求拦截可以对config中的参数进行修改,这里对url进行追加参数。
     
        步骤:
            ①在utils文件夹下新建axios.js:
                import axios from "axios";
                // 请求拦截器
                axios.interceptors.request.use(function (config) {
                    console.log("请求拦截器",config)
                    // config.url=`/lyric/music/api/lyric?g_tk=1928093487&inCharset=utf-8&outCharset=utf-8&notice=0&format=json&songmid=001Qu4I30eVFYb&platform=yqq&hostUin=0&needNewCode=0&categoryId=10000000&pcachetime=1581573879680&name=wql&age=24`;// 增加&name=wql&age=24
                    return config;
                }, function (error) {
                    return Promise.reject(error);
                });
    
                // 响应拦截器
                axios.interceptors.response.use(function (response) {
                    console.log("响应拦截器", response)
                    return response.data;// 这里return出去的是 .then() 中的数据,这里只要data
                }, function (error) {
                    return Promise.reject(error);
                });
    
                export default axios;
            ②main.js中引入带有拦截器的axios:
                import Axios from "axios";
                替换为
                import Axios from "./utils/axios.js";

    ### js-base64歌词解码(P-lyric.vue)

        ①安装插件:
        npm install js-base64
        ②引入:
        import {Base64} from "js-base64";
        ③解码:Base64.decode()方法
                this.$axios.get(url,()=>{
    
                }).then((data)=>{
                    let lyric=Base64.decode(data.lyric);
                    console.log(lyric)
                });

    ### lyric-parser解析歌词(P-lyric.vue)

        ①安装插件:
        npm install js-base64
        ②引入:
        import LyricParser from "lyric-parser";
        ③实例化:
                let lyric=Base64.decode(data.lyric);
                this.lyricObj=new LyricParser(lyric,(obj)=>{
                    this.lyric=obj.txt;
                });
        ④API
            play()          播放歌词
            stop()          暂停歌词
            seek(startTime) 歌词跳转
            togglePlay()    切换播放/暂停状态

    ### watch的用法:当data中的值发生变化时触发(P-lyric.vue)

        当前组件props属性接收到父组件传来的paused和current时,用watch处理,当paused和current的值发生变化时,触发watch监听,自动执行。
        props:["paused","current"],
        watch: {
            paused(newValue,oldValue){
                if(newValue){
                    this.lyricObj.togglePlay();
                }else{
                    this.lyricObj.togglePlay();
                }
            },
            current(newValue,oldValue){
                console.log(newValue)   
            }
        }
        当前组件接收到vuex中的传来的currentSong时,通过watch处理,当currentSong发生变化时,触发watch监听,自动执行initLyricData()。
        import {mapGetters} from "vuex";
    
        computed: {
            ...mapGetters(["currentSong"])
        },
        watch: {
            currentSong(newValue,oldValue){
                this.initLyricData(newValue.musicData.songmid);
            }
        }

    ### 播放和暂停歌词,点击进度条跳转到对应歌词(P-lyric.vue)

        ①Player.vue中将playing和current传到P-lyric.vue中:
            <PLyric :playing="playing" :current="current"></PLyric>
        ②P-lyric.vue中通过props接收,通过watch监听处理接收到的playing和current,与歌曲播放同步:(watch特点:当值发生变化时自动触发)
            props:["playing","current"],
            watch: {
                playing(newValue,oldValue){
                    if(newValue){
                        this.lyricObj.togglePlay();
                    }else{
                        this.lyricObj.togglePlay();
                    }
                },
                current(newValue,oldValue){
                    let seekTime=newValue*1000;
                    this.lyricObj.seek(seekTime);
                }
            }










  • 相关阅读:
    牛客网 二叉树的镜像 JAVA
    牛客网 反转链表 JAVA
    牛客网 调整数组顺序使奇数位于偶数前面 JAVA
    Integer to Roman LeetCode Java
    Valid Number leetcode java
    Longest Common Prefix
    Wildcard Matching leetcode java
    Regular Expression Matching
    Longest Palindromic Substring
    Add Binary LeetCode Java
  • 原文地址:https://www.cnblogs.com/wuqilang/p/12306095.html
Copyright © 2011-2022 走看看