關于個人開源項目(vue app)的一些總結

since1986 發布于2019-08-22 11:12 / 2395人閱讀

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

關于個人開源項目(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

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

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

云服務器 GPU云服務器 vps日常維護中的一些要點總結關于點評賺錢的app webrtc的開源項目基于webrtc的開源項目

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91973.html

關于個人開源項目(vue app)的一些總結

摘要：關于個人開源項目的一些總結項目地址項目簡介此項目名叫。網站目前實現了登錄注冊日歷導入文件考勤導出缺勤名單等核心功能。這對于小型項目來說并沒有什么問題。編譯后的大小關于文件上傳與導出功能文件上傳導出可以說是此項目最關鍵的點了。關于個人開源項目(vue app)的一些總結項目地址 https://github.com/BYChoo/record 項目簡介此項目名叫：Record。是以...

高勝山 2019-08-29 13:29 評論0 收藏0
Java 初學者做的第一個微信小程序總結--關于Java基礎

摘要：官方資料微信公眾平臺注冊小程序。官網開發文檔社區開發工具部署微信小程序微信小程序本身不需要部署，在微信開發工具中直接上傳代碼就行。為什么學習 Java 三年，目前已經工作了2年，因為自學，基礎差，所以打算年末總結一下常見的基礎知識和面試點；也可以通過獨立做一個項目整合自己工作期間學習的知識，加深印象。但是想著回家或是平時手機用的多，做一款APP和小程序很方便查看。項目展示本...

mudiyouyou 2019-08-16 14:30 評論0 收藏0
學習實踐 - 收藏集 - 掘金

摘要：官網地址聊天機器人插件開發實例教程一創建插件在系統技巧使你的更加專業前端掘金一個幫你提升技巧的收藏集。我會簡單基于的簡潔視頻播放器組件前端掘金使用和實現購物車場景前端掘金本文是上篇文章的序章，一直想有機會再次實踐下。 2道面試題：輸入URL按回車&HTTP2 - 掘金通過幾輪面試，我發現真正那種問答的技術面，寫一堆項目真不如去刷技術文章作用大，因此刷了一段時間的博客和掘金，整理下曾經被...

mikyou 2019-08-29 12:50 評論0 收藏0