.引言1.1本文的目的和意義隨著時(shí)代的發(fā)展，現(xiàn)階段企業(yè)都在走信息化的道路，而且大型企業(yè)業(yè)務(wù)繁多，往往需要開發(fā)大量、種類繁多的系統(tǒng)軟件。這些軟件不僅能夠有效的解決公司業(yè)務(wù)方面的問題，而且能幫助公司節(jié)約成本，避免浪費(fèi)大量的人力[1]。在管理信息控制中，我們通過信息來控制企業(yè)的整個(gè)生產(chǎn)過程和服務(wù)過程的運(yùn)作，我們通過分析數(shù)據(jù)來不斷調(diào)整企業(yè)的戰(zhàn)略計(jì)劃，依靠信息從而更好地管理公司的運(yùn)作。企業(yè)中有很多失敗的戰(zhàn)略計(jì)劃，究其原因，是因?yàn)闆]有好好分析自己的公司情況，盲目更風(fēng)，直接導(dǎo)致了公司的損失。在資金管理中，企業(yè)時(shí)刻面臨資金方面的各種風(fēng)險(xiǎn)。由改革開放走到今天，我國(guó)企業(yè)越來越正規(guī)化、規(guī)?；⒓瘓F(tuán)化。而隨著企業(yè)的變化發(fā)展，每天都會(huì)產(chǎn)生大量的資金流入流出，僅有資金記錄的功能已經(jīng)不能滿足日益增長(zhǎng)的市場(chǎng)了。市面上有許多大型的資金在線管理系統(tǒng)，但是，對(duì)于小公司而言，很多的功能卻不需要用上，但是我們使用大型系統(tǒng)卻要支付很大的開銷，因此，本人開發(fā)了一套適用于小公司的資金管理系統(tǒng)。本課題研究的資金管理在線系統(tǒng)，通過對(duì)小型企業(yè)真實(shí)的內(nèi)部數(shù)據(jù)分析，開發(fā)了這套系統(tǒng)，該系統(tǒng)能應(yīng)對(duì)各種小型公司會(huì)遇到的問題，卻沒有很多用不上的功能。1.2國(guó)內(nèi)外研究現(xiàn)狀近幾年隨著互聯(lián)網(wǎng)的興起，Web應(yīng)用也火了起來，市面上不斷推出新框架。就前端框架而言，目前業(yè)界主要是用Vue.js、Angular、React這三種框架。React起源于Facebook。外國(guó)人會(huì)把自己經(jīng)常使用的方法封裝，以便之后使用，這便是React的由來。React相較于其他兩個(gè)框架，框架思想大有不同，它的核心是虛擬DOM[2]，能大幅度優(yōu)化代碼的速度。但是它不能做一個(gè)單獨(dú)的開發(fā)框架進(jìn)行項(xiàng)目研發(fā)，必須和其他插件配合使用，但是這不阻礙它的人氣是最高的。它的生態(tài)圈很繁榮，有大量?jī)?yōu)秀的程序員會(huì)在它的社區(qū)貢獻(xiàn)代碼。Angular是一個(gè)由Google公司開發(fā)的一款框架，第一版誕生于2009年，領(lǐng)先其余兩個(gè)框架。Angular現(xiàn)在已經(jīng)更新到版本7，它分為四個(gè)團(tuán)隊(duì)開發(fā)，一起更新，AngularJS已經(jīng)停止更新了。Angular是MVC框架[1]，它為其余兩個(gè)框架提供了大量靈感。Angular擁有指令、雙向數(shù)據(jù)綁定、注入服務(wù)等特性。Angular可以稱之為一個(gè)完整的框架了，它可以單獨(dú)開發(fā)一個(gè)完整的框架，它通常被應(yīng)用于大型的項(xiàng)目。Vue.js是最近兩年誕生的一款非常優(yōu)秀的輕量級(jí)前端框架，它僅聚焦于視圖層。它是由中國(guó)人自己創(chuàng)建的框架，它的中文文檔非常友好，學(xué)習(xí)者能很快的上手。它結(jié)合了前面兩個(gè)框架的優(yōu)點(diǎn)，它有數(shù)據(jù)驅(qū)動(dòng)，組件之間相互結(jié)合，又有指令，數(shù)據(jù)綁定[2]。它是一個(gè)完整的框架，可以單獨(dú)開發(fā)一個(gè)項(xiàng)目，但是只能適用于小項(xiàng)目，但是它也有很多的插件可以使用，背后也有阿里的支持。Vue.js雖然誕生的較晚，但是用戶體量卻一點(diǎn)不輸給其他兩個(gè)框架。雖然生態(tài)圈不如前面兩個(gè)框架的繁榮，但是也是呈上升趨勢(shì)。1.3本文的主要工作和組織結(jié)構(gòu)本課題的研發(fā)目標(biāo)是設(shè)計(jì)一款用于企業(yè)資金信息化的基于MVVM設(shè)計(jì)模式的管理系統(tǒng)，并將其應(yīng)用到公司內(nèi)部。該系統(tǒng)開發(fā)、封裝了一些通用的開發(fā)組件，以及實(shí)現(xiàn)了各個(gè)系統(tǒng)的通用基礎(chǔ)模塊，如登錄，注冊(cè)、查看個(gè)人信息等模塊。第一章引言，主要介紹課題的研究背景與意義，還介紹了國(guó)內(nèi)外流行的框架，最后介紹了前端框架技術(shù)。第二章系統(tǒng)開發(fā)工具，首先介紹了系統(tǒng)的開發(fā)環(huán)境，最后介紹了開發(fā)工具visualstudiocode的前景和優(yōu)勢(shì)。第三章系統(tǒng)總體分析，首先對(duì)原理進(jìn)行深度剖析，然后展示系統(tǒng)的具體實(shí)現(xiàn)頁(yè)面，最后介紹頁(yè)面實(shí)現(xiàn)的功能，以及系統(tǒng)運(yùn)行中所需要的插件。第四章系統(tǒng)實(shí)現(xiàn)，本文介紹了該系統(tǒng)前后端使用的技術(shù)，以及部分頁(yè)面的展示。2.系統(tǒng)開發(fā)工具2.1開發(fā)環(huán)境簡(jiǎn)介本程序的IDE是VSCode，是微軟公司開發(fā)的一款跨平臺(tái)編輯器，使用IntelliSense超越語(yǔ)法突出顯示和自動(dòng)完成功能，IntelliSense提供基于變量類型，函數(shù)定義和導(dǎo)入模塊的智能完成。從編輯器直接調(diào)試代碼。啟動(dòng)或附加到正在運(yùn)行的應(yīng)用程序，并使用斷點(diǎn)，調(diào)用堆棧和交互式控制臺(tái)進(jìn)行調(diào)試。與Git和其他SCM提供商合作從未如此簡(jiǎn)單。從編輯器中直接查看差異，階段文件和提交。從任何托管的SCM服務(wù)推送和拉取。而且，你需要下載什么插件，你就下載什么從插件，就可以換一種語(yǔ)言開發(fā)，還有多種主題，可以自己選擇。頁(yè)面的搭建，本文使用的是Vue框架和Element-UI類庫(kù)來編寫頁(yè)面，Vue是一套漸進(jìn)式框架，它聚焦于視圖層的開發(fā)，它不需要知道底層代碼如何運(yùn)作，便可生成一套完整的代碼。在Vue開發(fā)中，官方是不建議直接操作DOM元素的，因?yàn)橹苯硬僮鱀OM元素十分損耗性能，會(huì)大量導(dǎo)致重繪和重排。Vue內(nèi)部提供了很多的指令，服務(wù)來代替它，例如，v-for可以通過遍歷數(shù)據(jù)動(dòng)態(tài)生成標(biāo)簽。Vue是單頁(yè)面應(yīng)用，可以通過哈希值來實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)，頁(yè)面內(nèi)部分資源不需要重新下載，很多移動(dòng)端便是采用單頁(yè)面的應(yīng)用。Vue是單文件組件，不同于Angular模塊化開發(fā)，Vue是組件化開發(fā)，通過不同組件的組合，組成我們想要的應(yīng)用。Vue自身并不是一個(gè)全能框架，但是它的生態(tài)圈十分強(qiáng)大，可以搭配你想要的插件就可以完成一個(gè)完整的項(xiàng)目。后臺(tái)的處理，本文使用的Node.js，Node.js是一門技術(shù)，不是一門語(yǔ)言，它的語(yǔ)言就是JavaScript，所以Node.js對(duì)本文前端人員是很友好的，本文能很快的上手，不用重新學(xué)一門語(yǔ)言，就可以很輕松的開發(fā)后臺(tái)，本文不用浪費(fèi)大量的時(shí)間再重新學(xué)一門語(yǔ)言，只用看一些基本的操作就可以滿足前端人員的開發(fā)，本文選擇了非關(guān)系型數(shù)據(jù)庫(kù)MongoDB，不像關(guān)系型數(shù)據(jù)庫(kù)那樣對(duì)字段要求的十分嚴(yán)格，非關(guān)系數(shù)據(jù)庫(kù)對(duì)數(shù)據(jù)要求的比較松散，也比較符合本文的代碼需求，所以本文選擇的數(shù)據(jù)庫(kù)是MongoDB，MongoDB是一個(gè)基于分布式文件存儲(chǔ)的數(shù)據(jù)庫(kù)。由C++語(yǔ)言編寫。非關(guān)系型數(shù)據(jù)庫(kù)對(duì)表的類型相較于關(guān)系型數(shù)據(jù)庫(kù)，簡(jiǎn)直是沒有要求，后期可以隨意添加字段。對(duì)于關(guān)系型數(shù)據(jù)庫(kù)，如果表的類型已經(jīng)定好，后期開發(fā)中需要更改字段那是不允許的，必須重新建表，插入數(shù)據(jù)，后期一旦更改，那將面臨巨大損失，而非關(guān)系型數(shù)據(jù)庫(kù)則不用擔(dān)心這一點(diǎn)，它可以很好的面對(duì)數(shù)據(jù)結(jié)構(gòu)會(huì)經(jīng)常變化的情況。它的查詢系統(tǒng)也是非常優(yōu)秀，可以提供多種查詢方法，有效查詢數(shù)據(jù)。2.2VSCode概述Microsoft在2015年4月30日Build開發(fā)者大會(huì)上正式宣布了VisualStudioCode項(xiàng)目：一個(gè)運(yùn)行于MacOSX、Windows和Linux之上的，針對(duì)于編寫現(xiàn)代Web和云應(yīng)用的跨平臺(tái)源代碼編輯器。當(dāng)年的“伊妹兒”如今依舊存在與人們生活中，并且他的傳遞速度也有了質(zhì)的飛躍，功能也更為強(qiáng)大，郵箱客戶端的種類也繁多，用戶完全可以根據(jù)自己的喜好以及需求來選擇一款適合自己使用的郵箱客戶端。這標(biāo)志著微軟公司第一次向開發(fā)者們提供了一款真正的跨平臺(tái)編輯器。雖然完整版的VisualStudio仍然是只能運(yùn)行在Windows和macOS（MacOSX）之上，但是這一次的聲明向本文展示了微軟公司對(duì)于支持其他計(jì)算機(jī)平臺(tái)的承諾[3]。很多人都使用Windows作為他們的開發(fā)環(huán)境，但是還有很多人使用Linux和Mac。本文想讓他們能夠在他們習(xí)慣的平臺(tái)上使用本文公司的產(chǎn)品，而不是非要遷徙到Windows上。這些平臺(tái)上的很多開發(fā)者們也更樂意于使用像SublimeText這種輕量級(jí)的代碼編輯器，而非像VisualStudio這種全特性的IDE。該編輯器也集成了所有一款現(xiàn)代編輯器所應(yīng)該具備的特性，包括語(yǔ)法高亮（syntaxhighlighting），可定制的熱鍵綁定（customizablekeyboardbindings），括號(hào)匹配（bracketmatching）以及代碼片段收集（snippets）。Somasegar也告訴筆者這款編輯器也擁有對(duì)Git的開箱即用的支持。2.3VSCode特性（1）IntelliSense使用IntelliSense超越語(yǔ)法突出顯示和自動(dòng)完成功能，IntelliSense提供基于變量類型，函數(shù)定義和導(dǎo)入模塊的智能完成[4]。有時(shí)，內(nèi)置函數(shù)名字復(fù)雜且復(fù)雜，這是代碼提示就很有必要，不用頻繁看API文檔，提高使用者的速度。但是程序員也不能完全依賴代碼提示，這是基本功，基本功扎實(shí)，才能走的更遠(yuǎn)。（2）斷點(diǎn)調(diào)試編輯器內(nèi)可以直接調(diào)試代碼。啟動(dòng)或附加到正在運(yùn)行的應(yīng)用程序，并使用斷點(diǎn)，調(diào)用堆棧和交互式控制臺(tái)進(jìn)行調(diào)試[5]。作為前端開發(fā)人員，只會(huì)控制臺(tái)輸出打印語(yǔ)句，是遠(yuǎn)遠(yuǎn)不夠的，并且浪費(fèi)時(shí)間。打斷點(diǎn)調(diào)試，是程序員必備技能之一，能節(jié)約時(shí)間并且提高效率。（3）內(nèi)置Git命令與Git和其他SCM提供商合作從未如此簡(jiǎn)單。從編輯器中直接查看差異，階段文件和提交。從任何托管的SCM服務(wù)推送和拉取?，F(xiàn)在Git使用者遍布全球，得到了全球大量的好評(píng)，尤其是它的分支管理更是讓人感嘆，它的創(chuàng)建者是多么的優(yōu)秀，使團(tuán)隊(duì)開發(fā)更加的方便，所以這確實(shí)是一個(gè)大亮點(diǎn)。它不只是讓VSCode的版本管理功能方面變得更加強(qiáng)大，同時(shí)，本文也可以用它對(duì)本文的代碼做一個(gè)版本管理上的偷襲，本文可以看到在這上面每一個(gè)文件的歷史更改，代碼是在那一次提交中被更改也有一個(gè)非常直觀的展示，配合VSCode強(qiáng)大的LiveShare功能，這個(gè)擴(kuò)展可以大大提升本文的團(tuán)隊(duì)開發(fā)效率。（4）可擴(kuò)展和可定制它提供豐富的插件，裝上別的語(yǔ)言的插件，它就可以編寫其他語(yǔ)言，支持多種選擇，還有一些輔助插件，比如美化代碼的插件，比如圖標(biāo)的插件它的界面也可以根據(jù)使用者的喜好來更改，使使用者的開發(fā)效率變得更好，可以根據(jù)自己的習(xí)慣來配置相關(guān)功能，比如縮進(jìn)，字體大小。（5）方便的快捷鍵很多時(shí)候本文敲代碼，一直需要鼠標(biāo)的話，會(huì)大大降低你開發(fā)的效率，這時(shí)候快捷鍵就很有必要，VSCode給本文提供了豐富的快捷鍵，大大提高了本文開發(fā)效率。它還有sublime和atom的快捷鍵的插件，因?yàn)椴豢赡芩熊浖目旖萱I都是一樣的，如果你長(zhǎng)期使用另一款軟件，突然換一款軟件的快捷鍵是很不方便的，但是VSCode的這兩款插件就可以把自己本身的快捷鍵換成sublime和atom。2.4VSCode好用的插件（1）Beautify格式化代碼，使代碼更加漂亮美觀，因?yàn)楫?dāng)本文面對(duì)大量的代碼的時(shí)候，如果結(jié)構(gòu)很丑，十分影響本文編寫代碼，而且不容易找出問題，因?yàn)榻Y(jié)構(gòu)都看不清除，就會(huì)浪費(fèi)大量的時(shí)間放在修改錯(cuò)誤方面。所以作為一個(gè)合格的程序員，代碼的格式很重要，也記得要標(biāo)注注釋[6]。（2）CSSPeek使用此插件，你可以追蹤至樣式表中CSS類和ids定義的地方。當(dāng)你在HTML文件中右鍵單擊選擇器時(shí)，選擇“GotoDefinition和Peekdefinition”選項(xiàng)，它便會(huì)給你發(fā)送樣式設(shè)置的CSS代碼。代碼量少的時(shí)候，可能還記得本文定義的CSS，但是當(dāng)本文工作中時(shí)，代碼量就有很多，而且一般在團(tuán)隊(duì)開發(fā)中，成員也要看其他成員的代碼，但是每個(gè)人的命名方式也不一樣，所以這個(gè)插件很有必要，可以快速的找到本文想要的信息。（3）SublimeTextKeymapandSettingsImporter在前端方面，還有一個(gè)sublime編輯器，用戶規(guī)模也很大，這個(gè)插件就是把vscode的快捷鍵換成sublime，這樣對(duì)sublime用戶很友好，也很快就能上手。要想拋棄一個(gè)自己常用的編輯器還是很難的，如果快捷鍵不一樣，前期還是很麻煩，雖然可能會(huì)嘗試新鮮的東西，但是改變習(xí)慣還是不容易的，畢竟sublime還是很好用的，這個(gè)插件就幫助本文在不改變習(xí)慣的前提下，可以嘗試一下新的編輯器，用不用就是以后的事情了。（4）VSCodeGreatIcons這個(gè)就是小圖標(biāo)，它很好的把各個(gè)文件區(qū)別開來，使人一看就知道本文使用的是什么文件，這樣本文找文件就不用打開看內(nèi)容就行，本文直接看圖標(biāo)就知道是什么文件，方便開發(fā)代碼。有些圖標(biāo)主題也只是根據(jù)后綴名字來區(qū)分文件，甚至有些文件圖標(biāo)還沒有，有些樣式還不美觀。這款圖標(biāo)不僅樣式好看，類型還多，并且美觀[7]。（5）Chinese(Simplified)LanguagePackforVisualStudioCode這個(gè)就是中文翻譯包，有些人可能英語(yǔ)不太好，所以有這個(gè)中文包可能方便本文開發(fā)代碼，很方便。（6）AutoCloseTag這個(gè)是自動(dòng)閉合標(biāo)簽，也是能提高本文的代碼效率。（7）Vetur這個(gè)是現(xiàn)在很好的一個(gè)框架Vue，也就是本系統(tǒng)的框架的提示代碼，它能檢查到本文的語(yǔ)法錯(cuò)誤，包括CSS/SCSS/LESS等常用語(yǔ)言。它也支持語(yǔ)法高亮，包括HTML/CSS/SASS/SCSS等常用語(yǔ)言.它也支持Emmet[8]。它也有代碼自動(dòng)補(bǔ)全功能HTML/CSS/SCSS/LESS/JavaScript/TypeScript.（8）ViewInBrowser這個(gè)是在編輯器內(nèi)部打開瀏覽器，你可以設(shè)置默認(rèn)打開的瀏覽器，因?yàn)榫庉嬈鞅旧硎遣恢С执蜷_編輯器的。如果沒有安裝這個(gè)插件，必須要到文件夾里面去打開文件，非常的麻煩，而且非常耽誤時(shí)間，所以這個(gè)插件必須安裝。（9）Vue2Snippets這個(gè)是現(xiàn)在很好的一個(gè)框架Vue，也就是本系統(tǒng)的框架的提示代碼，它能提示代碼片段。2.5VSCode的優(yōu)勢(shì)首先在前端HTML，CSS代碼補(bǔ)全方面，VSCode比sublime提示的更加人性化，而且還不用下載插件就可以編寫代碼，而且補(bǔ)全非常智能。本文用過VSCode就不想用sublime，而且下載sublime的插件的站點(diǎn)還在國(guó)外，下載速度很慢，插件經(jīng)常下載到一部分就停止，而且容易報(bào)錯(cuò)。對(duì)于VSCode，可能之前插件下載過多，可能下載過慢，但是現(xiàn)在有工作區(qū)概念，在工作區(qū)你可以禁用你不要的插件，你可以提高你的速度，sublime代碼提示真的很不好用。其次就是VSCode可以打開命令行，使用者不需要再編輯器外面開命令行，直接在命令行操作。最后就是集成Git也很好用，方便。而且VSCode的開發(fā)者是微軟，穩(wěn)定方面，更新方面都是不用擔(dān)心的。2.6本章小結(jié)首先對(duì)本系統(tǒng)的開發(fā)環(huán)境進(jìn)行了介紹，其次對(duì)使用的編輯器進(jìn)行概述，也介紹了編輯器的特性，和好用的插件來提高程序員的編碼速度。3.系統(tǒng)總體分析3.1頁(yè)面原理資金管理系統(tǒng)頁(yè)面的展示就簡(jiǎn)單的html頁(yè)面，加上css的樣式搭建出來的一個(gè)個(gè)完整的頁(yè)面，加上一些js的交互，使得頁(yè)面沒有那么死板。超文本標(biāo)記語(yǔ)言是一種規(guī)范，也是一種標(biāo)準(zhǔn)。它本身是一種文本文件，通過不同的標(biāo)簽顯示不同的內(nèi)容，由于時(shí)代的更新?lián)Q代，現(xiàn)在已經(jīng)更新到HTML5，相較于以前的版本，標(biāo)簽語(yǔ)義化，添加了許多新的功能，比如地圖，存儲(chǔ)，拖拽，畫布等等許多實(shí)用的功能。由于每個(gè)廠商實(shí)現(xiàn)的功能不一樣，所以相同的標(biāo)簽可能在不同的瀏覽器會(huì)有些不同，我們可以通過后期清楚樣式來減少這帶來的困難，瀏覽器兼容也是一個(gè)大難題。CSS可以美化我們的頁(yè)面，HTML如果是人的話，CSS就是我們的衣服了，它使我們更加好看。由于樣式的多樣性，這也組成了豐富的互聯(lián)網(wǎng)頁(yè)面[14]。JavaScript一種腳本語(yǔ)言，它也是一門弱類型語(yǔ)言，它對(duì)變量的聲明沒有那么嚴(yán)格，它為我們的頁(yè)面提供了交互功能，使我們能參與到頁(yè)面中，使用戶體驗(yàn)得到大大的提高，它有瀏覽器引擎專門渲染。JavaScript是一種屬于網(wǎng)絡(luò)的腳本語(yǔ)言,已經(jīng)被廣泛用于Web應(yīng)用開發(fā),常用來為網(wǎng)頁(yè)添加各式各樣的動(dòng)態(tài)功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實(shí)現(xiàn)自身的功能的[15]。JavaScript腳本語(yǔ)言同其他語(yǔ)言一樣，有它自身的基本數(shù)據(jù)類型，表達(dá)式和算術(shù)運(yùn)算符及程序的基本程序框架。JavaScript提供了四種基本的數(shù)據(jù)類型和兩種特殊數(shù)據(jù)類型用來處理數(shù)據(jù)和文字。而變量提供存放信息的地方，表達(dá)式則可以完成較復(fù)雜的信息處理。3.2工作原理本系統(tǒng)加入了權(quán)限控制，不同的身份可以進(jìn)行不同的操作，進(jìn)入界面后所能操作的功能也不盡相同，這是為了模仿企業(yè)的運(yùn)作，當(dāng)一個(gè)公司的用戶登錄時(shí)，所屬部門不一樣，職能就不一樣，所進(jìn)行的操作也不一樣。通常，如果權(quán)限不夠，就不能對(duì)其數(shù)據(jù)進(jìn)行操作，本系統(tǒng)時(shí)為小型公司所創(chuàng)建的，所以可能沒有那么多的功能。本系統(tǒng)有四個(gè)身份，普通員工、人力部門、財(cái)務(wù)部門、總經(jīng)理。普通員工在公司中沒有什么特別的職能。人力部門就是專門管理員工的信息，所以可以看到除了總經(jīng)理之外的所有賬號(hào)，可以對(duì)其進(jìn)行刪除的操作，平常也可以對(duì)員工的請(qǐng)假申請(qǐng)和考勤進(jìn)行處理。財(cái)務(wù)部門可以看到公司的財(cái)務(wù)數(shù)據(jù)，也可以看到財(cái)務(wù)報(bào)表，財(cái)務(wù)也是可以請(qǐng)假的。總經(jīng)理是不需要請(qǐng)假的，其余所有操作都可以執(zhí)行，還有一個(gè)功能就是可以改變員工的身份權(quán)限，在公司也可以突然升職改變身份。首先先注冊(cè)，會(huì)有四個(gè)身份選擇，當(dāng)點(diǎn)擊注冊(cè)按鈕時(shí)，這時(shí)候，我們會(huì)發(fā)送請(qǐng)求，請(qǐng)求帶著我們的信息傳送到后臺(tái)，我們就會(huì)在數(shù)據(jù)庫(kù)里面增加一條用戶信息，后臺(tái)會(huì)把我們發(fā)送的密碼進(jìn)行加密，然后存儲(chǔ)到數(shù)據(jù)庫(kù)里面，以便我們的數(shù)據(jù)庫(kù)被攻破時(shí)，用戶名和密碼都被泄露，現(xiàn)在市面上也有很多加密算法可以供我們選擇。登錄時(shí)，點(diǎn)擊登錄按鈕，發(fā)送請(qǐng)求，在后臺(tái)拿到數(shù)據(jù)庫(kù)的信息，把加密之后的密碼解析和登錄輸入的信息作對(duì)比，如果密碼正確，我們就可以進(jìn)入系統(tǒng)，進(jìn)入系統(tǒng)之后，我使用了JSONWEB令牌，像以前的網(wǎng)站為了安全使用cookie[16]和session，但是如果給每一臺(tái)客戶端都創(chuàng)建一個(gè)session[17]，那將給服務(wù)器造成巨大的壓力，所以我們使用jwt單點(diǎn)登錄，給服務(wù)器的壓力會(huì)小很多，它可以設(shè)置過期時(shí)間，時(shí)間過期后，我們就不能使用，因?yàn)閖wt一旦設(shè)置了就不會(huì)消失，所以最好設(shè)置消失時(shí)間，我規(guī)定了進(jìn)入系統(tǒng)的時(shí)間，如果時(shí)間到了，還想要繼續(xù)查看就需要重新登錄。登錄之后便可以看到符合使用者身份的界面。進(jìn)入系統(tǒng)之后，個(gè)人信息，修改密碼，注銷賬號(hào)，退出，缺勤查看，主頁(yè)都是所有身份都擁有的基礎(chǔ)功能。個(gè)人信息使用了Vuex狀態(tài)管理，每次可以從狀態(tài)管理中心獲取到我們所需要的個(gè)人信息，個(gè)人信息主要展示了登錄的用戶名，和身份信息。本系統(tǒng)秉承著大方簡(jiǎn)潔的觀念，所以沒有太多的信息。修改密碼，需要輸入系統(tǒng)的現(xiàn)有密碼，然后輸入新的密碼，發(fā)送到后臺(tái)，和后臺(tái)通過解密的密碼作對(duì)比，然后修改數(shù)據(jù)庫(kù)的代碼，這樣就完成了密碼的修改。畢竟密碼不會(huì)一直使用，偶爾也需要換一下，所以修改密碼是系統(tǒng)功能的必備。缺勤查看，是查看使用者的請(qǐng)假記錄，只會(huì)展示已經(jīng)請(qǐng)假成功的，因?yàn)椴皇撬哉?qǐng)假都能批的。員工賬號(hào)，只能供人力部門和總經(jīng)理觀看，界面中展示了所有注冊(cè)的賬號(hào)除了總經(jīng)理的賬號(hào)，如果員工辭職，可以對(duì)他的賬號(hào)進(jìn)行刪除。請(qǐng)假處理，只能供人力部門和總經(jīng)理進(jìn)行處理，頁(yè)面會(huì)展示待審核的請(qǐng)假信息，人力部門可以對(duì)這些請(qǐng)假信息進(jìn)行同意或者拒絕的處理，同意請(qǐng)假信息就會(huì)添加上處理人的信息，考勤頁(yè)面也只會(huì)顯示有處理人的請(qǐng)假信息。資金數(shù)據(jù)，只能供財(cái)務(wù)部門和總經(jīng)理觀看，頁(yè)面可以通過對(duì)時(shí)間的限制，然后對(duì)所以數(shù)據(jù)進(jìn)行篩選，過濾不符合時(shí)間的數(shù)據(jù)信息，也可以對(duì)數(shù)據(jù)進(jìn)行分頁(yè)，也可以添加一條數(shù)據(jù)，還可以編輯資金數(shù)據(jù)，也可以對(duì)它進(jìn)行刪除。資金報(bào)表，利用圖表的形式，展示最近的資金狀態(tài)，財(cái)務(wù)部門的人可以通過對(duì)資金的分析制作財(cái)務(wù)報(bào)表，對(duì)公司接下來的時(shí)間進(jìn)行財(cái)務(wù)規(guī)劃，以免走上彎路。3.3Vue框架介紹3.3.1基本指令（1）v-model：雙向數(shù)據(jù)綁定，常用于表單中。改變表單里面的元素，和表單綁定的那個(gè)變量的值也會(huì)隨之改變，不用寫很復(fù)雜的代碼相互綁定，運(yùn)用了響應(yīng)式編程的原理。（2）v-if：控制一個(gè)元素的消失和隱藏，利用注釋的原理，直接刪除掉元素節(jié)點(diǎn)，適用于一開始不知道這個(gè)元素是否要隱藏。在實(shí)際中，本文也經(jīng)常需要顯示隱藏一些元素。（3）v-show：控制一個(gè)元素的顯示和隱藏，利用的是display：block和display：none，并沒有真正刪除掉節(jié)點(diǎn)，適用于頻繁操作的節(jié)點(diǎn)。（4）v-for：for循環(huán)，根據(jù)一組數(shù)組進(jìn)行列表渲染，本文只用定義數(shù)組，就可以輕松的渲染一些DOM節(jié)點(diǎn)，渲染時(shí)必須要有key值，本文通常根據(jù)一些給定的值來渲染一些DOM節(jié)點(diǎn)。（5）v-on：是綁定事件用的，有點(diǎn)擊事件，鼠標(biāo)滑動(dòng)，等等事件，而且Vue還很貼心的提供了修飾符，像原生的JS就會(huì)有冒泡事件，用stop就可以阻止冒泡事件了，v-on：click可以用@click代替。（6）v-bind：是定義的一些屬性，當(dāng)然可以自己定一些屬性使用，比如父子傳值就自定義屬性了。當(dāng)然屬性的值可就不是以前寫的東西了，就相當(dāng)于本文以前寫的變量。3.3.2生命周期函數(shù)（1）beforeCreate：它創(chuàng)建一個(gè)Vue類的對(duì)象來處理DOM元素，在Vue中，官方是不建議直接操作DOM元素的。new出來的對(duì)象在這個(gè)生命階段可以通過beforeCreated掛鉤來訪問。我們可以在這個(gè)鉤子中插入我們需要執(zhí)行的代碼邏輯，在對(duì)象初始化之前執(zhí)行。（2）created：首先會(huì)判斷對(duì)象是否有el選項(xiàng)。data，methods掛載完畢，如果有的話就繼續(xù)向下編譯，如果沒有el選項(xiàng)，則停止編譯，也就意味著停止了生命周期，直到在該Vue實(shí)例上調(diào)用vm.$mount(el)[18]。（3）beforeMount：如果Vue實(shí)例對(duì)象中有template參數(shù)選項(xiàng)，則將其作為模板編譯成render函數(shù)。如果沒有template選項(xiàng)，則將外部HTML作為模板編譯?？梢钥吹絫emplate中的模板優(yōu)先級(jí)要高于outerHTML的優(yōu)先級(jí)。（4）mounted：查看Vue對(duì)象，看看自身有沒有掛在el，如果有，就加載模板，沒有那就把自身當(dāng)做模板加載[19]。（5）beforeUpdate：在數(shù)據(jù)更新之前觸發(fā)的函數(shù)，可能會(huì)調(diào)用多次。（6）updated：數(shù)據(jù)更新時(shí)觸發(fā)的函數(shù)，可能會(huì)調(diào)用多次。（7）beforeDestroy：在Vue對(duì)象銷毀前觸發(fā)的函數(shù)。有的時(shí)候，刪掉一個(gè)東西之前，會(huì)彈出一個(gè)東西來提示本文是否要?jiǎng)h掉這個(gè)東西，這個(gè)功能就可以寫在這個(gè)函數(shù)里面[20]。（8）destroyed：在Vue對(duì)象銷毀之后出發(fā)的函數(shù)。刪除之后也可以提示別人這個(gè)組件已經(jīng)成功刪除了。圖3-1生命周期函數(shù)3.3.3父子組件傳值在本文寫組件的時(shí)候，總會(huì)有兩個(gè)組件會(huì)涉及到傳值的可能，總會(huì)有一些交互嘛，一個(gè)組件把自己處理的數(shù)據(jù)傳到其他組件，其他組件利用傳來的數(shù)據(jù)進(jìn)行處理，組件不可能就是兩個(gè)相孤立的組件，所以，這個(gè)時(shí)候angular就提供了父子組件傳值。（1）父組件向子組件傳值：給子組件上用v-bind綁定屬性，父組件把值傳給綁定的屬性，子組件通過props獲取傳來的數(shù)據(jù)（2）子組件向父組件傳值：子組件通過定義一個(gè)函數(shù)，在函數(shù)里$emit向父組件發(fā)射，父組件定義一個(gè)函數(shù)來接受傳過來的數(shù)據(jù)。3.3.4路由Vue的路由插件，如果要使用，需要下載，它為單頁(yè)面應(yīng)用貢獻(xiàn)很大，很多時(shí)候本文實(shí)現(xiàn)頁(yè)面切換都是通過它實(shí)現(xiàn)的，它的原理是改變哈希值，因?yàn)楦墓Ｖ凳遣粫?huì)重新發(fā)送請(qǐng)求的，所以可以達(dá)到頁(yè)面切換也沒有發(fā)送請(qǐng)求，這也叫單頁(yè)面應(yīng)用SPA[21]。路由有三個(gè)概念，route，routes，router。route是一條路由，routes是一個(gè)復(fù)數(shù)，它是一組路由，router相當(dāng)于路由的管理者，它去響應(yīng)請(qǐng)求。作為現(xiàn)在復(fù)雜的互聯(lián)網(wǎng)，這一點(diǎn)怎么可能滿足本文的需求呢，這個(gè)時(shí)候動(dòng)態(tài)路由就出場(chǎng)了，很多情況下本文會(huì)做很多相似的網(wǎng)頁(yè)，如果重新再寫一個(gè)頁(yè)面，工程量也大，也消耗了資源，這些網(wǎng)頁(yè)之間可能就一些數(shù)據(jù)不一樣，其他都一樣，這時(shí)候就可以給本文的路由選擇性加參數(shù)，跳轉(zhuǎn)到另一個(gè)頁(yè)面時(shí)，本文獲取到參數(shù)，本文就可以不用重新的寫一個(gè)組件，提高了組件的復(fù)用性，也減少本文的重復(fù)的工作。當(dāng)本文要在幾個(gè)路由之間來回跳轉(zhuǎn)的話，其實(shí)也是非常消耗資源的，這時(shí)候本文就需要緩存路由，它緩存了本文的路由，能較少本文的資源消耗。在互聯(lián)網(wǎng)這個(gè)時(shí)代，能減少消耗就減少消耗，用戶的體驗(yàn)是非常重要的，如果一個(gè)網(wǎng)站打開的時(shí)間要4s，可能大家就不太想看到網(wǎng)頁(yè)的內(nèi)容了，這樣本文也就流失了很多客戶，頁(yè)面跳轉(zhuǎn)耗費(fèi)大量時(shí)間，消耗資源也是一樣，尤其是手機(jī)，手機(jī)的帶寬，資源更加重要。3.3.5VuexVuex被稱為狀態(tài)管理，本文覺得應(yīng)該是全局狀態(tài)管理，意思就是你在state中定義了一個(gè)數(shù)據(jù)之后，你可以在你項(xiàng)目中的所有組建中進(jìn)行獲取，修改，并且你的修改可以得到全局的響應(yīng)，和變化。Vuex為組件之間的傳值帶來了巨大的便利，之前的父子組件就非常麻煩，兄弟組件就更加麻煩了。它有四個(gè)屬性state，getters，mutations，actions。state就相當(dāng)于data一樣，存放數(shù)據(jù)一樣。getters就相當(dāng)于計(jì)算屬性computed，本文可以通過它來獲取state里面的數(shù)據(jù)。mutations就相當(dāng)于methods，本文可以通過它來改變state的值。actions，也是函數(shù)，但是他可以包含異步操作。在外部組件調(diào)用可以用dispatch來調(diào)用本文想要的函數(shù)[22]。在本文中，Vuex里保存著登錄者的信息，我們可以獲取登錄者的相關(guān)信息，比如身份信息，然后進(jìn)行相關(guān)的操作。3.3.6Axios有數(shù)據(jù)的交互，那就會(huì)存在發(fā)送請(qǐng)求，這是Vue官方給本文提供的插件，axios是一個(gè)基于Promise的http庫(kù)，（Promise是es6新語(yǔ)法）支持Promise所有的API，而且它還可以攔截請(qǐng)求和響應(yīng)，它還可以請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，并對(duì)響應(yīng)回來的內(nèi)容自動(dòng)轉(zhuǎn)換成Json類型的數(shù)據(jù)，安全性更高，客戶端支持保護(hù)安全免受CSRF/XSRF攻擊[23]。還有一個(gè)大亮點(diǎn)，就是響應(yīng)攔截，為了使本文的系統(tǒng)使用感更加好，當(dāng)本文的界面加載的時(shí)候出現(xiàn)等待動(dòng)畫，這個(gè)時(shí)候就用到響應(yīng)攔截，在攔截的時(shí)候展示動(dòng)畫，當(dāng)請(qǐng)求成功就把動(dòng)畫關(guān)閉，可以增加的樂趣，感覺動(dòng)畫不是冷冰冰的。3.3.7Echart這個(gè)是一個(gè)大家都比較喜歡用的圖表插件，ECharts是百度前端可視化團(tuán)隊(duì)開發(fā)維護(hù)的，它是基于HTML5Canvas開發(fā)的，是一個(gè)純Javascript圖表庫(kù)，提供直觀，生動(dòng)，可交互，可個(gè)性化定制的數(shù)據(jù)可視化圖表[24]。在一個(gè)管理系統(tǒng)，本文不能缺少圖表，它在展示數(shù)據(jù)方面非常方便，它能直觀清晰的展示數(shù)據(jù)的走向，對(duì)本文分析數(shù)據(jù)形勢(shì)非常有好處。它有很多種圖表的展示，本文這里就只是使用非常簡(jiǎn)潔方便的柱狀圖來展示本文的收入支出，還有本金。3.4Element-UI框架介紹3.4.1Element-UI的介紹Element-UI是由餓了么前端團(tuán)隊(duì)推出的一款基于Vue.js2.0的桌面端UI框架，手機(jī)端有對(duì)應(yīng)框架是MintUI。它和市面上的其他框架所擁有的功能都差不多，基礎(chǔ)的布局也有都有，柵格也有不過，為了更加精細(xì)，分為24格，Bootstrap只有12格。在本文常用的表格，表單也非常友好，可以直接把數(shù)據(jù)和表格連接，有了Element-UI框架，在數(shù)據(jù)展示方面可以節(jié)省大量的時(shí)間，把更多的時(shí)間放在邏輯交互方面，不用管這些數(shù)據(jù)交互方面。3.4.2Element-UI的使用布局Layout，這是一個(gè)UI必不可少的功能，通過基礎(chǔ)的24分欄，迅速簡(jiǎn)便地創(chuàng)建布局，在一些不用仔細(xì)考慮網(wǎng)頁(yè)位置的時(shí)候，用這個(gè)能大大提高你的編寫速度。還可以設(shè)置偏移，和在不同尺寸的電腦下，設(shè)置不同的寬度，是網(wǎng)頁(yè)更加的好看。字體圖標(biāo)Icon，它提供一套常用的圖標(biāo)集合，本文可以通過設(shè)置類名來使用，本文還可以像設(shè)置字體大小，顏色一樣設(shè)置圖標(biāo)大小，非常的方便。在本文的網(wǎng)頁(yè)上加一些小圖標(biāo)，能更加形象，是網(wǎng)頁(yè)內(nèi)容更加豐富。按鈕Button，本文在一個(gè)網(wǎng)頁(yè)必不可少要點(diǎn)擊一些按鈕，來進(jìn)行一些頁(yè)面的交互。它還有不同的樣式可以選擇，紅色的是危險(xiǎn)按鈕，黃色是警告按鈕，綠色是成功按鈕，白色是默認(rèn)按鈕，灰色是信息按鈕，藍(lán)色是主要按鈕。按鈕還有大中小不同尺寸呢。，還有圓形按鈕，文字按鈕。表單Form，本文在登錄，注冊(cè)的網(wǎng)頁(yè)中本文是少不了的，還有一些搜索內(nèi)容也需要輸入框，這個(gè)框架很好的地方是可以把Vue中的數(shù)據(jù)和form表單連接在一起，方便操作，還給本文設(shè)置了一些驗(yàn)證規(guī)則。不僅有本文常用的單選按鈕，文本框，復(fù)選按鈕，可以自定義校驗(yàn)規(guī)則。表格Table，在本系統(tǒng)中，本文用表格展示本文的資金信息，它也可以把數(shù)據(jù)連接在一起，它還可以通過數(shù)據(jù)直接渲染表格數(shù)據(jù)，還可以控制表頭大小，還可以設(shè)置表格內(nèi)容中某一部分的位置，還有很對(duì)內(nèi)置的事件。它還可以對(duì)表格內(nèi)容進(jìn)行高亮顯示，還有一些表格樣式。分頁(yè)P(yáng)agination，在大量的表格內(nèi)容的情況下，未來更好的用戶體驗(yàn)，本文對(duì)數(shù)據(jù)進(jìn)行分頁(yè)，本文只需要提供總條數(shù)，多少頁(yè)，一頁(yè)多少條，本文就可以完成對(duì)數(shù)據(jù)的分頁(yè)。不用向以前一樣寫大量的的JS來控制樣式，來進(jìn)行樣式的變換。消息提示Message，在本文進(jìn)行一些操作之后，本文可以適當(dāng)?shù)慕o本文的使用者一些提示，讓他們知道操作已經(jīng)完成了。它也有不同的樣式，可以告訴使用者一些信息，比如成功就用綠色的信息，警告就用黃色的信息，錯(cuò)誤就用紅色的信息。導(dǎo)航菜單NavMenu，為使用者提供導(dǎo)航，為他們提供方便，它還提供了一些簡(jiǎn)單的過渡效果，讓兩個(gè)選項(xiàng)之間有一個(gè)過渡的動(dòng)畫，不會(huì)轉(zhuǎn)換的那么生硬，還可以設(shè)置多級(jí)菜單。對(duì)話框Dialog，本文在提交信息或者編輯信息的時(shí)候就需要一個(gè)彈出框來接受本文的信息，然后把數(shù)據(jù)返回給數(shù)據(jù)庫(kù)。提交界面和編輯界面相似，因此，可以封裝成一個(gè)組件，供其他組件復(fù)用。3.4.3Element-UI的優(yōu)勢(shì)Element-UI是餓了么前端團(tuán)隊(duì)負(fù)責(zé)開發(fā)研究的，開發(fā)者團(tuán)隊(duì)的規(guī)模很大，發(fā)布版本數(shù)量也更強(qiáng)，它是基于Vue2.0，現(xiàn)在Vue在國(guó)內(nèi)很火，很多人使用，適用團(tuán)體還是很大的，所以Vue背后還有阿里Weex的項(xiàng)目，所以還是很有前景的。3.5Node.js語(yǔ)言（1）Nodemon：編寫后臺(tái)時(shí)，使用者一旦修改文件，使用者就必須重新開啟服務(wù)器，其實(shí)這樣很麻煩，但是這個(gè)插件，修改之后保存就可以了，不需要重新開啟服務(wù)器。（2）Express：其實(shí)這個(gè)集成所有好用的代碼為一身，本文寫原生的服務(wù)器還是很麻煩的，尤其是靜態(tài)伺服，但是這個(gè)框架，只需要一行代碼，Express可以幫本文很快寫出服務(wù)器而且不容易崩潰，很方便，是寫代碼的好幫手。（3）bcrypt：密碼加密算法，本文的密碼傳到后臺(tái)，本文不可能直接把密碼放到數(shù)據(jù)庫(kù)，要不然密碼不就泄露了，本文需要對(duì)傳過來的密碼進(jìn)行加密，加密之后再放進(jìn)數(shù)據(jù)庫(kù)，這樣密碼才能安全。（4）JsonWebToken：是目前最流行的跨域認(rèn)證解決方案。早期使用session配合cookie來負(fù)責(zé)認(rèn)證，隨著互聯(lián)網(wǎng)的普及，網(wǎng)民數(shù)量劇增，同時(shí)在線人數(shù)也大幅度的增加，session本身就是增加一個(gè)用戶，生成一個(gè)session，這將給服務(wù)器帶來巨大的壓力。對(duì)比JWT就不需要服務(wù)器來生成，是由客戶端生成，JWT本身是不會(huì)自動(dòng)銷毀的，你必須給它設(shè)置時(shí)間，要不然也會(huì)造成大量垃圾。JWT包含了認(rèn)證信息，一旦被截獲，信息可能會(huì)被泄露，所以設(shè)置的時(shí)間最好短一點(diǎn)，為了安全，也不要使用HTTP協(xié)議，最好使用HTTPS協(xié)議。（5）gulp：是很流行的項(xiàng)目打包工具，它是基于任務(wù)打包的。如果你還沒有使用過前端構(gòu)建工具，或者覺得grunt太難用的話，那就嘗試gulp。gulp是根據(jù)一個(gè)個(gè)任務(wù)打包的，方便快捷，需要什么功能直接下載所需要的插件即可。3.6MongoDB數(shù)據(jù)庫(kù)3.6.1MongoDB的概述MongoDB是一個(gè)基于分布式文件存儲(chǔ)的數(shù)據(jù)庫(kù)，它是基于C++語(yǔ)言，為了WEB應(yīng)用提供可擴(kuò)展的高性能數(shù)據(jù)存儲(chǔ)解決方法。MongoDB是一個(gè)非關(guān)系型數(shù)據(jù)庫(kù)，它的數(shù)據(jù)結(jié)構(gòu)非常松散，是類似Json的bson格式，所以本文可以用來存儲(chǔ)復(fù)雜的數(shù)據(jù)類型。MongoDB最大的特點(diǎn)就是它的查詢語(yǔ)言特別豐富，幾乎可以實(shí)現(xiàn)類似關(guān)系數(shù)據(jù)庫(kù)表單查詢的絕大部分功能，而且，本文還可以對(duì)它建立索引。3.6.2MongoDB的特點(diǎn)（1）面向文檔存儲(chǔ)（Json數(shù)據(jù)模式簡(jiǎn)單而強(qiáng)大）（2）動(dòng)態(tài)查詢（3）全索引支持，擴(kuò)展到內(nèi)部對(duì)象和內(nèi)嵌數(shù)組（4）查詢記錄分析（5）快速，就地更新（6）高效儲(chǔ)存二進(jìn)制大對(duì)象（比如照片和音頻）（7）復(fù)制和故障切換支持（8）商業(yè)支持，培訓(xùn)和咨詢[24]3.7本章小結(jié)本章介紹了系統(tǒng)的基本要求，本文把資金管理系統(tǒng)的需求與原理進(jìn)行介紹。本文的系統(tǒng)有注冊(cè)、登錄、注銷等功能。本章對(duì)該系統(tǒng)的各個(gè)界面進(jìn)行詳細(xì)介紹。4.系統(tǒng)實(shí)現(xiàn)4.1前端模塊實(shí)現(xiàn)4.1.1Vue項(xiàng)目的創(chuàng)建本章詳細(xì)介紹本系統(tǒng)的使用技術(shù)，介紹了技術(shù)的使用方法和使用的前景，對(duì)此框架本文進(jìn)行了逐個(gè)分析，對(duì)原理進(jìn)行分析。這些分析加入了本文自己的理解，用自己的話來敘述。在Windows10系統(tǒng)開發(fā)環(huán)境下，首先安裝Vue.js的腳手架vue-cli，vue-cli可以自動(dòng)生成Vue.js+Webpack的項(xiàng)目模板，包含vueinitwebpack-simple和vueinitwebpack兩種項(xiàng)目名。以下是安裝vue-cli的執(zhí)行命令：npminstall-gvue-cli然后就可以創(chuàng)建項(xiàng)目了，在開發(fā)平臺(tái)項(xiàng)目目錄下右鍵運(yùn)行g(shù)itbashhere，緊接著在gitbash下執(zhí)行如下命令（client是本開發(fā)平臺(tái)的前端項(xiàng)目名稱）：vueinitwebpack-simpleclient回車后將生成client項(xiàng)目文件夾.然后該項(xiàng)目需要下載安裝依賴cdclientnpminstall4.1.2Vue項(xiàng)目展示 圖4-1注冊(cè)界面 如圖4-1所示，是注冊(cè)界面，可以注冊(cè)賬號(hào)，所有選項(xiàng)都不得為空，如果為空會(huì)進(jìn)行提示。有四個(gè)身份可供選擇。圖4-2登錄界面如圖4-2所示，是登錄界面，點(diǎn)擊登錄按鈕發(fā)送請(qǐng)求，和數(shù)據(jù)庫(kù)密碼進(jìn)行對(duì)比，登錄成功，會(huì)生成一個(gè)token，有這個(gè)token才能登錄其他的界面。圖4-3人員調(diào)動(dòng)界面如圖4-3所示，是人員調(diào)動(dòng)界面，只有總經(jīng)理才能看到這個(gè)界面，可以調(diào)整員工的身份。圖4-4資金流水界面如圖4-4所示，是資金流水界面，可以展示資金信息，可以添加，刪除，修改，可以進(jìn)行時(shí)期篩選。圖4-5資金圖表界面如圖4-5所示，是資金圖表界面，可以展示資金信息的狀況。圖4-6請(qǐng)假界面如圖4-6所示，是請(qǐng)假界面。除了總經(jīng)理，其他都不用請(qǐng)假。圖4-7請(qǐng)假處理界面如圖4-7所示，是請(qǐng)假處理界面，除了總經(jīng)理和人力部門可以對(duì)請(qǐng)假條進(jìn)行處理。圖4-8考勤界面如圖4-8所示，是缺勤界面，展示你有沒有請(qǐng)過假。圖4-9員工信息界面如圖4-9所示，是員工信息界面，可以展示除了總經(jīng)理之外的所有員工信息。4.1.3項(xiàng)目聯(lián)調(diào)前端項(xiàng)目和后端項(xiàng)目完成之后，本系統(tǒng)還不算完成，我們還需要對(duì)項(xiàng)目進(jìn)行打包處理。項(xiàng)目打包是對(duì)我們的項(xiàng)目資源進(jìn)行整合，會(huì)把我們不需要的資源去除，只留下我們需要的資源，還會(huì)對(duì)我們的css文件進(jìn)行壓縮換行符，對(duì)我們的js文件進(jìn)行變量替換壓縮我們的代碼，Vue給我們提供了打包工具，我們只需要輸入一條命令即可，命令如下：npmrunbuild但是打包之后就完成了，打包之后可以看到各個(gè)文件的大小，打包之后運(yùn)行文件，頁(yè)面出現(xiàn)白屏，需要更改vue的路由模式，不要history的模式，在打包的配置中修改打包資源的路徑即可解決這個(gè)問題。完成以上步驟即可，把打包過后的項(xiàng)目放到服務(wù)器中，利用express配置靜態(tài)資源目錄。整個(gè)項(xiàng)目就可以可以打包上線。4.2后端模塊實(shí)現(xiàn)該系統(tǒng)使用Node.js作為后臺(tái)的語(yǔ)言，主要是對(duì)前臺(tái)發(fā)送的請(qǐng)求進(jìn)行響應(yīng)然后進(jìn)行處理。本系統(tǒng)接口采用RESTful風(fēng)格，它是一種風(fēng)格，不是一個(gè)標(biāo)準(zhǔn)，它的理念使我們的接口看起來更容易懂，簡(jiǎn)潔，高效。利用use功能，把每個(gè)功能模塊編寫在其他文件中，后面直接導(dǎo)入進(jìn)主服務(wù)器中，這樣使我們看到。后端的接口主要就是提供增刪改查功能，對(duì)于不同的表可能會(huì)有些許的不一樣。對(duì)于個(gè)人信息，本系統(tǒng)在注冊(cè)功能中，對(duì)傳輸過來的密碼進(jìn)行一定規(guī)則的加密，在加密之后保存在數(shù)據(jù)庫(kù)中，這樣數(shù)據(jù)就算被攻破也沒有關(guān)系。修改密碼接口，本系統(tǒng)把從數(shù)據(jù)庫(kù)中獲取到的數(shù)據(jù)進(jìn)行密碼解析，然后和前端傳過來的密碼進(jìn)行比對(duì)。對(duì)于考勤表的接口，與眾不同的是，在添加接口中會(huì)把之前的數(shù)據(jù)的現(xiàn)金，和支出、收入相加減，最后得出現(xiàn)金的數(shù)據(jù)。本系統(tǒng)還設(shè)置了通過郵箱來尋找符合條件的數(shù)據(jù)。4.3數(shù)據(jù)庫(kù)的實(shí)現(xiàn)該系統(tǒng)使用MongoDB非關(guān)系型數(shù)據(jù)庫(kù)存儲(chǔ)用戶信息、資金信息和考勤記錄表。用戶表的類型有姓名、郵箱、身份、密碼、處理人和申請(qǐng)時(shí)間。資金信息表的類型有類型、描述、收入、支出、現(xiàn)金、備注和存入時(shí)間?？记诒淼念愋陀朽]箱、請(qǐng)假原因、請(qǐng)假天數(shù)、請(qǐng)假開始時(shí)間，請(qǐng)假結(jié)束時(shí)間，請(qǐng)假的申請(qǐng)時(shí)間。4.4本章小結(jié)本章詳細(xì)介紹本系統(tǒng)的前端，后臺(tái)和數(shù)據(jù)庫(kù)的具體實(shí)現(xiàn)。先是開發(fā)環(huán)境部署、項(xiàng)目創(chuàng)建，然后根據(jù)第三章的需求分析具體實(shí)現(xiàn)每一個(gè)模塊。期間，根據(jù)開發(fā)需求開發(fā)了若干個(gè)同于、常用的組件，并對(duì)部分組件進(jìn)行了簡(jiǎn)單的介紹。5.出現(xiàn)的問題及解決方案5.1問題（1）本文就一直處于修改了密碼，登錄不成功。（2）最開始本文只知道Vue中的父子組件傳值，但是本文又想獲取數(shù)據(jù)。（3）npm下載包有時(shí)候會(huì)報(bào)錯(cuò)，不能成功下載。（4）打開項(xiàng)目，但是沒有顯示數(shù)據(jù)。（5）打包項(xiàng)目的時(shí)候，成品一片空白。（6）用git上傳到自己的github上去，一直推送失敗。（7）就是路由跳轉(zhuǎn)，本文想必須登錄了才能看到主頁(yè)。（8）本文在登錄后，本文一直在想怎么確定在登錄的時(shí)間，不想一直登錄，萬一，忘記取消登錄，別人會(huì)拿著你的賬號(hào)看到內(nèi)部的信息。（9）因?yàn)楸疚脑O(shè)置了普通員工和管理員等多種身份，希望不同身份看到的內(nèi)容不一樣。（10）因?yàn)槊總€(gè)人的電腦的大小不一樣，但是那個(gè)信息又有很多選項(xiàng)，但是本文如果把每個(gè)選項(xiàng)的寬度設(shè)置小了，就會(huì)變得特變難看，但是不設(shè)置小，本文又看不見全部的。（11）打包后生成的代碼，打開發(fā)現(xiàn)獲取不到后臺(tái)數(shù)據(jù)。5.2解決方案（1）因?yàn)閷?duì)密碼是加密后放在數(shù)據(jù)庫(kù)里面的，數(shù)據(jù)庫(kù)里面的數(shù)據(jù)也看不出密碼是什么樣子，本文就一直處于修改了密碼，登錄不成功，原來本文是加密加密錯(cuò)了。本文用那個(gè)同步的函數(shù)用法用錯(cuò)了，所以每次加密都是加密一個(gè)錯(cuò)誤的密碼，存儲(chǔ)的也是錯(cuò)誤的密碼。（2）最開始本文只知道Vue中