admin 管理员组

文章数量: 1086866

第八课：【歌手列表】

1.在api中新建 api.js

import jsonp from 'common/js/jsonp'
import {commonParams, options} from './config'export function getSingerList() {const url = '.fcg'const data = Object.assign({}, commonParams, {channel: 'singer',page: 'list',key: 'all_all_all',pagesize: 100,pagenum: 1,hostUin: 0,needNewCode: 0,platform: 'yqq'})return jsonp(url, data, options)
}export function getSingerDetail(singerId) {const url = '.fcg'const data = Object.assign({}, commonParams, {hostUin: 0,needNewCode: 0,platform: 'yqq',order: 'listen',begin: 0,num: 80,songstatus: 1,singermid: singerId})return jsonp(url, data, options)
}

2.创建singer.vue
处理json聚合并排序

 list.forEach((item, index) => {if (index < HOT_SINGER_LEN) {map.hot.items.push(new Singer({name: item.Fsinger_name,id: item.Fsinger_mid}))}const key = item.Findexif (!map[key]) {map[key] = {title: key,items: []}}map[key].items.push(new Singer({name: item.Fsinger_name,id: item.Fsinger_mid}))})// 为了得到有序列表，我们需要处理 maplet ret = []let hot = []for (let key in map) {let val = map[key]if (val.title.match(/[a-zA-Z]/)) {ret.push(val)} else if (val.title === HOT_NAME) {hot.push(val)}}ret.sort((a, b) => {return a.title.charCodeAt(0) - b.title.charCodeAt(0)})return hot.concat(ret)},...mapMutations({setSinger: 'SET_SINGER'})},

3mon/js 创建singer.js 构造Singer类简化代码

export default class Singer {constructor({id, name}) {this.id = idthis.name = namethis.avatar = `${id}.jpg?max_age=2592000`}
}

在singer.vue中

export default class Singer {constructor({id, name}) {this.id = idthis.name = namethis.avatar = `${id}.jpg?max_age=2592000`}
}

改进前

            map.hot.items.push({name: item.Fsinger_name,id: item.Fsinger_mid，avatar：${id}.jpg?max_age=2592000})

改进之后

            map.hot.items.push(new Singer({name: item.Fsinger_name,id: item.Fsinger_mid}))

“`

本文标签： 第八课歌手列表

版权声明：本文标题：第八课：【歌手列表】 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1693760257a241224.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。