【九月打卡】第2天 开发音乐组件1

课程名称：vue3.0+TypeScript改造vue2.x项目

课程章节：Vue2.x开发音乐搜索页

课程讲师：西门老舅

课程内容：

一、vue2.0开发音乐组件，分为以下几部分：

• 搜索历史
• 热门歌曲列表
• 搜索列表
• 搜索建议

二、学习了如何从动态获去网易云音乐的api，实现数据渲染：

https://github.com/Binaryify/NeteaseCloudMusicApi

课程收获：

1. 通过老师的课程学会了从github上下载获取网易云音乐接口的代码并且运行，默认端口是3000，但是如果需要项目能够正常访问这些接口，需要vue-cli配置反向代理，如下代码：

modules.exports = {
	devServer: {
		proxy: {
			'/': {
				targer: 'localhost:3000',
				changeOrigin: true
			}
		}
	}
}

这个方式可以运用在我以后自己的项目中做为快速获取动态数据的简易方式，再也不用自己写一连串的死数据了，可以做到真正的模拟请求，哈哈，太棒了，又学会了一招，感谢老师。
2. 学会了封装数据缓存、获取和移出的方法编写，让代码看起来更加语义化和方便项目成员统一使用，如下代码示范：

(1). 设置数据
setItemData(key, data){
	localStorage.setItem(key, JSON.stringify(data))
}

(2). 获取数据
getItemData(key, success){
	const data = localStorage.getItem(key)
	const data1 = success(JSON.parse(data));
	return data1
}

(2). 清除数据
removeItemData(key, seccess){
	localStorage.removeItem(key)
}

调用示例：
setItemData('id', 123);
const data = getItemData('id', (data) => data)
removeItemData('id')

好了，今天就学到这里了，大家中秋节快乐，我要赏月去了！！