资金管理在线系统

.引言1.1本文的目的和意义随着时代的发展，现阶段企业都在走信息化的道路，而且大型企业业务繁多，往往需要开发大量、种类繁多的系统软件。这些软件不仅能够有效的解决公司业务方面的问题，而且能帮助公司节约成本，避免浪费大量的人力[1]。在管理信息控制中，我们通过信息来控制企业的整个生产过程和服务过程的运作，我们通过分析数据来不断调整企业的战略计划，依靠信息从而更好地管理公司的运作。企业中有很多失败的战略计划，究其原因，是因为没有好好分析自己的公司情况，盲目更风，直接导致了公司的损失。在资金管理中，企业时刻面临资金方面的各种风险。由改革开放走到今天，我国企业越来越正规化、规模化、集团化。而随着企业的变化发展，每天都会产生大量的资金流入流出，仅有资金记录的功能已经不能满足日益增长的市场了。市面上有许多大型的资金在线管理系统，但是，对于小公司而言，很多的功能却不需要用上，但是我们使用大型系统却要支付很大的开销，因此，本人开发了一套适用于小公司的资金管理系统。本课题研究的资金管理在线系统，通过对小型企业真实的内部数据分析，开发了这套系统，该系统能应对各种小型公司会遇到的问题，却没有很多用不上的功能。1.2国内外研究现状近几年随着互联网的兴起，Web应用也火了起来，市面上不断推出新框架。就前端框架而言，目前业界主要是用Vue.js、Angular、React这三种框架。React起源于Facebook。外国人会把自己经常使用的方法封装，以便之后使用，这便是React的由来。React相较于其他两个框架，框架思想大有不同，它的核心是虚拟DOM[2]，能大幅度优化代码的速度。但是它不能做一个单独的开发框架进行项目研发，必须和其他插件配合使用，但是这不阻碍它的人气是最高的。它的生态圈很繁荣，有大量优秀的程序员会在它的社区贡献代码。Angular是一个由Google公司开发的一款框架，第一版诞生于2009年，领先其余两个框架。Angular现在已经更新到版本7，它分为四个团队开发，一起更新，AngularJS已经停止更新了。Angular是MVC框架[1]，它为其余两个框架提供了大量灵感。Angular拥有指令、双向数据绑定、注入服务等特性。Angular可以称之为一个完整的框架了，它可以单独开发一个完整的框架，它通常被应用于大型的项目。Vue.js是最近两年诞生的一款非常优秀的轻量级前端框架，它仅聚焦于视图层。它是由中国人自己创建的框架，它的中文文档非常友好，学习者能很快的上手。它结合了前面两个框架的优点，它有数据驱动，组件之间相互结合，又有指令，数据绑定[2]。它是一个完整的框架，可以单独开发一个项目，但是只能适用于小项目，但是它也有很多的插件可以使用，背后也有阿里的支持。Vue.js虽然诞生的较晚，但是用户体量却一点不输给其他两个框架。虽然生态圈不如前面两个框架的繁荣，但是也是呈上升趋势。1.3本文的主要工作和组织结构本课题的研发目标是设计一款用于企业资金信息化的基于MVVM设计模式的管理系统，并将其应用到公司内部。该系统开发、封装了一些通用的开发组件，以及实现了各个系统的通用基础模块，如登录，注册、查看个人信息等模块。第一章引言，主要介绍课题的研究背景与意义，还介绍了国内外流行的框架，最后介绍了前端框架技术。第二章系统开发工具，首先介绍了系统的开发环境，最后介绍了开发工具visualstudiocode的前景和优势。第三章系统总体分析，首先对原理进行深度剖析，然后展示系统的具体实现页面，最后介绍页面实现的功能，以及系统运行中所需要的插件。第四章系统实现，本文介绍了该系统前后端使用的技术，以及部分页面的展示。2.系统开发工具2.1开发环境简介本程序的IDE是VSCode，是微软公司开发的一款跨平台编辑器，使用IntelliSense超越语法突出显示和自动完成功能，IntelliSense提供基于变量类型，函数定义和导入模块的智能完成。从编辑器直接调试代码。启动或附加到正在运行的应用程序，并使用断点，调用堆栈和交互式控制台进行调试。与Git和其他SCM提供商合作从未如此简单。从编辑器中直接查看差异，阶段文件和提交。从任何托管的SCM服务推送和拉取。而且，你需要下载什么插件，你就下载什么从插件，就可以换一种语言开发，还有多种主题，可以自己选择。页面的搭建，本文使用的是Vue框架和Element-UI类库来编写页面，Vue是一套渐进式框架，它聚焦于视图层的开发，它不需要知道底层代码如何运作，便可生成一套完整的代码。在Vue开发中，官方是不建议直接操作DOM元素的，因为直接操作DOM元素十分损耗性能，会大量导致重绘和重排。Vue内部提供了很多的指令，服务来代替它，例如，v-for可以通过遍历数据动态生成标签。Vue是单页面应用，可以通过哈希值来实现页面的跳转，页面内部分资源不需要重新下载，很多移动端便是采用单页面的应用。Vue是单文件组件，不同于Angular模块化开发，Vue是组件化开发，通过不同组件的组合，组成我们想要的应用。Vue自身并不是一个全能框架，但是它的生态圈十分强大，可以搭配你想要的插件就可以完成一个完整的项目。后台的处理，本文使用的Node.js，Node.js是一门技术，不是一门语言，它的语言就是JavaScript，所以Node.js对本文前端人员是很友好的，本文能很快的上手，不用重新学一门语言，就可以很轻松的开发后台，本文不用浪费大量的时间再重新学一门语言，只用看一些基本的操作就可以满足前端人员的开发，本文选择了非关系型数据库MongoDB，不像关系型数据库那样对字段要求的十分严格，非关系数据库对数据要求的比较松散，也比较符合本文的代码需求，所以本文选择的数据库是MongoDB，MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。非关系型数据库对表的类型相较于关系型数据库，简直是没有要求，后期可以随意添加字段。对于关系型数据库，如果表的类型已经定好，后期开发中需要更改字段那是不允许的，必须重新建表，插入数据，后期一旦更改，那将面临巨大损失，而非关系型数据库则不用担心这一点，它可以很好的面对数据结构会经常变化的情况。它的查询系统也是非常优秀，可以提供多种查询方法，有效查询数据。2.2VSCode概述Microsoft在2015年4月30日Build开发者大会上正式宣布了VisualStudioCode项目：一个运行于MacOSX、Windows和Linux之上的，针对于编写现代Web和云应用的跨平台源代码编辑器。当年的“伊妹儿”如今依旧存在与人们生活中，并且他的传递速度也有了质的飞跃，功能也更为强大，邮箱客户端的种类也繁多，用户完全可以根据自己的喜好以及需求来选择一款适合自己使用的邮箱客户端。这标志着微软公司第一次向开发者们提供了一款真正的跨平台编辑器。虽然完整版的VisualStudio仍然是只能运行在Windows和macOS（MacOSX）之上，但是这一次的声明向本文展示了微软公司对于支持其他计算机平台的承诺[3]。很多人都使用Windows作为他们的开发环境，但是还有很多人使用Linux和Mac。本文想让他们能够在他们习惯的平台上使用本文公司的产品，而不是非要迁徙到Windows上。这些平台上的很多开发者们也更乐意于使用像SublimeText这种轻量级的代码编辑器，而非像VisualStudio这种全特性的IDE。该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntaxhighlighting），可定制的热键绑定（customizablekeyboardbindings），括号匹配（bracketmatching）以及代码片段收集（snippets）。Somasegar也告诉笔者这款编辑器也拥有对Git的开箱即用的支持。2.3VSCode特性（1）IntelliSense使用IntelliSense超越语法突出显示和自动完成功能，IntelliSense提供基于变量类型，函数定义和导入模块的智能完成[4]。有时，内置函数名字复杂且复杂，这是代码提示就很有必要，不用频繁看API文档，提高使用者的速度。但是程序员也不能完全依赖代码提示，这是基本功，基本功扎实，才能走的更远。（2）断点调试编辑器内可以直接调试代码。启动或附加到正在运行的应用程序，并使用断点，调用堆栈和交互式控制台进行调试[5]。作为前端开发人员，只会控制台输出打印语句，是远远不够的，并且浪费时间。打断点调试，是程序员必备技能之一，能节约时间并且提高效率。（3）内置Git命令与Git和其他SCM提供商合作从未如此简单。从编辑器中直接查看差异，阶段文件和提交。从任何托管的SCM服务推送和拉取。现在Git使用者遍布全球，得到了全球大量的好评，尤其是它的分支管理更是让人感叹，它的创建者是多么的优秀，使团队开发更加的方便，所以这确实是一个大亮点。它不只是让VSCode的版本管理功能方面变得更加强大，同时，本文也可以用它对本文的代码做一个版本管理上的偷袭，本文可以看到在这上面每一个文件的历史更改，代码是在那一次提交中被更改也有一个非常直观的展示，配合VSCode强大的LiveShare功能，这个扩展可以大大提升本文的团队开发效率。（4）可扩展和可定制它提供丰富的插件，装上别的语言的插件，它就可以编写其他语言，支持多种选择，还有一些辅助插件，比如美化代码的插件，比如图标的插件它的界面也可以根据使用者的喜好来更改，使使用者的开发效率变得更好，可以根据自己的习惯来配置相关功能，比如缩进，字体大小。（5）方便的快捷键很多时候本文敲代码，一直需要鼠标的话，会大大降低你开发的效率，这时候快捷键就很有必要，VSCode给本文提供了丰富的快捷键，大大提高了本文开发效率。它还有sublime和atom的快捷键的插件，因为不可能所有软件的快捷键都是一样的，如果你长期使用另一款软件，突然换一款软件的快捷键是很不方便的，但是VSCode的这两款插件就可以把自己本身的快捷键换成sublime和atom。2.4VSCode好用的插件（1）Beautify格式化代码，使代码更加漂亮美观，因为当本文面对大量的代码的时候，如果结构很丑，十分影响本文编写代码，而且不容易找出问题，因为结构都看不清除，就会浪费大量的时间放在修改错误方面。所以作为一个合格的程序员，代码的格式很重要，也记得要标注注释[6]。（2）CSSPeek使用此插件，你可以追踪至样式表中CSS类和ids定义的地方。当你在HTML文件中右键单击选择器时，选择“GotoDefinition和Peekdefinition”选项，它便会给你发送样式设置的CSS代码。代码量少的时候，可能还记得本文定义的CSS，但是当本文工作中时，代码量就有很多，而且一般在团队开发中，成员也要看其他成员的代码，但是每个人的命名方式也不一样，所以这个插件很有必要，可以快速的找到本文想要的信息。（3）SublimeTextKeymapandSettingsImporter在前端方面，还有一个sublime编辑器，用户规模也很大，这个插件就是把vscode的快捷键换成sublime，这样对sublime用户很友好，也很快就能上手。要想抛弃一个自己常用的编辑器还是很难的，如果快捷键不一样，前期还是很麻烦，虽然可能会尝试新鲜的东西，但是改变习惯还是不容易的，毕竟sublime还是很好用的，这个插件就帮助本文在不改变习惯的前提下，可以尝试一下新的编辑器，用不用就是以后的事情了。（4）VSCodeGreatIcons这个就是小图标，它很好的把各个文件区别开来，使人一看就知道本文使用的是什么文件，这样本文找文件就不用打开看内容就行，本文直接看图标就知道是什么文件，方便开发代码。有些图标主题也只是根据后缀名字来区分文件，甚至有些文件图标还没有，有些样式还不美观。这款图标不仅样式好看，类型还多，并且美观[7]。（5）Chinese(Simplified)LanguagePackforVisualStudioCode这个就是中文翻译包，有些人可能英语不太好，所以有这个中文包可能方便本文开发代码，很方便。（6）AutoCloseTag这个是自动闭合标签，也是能提高本文的代码效率。（7）Vetur这个是现在很好的一个框架Vue，也就是本系统的框架的提示代码，它能检查到本文的语法错误，包括CSS/SCSS/LESS等常用语言。它也支持语法高亮，包括HTML/CSS/SASS/SCSS等常用语言.它也支持Emmet[8]。它也有代码自动补全功能HTML/CSS/SCSS/LESS/JavaScript/TypeScript.（8）ViewInBrowser这个是在编辑器内部打开浏览器，你可以设置默认打开的浏览器，因为编辑器本身是不支持打开编辑器的。如果没有安装这个插件，必须要到文件夹里面去打开文件，非常的麻烦，而且非常耽误时间，所以这个插件必须安装。（9）Vue2Snippets这个是现在很好的一个框架Vue，也就是本系统的框架的提示代码，它能提示代码片段。2.5VSCode的优势首先在前端HTML，CSS代码补全方面，VSCode比sublime提示的更加人性化，而且还不用下载插件就可以编写代码，而且补全非常智能。本文用过VSCode就不想用sublime，而且下载sublime的插件的站点还在国外，下载速度很慢，插件经常下载到一部分就停止，而且容易报错。对于VSCode，可能之前插件下载过多，可能下载过慢，但是现在有工作区概念，在工作区你可以禁用你不要的插件，你可以提高你的速度，sublime代码提示真的很不好用。其次就是VSCode可以打开命令行，使用者不需要再编辑器外面开命令行，直接在命令行操作。最后就是集成Git也很好用，方便。而且VSCode的开发者是微软，稳定方面，更新方面都是不用担心的。2.6本章小结首先对本系统的开发环境进行了介绍，其次对使用的编辑器进行概述，也介绍了编辑器的特性，和好用的插件来提高程序员的编码速度。3.系统总体分析3.1页面原理资金管理系统页面的展示就简单的html页面，加上css的样式搭建出来的一个个完整的页面，加上一些js的交互，使得页面没有那么死板。超文本标记语言是一种规范，也是一种标准。它本身是一种文本文件，通过不同的标签显示不同的内容，由于时代的更新换代，现在已经更新到HTML5，相较于以前的版本，标签语义化，添加了许多新的功能，比如地图，存储，拖拽，画布等等许多实用的功能。由于每个厂商实现的功能不一样，所以相同的标签可能在不同的浏览器会有些不同，我们可以通过后期清楚样式来减少这带来的困难，浏览器兼容也是一个大难题。CSS可以美化我们的页面，HTML如果是人的话，CSS就是我们的衣服了，它使我们更加好看。由于样式的多样性，这也组成了丰富的互联网页面[14]。JavaScript一种脚本语言，它也是一门弱类型语言，它对变量的声明没有那么严格，它为我们的页面提供了交互功能，使我们能参与到页面中，使用户体验得到大大的提高，它有浏览器引擎专门渲染。JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的[15]。JavaScript脚本语言同其他语言一样，有它自身的基本数据类型，表达式和算术运算符及程序的基本程序框架。JavaScript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。3.2工作原理本系统加入了权限控制，不同的身份可以进行不同的操作，进入界面后所能操作的功能也不尽相同，这是为了模仿企业的运作，当一个公司的用户登录时，所属部门不一样，职能就不一样，所进行的操作也不一样。通常，如果权限不够，就不能对其数据进行操作，本系统时为小型公司所创建的，所以可能没有那么多的功能。本系统有四个身份，普通员工、人力部门、财务部门、总经理。普通员工在公司中没有什么特别的职能。人力部门就是专门管理员工的信息，所以可以看到除了总经理之外的所有账号，可以对其进行删除的操作，平常也可以对员工的请假申请和考勤进行处理。财务部门可以看到公司的财务数据，也可以看到财务报表，财务也是可以请假的。总经理是不需要请假的，其余所有操作都可以执行，还有一个功能就是可以改变员工的身份权限，在公司也可以突然升职改变身份。首先先注册，会有四个身份选择，当点击注册按钮时，这时候，我们会发送请求，请求带着我们的信息传送到后台，我们就会在数据库里面增加一条用户信息，后台会把我们发送的密码进行加密，然后存储到数据库里面，以便我们的数据库被攻破时，用户名和密码都被泄露，现在市面上也有很多加密算法可以供我们选择。登录时，点击登录按钮，发送请求，在后台拿到数据库的信息，把加密之后的密码解析和登录输入的信息作对比，如果密码正确，我们就可以进入系统，进入系统之后，我使用了JSONWEB令牌，像以前的网站为了安全使用cookie[16]和session，但是如果给每一台客户端都创建一个session[17]，那将给服务器造成巨大的压力，所以我们使用jwt单点登录，给服务器的压力会小很多，它可以设置过期时间，时间过期后，我们就不能使用，因为jwt一旦设置了就不会消失，所以最好设置消失时间，我规定了进入系统的时间，如果时间到了，还想要继续查看就需要重新登录。登录之后便可以看到符合使用者身份的界面。进入系统之后，个人信息，修改密码，注销账号，退出，缺勤查看，主页都是所有身份都拥有的基础功能。个人信息使用了Vuex状态管理，每次可以从状态管理中心获取到我们所需要的个人信息，个人信息主要展示了登录的用户名，和身份信息。本系统秉承着大方简洁的观念，所以没有太多的信息。修改密码，需要输入系统的现有密码，然后输入新的密码，发送到后台，和后台通过解密的密码作对比，然后修改数据库的代码，这样就完成了密码的修改。毕竟密码不会一直使用，偶尔也需要换一下，所以修改密码是系统功能的必备。缺勤查看，是查看使用者的请假记录，只会展示已经请假成功的，因为不是所以请假都能批的。员工账号，只能供人力部门和总经理观看，界面中展示了所有注册的账号除了总经理的账号，如果员工辞职，可以对他的账号进行删除。请假处理，只能供人力部门和总经理进行处理，页面会展示待审核的请假信息，人力部门可以对这些请假信息进行同意或者拒绝的处理，同意请假信息就会添加上处理人的信息，考勤页面也只会显示有处理人的请假信息。资金数据，只能供财务部门和总经理观看，页面可以通过对时间的限制，然后对所以数据进行筛选，过滤不符合时间的数据信息，也可以对数据进行分页，也可以添加一条数据，还可以编辑资金数据，也可以对它进行删除。资金报表，利用图表的形式，展示最近的资金状态，财务部门的人可以通过对资金的分析制作财务报表，对公司接下来的时间进行财务规划，以免走上弯路。3.3Vue框架介绍3.3.1基本指令（1）v-model：双向数据绑定，常用于表单中。改变表单里面的元素，和表单绑定的那个变量的值也会随之改变，不用写很复杂的代码相互绑定，运用了响应式编程的原理。（2）v-if：控制一个元素的消失和隐藏，利用注释的原理，直接删除掉元素节点，适用于一开始不知道这个元素是否要隐藏。在实际中，本文也经常需要显示隐藏一些元素。（3）v-show：控制一个元素的显示和隐藏，利用的是display：block和display：none，并没有真正删除掉节点，适用于频繁操作的节点。（4）v-for：for循环，根据一组数组进行列表渲染，本文只用定义数组，就可以轻松的渲染一些DOM节点，渲染时必须要有key值，本文通常根据一些给定的值来渲染一些DOM节点。（5）v-on：是绑定事件用的，有点击事件，鼠标滑动，等等事件，而且Vue还很贴心的提供了修饰符，像原生的JS就会有冒泡事件，用stop就可以阻止冒泡事件了，v-on：click可以用@click代替。（6）v-bind：是定义的一些属性，当然可以自己定一些属性使用，比如父子传值就自定义属性了。当然属性的值可就不是以前写的东西了，就相当于本文以前写的变量。3.3.2生命周期函数（1）beforeCreate：它创建一个Vue类的对象来处理DOM元素，在Vue中，官方是不建议直接操作DOM元素的。new出来的对象在这个生命阶段可以通过beforeCreated挂钩来访问。我们可以在这个钩子中插入我们需要执行的代码逻辑，在对象初始化之前执行。（2）created：首先会判断对象是否有el选项。data，methods挂载完毕，如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该Vue实例上调用vm.$mount(el)[18]。（3）beforeMount：如果Vue实例对象中有template参数选项，则将其作为模板编译成render函数。如果没有template选项，则将外部HTML作为模板编译。可以看到template中的模板优先级要高于outerHTML的优先级。（4）mounted：查看Vue对象，看看自身有没有挂在el，如果有，就加载模板，没有那就把自身当做模板加载[19]。（5）beforeUpdate：在数据更新之前触发的函数，可能会调用多次。（6）updated：数据更新时触发的函数，可能会调用多次。（7）beforeDestroy：在Vue对象销毁前触发的函数。有的时候，删掉一个东西之前，会弹出一个东西来提示本文是否要删掉这个东西，这个功能就可以写在这个函数里面[20]。（8）destroyed：在Vue对象销毁之后出发的函数。删除之后也可以提示别人这个组件已经成功删除了。图3-1生命周期函数3.3.3父子组件传值在本文写组件的时候，总会有两个组件会涉及到传值的可能，总会有一些交互嘛，一个组件把自己处理的数据传到其他组件，其他组件利用传来的数据进行处理，组件不可能就是两个相孤立的组件，所以，这个时候angular就提供了父子组件传值。（1）父组件向子组件传值：给子组件上用v-bind绑定属性，父组件把值传给绑定的属性，子组件通过props获取传来的数据（2）子组件向父组件传值：子组件通过定义一个函数，在函数里$emit向父组件发射，父组件定义一个函数来接受传过来的数据。3.3.4路由Vue的路由插件，如果要使用，需要下载，它为单页面应用贡献很大，很多时候本文实现页面切换都是通过它实现的，它的原理是改变哈希值，因为更改哈希值是不会重新发送请求的，所以可以达到页面切换也没有发送请求，这也叫单页面应用SPA[21]。路由有三个概念，route，routes，router。route是一条路由，routes是一个复数，它是一组路由，router相当于路由的管理者，它去响应请求。作为现在复杂的互联网，这一点怎么可能满足本文的需求呢，这个时候动态路由就出场了，很多情况下本文会做很多相似的网页，如果重新再写一个页面，工程量也大，也消耗了资源，这些网页之间可能就一些数据不一样，其他都一样，这时候就可以给本文的路由选择性加参数，跳转到另一个页面时，本文获取到参数，本文就可以不用重新的写一个组件，提高了组件的复用性，也减少本文的重复的工作。当本文要在几个路由之间来回跳转的话，其实也是非常消耗资源的，这时候本文就需要缓存路由，它缓存了本文的路由，能较少本文的资源消耗。在互联网这个时代，能减少消耗就减少消耗，用户的体验是非常重要的，如果一个网站打开的时间要4s，可能大家就不太想看到网页的内容了，这样本文也就流失了很多客户，页面跳转耗费大量时间，消耗资源也是一样，尤其是手机，手机的带宽，资源更加重要。3.3.5VuexVuex被称为状态管理，本文觉得应该是全局状态管理，意思就是你在state中定义了一个数据之后，你可以在你项目中的所有组建中进行获取，修改，并且你的修改可以得到全局的响应，和变化。Vuex为组件之间的传值带来了巨大的便利，之前的父子组件就非常麻烦，兄弟组件就更加麻烦了。它有四个属性state，getters，mutations，actions。state就相当于data一样，存放数据一样。getters就相当于计算属性computed，本文可以通过它来获取state里面的数据。mutations就相当于methods，本文可以通过它来改变state的值。actions，也是函数，但是他可以包含异步操作。在外部组件调用可以用dispatch来调用本文想要的函数[22]。在本文中，Vuex里保存着登录者的信息，我们可以获取登录者的相关信息，比如身份信息，然后进行相关的操作。3.3.6Axios有数据的交互，那就会存在发送请求，这是Vue官方给本文提供的插件，axios是一个基于Promise的http库，（Promise是es6新语法）支持Promise所有的API，而且它还可以拦截请求和响应，它还可以请求数据和响应数据，并对响应回来的内容自动转换成Json类型的数据，安全性更高，客户端支持保护安全免受CSRF/XSRF攻击[23]。还有一个大亮点，就是响应拦截，为了使本文的系统使用感更加好，当本文的界面加载的时候出现等待动画，这个时候就用到响应拦截，在拦截的时候展示动画，当请求成功就把动画关闭，可以增加的乐趣，感觉动画不是冷冰冰的。3.3.7Echart这个是一个大家都比较喜欢用的图表插件，ECharts是百度前端可视化团队开发维护的，它是基于HTML5Canvas开发的，是一个纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据可视化图表[24]。在一个管理系统，本文不能缺少图表，它在展示数据方面非常方便，它能直观清晰的展示数据的走向，对本文分析数据形势非常有好处。它有很多种图表的展示，本文这里就只是使用非常简洁方便的柱状图来展示本文的收入支出，还有本金。3.4Element-UI框架介绍3.4.1Element-UI的介绍Element-UI是由饿了么前端团队推出的一款基于Vue.js2.0的桌面端UI框架，手机端有对应框架是MintUI。它和市面上的其他框架所拥有的功能都差不多，基础的布局也有都有，栅格也有不过，为了更加精细，分为24格，Bootstrap只有12格。在本文常用的表格，表单也非常友好，可以直接把数据和表格连接，有了Element-UI框架，在数据展示方面可以节省大量的时间，把更多的时间放在逻辑交互方面，不用管这些数据交互方面。3.4.2Element-UI的使用布局Layout，这是一个UI必不可少的功能，通过基础的24分栏，迅速简便地创建布局，在一些不用仔细考虑网页位置的时候，用这个能大大提高你的编写速度。还可以设置偏移，和在不同尺寸的电脑下，设置不同的宽度，是网页更加的好看。字体图标Icon，它提供一套常用的图标集合，本文可以通过设置类名来使用，本文还可以像设置字体大小，颜色一样设置图标大小，非常的方便。在本文的网页上加一些小图标，能更加形象，是网页内容更加丰富。按钮Button，本文在一个网页必不可少要点击一些按钮，来进行一些页面的交互。它还有不同的样式可以选择，红色的是危险按钮，黄色是警告按钮，绿色是成功按钮，白色是默认按钮，灰色是信息按钮，蓝色是主要按钮。按钮还有大中小不同尺寸呢。，还有圆形按钮，文字按钮。表单Form，本文在登录，注册的网页中本文是少不了的，还有一些搜索内容也需要输入框，这个框架很好的地方是可以把Vue中的数据和form表单连接在一起，方便操作，还给本文设置了一些验证规则。不仅有本文常用的单选按钮，文本框，复选按钮，可以自定义校验规则。表格Table，在本系统中，本文用表格展示本文的资金信息，它也可以把数据连接在一起，它还可以通过数据直接渲染表格数据，还可以控制表头大小，还可以设置表格内容中某一部分的位置，还有很对内置的事件。它还可以对表格内容进行高亮显示，还有一些表格样式。分页Pagination，在大量的表格内容的情况下，未来更好的用户体验，本文对数据进行分页，本文只需要提供总条数，多少页，一页多少条，本文就可以完成对数据的分页。不用向以前一样写大量的的JS来控制样式，来进行样式的变换。消息提示Message，在本文进行一些操作之后，本文可以适当的给本文的使用者一些提示，让他们知道操作已经完成了。它也有不同的样式，可以告诉使用者一些信息，比如成功就用绿色的信息，警告就用黄色的信息，错误就用红色的信息。导航菜单NavMenu，为使用者提供导航，为他们提供方便，它还提供了一些简单的过渡效果，让两个选项之间有一个过渡的动画，不会转换的那么生硬，还可以设置多级菜单。对话框Dialog，本文在提交信息或者编辑信息的时候就需要一个弹出框来接受本文的信息，然后把数据返回给数据库。提交界面和编辑界面相似，因此，可以封装成一个组件，供其他组件复用。3.4.3Element-UI的优势Element-UI是饿了么前端团队负责开发研究的，开发者团队的规模很大，发布版本数量也更强，它是基于Vue2.0，现在Vue在国内很火，很多人使用，适用团体还是很大的，所以Vue背后还有阿里Weex的项目，所以还是很有前景的。3.5Node.js语言（1）Nodemon：编写后台时，使用者一旦修改文件，使用者就必须重新开启服务器，其实这样很麻烦，但是这个插件，修改之后保存就可以了，不需要重新开启服务器。（2）Express：其实这个集成所有好用的代码为一身，本文写原生的服务器还是很麻烦的，尤其是静态伺服，但是这个框架，只需要一行代码，Express可以帮本文很快写出服务器而且不容易崩溃，很方便，是写代码的好帮手。（3）bcrypt：密码加密算法，本文的密码传到后台，本文不可能直接把密码放到数据库，要不然密码不就泄露了，本文需要对传过来的密码进行加密，加密之后再放进数据库，这样密码才能安全。（4）JsonWebToken：是目前最流行的跨域认证解决方案。早期使用session配合cookie来负责认证，随着互联网的普及，网民数量剧增，同时在线人数也大幅度的增加，session本身就是增加一个用户，生成一个session，这将给服务器带来巨大的压力。对比JWT就不需要服务器来生成，是由客户端生成，JWT本身是不会自动销毁的，你必须给它设置时间，要不然也会造成大量垃圾。JWT包含了认证信息，一旦被截获，信息可能会被泄露，所以设置的时间最好短一点，为了安全，也不要使用HTTP协议，最好使用HTTPS协议。（5）gulp：是很流行的项目打包工具，它是基于任务打包的。如果你还没有使用过前端构建工具，或者觉得grunt太难用的话，那就尝试gulp。gulp是根据一个个任务打包的，方便快捷，需要什么功能直接下载所需要的插件即可。3.6MongoDB数据库3.6.1MongoDB的概述MongoDB是一个基于分布式文件存储的数据库，它是基于C++语言，为了WEB应用提供可扩展的高性能数据存储解决方法。MongoDB是一个非关系型数据库，它的数据结构非常松散，是类似Json的bson格式，所以本文可以用来存储复杂的数据类型。MongoDB最大的特点就是它的查询语言特别丰富，几乎可以实现类似关系数据库表单查询的绝大部分功能，而且，本文还可以对它建立索引。3.6.2MongoDB的特点（1）面向文档存储（Json数据模式简单而强大）（2）动态查询（3）全索引支持，扩展到内部对象和内嵌数组（4）查询记录分析（5）快速，就地更新（6）高效储存二进制大对象（比如照片和音频）（7）复制和故障切换支持（8）商业支持，培训和咨询[24]3.7本章小结本章介绍了系统的基本要求，本文把资金管理系统的需求与原理进行介绍。本文的系统有注册、登录、注销等功能。本章对该系统的各个界面进行详细介绍。4.系统实现4.1前端模块实现4.1.1Vue项目的创建本章详细介绍本系统的使用技术，介绍了技术的使用方法和使用的前景，对此框架本文进行了逐个分析，对原理进行分析。这些分析加入了本文自己的理解，用自己的话来叙述。在Windows10系统开发环境下，首先安装Vue.js的脚手架vue-cli，vue-cli可以自动生成Vue.js+Webpack的项目模板，包含vueinitwebpack-simple和vueinitwebpack两种项目名。以下是安装vue-cli的执行命令：npminstall-gvue-cli然后就可以创建项目了，在开发平台项目目录下右键运行gitbashhere，紧接着在gitbash下执行如下命令（client是本开发平台的前端项目名称）：vueinitwebpack-simpleclient回车后将生成client项目文件夹.然后该项目需要下载安装依赖cdclientnpminstall4.1.2Vue项目展示 图4-1注册界面 如图4-1所示，是注册界面，可以注册账号，所有选项都不得为空，如果为空会进行提示。有四个身份可供选择。图4-2登录界面如图4-2所示，是登录界面，点击登录按钮发送请求，和数据库密码进行对比，登录成功，会生成一个token，有这个token才能登录其他的界面。图4-3人员调动界面如图4-3所示，是人员调动界面，只有总经理才能看到这个界面，可以调整员工的身份。图4-4资金流水界面如图4-4所示，是资金流水界面，可以展示资金信息，可以添加，删除，修改，可以进行时期筛选。图4-5资金图表界面如图4-5所示，是资金图表界面，可以展示资金信息的状况。图4-6请假界面如图4-6所示，是请假界面。除了总经理，其他都不用请假。图4-7请假处理界面如图4-7所示，是请假处理界面，除了总经理和人力部门可以对请假条进行处理。图4-8考勤界面如图4-8所示，是缺勤界面，展示你有没有请过假。图4-9员工信息界面如图4-9所示，是员工信息界面，可以展示除了总经理之外的所有员工信息。4.1.3项目联调前端项目和后端项目完成之后，本系统还不算完成，我们还需要对项目进行打包处理。项目打包是对我们的项目资源进行整合，会把我们不需要的资源去除，只留下我们需要的资源，还会对我们的css文件进行压缩换行符，对我们的js文件进行变量替换压缩我们的代码，Vue给我们提供了打包工具，我们只需要输入一条命令即可，命令如下：npmrunbuild但是打包之后就完成了，打包之后可以看到各个文件的大小，打包之后运行文件，页面出现白屏，需要更改vue的路由模式，不要history的模式，在打包的配置中修改打包资源的路径即可解决这个问题。完成以上步骤即可，把打包过后的项目放到服务器中，利用express配置静态资源目录。整个项目就可以可以打包上线。4.2后端模块实现该系统使用Node.js作为后台的语言，主要是对前台发送的请求进行响应然后进行处理。本系统接口采用RESTful风格，它是一种风格，不是一个标准，它的理念使我们的接口看起来更容易懂，简洁，高效。利用use功能，把每个功能模块编写在其他文件中，后面直接导入进主服务器中，这样使我们看到。后端的接口主要就是提供增删改查功能，对于不同的表可能会有些许的不一样。对于个人信息，本系统在注册功能中，对传输过来的密码进行一定规则的加密，在加密之后保存在数据库中，这样数据就算被攻破也没有关系。修改密码接口，本系统把从数据库中获取到的数据进行密码解析，然后和前端传过来的密码进行比对。对于考勤表的接口，与众不同的是，在添加接口中会把之前的数据的现金，和支出、收入相加减，最后得出现金的数据。本系统还设置了通过邮箱来寻找符合条件的数据。4.3数据库的实现该系统使用MongoDB非关系型数据库存储用户信息、资金信息和考勤记录表。用户表的类型有姓名、邮箱、身份、密码、处理人和申请时间。资金信息表的类型有类型、描述、收入、支出、现金、备注和存入时间。考勤表的类型有邮箱、请假原因、请假天数、请假开始时间，请假结束时间，请假的申请时间。4.4本章小结本章详细介绍本系统的前端，后台和数据库的具体实现。先是开发环境部署、项目创建，然后根据第三章的需求分析具体实现每一个模块。期间，根据开发需求开发了若干个同于、常用的组件，并对部分组件进行了简单的介绍。5.出现的问题及解决方案5.1问题（1）本文就一直处于修改了密码，登录不成功。（2）最开始本文只知道Vue中的父子组件传值，但是本文又想获取数据。（3）npm下载包有时候会报错，不能成功下载。（4）打开项目，但是没有显示数据。（5）打包项目的时候，成品一片空白。（6）用git上传到自己的github上去，一直推送失败。（7）就是路由跳转，本文想必须登录了才能看到主页。（8）本文在登录后，本文一直在想怎么确定在登录的时间，不想一直登录，万一，忘记取消登录，别人会拿着你的账号看到内部的信息。（9）因为本文设置了普通员工和管理员等多种身份，希望不同身份看到的内容不一样。（10）因为每个人的电脑的大小不一样，但是那个信息又有很多选项，但是本文如果把每个选项的宽度设置小了，就会变得特变难看，但是不设置小，本文又看不见全部的。（11）打包后生成的代码，打开发现获取不到后台数据。5.2解决方案（1）因为对密码是加密后放在数据库里面的，数据库里面的数据也看不出密码是什么样子，本文就一直处于修改了密码，登录不成功，原来本文是加密加密错了。本文用那个同步的函数用法用错了，所以每次加密都是加密一个错误的密码，存储的也是错误的密码。（2）最开始本文只知道Vue中