1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

      vue模仿网易云音乐的单页面应用

       更新时间2019年04月24日 11:49:11   作者随她   我要评论

      这篇文章主要介绍了vue仿网易云音乐的单页面应用实例代码非常不错具有一定的参考借鉴价值,需要的朋友可以参考下

      说明

      一直想做一个基于VUE的项目,但是因为项目往往要涉及到后端的知识(不会后端真的苦),所以就没有一直真正的动手去做一个项目

      直到发现GitHub上有网易云音乐的api NeteaseCloudMusicApi ,才开始动手去做

      仅仅完成了首页,登入歌单歌曲列表页

      项目地址

      https://github.com/qp97vi/music

      项目成功运行还要把后端api在本地运行

      前端技术栈

      vue2+vuex+vue-router+axios+mint-ui+webpack

      遇到的问题

      1.前端路由拦截

      想做一个登录拦截验证没有登录之前就跳转到登录页面

      解决方法是通过http response 拦截器判断token(本地的cookie)判断

      创建一个http.js

      import axios from 'axios'
      import store from './store/store'
      import * as types from './store/types'
      import router from './router/index'
      
      // axios 配置
      axios.defaults.timeout = 5000
      axios.defaults.baseURL = 'https://api.github.com'
      
      // http request 拦截器
      axios.interceptors.request.use(
       config => {
        if (store.state.xsrfCookieName) {
         config.headers.Authorization = `xsrfCookieName ${store.state.xsrfCookieName}`
        }
        return config
       },
       err => {
        return Promise.reject(err)
       },
      )
      
      // http response 拦截器
      axios.interceptors.response.use(
       response => {
        return response
       },
       error => {
        if (error.response) {
         switch (error.response.status) {
          case 401:
           // 401 清除token信息并跳转到登录页面
           store.commit(types.LOGOUT)
           
           // 只有在当前路由不是登录页面才跳转
           router.currentRoute.path !== 'login' &&
            router.replace({
             path: 'login',
             query: { redirect: router.currentRoute.path },
            })
         }
        }
        // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
        return Promise.reject(error.response.data)
       },
      )
      
      export default axios

      2.路由懒加载

      {
         path:'/my',
         name:'my',
          meta:{
          requireAuth:true,
         },
         component:resolve=>{
          Indicator.open('加载中...');
          require.ensure(['@/views/my'], () => {
           resolve(require('@/views/my'))
           Indicator.close()
          })
         }
        },

      总结

      以上所述是小编给大家介绍的vue模仿网易云音乐的单页面应用,希望?#28304;?#23478;有所帮助如果大家有任?#25105;?#38382;请给我留言小编会及时回?#21019;?#23478;的在此也非常?#34892;?#22823;家对脚本之家网站的支持
      如果你觉得本文对你有帮助欢迎转载烦请注明出处谢谢

      相关文章

      最新评论

      常用在线小工具

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>