【面向ACG編程】連續改造2個Vue網頁

時間 2019-11-17

原文原文鏈接

記得陰明大大在vueconf上說過：抱着一種解決問題的態度去學習知識是最有效率的。做爲一名小白，以前學習Vue老是被動的，規定天天看一點文檔，寫一點代碼。總以爲不得勁。因而就想能不能給本身定個小目標，用Vue作他個網站！css

移動端網址：justice-eternal.github.io/
PC端網址：lightmoon.pw
曲庫地址：github.com/zytx121/jus…vue

樂譜庫的創建

後來偶然看到了BGAIssueBlog，以爲很巧妙的利用了GitHub提供的issue的api，比單純的md博客更具功能性。下面是做者列出的經過 Issues 記錄學習筆記的優勢：ios

在線編輯和預覽，隨時添加和提交（不用擔憂電腦壞了致使筆記丟失）

當筆記裏到嵌套圖片時，支持粘貼屏幕截圖和拖拽添加圖片

帶有搜索和排序功能

可經過 Label 來對 Issues 進行分類

能夠把每個 Comment 做爲一個小的知識點不停的追加到 Issue 裏

結合 GitHub Pages 綁定域名來搭建我的博客站點

因而就想能不能用issue的特性作一個比較新奇的網站呢？

而後我就開始想啊想，怎麼想都想不出什麼好點子。一天，和往常同樣上山跑步的時候，跑着跑着忽然靈光一閃，想到了本身關注的 Justice_Eternal 口琴吧！一個口琴大佬雲集的貼吧。該吧有大量的口琴大佬義務扒取各類新番ACG的譜曲併發布在貼吧裏。大量的譜子分散在各個貼子裏面，若是可以將這些譜子集中起來保存，豈不是查找的時候很方便？因而回到家後，我立馬去貼吧逛了一圈，發現已經有了一個利用wordpress作的譜曲資源站，裏面已經對進行了樂譜精心的分類。可是該站是租用的服務器，對於一個貼吧來講，網站的運營成本無疑是最大的問題。要知道，該站基本上是靠貼吧的各位捐款才勉強維持下來的。這更加堅決了我推行github樂譜庫的決心吧！git

隨後我又本身分析了用issue實現樂譜庫的優勢：程序員

github倉庫徹底開源，擁有github完善的API支持，相比於封閉的wordpress數據，更利於樂譜數據的保存與調用

一樣的緣由，每一個人的博客或者網站都能自由調用樂譜庫中的數據！賽高！

github-pages創建的網頁徹底免費

issue自帶搜索和排序功能，可以實現特定曲譜的搜索

issue有本身的Label系統，可以對譜曲按照首字母等標籤進行分類，方便查找

將每一個issue的title定義爲一個做品的名稱，後續能夠經過comment添加該做品的譜曲

能夠將利用project爲部分issues建立特輯，如：LL大法

用戶能夠利用issue的comment功能進行評論，交流吹奏心得，放置吹奏錄音或視頻連接

用戶可以在線編輯和預覽上傳的譜曲，並在發佈後隨時修改

支持複製粘貼和拖拽添加樂譜的封面圖片

由於是境外服務器，一些有擦邊球行爲的動漫圖片不會被牆（你懂的），大量galgame譜上線中。。。

完美！！！github

而後我參考moeje.org這個wordpress網站的譜曲格式寫了個ISSUE_TEMPLATE.md文件，放在網頁根目錄的.github文件夾裏。正則表達式

<!-- 
上面的Title請務必填寫譜子出自的做品名！
上面的Title請務必填寫譜子出自的做品名！
上面的Title請務必填寫譜子出自的做品名！

只有當第一次提交一個新做品的譜子時，才須要新建一個new issue和填寫Title！
由於一個做品（issue）下面能夠提交（comment）屢次譜子，因此以後每次該做品的譜子只須要在相應issue下以相同格式comment便可。comment時能夠將issue模板複製，選擇Add a saved reply，保存爲本身的回答模板。

-->

# 譜曲名稱（替換）

<!-- 歌曲配圖  複製粘貼到該處便可 -->


## 歌曲信息

