Vue.js与前端开发

来咯，你听说过Vue.js没？那可是前端界的大明星，让我们可以随意搭建网站的网页随便玩不是梦？那肯定选这个，就好像跟知己聊天似的轻松愉快。有了这货，网站立马变得好玩儿无比，用起来真是太够劲了！

准备工作

npm install -g @vue/cli

首先，搞定Vue项目这个小可爱！不会用也不用担心喔，随便摸索几下就能掌握！接下来就是创建个新的项目。启动之后，大家一起开心的开始，其实就像是开了一场大型派对似的。

vue create music-website

加入网易云API

cd music-website
npm run serve

哎呦，别急，先去网上搞个账号，再新建个app，搞定app key跟secret之后就可以开工。首当其冲，咱们在工程目录里丢个叫做’.env’的文件，填上关键信息。搞定这个，赶紧把axios库安装到电脑上。然后，就可以打开utils文件夹下面的api.js文件开始敲代码，搞定网易云API的连接！

创建音乐页面

新创建个叫’Music.vue’的文件扔进视图（views）那里，这就是我们的音乐课程！别急，慢慢学，总有一天你也能让那小音符们欢快地跳舞~

VUE_APP_APP_KEY=您的App Key
VUE_APP_APP_SECRET=您的App Secret

配置路由和主页

npm install axios

咱先把路由器里那个 index.js 的路径给搞定；接着在 main.js 那儿也按照一样的来引用路径、加个 Vue 实例。这就是咱们要做的全部喽！

运行项目

import axios from 'axios';
const appKey = process.env.VUE_APP_APP_KEY;
const appSecret = process.env.VUE_APP_APP_SECRET;
// 获取音乐排行榜
export const getTopList = async () => {
  const response = await axios.get(`https://api.music.163.com/toplist/detail?appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}
// 获取歌曲详情
export const getSongDetail = async (songId) => {
  const response = await axios.get(`https://api.music.163.com/song/detail?songId=${songId}&appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}
// 搜索歌曲
export const searchSong = async (keyword) => {
  const response = await axios.get(`https://api.music.163.com/search?keyword=${keyword}&appKey=${appKey}&appSecret=${appSecret}`);
  return response.data;
}

赶紧试试看！找个电脑或手机上的网页浏览器，然后把我们做的音乐网站链接输进去就能瞧见了~不过别忘了在搜索栏里敲对了地址才按回车！

学习笔记

跟着这个短视频学呗，看看完能不能把Vue和网易云API弄懂，让你的音乐站变得帅气十足！完成了这个项目，你就可以称自己是Vue高手了，还能学到好多超级厉害的技能~

  

    
音乐网站
    

      
热门排行榜
      

        
{{ song.name }}
      
    
    

      
搜索歌曲
      
      搜索
      

        
{{ song.name }}
      
    
  


import { getTopList, searchSong } from '../utils/api';
export default {
  name: 'Music',
  data() {
    return {
      topList: [],
      keyword: '',
      searchResult: []
    }
  },
  methods: {
    async fetchTopList() {
      this.topList = await getTopList();
    },
    async searchSong() {
      this.searchResult = await searchSong(this.keyword);
    }
  },
  mounted() {
    this.fetchTopList();
  }
}


/* 样式 */

前端技术探索

来聊聊Vue.js，学了可有好处哩！前端变化飞快，还是得不断提升自己，多练练嘛～。

import Vue from 'vue'
import Router from 'vue-router'
import Music from '../views/Music.vue'
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Music',
      component: Music
    }
  ]
})