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

資訊專(zhuān)欄INFORMATION COLUMN

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

since1986 / 2398人閱讀

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

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

https://github.com/BYChoo/record

項(xiàng)目簡(jiǎn)介

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

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

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

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

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

http請(qǐng)求：新建一個(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請(qǐng)求

不知道大家有沒(méi)有這樣子寫(xiě)過(guò)http請(qǐng)求

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

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

/**
 * index.js
 */

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

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

/**
 * index.vue
 */

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

這樣子寫(xiě)的話就能有效的規(guī)避了http請(qǐng)求復(fù)用的問(wèn)題了

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

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

vuex編譯后的大小25kb

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

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

node-csv

line-reader

fs

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

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

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

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

相關(guān)文章

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

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

    高勝山 評(píng)論0 收藏0

  • Java 初學(xué)者做的第一個(gè)微信小程序總結(jié)--關(guān)于Java基礎(chǔ)

    摘要：官方資料微信公眾平臺(tái)注冊(cè)小程序。官網(wǎng)開(kāi)發(fā)文檔社區(qū)開(kāi)發(fā)工具部署微信小程序微信小程序本身不需要部署，在微信開(kāi)發(fā)工具中直接上傳代碼就行。 為什么 學(xué)習(xí) Java 三年，目前已經(jīng)工作了2年，因?yàn)樽詫W(xué)，基礎(chǔ)差，所以打算年末總結(jié)一下常見(jiàn)的基礎(chǔ)知識(shí)和面試點(diǎn)； 也可以通過(guò)獨(dú)立做一個(gè)項(xiàng)目整合自己工作期間學(xué)習(xí)的知識(shí)，加深印象。 但是想著回家或是平時(shí)手機(jī)用的多，做一款A(yù)PP和小程序很方便查看。 項(xiàng)目展示 本...

    mudiyouyou 評(píng)論0 收藏0

  • 學(xué)習(xí)實(shí)踐 - 收藏集 - 掘金

    摘要：官網(wǎng)地址聊天機(jī)器人插件開(kāi)發(fā)實(shí)例教程一創(chuàng)建插件在系統(tǒng)技巧使你的更加專(zhuān)業(yè)前端掘金一個(gè)幫你提升技巧的收藏集。我會(huì)簡(jiǎn)單基于的簡(jiǎn)潔視頻播放器組件前端掘金使用和實(shí)現(xiàn)購(gòu)物車(chē)場(chǎng)景前端掘金本文是上篇文章的序章，一直想有機(jī)會(huì)再次實(shí)踐下。 2道面試題：輸入U(xiǎn)RL按回車(chē)&HTTP2 - 掘金通過(guò)幾輪面試，我發(fā)現(xiàn)真正那種問(wèn)答的技術(shù)面，寫(xiě)一堆項(xiàng)目真不如去刷技術(shù)文章作用大，因此刷了一段時(shí)間的博客和掘金，整理下曾經(jīng)被...

    mikyou 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<