关于个人开源项目(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文件会接受不到。有了formidablenode-csv开发起来就很美滋滋了。

导出csv文件部分,我采用了file-saver包来模拟csv文件的导出下载,怎么使用可以去github上翻阅,那里都写的很详细了。

    原文作者:Choo
    原文地址: https://segmentfault.com/a/1190000011287224
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