第二次vue项目总结（音频）

1.项目结构

├── build                      // 构建相关  
├── config                     // 配置相关
├── src                        // 源代码
│   ├── api                    // 所有请求
│   ├── assets                 // 主题 字体，图片等静态资源
│   ├── components             // 全局公用组件，组件名统一大写开头
│   ├── pages                // 页面
│   ├── mock                   // 项目mock 模拟数据
│   ├── router                 // 路由
│   ├── store                  // 全局 store管理
│   ├── stylus                 // 全局公用样式
│   ├── App.vue                // 入口页面
│   ├── main.js                // 入口 加载组件 初始化等
├── static                     // 第三方不打包资源
├── .babelrc                   // babel-loader 配置
├── eslintrc.js                // eslint 配置项
├── .gitignore                 // git 忽略项
├── index.html                 // html模板
└── package.json               // package.json

2.接口调用封装

api.js

import axios from 'axios'
//判断生产环境还是开发环境
const isProduction = process.env.NODE_ENV === 'production'
const api = isProduction ? '' : '/api'
//所有接口的公用参数
const commonParams = {
    Timestamp: new Date(),
    ToUrl: window.location.href
}

// get
export const requestIndex = (params, apiUrl) => {
    //vue的代理配置前面需要加api
    apiUrl = apiUrl ? apiUrl : '/mp.php/study/v1/index';
    return axios.post(api + apiUrl, Object.assign({}, commonParams, params), {
        withCredentials: true,
      //如果为post，需要转化一下参数的格式 
        transformRequest: [function(data) {
            let ret = ''
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
            }
            return ret
        }],
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
    }).then(res => {
        return Promise.resolve(res.data)
    }, err => {
        console.log('axios=========err', err)
    })
}

3.路由

1:用params的话刷新页面参数会丢失。
<router-link :to="{name:'reading',query:{chapter_id:info.bookinfo.book_chapter_id,book_id:info.bookinfo.book_id}}">aaaaa</router-link>

2:跳转到某个页面

      this.$router.push({
        path: "/TopicIndex",
        query: { week: week, topic_id: id }
      });

2.回退到上个页面
this.$router.go(-1)
this.$router.back(-1)
3.获取路由参数
this.$route.query.a
this.$route.params.a

4.路由守卫

以下几种只用于组件内

beforeRouteEnter(to, form, next) {
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  next(vm => {
  })
}
beforeRouteLeave(to, form, next) {
//这个找到this
})
beforeRouteUpdate (to, from, next) {
//在当前路由改变，但是该组件被复用时调用
}

全局路由守卫

router.beforeEach((to, from, next) => {
  // ...
})

4.html的属性

1.class的运用

//绑定的为对象，如果playing存在，那么有rotated这个class
 <img :class="{rotated:playing}" class="img458x458" src="../assets/audioDetail/record.png" />
//绑定的为一个数组，可用三元判断，如果index等于currentIndex的话，class为keycolor,否则为color
<span :class="[index == currentIndex ? 'keycolor':'color']">{{item.title}}</span>
//可以不写类型
<li class="f-ul-li2" :class="itemValue == 'course' ? 'active':''">
//默认class和动态class共存
<span class="lock f28" :class="[item.open_status == 3?'lock_title':'']">{{item.title}}</span>

2、ref属性，获取完整的虚拟dom
<div class="m-menu" ref="menu"></div>
js获取方式：this.$refs.menu

3.动态图片
<img :src="currentBook.data.list.chapters_banner" alt="" class="img750x300">

4.设置自定义属性
<div class="m-punched" :data-status="1" :data-chapter="currentSong.chapter_id"> <btn-read :btnTxt="'查看读后感'" /> </div>
js获取方式：e.currentTarget.dataset

5.音频注意事项

1.开始播放时音频需 document.getElementById('hiddenPlayer').load()，不然ios会获取不到音频

写了一半...待续