炸雞音樂，vue，spa項目分析

項目描述：Web App，QQ音樂界面風格，SPA應用

技術描述：

1.fast-click處理移動端點擊事件的延遲

2.create-keyframes-animation處理css動畫

3.jsonp npm封裝，跨域獲取數據

4.vue-lazyload實現頁面懶加載

5.loading實現網絡加載過程當中的界面效果

6.axios數據請求

7.webpack+vue-cli自動化構建項目

8.vue,mixins的運用

9.vuex狀態管理器

10.mintui,組件實現區域滾動，首頁，歌手詳情頁面的圖片輪播效果

11.webpack實現路由懶加載（異步加載），優化代碼，提升首頁訪問速度

 

具體實現，要點分析：

 1 . 文件目錄結構

 

 

 

dist目錄： 

build 打包編譯 生成 dist目錄（index，js，css，image）vendor文件是打包後的node_modules文件

線上 gzip 壓縮 減小代碼量 例如 300kb代碼 gzip 後是： --》100kb

vendor打包後的 hash值不變 （ static/js/vendor.52caf94d568661fbe99f.js.map）

build打包後dist文件問們能夠在啓動的node服務器裏面進行靜態託管（也就是將資源放本地服務器），參照prod.server.js

 

prod.server.js 文件

 

import { match } from "./C:/Users/Administrator/AppData/Local/Microsoft/TypeScript/2.6/node_modules/@types/minimatch";

import { response } from "./C:/Users/Administrator/AppData/Local/Microsoft/TypeScript/2.6/node_modules/@types/spdy

 

const express = require("express")

const config = require("./config/index")

const axios = require("axios")

const app = express();

const apiRoutes = express.Router()    // server的路由分發代理

apiRoutes.get("/getDiscLisc", (req, res) => {

let url = "https://c.y.qq.com/splcloud/fcgi-bin/fcg_get_diss_by_tag.fcg"

axios.get(url, {

headers: {        // 請求數據的時候 採起了兩種：  一種是 jsonp npm封裝  一種是node代理這種方式：請求後端發起請求數據服務器，設置headers的referer（請求來源地址）host：來源主機， 繞過同源策略，「欺騙數據服務器」

referer: "https://c.yy.qq.com/",

host: "c.y.qq.com"

},

params: req.query

}).then((response) => {

res.json(response.data)

}).catch((e) => {

console.log(e)

})

})

apiRoutes.get("/lyric", (req, res) => {

const url = 'https://c.y.qq.com/lyric/fcgi-bin/fcg_query_lyric_new.fcg'

axios.get(url, {

headers: {

referer: "https://c.yy,qq.com/",

host: "c.yy.com"

},

params: req.query

}).then((response) => {

let ret = response.data

if (typeof ret === 'string') {

let reg = /^\w+\(({[^()]+})\)$/

let matches = ret.match(reg)

if (matches) {

}

}

})

// apiRoutes.get("/lyric", (req, res) => {

// })

})

app.use("/api", apiRoutes)          //  /api 做爲代理地址，前端請求使用這個來請求後端數據     /api+你的前端路由

// 直接將靜態資源（託管後的dist目錄）做爲 託管

app.use(express.static("./dist"))         //這個就是以前說的 將 build 後的靜態資源託管，優化，

   // index/.html 裏面的img icon 資源 能夠放在  託管  static目錄下

let port = process.env.PORT || config.build.port

module.exports = app.listen(port, (err) => {

if (err) {

console.log(err)

return

}

console.log("LIstening at http://localhost:" + port + "\n")

})

 

main.js：

import store from './store' // ./store -- > 直接載入個人index.js文件

 

state.js 定義數據初始值 ： 以下

const state ={

singer : {},

playing: false,

fullScreen:true,

playList:[],

sequenceList:[],

mode:playMode.sequence,

currentIndex:-1,

// 這幾個test數據

songs_test:[]

}

export default state

 

 

mutations.js 文件定義對state.js數據的修改函數

import * as types from "./mutation-type"       // 導入預約義變量 * as 寫法：表明以 types 點的方式獲取變量

 

mutation-type文件

// mutations.js 文件數據： 函數名 在mutations-types 裏面配置

export const SET_SINGER = 'SET_SINGER'

export const SET_PLAYING_STATE = 'SET_PLAYING_STATE'

export const SET_FULL_SCREEN = "SET_FULL_SCREEN"

export const SET_PLAYLIST = "SET_PLAYLIST"

export const SET_SEQUENCE_LIST = "SET_SEQUENCE_LIST"

export const SET_PLAY_MODE = "SET_PLAY_MODE"

export const SET_CURRENT_INDEX = "SET_CURRENT_INDEX"

 

const mutations = {

// import * as xx from " " 引入的： 使用的時候 [xx....]

[types.SET_SINGER](state,singer){

state.singer = singer

console.log(state.singer);

console.log("state.singer!!!");

} ,

[types.SET_PLAYING_STATE](state,flag){

state.playing = flag

},

[types.SET_FULL_SCREEN](state,flag){

state.fullScreen = flag

},

[types.SET_PLAYLIST](state,list){

state.playList = list

},

[types.SET_SEQUENCE_LIST](state,list){

state.sequenceList = list

},

[types.SET_PLAY_MODE](state,list){

state.mode = list

},

[types.SET_CURRENT_INDEX](state,index){

state.currentIndex = index

},

// songs_test

songs_test(state,test){

state.songs_test = test

}

}

export default mutations

 

getters.js 文件

 

// 在getters 中取數據 映射到 state上

export const singer = state => {

return state.singer // 返回值必須加 stste => state.singer || (state) =>{ return ...}

}

export const playing = state => state.playing

export const fullScreen = state => state.fullScreen

export const playList = state => state.playList

export const sequenceList = state => state.sequenceList

export const mode = state => state.mode

export const currentIndex = state => state.currentIndex

export const currentSong = (state) => {

return state.playList[state.currentIndex] || {}

}

// songs_test 數據

export const songs_test = state=>state.songs_test

 

 

actions.js 是做爲對mutations的提交

// 一個動做屢次提交修改mutations 封裝actions文件

import * as types from "./mutation-type"

export const selectPlay = function ({commit,state},{list,index}){

 

// commit 去改變 mutations -- 從而改變 state  commit第二個參數是傳入到了 對應函數的第二個參數位置上

commit(types.SET_SEQUENCE_LIST,list)

commit(types.SET_PLAYLIST,list)

commit(types.SET_CURRENT_INDEX,index)

commit(types.SET_FULL_SCREEN,true)

commit(types.SET_PLAYING_STATE,true)

}

 

 

router文件 index.js 

// 路由懶加載： 首頁加載速度的優化 ！！！！！！

 

// 路由懶加載 語法：

const MyRecommend = (resolve) => {

import('@/components/MyRecommend/MyRecommend').then((module) => {

resolve(module)

})

}

 

main.js 

import 'babel-polyfill'

import Vue from 'vue'

import App from './App'

import router from './router' // vue-router

import store from './store' // vuex

import '@/common/scss/index.scss'

// 消除 click 移動瀏覽器300ms延遲

import attachFastClick from 'fastclick'

attachFastClick.attach(document.body)

// 圖片懶加載

import VueLazyload from 'vue-lazyload'

Vue.use(VueLazyload, {  // 懶加載

loading: require('@/common/img/default.png')

})

Vue.config.productionTip = false

new Vue({

el: '#app',

router,

store,

template: '<App/>', // render: h => h(App)

components: { App }

})