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

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