摘要：关于个人开源项目的一些总结项目地址项目简介此项目名叫。网站目前实现了登录注册日历导入文件考勤导出缺勤名单等核心功能。这对于小型项目来说并没有什么问题。编译后的大小关于文件上传与导出功能文件上传导出可以说是此项目最关键的点了。
关于个人开源项目(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请求是请求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上翻阅，那里都写的很详细了。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91973.html
摘要：关于个人开源项目的一些总结项目地址项目简介此项目名叫。网站目前实现了登录注册日历导入文件考勤导出缺勤名单等核心功能。这对于小型项目来说并没有什么问题。编译后的大小关于文件上传与导出功能文件上传导出可以说是此项目最关键的点了。 关于个人开源项目(vue app)的一些总结 项目地址 https://github.com/BYChoo/record 项目简介 此项目名叫：Record。是以...
摘要：官方资料微信公众平台注册小程序。官网开发文档社区开发工具部署微信小程序微信小程序本身不需要部署，在微信开发工具中直接上传代码就行。 为什么 学习 Java 三年，目前已经工作了2年，因为自学，基础差，所以打算年末总结一下常见的基础知识和面试点； 也可以通过独立做一个项目整合自己工作期间学习的知识，加深印象。 但是想着回家或是平时手机用的多，做一款APP和小程序很方便查看。 项目展示 本...
摘要：官网地址聊天机器人插件开发实例教程一创建插件在系统技巧使你的更加专业前端掘金一个帮你提升技巧的收藏集。我会简单基于的简洁视频播放器组件前端掘金使用和实现购物车场景前端掘金本文是上篇文章的序章，一直想有机会再次实践下。 2道面试题：输入URL按回车&HTTP2 - 掘金通过几轮面试，我发现真正那种问答的技术面，写一堆项目真不如去刷技术文章作用大，因此刷了一段时间的博客和掘金，整理下曾经被...
阅读 3526·2021-08-31 09:39
阅读 1797·2019-08-30 13:14
阅读 2874·2019-08-30 13:02
阅读 2750·2019-08-29 13:22
阅读 2277·2019-08-26 13:54
阅读 742·2019-08-26 13:45
阅读 1567·2019-08-26 11:00
阅读 946·2019-08-26 10:58
