關(guān)于個(gè)人開源項(xiàng)目(vue app)的一些總結(jié)

高勝山發(fā)布于2019-08-29 13:29 / 1130人閱讀

摘要：關(guān)于個(gè)人開源項(xiàng)目的一些總結(jié)項(xiàng)目地址項(xiàng)目簡介此項(xiàng)目名叫。網(wǎng)站目前實(shí)現(xiàn)了登錄注冊日歷導(dǎo)入文件考勤導(dǎo)出缺勤名單等核心功能。這對于小型項(xiàng)目來說并沒有什么問題。編譯后的大小關(guān)于文件上傳與導(dǎo)出功能文件上傳導(dǎo)出可以說是此項(xiàng)目最關(guān)鍵的點(diǎn)了。

關(guān)于個(gè)人開源項(xiàng)目(vue app)的一些總結(jié) 項(xiàng)目地址

https://github.com/BYChoo/record

項(xiàng)目簡介

此項(xiàng)目名叫：Record。是以Vue全家桶(vue,vue-router,vuex) + axios + express + mongodb技術(shù)棧開發(fā)的一個(gè)校園考勤網(wǎng)站，專門為老師定制的。網(wǎng)站目前實(shí)現(xiàn)了登錄注冊、日歷、導(dǎo)入文件(csv)、考勤、導(dǎo)出缺勤名單等核心功能。

關(guān)于項(xiàng)目結(jié)構(gòu)

剛開始著手做此項(xiàng)目的時(shí)候，考慮到項(xiàng)目本身并不復(fù)雜，以視圖層來說撐死了也就六七個(gè)視圖層，我就把所有視圖層組件都放在components文件夾中，再在components文件夾中新建一個(gè)common文件夾來放置復(fù)用的組件。這對于小型項(xiàng)目來說并沒有什么問題(like this)。但是考慮到此站往后可能會(huì)部署上線，為了方便維護(hù)，我還是花了些時(shí)間對整個(gè)項(xiàng)目結(jié)構(gòu)進(jìn)行了重整：

組件：新建一個(gè)views文件夾放置視圖層的組件，如果每個(gè)視圖層需要用到的子組件多的話，還可以以此視圖層為核心建一個(gè)文件夾，在此文件夾中再建一個(gè)childrens文件夾放置子組件

復(fù)用組件：項(xiàng)目中凡是復(fù)用到的子組件統(tǒng)一放在components中

http請求：新建一個(gè)APIs文件夾，以視圖層面為出發(fā)點(diǎn)創(chuàng)建每個(gè)視圖層需要用到的.js文件

全局方法：新建一個(gè)utils文件夾，放置方法.js文件
靜態(tài)資源：關(guān)于靜態(tài)資源，基于vue-cil構(gòu)建的項(xiàng)目中有兩個(gè)可以放置靜態(tài)資源的文件夾：static和src文件夾下的assets，放置在static文件夾中的靜態(tài)資源是不會(huì)被webpack打包的，而src文件夾下的靜態(tài)資源則會(huì)，該放哪還是酌情考慮吧

關(guān)于http請求

不知道大家有沒有這樣子寫過http請求

// 這條http請求是請求xxx
this.$http.get("/api/demo")
  .then((res) => {
    // do something  
  })
  .catch((err) => {
    // throw err
  })

這樣寫請求是沒問題的，但如果這條http請求是需要多次被使用到呢？每次都要寫這樣一長串的代碼未免有點(diǎn)不優(yōu)雅了。針對這個(gè)問題，我決定采用把請求抽離出來，以每個(gè)視圖層為每個(gè).js文件，把每個(gè)http請求封裝成函數(shù)然后導(dǎo)出，like this:

/**
 * index.js
 */

const getCaledarDay = function(params) {
  return new fetch({      // fetch是http請求實(shí)例
    url: "/api/get_caledarDay",
    method: "get",
    params
  })
}

export { getCaledarDay }; // 把函數(shù)導(dǎo)出

/**
 * index.vue
 */

...
import { getCaledarDay } from "api/index.js"; // 引入函數(shù)
...

這樣子寫的話就能有效的規(guī)避了http請求復(fù)用的問題了

關(guān)于狀態(tài)管理

關(guān)于數(shù)據(jù)狀態(tài)管理一直是我開發(fā)Vue項(xiàng)目是都要考慮的問題，一般考慮是否要用vux的狀態(tài)管理(vuex)都離不開這個(gè)考慮點(diǎn)：跨組件之間數(shù)據(jù)共享問題。如果跨組件之間需要共享到的數(shù)據(jù)多且龐大，那么直接vuex一把梭就好了，不要再考慮了。但如果跨組件之間共享數(shù)據(jù)不多(酌情考慮多的概念)，那么可以通過父子組件間和非父子組件的prop、$emit、$on等事件來傳值也是可以的。

vuex編譯后的大小25kb

關(guān)于csv文件上傳與導(dǎo)出功能

csv文件上傳導(dǎo)出可以說是此項(xiàng)目最關(guān)鍵的點(diǎn)了。在開發(fā)過程csv文件上傳過程中，我發(fā)現(xiàn)了幾個(gè)可以解析csv文件的包：

node-csv

line-reader

其中我采用了node-csv這個(gè)類庫來開發(fā)，畢竟是node中專門來用解析csv文件的包。此外，我還用了formidable包來模擬解析前端上傳的form表單，如果不這樣做的話，前端post得csv文件會(huì)接受不到。有了formidable和node-csv開發(fā)起來就很美滋滋了。

導(dǎo)出csv文件部分，我采用了file-saver包來模擬csv文件的導(dǎo)出下載，怎么使用可以去github上翻閱，那里都寫的很詳細(xì)了。

GPU云服務(wù)器云服務(wù)器 vps日常維護(hù)中的一些要點(diǎn)總結(jié) 關(guān)于點(diǎn)評賺錢的app webrtc的開源項(xiàng)目基于webrtc的開源項(xiàng)目

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/112636.html

發(fā)表評論

登陸后可評論

0條評論

高勝山

男|高級講師

我要關(guān)注我要私信

TA的文章

Linux課程適合0基礎(chǔ)學(xué)嗎？要學(xué)習(xí)哪些內(nèi)容？

閱讀 3005·2021-11-25 09:43
Tokyonline：$79.5/月/2GB內(nèi)存/60GB空間/10TB流量/200Mbps-500

閱讀 3628·2021-11-24 11:13
為什么智能硬件最重要的功能是軟件升級？

閱讀 3401·2021-10-14 09:42
Hostwinds：機(jī)房托管套餐，月付$8刀起，非托管套餐，月付$5刀起

閱讀 2600·2021-09-23 11:53
網(wǎng)站主機(jī)用什么系統(tǒng)-哪個(gè)主機(jī)管理系統(tǒng)好用？

閱讀 3641·2021-09-22 15:57
RAKsmart：註冊即送10美金新人紅包！??！

閱讀 3261·2021-09-02 09:54
談?wù)凱ostCSS

閱讀 3532·2019-08-30 13:47
前端每日實(shí)戰(zhàn)：153# 視頻演示如何用 CSS 和原生 JS 創(chuàng)作一組 tooltip 提示框

閱讀 1667·2019-08-29 16:55

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

關(guān)于個(gè)人開源項(xiàng)目(vue app)的一些總結(jié)

相關(guān)文章