項目地址
https://github.com/BYChoo/record
項目簡介
此項目名叫：Record上炎。是以Vue全家桶(vue,vue-router,vuex) + axios + express + mongodb技術棧開發(fā)的一個校園考勤網(wǎng)站挑胸，專門為老師定制的揽思。網(wǎng)站目前實現(xiàn)了登錄注冊、日歷肩狂、導入文件(csv)摘完、考勤、導出缺勤名單等核心功能傻谁。
關于項目結構
剛開始著手做此項目的時候孝治，考慮到項目本身并不復雜，以視圖層來說撐死了也就六七個視圖層审磁，我就把所有視圖層組件都放在components文件夾中谈飒，再在components文件夾中新建一個common文件夾來放置復用的組件。這對于小型項目來說并沒有什么問題(like this)态蒂。但是考慮到此站往后可能會部署上線杭措，為了方便維護，我還是花了些時間對整個項目結構進行了重整：
組件：新建一個views文件夾放置視圖層的組件钾恢，如果每個視圖層需要用到的子組件多的話手素，還可以以此視圖層為核心建一個文件夾，在此文件夾中再建一個childrens文件夾放置子組件
復用組件：項目中凡是復用到的子組件統(tǒng)一放在components中
http請求：新建一個APIs文件夾瘩蚪，以視圖層面為出發(fā)點創(chuàng)建每個視圖層需要用到的.js文件
全局方法：新建一個utils文件夾泉懦，放置方法.js文件
靜態(tài)資源：關于靜態(tài)資源，基于vue-cil構建的項目中有兩個可以放置靜態(tài)資源的文件夾：static和src文件夾下的assets疹瘦，放置在static文件夾中的靜態(tài)資源是不會被webpack打包的崩哩，而src文件夾下的靜態(tài)資源則會，該放哪還是酌情考慮吧
關于http請求
不知道大家有沒有這樣子寫過http請求
// 這條http請求是請求xxx
this.$http.get('/api/demo')
.then((res) => {
// do something
})
.catch((err) => {
// throw err
})
這樣寫請求是沒問題的，但如果這條http請求是需要多次被使用到呢邓嘹？每次都要寫這樣一長串的代碼未免有點不優(yōu)雅了酣栈。針對這個問題，我決定采用把請求抽離出來汹押，以每個視圖層為每個.js文件钉嘹，把每個http請求封裝成函數(shù)然后導出，like this:
/**
* index.js
*/
const getCaledarDay = function(params) {
return new fetch({ // fetch是http請求實例
url: '/api/get_caledarDay',
method: 'get',
params
})
}
export { getCaledarDay }; // 把函數(shù)導出
/**
* index.vue
*/
...
import { getCaledarDay } from 'api/index.js'; // 引入函數(shù)
...
這樣子寫的話就能有效的規(guī)避了http請求復用的問題了
關于狀態(tài)管理
關于數(shù)據(jù)狀態(tài)管理一直是我開發(fā)Vue項目是都要考慮的問題鲸阻，一般考慮是否要用vux的狀態(tài)管理(vuex)都離不開這個考慮點：跨組件之間數(shù)據(jù)共享問題。如果跨組件之間需要共享到的數(shù)據(jù)多且龐大缨睡，那么直接vuex一把梭就好了鸟悴，不要再考慮了。但如果跨組件之間共享數(shù)據(jù)不多(酌情考慮多的概念)奖年，那么可以通過父子組件間和非父子組件的prop细诸、$emit、$on等事件來傳值也是可以的陋守。
vuex編譯后的大小25kb
關于csv文件上傳與導出功能
csv文件上傳導出可以說是此項目最關鍵的點了震贵。在開發(fā)過程csv文件上傳過程中，我發(fā)現(xiàn)了幾個可以解析csv文件的包：
- node-csv
- line-reader
- fs
其中我采用了node-csv這個類庫來開發(fā)水评，畢竟是node中專門來用解析csv文件的包猩系。此外，我還用了formidable包來模擬解析前端上傳的form表單中燥，如果不這樣做的話寇甸，前端post得csv文件會接受不到。有了formidable和node-csv開發(fā)起來就很美滋滋了疗涉。
導出csv文件部分拿霉，我采用了file-saver包來模擬csv文件的導出下載，怎么使用可以去github上翻閱咱扣，那里都寫的很詳細了绽淘。
