關於個人開源專案(vue app)的一些總結
專案地址
https://github.com/BYChoo/record
專案簡介
此專案名叫：Record。是以Vue全家桶(vue,vue-router,vuex) + axios + express + mongodb技術棧開發的一個校園考勤網站，專門為老師定製的。網站目前實現了登入註冊、日曆、匯入檔案(csv)、考勤、匯出缺勤名單等核心功能。
關於專案結構
剛開始著手做此專案的時候，考慮到專案本身並不複雜，以檢視層來說撐死了也就六七個檢視層，我就把所有檢視層元件都放在components資料夾中，再在components資料夾中新建一個common資料夾來放置複用的元件。這對於小型專案來說並沒有什麼問題(like this)。但是考慮到此站往後可能會部署上線，為了方便維護，我還是花了些時間對整個專案結構進行了重整：
元件：新建一個views資料夾放置檢視層的元件，如果每個檢視層需要用到的子元件多的話，還可以以此檢視層為核心建一個資料夾，在此資料夾中再建一個childrens資料夾放置子元件
複用元件：專案中凡是複用到的子元件統一放在components中
http請求：新建一個APIs資料夾，以檢視層面為出發點建立每個檢視層需要用到的.js檔案
全域性方法：新建一個utils資料夾，放置方法.js檔案
靜態資源：關於靜態資源，基於vue-cil構建的專案中有兩個可以放置靜態資源的資料夾：static和src資料夾下的assets，放置在static資料夾中的靜態資源是不會被webpack打包的，而src資料夾下的靜態資源則會，該放哪還是酌情考慮吧
關於http請求
不知道大家有沒有這樣子寫過http請求
// 這條http請求是請求xxx
this.$http.get(`/api/demo`)
.then((res) => {
// do something
})
.catch((err) => {
// throw err
})這樣寫請求是沒問題的，但如果這條http請求是需要多次被使用到呢？每次都要寫這樣一長串的程式碼未免有點不優雅了。針對這個問題，我決定採用把請求抽離出來，以每個檢視層為每個.js檔案，把每個http請求封裝成函式然後匯出，like this:
/**
* index.js
*/
const getCaledarDay = function(params) {
return new fetch({ // fetch是http請求例項
url: `/api/get_caledarDay`,
method: `get`,
params
})
}
export { getCaledarDay }; // 把函式匯出
/**
* index.vue
*/
...
import { getCaledarDay } from `api/index.js`; // 引入函式
...
這樣子寫的話就能有效的規避了http請求複用的問題了
關於狀態管理
關於資料狀態管理一直是我開發Vue專案是都要考慮的問題，一般考慮是否要用vux的狀態管理(vuex)都離不開這個考慮點：跨元件之間資料共享問題。如果跨元件之間需要共享到的資料多且龐大，那麼直接vuex一把梭就好了，不要再考慮了。但如果跨元件之間共享資料不多(酌情考慮多的概念)，那麼可以通過父子元件間和非父子元件的prop、$emit、$on等事件來傳值也是可以的。
vuex編譯後的大小25kb
關於csv檔案上傳與匯出功能
csv檔案上傳匯出可以說是此專案最關鍵的點了。在開發過程csv檔案上傳過程中，我發現了幾個可以解析csv檔案的包：
- node-csv
- line-reader
- fs
其中我採用了node-csv這個類庫來開發，畢竟是node中專門來用解析csv檔案的包。此外，我還用了formidable包來模擬解析前端上傳的form表單，如果不這樣做的話，前端post得csv檔案會接受不到。有了formidable和node-csv開發起來就很美滋滋了。
匯出csv檔案部分，我採用了file-saver包來模擬csv檔案的匯出下載，怎麼使用可以去github上翻閱，那裡都寫的很詳細了。