關於我的開源項目(vue app)的一些總結

關於我的開源項目(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上翻閱，那裏都寫的很詳細了。