关于个人开源项目(vue app)的一些总结

项目地址

https://github.com/BYChoo/record

项目简介

此项目名叫：Record。是以Vue全家桶(vue,vue-router,vuex) + axios + express + mongodb技术栈开发的一个校园考勤网站，专门为老师定制的。网站目前实现了登录注册、日历、导入文件(csv)、考勤、导出缺勤名单等核心功能。

关于项目结构

刚开始着手做此项目的时候，考虑到项目本身并不复杂，以视图层来说撑死了也就六七个视图层，我就把所有视图层组件都放在components文件夹中，再在components文件夹中新建一个common文件夹来放置复用的组件。这对于小型项目来说并没有什么问题(like this)。但是考虑到此站往后可能会部署上线，为了方便维护，我还是花了些时间对整个项目结构进行了重整：

组件：新建一个views文件夹放置视图层的组件，如果每个视图层需要用到的子组件多的话，还可以以此视图层为核心建一个文件夹，在此文件夹中再建一个childrens文件夹放置子组件

image.png

复用组件：项目中凡是复用到的子组件统一放在components中

http请求：新建一个APIs文件夹，以视图层面为出发点创建每个视图层需要用到的.js文件

image.png

全局方法：新建一个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文件会接受不到。有了formidable和node-csv开发起来就很美滋滋了。

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