- ![](https://img.shields.io/badge/專輯-未知-ff69b4.svg)
- ![](https://img.shields.io/badge/做詞-未知-orange.svg)
- ![](https://img.shields.io/badge/做曲-未知-blue.svg)
- ![](https://img.shields.io/badge/編曲-未知-brightgreen.svg)
- ![](https://img.shields.io/badge/歌手-未知-d6504f.svg)


## 譜

【```】

譜子示例
#1#2#3#2
#1#2#3#2
#1#2#3#2

【```】

[![](https://img.shields.io/badge/扒譜-@扒譜大佬的ID-ff69b4.svg)](扒譜大佬的貼吧url)

<!-- 

[^_^]:
      請嚴格遵照上述格式提交樂譜，若是不符合規範，做者有權將其刪除。
      若是連接出錯請檢查是否有空格，有的話請刪去。
      若是信息缺省，刪掉對應代碼便可。
      ps. 若是有什麼想說的話能夠寫在最後，但不能影響上述格式。

-->複製代碼

具體效果以下：vue-router

這裏科普一下，由於JE吧專一於ACG口琴演奏，而半音階口琴的音色是最適合ACG樂曲的，因此這裏的譜默認都是半音階口琴譜，也就是c調，數字譜。關於【】,（）, # 等符號請參考使用說明。vuex

PC端的創建

接着，我就開始着手pc端的展現網頁改造（徹底是以BGAIssueBlog)爲模板，由於以前徹底沒有本身獨立作過vue網站）。一開始只是換了倉庫名，改動了一下側邊欄，修改了一下element-ui的主題色。經過閱讀這個項目的代碼，學習了用axios調用GitHub接口：vue-cli

/*
github API的調用
 */

module.exports = {
  getLabels (vue) {
    return vue.$http.get(`https://api.github.com/repos/${vue.$store.getters.context}/labels`)
  },
  getGitHubUser (vue) {
    return vue.$http.get(`https://api.github.com/users/${vue.$store.getters.gitHubUsername}`)
  },
  getUserInfo (vue) {
    return vue.$http.all([this.getGitHubUser(vue), this.getLabels(vue)])
  },
  getIssues (vue, data) {
    let label = ''
    if (data.label && data.label.trim().length > 0) {
      label = `+label:${data.label}`
    }

    return vue.$http.get(`https://api.github.com/search/issues?q=${data.keyword}+state:open+repo:${vue.$store.getters.context}${label}&sort=created&order=desc&page=${data.currentPage}&per_page=${data.pageSize}`)
  },
  getIssue (vue, number) {
    return vue.$http.get(`https://api.github.com/repos/${vue.$store.getters.context}/issues/${number}`)
  },
  getComments (vue, url) {
    return vue.$http.get(url)
  },
  getReadme (vue) {
    return vue.$http.get(`https://raw.githubusercontent.com/${vue.$store.getters.context}/master/README.md`)
  },
  getInstruction (vue) {
    return vue.$http.get(`https://raw.githubusercontent.com/${vue.$store.getters.context}/master/instruction.md`)
  },
  getRepos (vue, data) {
    return vue.$http.get(`https://api.github.com/users/${vue.$store.getters.gitHubUsername}/repos?sort=stargazers_count&order=desc&page=1&per_page=100`)
  }
}複製代碼

用marked.js渲染markdown文件，highlight.js代碼高亮,github-markdown-css將渲染後的markdown設置成github的樣式。

利用vuex儲存label狀態，在各個組件中獲取和改變其屬性。後來依葫蘆畫瓢，利用vuex和正則表達式添加了label的部分展現/隱藏功能。

const SET_LABELS = 'SET_LABELS'
const SET_ACTIVE_LABEL = 'SET_ACTIVE_LABEL'
const SET_SHOWLABELS = 'SET_SHOWLABELS'

const state = {
  labels: [],
  activeLabel: null,
  showLabels: true,
}

const mutations = {
  [SET_LABELS] (state, labels) {
    state.labels = labels
  },
  [SET_SHOWLABELS] (state, showLabels) {
    state.showLabels = !state.showLabels
  },
  [SET_ACTIVE_LABEL] (state, label) {
    if ((state.activeLabel && label && label.name === state.activeLabel.name) || (!state.activeLabel && !label)) {
      return
    }

    state.activeLabel = label
  }
}

const actions = {
  setLabels: makeAction(SET_LABELS),
  setShowLabels: makeAction(SET_SHOWLABELS),
  updateActiveLabel: makeAction(SET_ACTIVE_LABEL),
}

const getters = {
  labels: (state) => {
    return state.labels
  },
  labels1: (state) => {
    return state.labels.filter(label => label.name.match(/^[A-Z]$/))
  },
  showLabels: (state) => {
    return state.showLabels
  },
  activeLabel: (state) => {
    return state.activeLabel
  }
}

export default {
  state,
  mutations,
  getters,
  actions
}複製代碼

到這裏，基礎的改造工做就結束了。已經可以正常顯示樂譜了（默認只顯示按首字母分類的標籤）

目前譜曲庫庫存告急，正在緊急搬運中- -！歡迎同道中人來作苦力！曲庫地址

但是我以爲光是有這個查樂譜的功能未免太單調。因而就想，可否加入幾個別的功能。既然是ACG口琴網站，那麼acg元素和口琴固然是少不了的。因而我就着手進行口琴錄音播放以及口琴視頻播放這兩個功能的製做。首先作的是視頻部分。說到acg視頻，我首先想到的就是b站了。而後我就在GitHub搜有沒有b站的API什麼的。後來在掘金上看到一篇用Vue和typescript重構aplayer播放器的文章。而後我就點進去看了看，以爲這個音頻播放器設計的超級漂亮！接着我順藤摸瓜，無心間發現了DIYgod大佬。其倉庫下有無數動漫相關傑做，如 aplayer和dplayer。天啦，這正是我想要的！對了，以前那個ISSUE_TEMPLATE.md文件也是DIYgod大佬教我設置的！感謝！

接着參照doc，我新建了一個頁面，而後引入了DPlayer播放器，值得一提的是該播放器是支持彈幕播放以及彈幕發送的喲！

video: {
          url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=1845743',
          pic: 'http://upload-images.jianshu.io/upload_images/2141706-0be35df51011b7b8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240'
        },
        danmaku: {
          id: 'zy00000001',
          api: 'https://api.prprpr.me/dplayer/',
          addition: ['https://api.prprpr.me/dplayer/bilibili?aid=1845743']
        }複製代碼

其中danmaku.id字段是指向DIYgod本身的彈幕後端DPlayer-backend裏面的彈幕數據，每一個視頻的這個須要獨一無二（doc裏面有個列表），否則會和別人存的彈幕車禍。而danmaku.addition則是指向b站的彈幕數據，能夠讀取指定aid視頻的彈幕，並顯示出來。最後顯示在你屏幕前的彈幕是由兩部分組成的，而你發送的彈幕會存在DPlayer-backend裏面。

最後我又同理，在側邊欄加入了aplayer，自動播放口琴演奏的宮崎駿動漫組曲！其實糾結了很久好不要用narrow模式- -！PC端大功告成！

技術棧：vue + vue-router + vuex + axios 全家桶，以及element-ui

移動端的創建

將PC端公佈在貼吧以後，因爲感覺到了貼吧小夥伴們的熱情！因爲不少吧友都但願可以在手機上使用本網站，而本來的pc端博客不能很好的相應移動端。本着服務羣衆的想法，我又開始了移動端的開發。本想一步到位作個響應式網站，也找了個響應式 material design ui ，但無奈本身徹底沒有相似經驗，從ui開始實現對我來講話費的時間可能會很長。本着學習的目的，因而我就去找了個移動端的輪子來改造。嘗試了一把百度的lavas，把文檔通讀了一遍，界面什麼都很鐘意。可是由於默認使用PWA的service worker ，沒辦法使用github-pages生成。以省錢爲第一要務的我，果斷放棄。接着我又找到了github上面的一個項目 Vue.js仿嗶哩嗶哩動畫移動端。並以此爲基礎，開始了網站的改造。期間請教了做者許多問題，都獲得很好的解決，因此在這裏必須感謝一下youhonglian！

錄音播放部分

在PC端原有的樂譜查詢和視頻播放上，我又用aplayer添加了一個頁面專門播放大佬們的口琴錄音。

視頻部分

在視頻播放頁面上出現了一些問題。。。關於跨域

因爲原來的項目的部分接口使用的是b站的，本地開發的時候設置了代理，因此可以正常使用。可是部署在github上面後，問題出現了。根據MDN文檔HTTP訪問控制（CORS）致使跨域並不是不必定是瀏覽器限制了發起跨站請求，而也多是跨站請求能夠正常發起，可是返回結果被瀏覽器攔截了。經過查看開發者面板中的Network，發現請求確實發出去了，可是沒有迴應。因而我就矇蔽了，以前PC端爲何沒有出現這種狀況？難道DIYgaod提供的API沒有跨域嗎？接着我惡補了一下關於跨域的相關知識，作了以下總結。

首先，本地開發的時候。實際上，vue生成的靜態頁面是在express服務器上運行。當靜態頁面發出get請求後，express服務器可以監聽到，去相應的的域名拿到數據並返回給靜態頁面。
當咱們把靜態頁面上傳到服務器後，其實能夠把服務器當作咱們的電腦。因爲瀏覽器禁止一個域名（咱們的網站）的 JS ，在未經容許的狀況下讀取另外一個域名（例如：b站api）的內容（這也是爲何咱們要跨域的緣由）。因此當靜態頁面提出一個請求後，咱們須要設置服務器，讓他去api服務器拿到數據，而後轉交給咱們的靜態頁面（也就是反向代理）。其實就是開發環境express服務器作的事！

github-pages只能渲染靜態頁面，而靜態頁面裏面的js代碼沒辦法獲取到b站api的內容（跨域）
正向代理隱藏真實客戶端，反向代理隱藏真實服務端
跨域解決方案之一：jsonp，然而axios不支持jsonp。另外，jsonp不能發post請求，無論是否跨域，只要用jsonp方式就只能是get，由於本質是script方式加載的。
設置vue-cli模板裏面config中的proxyTable後，能夠解決開發環境的跨域問題。
目前主流解決辦法：讓後端的同事設置header（詳情參考：HTTP訪問控制（CORS））

因爲手機沒法使用dplayer的彈幕功能，因此我直接使用了video標籤播放視頻，使用的是 journey-ad的api。我將關於api跨域的疑問告訴了journey-ad，終於解決了這個問題。原來他在全部公開的api的響應頭都加了Access-Control-Allow-Origin: *字段，因此能夠被任何網頁發起調用。

回去又讀了一遍MDN文檔：

Access-Control-Allow-Origin: * 
表示全部域名都能訪問該資源
Access-Control-Allow-Origin: lightmoon.pw
表示除了lightmoon.pw，其它外域均不能訪問該資源複製代碼

看來之因此訪問b站api跨域是由於它沒有對全部人開放，而對於dplayer和imjad這類api是對全部人開放的，因此設置了Access-Control-Allow-Origin: *響應頭，解決了跨域問題。而對於開發環境下的跨域，全均可以經過設置服務器代理來解決。可是對於生產環境下沒法配置服務器的（好比github），便沒法訪問那些不對外開放的api了。

可是這類開放的b站api視頻都只能經過電腦播放，在手機上都播放不了。最後我只好用最笨的方法，經過下載對應的視頻上傳到七牛雲生成連接解決。不過視頻的相關標籤和評論仍是調用的api的數據。（在此向觀衆老爺提問：有什麼更好的解決辦法嗎？）

譜曲庫部分

將pc段的代碼整合了進來。( 注意：移動端項目中使用了vue-axios插件，而PC段是沒有使用的，因此做爲一個處女座，必須注意axios代碼寫法的統一) 而後，稍微改了下label的樣式，以及內容的佈局。

最後又改了下sidebar和header。

技術棧：vue + vue-router + vuex + axios 全家桶，以及mint-ui

完結撒花！！！

很開心已經有github上面的ACG粉開始義務上傳樂譜了！做者本身也會抽空上傳樂譜。但願有更多熱愛ACG和樂器的程序員大佬加入咱們。目前的樂譜的主要來源是moeje.org以前整理的譜曲，以及貼吧中的譜樓。

經過這此網頁的改寫讓我知道了本身的不足，也學到了很多之前徹底沒有涉及的知識，獲得了許多大佬的指點。果真如同陰明大佬所說：抱着一種解決問題的態度去學習知識是最有效率的。連續三天沒日沒夜的擼代碼，終於把本身腦海中的東西基本實現了，也加深了對vue的理解。雖然此次網站改寫並不複雜，但也暴露出了個人不少問題，看來接下來本身還須要先在基礎知識方面多多努力，好好啃一啃高程和CSS權威指南。