炸雞音樂，vue，spa項目分析
阿新 • • 發佈：2018-07-25
icon lag new 生成 r.js 網絡加載 serve 首頁 方式
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) }) }
項目描述：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) }) }
炸雞音樂，vue，spa項目分析