octuplesakura / muse-music Goto Github PK

View Code? Open in Web Editor NEW

4.0 4.0 0.0 1.56 MB

音乐app，请别嫌弃他长得丑(´Ａ｀。)

JavaScript 38.29% HTML 0.58% Vue 59.88% CSS 1.25%

axios less muse-ui music swiper vue vue-router vuex

muse-music's Introduction

Hi, I'm OctupleSakura

👋 Recent Status

In order to learn more, I have to leave temporarily.

Look forward to coming back someday.

🐰 About Me

👺 Love the anime.
🤖 Love the game.
🎨 Aspire to create.
😵 And at a loss now.

📔 Github Status

💬 Site

https://octuplesakura.cn

muse-music's People

Contributors

Stargazers

Watchers

muse-music's Issues

关于路由组件缓存

场景

最近在开发项目的过程中遇到这样一个场景
首先搜索音乐点击音乐选项路由跳转到另一个组件
then 我切换来的时候由于第一个组件是一个滑动的组件所以他又跳回了最开始的那个页面
(不知道这么说能不能理解(^o^)/~
于是就想到能不能把路由给缓存起来,这里还要谢谢学长的指点QAQ

具体实现

于是我这里的话用到了学长告诉的keep-alive组件

 <keep-alive >
        <router-view class="child-view"/>
 </keep-alive>

这样子可以将所有切换的组件给缓存起来
嘛其实是我这里项目的需求需要这样缓存起来,也可以通过include这个属性去指定组件的name去缓存

这里还要提到一点就是缓存组件之后,可能需要用到一个钩子函数activated
一般使用mounted可能只有第一次会生效,之后因为缓存的关系可能并不会触发函数
(这里是脑测,而且好像确实之前这个项目里出现过,因此这里提到一下
activated是组件每次激活会调用,因此一般会需要使用到这个钩子

关于QQ音乐的音乐资源获取的步骤

因为之前在用的一个接口突然就403了,因此不得不解析一下QQ音乐原先是怎么获取到音乐资源,QQ音乐的搜索等等应该都挺好拿到的,因为那边没有做太多处理所以就不写了,这里记录一下防止自己忘记,日后也可以给其他有需要的人一个参考

生成guid

首先先放一下翻了好多文章才找到的一个方法

getGuid(){
   var t = (new Date).getUTCMilliseconds();
   if(document.cookie.indexOf("pgv_pvid")!=-1){
     return this.getCookie("pgv_pvid");
   }
   let  _guid = Math.round(2147483647 * Math.random()) * t % 1e10;
   document.cookie ="pgv_pvid=" + _guid + "; Expires=Sun, 18 Jan 2038 00:00:00 GMT;PATH=/;";
   return _guid
}

这个是在原文的方法上根据自己的需要进行的一个处理,生成guid之后需要将他放入cookie中并且将这个guid用于请求vkey上
这里还做了一个判断,如果没有cookie的话就进行再生成.否则就一直用cookie里面的guid

获取vkey

这里首先放一个链接,用来请求资源

这里的话需要设置的变量有两个,一个是生成的guid,另外一个是songmid,这里是获取到音乐数据的list时候里面会有这个id.同样放进去就好了,之后会返回一个数据,这里也放一下大概的格式

{config:{},data:"{}",header:{},request:{},status:200,statusText:"OK"}

其中data里面就包含了根据guid请求到的vkey,这样就拿到了我们要的key了

根据vkey和guid来请求音乐资源

拿到了vkey和guid,这里就可以直接给audio设置src了,这里放下路径
这个地方要设置的只有vkey和guid 就是上面两个步骤拿到的
要注意这里的vkey一定是要通过guid生成请求出来的才可以拿到,如果是另一个guid请求到的vkey,那么可能拿不到音乐资源(大概吧hhhh我也没有试过

参考资料

guid方法的原文

node 踩坑

前言

这两天都在捣鼓node,给项目做一个用户登录,用户注册加密的部分,涉及到sql这个地方也踩了大大小小的坑0.0
最开始是打算用node的一个orm框架--sequelize去做mysql的处理,然鹅还是放弃了(其实是卡在了一个不懂的错误上,也没有仔细去研究),有兴趣的朋友可以去玩一下QAQ
总之最后,还是自己对mysql模块封装,完成了一个用户注册的功能

具体封装实现

我这里直接贴下代码

//数据库函数,返回一个promise对象
const mysqlConnect = (sql,params) =>{
  const connection = mysql.createConnection({
       host:"host",
       port:3306,
       user:"user",
       password:"password",
       database:"database"
    });
  connection.connect();
  //返回两个promise 对象 用来拓展mysql函数操作
  return {
      query:(sql,params)=>{
        return new Promise((resolve, reject)=>{
          connection.query(sql,params,(err,rows,fields)=>{
            if(err){
                console.log(err);
                return;
            }
            resolve(rows)
        })
       })
      },
      end:()=>{
        return new Promise((resolve,reject)=>{
          connection.end((e)=>{
            if(e){
              console.log("mysql end error!");
              return;
            }
            console.log("mysql end success!");
            resolve(1);
          });
        })
      }
  }
}

执行mysqlConnect函数,会连接数据库,并且会返回两个函数.一个是query,用来执行sql语句,一个是end用来结束连接。

封装调用

这里放一下调用,作为参考0 0

 const insertSql = 'INSERT INTO music_user VALUES (?,?,"111",?,?,NOW(),"0")';//插入用户数据的sql
 let params = [UserId[0].uid,ctx.query.username,password[1],password[0]];//传入用户数据参数
 const insert = await User.query(insertSql,params);//执行存储过程
 await User.end();//结束连接

这里的UserId[0]是代码前面的部分有生成的uuid,passord是node加密处理过的密码和盐值
大概就是上面这样子,之前mysql模块的回调实在头疼,趁着这个项目有重复的需求赶紧把自己之前的代码又重构了一遍,嘛对于node这块也是一个新手,如果有大佬看到的话不足之处也烦请多多指教啦~