員工績(jī)效管理系統(tǒng)的事項(xiàng)管理模塊的設(shè)計(jì)

摘要隨著互聯(lián)網(wǎng)的高速發(fā)展，Web應(yīng)用也越來(lái)越多。目前廣東東軟學(xué)院在教師績(jī)效考核方面仍處在使用紙張登記及統(tǒng)計(jì)的方式去記錄教師績(jī)效成績(jī)。這極大地加大了學(xué)院管理層的工作量且這種方式準(zhǔn)確性和效率都不高。故學(xué)院急需一個(gè)Web系統(tǒng)對(duì)教師績(jī)效進(jìn)行管理和統(tǒng)計(jì)。本課題正是對(duì)該系統(tǒng)進(jìn)行開(kāi)發(fā)與設(shè)計(jì)。本課題系統(tǒng)的使用角色主要分為主任和教職工。教職工主要使用本系統(tǒng)進(jìn)行活動(dòng)事項(xiàng)的提交和查看。主任主要是對(duì)教職工申請(qǐng)的事項(xiàng)進(jìn)行查看和審核并得知每個(gè)教職工的具體績(jī)效。本課題描述的是這個(gè)員工績(jī)效管理系統(tǒng)的事項(xiàng)管理模塊，主要介紹這個(gè)系統(tǒng)的總體需求和設(shè)計(jì)。關(guān)鍵詞：Node.js；React；Express

AbstractWiththerapiddevelopmentoftheInternet,therearemoreandmorewebapplications.Currently,GuangdongNeusoftCollegestillusespaperregistrationandstatisticstorecordteacherperformancescoresinteacherperformanceevaluation.Thissignificantlyincreasestheworkloadofuniversitymanagersandthemethodisnotaccurateandefficient.Therefore,universitiesurgentlyneedawebsystemtomanageandcountteachergrades.Thethemeissystemdevelopmentanddesign.Theroleofthissubjectsystemismainlydividedintothedeanandfaculty.Teachersandstaffprimarilyusethissystemtosendandviewactivities.Thedirectorwillprimarilyreviewandreviewtheitemsappliedbythefacultyandstaff,andlearnthespecificperformanceofeachfaculty.Thistopicdescribesthecasemanagementmoduleofthisemployeeperformancemanagementsystem,whichmainlyintroducestheoverallrequirementsanddesignofthissystem.Keywords:Node.js;React;Express

目錄TOC\h\z\t"paper1,1,paper2,2,paper3,3,paper4,4,paper_rtitle,1"第1章：緒論 第1章：緒論本章主要描述了和介紹了本課題研究的現(xiàn)狀和想要實(shí)現(xiàn)的目標(biāo)等內(nèi)容，目的是讓讀者更好地了解本課題進(jìn)行開(kāi)發(fā)的意義所在。選題的意義和目的在這互聯(lián)網(wǎng)快速發(fā)展的時(shí)候，我們學(xué)校在教師績(jī)效方面卻仍停留在紙質(zhì)的教師報(bào)告來(lái)記錄教師績(jī)效等重要信息，這種做法效率實(shí)在太低，而且數(shù)據(jù)不容易統(tǒng)計(jì)和保存。每年需要大量人力物力將這些報(bào)告一一整理統(tǒng)計(jì)，給學(xué)院管理層增加了極大的工作量。當(dāng)下是互聯(lián)網(wǎng)迅速發(fā)展的時(shí)代，而Web是互聯(lián)網(wǎng)的重要一部分，也是最常用的一部分。而且現(xiàn)在許多地方都使用了Web處理許多問(wèn)題，快速地傳輸數(shù)據(jù)、快速地記錄重要資料，這些優(yōu)勢(shì)都令Web有更大的施展空間。隨著互聯(lián)網(wǎng)Web服務(wù)器的發(fā)展，幾乎所有操作系統(tǒng)都會(huì)安裝瀏覽器，而瀏覽器主要是用于B/S的Web服務(wù)器的瀏覽，使得我們能很方便地瀏覽服務(wù)器和使用服務(wù)器資源。我們能制作一個(gè)B/S的Web服務(wù)器，既順應(yīng)了互聯(lián)網(wǎng)時(shí)代的發(fā)展，又方便了學(xué)校在員工績(jī)效整理和統(tǒng)計(jì)方面的工作壓力。研究現(xiàn)狀當(dāng)下是互聯(lián)網(wǎng)迅速發(fā)展的時(shí)代，在這高速發(fā)展的時(shí)代，微前端將被越來(lái)越多的開(kāi)發(fā)人員和公司所接受和使用。微前端是一種類似于微服務(wù)架構(gòu)，它將微服務(wù)理念應(yīng)用于瀏覽器端，即將單頁(yè)面前端應(yīng)用由單一的單體應(yīng)用轉(zhuǎn)變?yōu)槎鄠€(gè)小型前端應(yīng)用那個(gè)聚合為一的應(yīng)用。而在微服務(wù)前端框架中React最受喜愛(ài)。根據(jù)2019年JavaScript的現(xiàn)狀調(diào)查，React仍以最高的滿意率蟬聯(lián)第一并繼續(xù)主導(dǎo)了前端框架。開(kāi)發(fā)者喜愛(ài)React的主要原因是React構(gòu)建漂亮、小型、健壯且可拓展的應(yīng)用程序。課題研究的內(nèi)容在本課題的Web服務(wù)器中，教職工用自己的職工號(hào)和密碼登錄之后，就能查看自己的績(jī)效分?jǐn)?shù)還能看到自己的排名情況，還能知道自己是哪些事項(xiàng)加了分，更能知道每個(gè)事項(xiàng)的詳情。教職工也可以申請(qǐng)自己參與過(guò)的事項(xiàng)活動(dòng)提交到系統(tǒng)，再由主任或副主任進(jìn)行審核職教工的事項(xiàng)通過(guò)或是駁回申請(qǐng)。主任和副主任能瀏覽全體員工的排名，還能針對(duì)員工提交的事項(xiàng)進(jìn)行審核。課題的開(kāi)發(fā)目標(biāo)(1)教職工或(副)主任登錄，用戶基本信息在用戶上系統(tǒng)預(yù)計(jì)會(huì)記錄用戶的基本信息，包括教職工號(hào)、性別、聯(lián)系方式、電子郵箱、入職時(shí)間等。(2)教職工登記和查看事項(xiàng)在登記查看事項(xiàng)上，這個(gè)是系統(tǒng)的主體功能，需要記錄事項(xiàng)的標(biāo)題、活動(dòng)內(nèi)容、活動(dòng)的文檔等關(guān)鍵信息。(3)事項(xiàng)根據(jù)不同的制度給每個(gè)教職工加分在制度上，這個(gè)系統(tǒng)的一個(gè)大模塊，該模塊主要主導(dǎo)了系統(tǒng)的事項(xiàng)信息，這是由于每個(gè)不同的制度都會(huì)有不同的事項(xiàng)條目。(4)主任或副主任審核事項(xiàng)在事項(xiàng)審核上，事項(xiàng)的審核的權(quán)限是需要副主任或是主任的權(quán)限才能審核，而審核駁回需要駁回理由。(5)績(jī)效根據(jù)事項(xiàng)進(jìn)行統(tǒng)計(jì)分?jǐn)?shù)在績(jī)效統(tǒng)計(jì)上，每個(gè)用戶都能都知道自己的績(jī)效分?jǐn)?shù)，而且還能知道自己的績(jī)效排名；在主任或副主任的用戶上，用戶能查看全體人員的績(jī)效排名。論文結(jié)構(gòu)概述本文主要分為七大章節(jié)。第一章主要介紹了本課題開(kāi)發(fā)的意義所在，也更能讓讀者理解我們開(kāi)發(fā)該網(wǎng)站的目的。第二章主要介紹我們開(kāi)發(fā)所使用的相關(guān)技術(shù)和所使用技術(shù)的背景。第三章主要介紹了本系統(tǒng)的主要需求和我們對(duì)需求的分析以及本人在本系統(tǒng)承擔(dān)的工作。第四章主要講了本系統(tǒng)的總體設(shè)計(jì)以及模塊的劃分以及各個(gè)模塊的總體框架。第五章主要介紹了我們對(duì)于數(shù)據(jù)庫(kù)的設(shè)計(jì)以及其作用。第六章主要講述本課題的開(kāi)發(fā)過(guò)程及系統(tǒng)的測(cè)試。第七章是本課題的總結(jié)和本人對(duì)于本課題的心得與體會(huì)。

第2章：相關(guān)技術(shù)及開(kāi)發(fā)工具工欲善其事，必先利其器。本章主要介紹本課題開(kāi)發(fā)過(guò)程中用到的相關(guān)工具。2.1技術(shù)背景React是Facebook在2013年推出的一款前端框架。Facebook原是創(chuàng)建React供自己使用，后來(lái)又將它開(kāi)源。React以HTML呈現(xiàn)，它與Angular不同，React不是框架而是一個(gè)JavaScript庫(kù)。所以他本身不能規(guī)定框架模式譬如MVC模式，使用它只能用于界面的渲染，也就是MVC中的V，但是如何將它跟其他的模塊組合完全取決于開(kāi)發(fā)者[1]。這能讓開(kāi)發(fā)更加地多樣化，也讓React自身更兼容更多的框架或是其他的庫(kù)。而Facebook為什么發(fā)明了React呢？其實(shí)React并非誕生于Facebook的應(yīng)用程序中。最初，他們也是使用典型的MVC模式開(kāi)發(fā)了客戶端，該模型具有雙向的數(shù)據(jù)綁定和模板。視圖將監(jiān)聽(tīng)models的改動(dòng)，并且它們將這些更改做出更改自身的響應(yīng)。隨著應(yīng)用程序越來(lái)越復(fù)雜，這種模式也變得更加復(fù)雜和麻煩。這種級(jí)聯(lián)更新就非常難以維護(hù)了，因?yàn)楦鶕?jù)根目錄的不同，更新視圖的代碼也會(huì)有細(xì)微的差異。然后他們就思考，當(dāng)視圖中描述模型的所有代碼已經(jīng)存在，我們?yōu)槭裁匆幚硭械膯?wèn)題？難道我們應(yīng)該縮減代碼來(lái)進(jìn)行過(guò)渡嗎？為什么我們不用模板來(lái)管理他們的狀態(tài)？所以他們及開(kāi)始考慮構(gòu)建聲明性而非命令性的東西。[1]這就是Facebook創(chuàng)造了React的原因。2.2開(kāi)發(fā)工具及工具版本開(kāi)發(fā)用的IDE：MicrosoftVisualStudioCode版本：1.44.1開(kāi)發(fā)工具包：Node.js版本：12.14.1數(shù)據(jù)庫(kù)：Mysql版本：接口測(cè)試工具：ouapi2.3相關(guān)技術(shù)概述2.3.1Node.js簡(jiǎn)介Node.js是一種基于ChromeV8引擎運(yùn)行環(huán)境的一個(gè)平臺(tái)，一個(gè)讓JavaScript運(yùn)行在服務(wù)器的開(kāi)發(fā)平臺(tái)。它由RyanDahl在2009年5月發(fā)布，它的出現(xiàn)讓JavaScript成為與Ruby、Python、Perl、PHP等服務(wù)端語(yǔ)言平起平坐的腳本語(yǔ)言。[8]Node.js使用時(shí)間驅(qū)動(dòng)，非阻塞I/O模型而得以輕量高效，非常適合在分布式設(shè)備上運(yùn)行數(shù)據(jù)密集型的實(shí)用應(yīng)用。2.3.2React簡(jiǎn)介React起源于Facebook的內(nèi)部項(xiàng)目，這是因?yàn)樵摴緦?duì)市場(chǎng)上所有JavaScriptMVC框架都不滿意，決定自己寫一套用來(lái)架設(shè)Instagram網(wǎng)站。做出來(lái)之后發(fā)現(xiàn)這套東西非常好用，于是在2013年5月開(kāi)源了。[6]2.3.3Express簡(jiǎn)介Express是一個(gè)最小且靈活的Node.jsWeb應(yīng)用程序框架，為Web和移動(dòng)應(yīng)用程序提供了一組強(qiáng)大的功能。2.3.4Mysql簡(jiǎn)介MySQL是一種開(kāi)放源代碼的關(guān)系型數(shù)據(jù)庫(kù)管理系統(tǒng)，它使用最常用的數(shù)據(jù)庫(kù)管理語(yǔ)言——結(jié)構(gòu)化查詢語(yǔ)言SQL進(jìn)行數(shù)據(jù)庫(kù)管理。[7]MySQL是開(kāi)放源代碼的，所以任何人都可以在GeneralPublicLicense的許可下下載并根據(jù)個(gè)性化的需要對(duì)其進(jìn)行修改。MySQL因?yàn)槠溥m應(yīng)性、可靠性和速度而備受關(guān)注。大多數(shù)人都認(rèn)為在不需要事務(wù)化處理的情況下，MySQL是管理內(nèi)容最好的選擇。

第3章：需求分析本章節(jié)主要描述了本系統(tǒng)的主要需求以及對(duì)應(yīng)需求的分析介紹。3.1系統(tǒng)需求3.1.1系統(tǒng)教職工需求本系統(tǒng)的教職工主要需求首先是用戶的登錄，職工需要輸入職工號(hào)和密碼進(jìn)行登錄，然后是登記自己舉辦的事項(xiàng)，登記完事項(xiàng)還能查看自己參與的事項(xiàng)以及其得分，在主界面還能看到自己的績(jī)效排名。3.1.2系統(tǒng)主任需求本系統(tǒng)的主任主要需求首先也是用戶的登錄，主任需要輸入職工號(hào)和密碼進(jìn)行登錄，也需要想普通用戶那樣能登記自己的事項(xiàng)活動(dòng)。不同的是，主任能看到全體職工的績(jī)效和排名，然后還要負(fù)責(zé)員工活動(dòng)事項(xiàng)的審核工作，還需要有事項(xiàng)制度的制作和修改，方便員工申請(qǐng)不同的事項(xiàng)類別。3.1.3系統(tǒng)管理員需求本系統(tǒng)的管理員需求首先是管理員的登錄，管理員需要輸入職工號(hào)和密碼進(jìn)行登錄，只有管理員能新增系統(tǒng)的用戶。而管理員也能修改用戶的重要信息，譬如重置密碼，修改一些用戶不能編輯的重要信息如職工號(hào)。然后是管理系部，管理員可以對(duì)系部進(jìn)行增刪查改的操作。3.2需求分析3.2.1功能性分析本系統(tǒng)的功能主要是四個(gè)模塊：用戶管理模塊、事項(xiàng)管理模塊、績(jī)效統(tǒng)計(jì)模塊和制度管理模塊。用戶管理模塊：主要用于用戶進(jìn)行登錄，查看和修改個(gè)人信息等操作。事項(xiàng)管理模塊：主要用于事項(xiàng)活動(dòng)的登記并記錄每個(gè)用戶每個(gè)活動(dòng)事項(xiàng)的得分，主任可以審核普通教職工的事項(xiàng)活動(dòng)，可以提交審核通過(guò)或是駁回申請(qǐng)，若是駁回教職工申請(qǐng)，必須說(shuō)明駁回理由。績(jī)效統(tǒng)計(jì)模塊：主要用于統(tǒng)計(jì)每個(gè)用戶因?yàn)槟男┦马?xiàng)得分而獲得加分，還需要將用戶的績(jī)效進(jìn)行統(tǒng)計(jì)和排名。制度管理模塊：主要用于事項(xiàng)活動(dòng)的分類，每個(gè)不同的制度對(duì)應(yīng)的事項(xiàng)有這不同的申請(qǐng)條目。3.2.2系統(tǒng)人員功能需求分析本系統(tǒng)的功能主要是四個(gè)模塊：用戶管理模塊、事項(xiàng)管理模塊、績(jī)效統(tǒng)計(jì)模塊和制度管理模塊，系統(tǒng)功能詳細(xì)如表。教職工主要能使用系統(tǒng)功能的賬戶的登錄、查看個(gè)人信息、修改個(gè)人信息、申請(qǐng)活動(dòng)事項(xiàng)、查看個(gè)人申請(qǐng)活動(dòng)、查看個(gè)人績(jī)效。副主任主要能使用所有教職工部分的系統(tǒng)功能，另外還能使用添加制度、修改制度、刪除制度、查看全體用戶的信息、查看全體員工績(jī)效、審核活動(dòng)事項(xiàng)、設(shè)置本部門的默認(rèn)提交的事項(xiàng)狀態(tài)的系統(tǒng)功能。主任主要能使用所有副主任部分的系統(tǒng)功能，另外還能修改教職工用戶和副主任用戶的任職，能將他們提拔或是降職。管理員則主要管理用戶管理模塊部分的系統(tǒng)功能，其中包括查看全體成員的用戶信息、添加系統(tǒng)用戶、刪除系統(tǒng)用戶、修改用戶信息、重置用戶密碼、添加部門信息、刪除部門信息、修改部門信息、增加職位信息、刪除職位信息、修改職位信息。人員功能教職工副主任主任管理員登錄√√√√查看用戶信息√√√√查看其它用戶信息√√√√修改個(gè)人用戶信息√√√√申請(qǐng)活動(dòng)事項(xiàng)√√√×查看活動(dòng)事項(xiàng)√√√×查看個(gè)人績(jī)效√√√×查看全體員工績(jī)效×√√×添加制度×√√×修改制度×√√×刪除制度×√√×查看所有用戶信息×√√√審核活動(dòng)事項(xiàng)×√√×設(shè)置默認(rèn)事項(xiàng)狀態(tài)×√√×修改用戶職位××√√修改用戶所有信息×××√添加用戶×××√刪除用戶×××√重置用戶密碼×××√添加部門×××√修改部門×××√刪除部門×××√添加職位×××√修改職位×××√刪除職位×××√表

第4章：系統(tǒng)模塊分析與設(shè)計(jì)本章節(jié)主要分析了本系統(tǒng)的模塊構(gòu)成以及功能結(jié)構(gòu)。由于本人主要負(fù)責(zé)事項(xiàng)管理模塊設(shè)計(jì)，因此設(shè)計(jì)主要講解的是事項(xiàng)管理模塊設(shè)計(jì)。4.1系統(tǒng)人員使用模塊4.1.1教職工角色教職工主要是先登錄系統(tǒng)，然后在主頁(yè)能查看自己參加了哪些事項(xiàng)得分申請(qǐng)事項(xiàng)，還能看到自己的績(jī)效分?jǐn)?shù)和當(dāng)前的排名。界面有申請(qǐng)事項(xiàng)的按鈕，進(jìn)去后能填寫對(duì)應(yīng)不同類別的事項(xiàng)，添加事項(xiàng)上，能填寫事項(xiàng)的相關(guān)內(nèi)容，還能提交報(bào)告文檔和活動(dòng)圖片。提交之后能查看事項(xiàng)的相關(guān)內(nèi)容，直到事項(xiàng)申請(qǐng)通過(guò)才能計(jì)入個(gè)人績(jī)效分?jǐn)?shù)內(nèi)。4.1.2主任角色主任主要先是登錄系統(tǒng)，然后在主頁(yè)查看自己參加了哪些事項(xiàng)得分事項(xiàng)，還能看到所有職工的績(jī)效分?jǐn)?shù)和所有職工的績(jī)效排名。界面有申請(qǐng)事項(xiàng)的按鈕，進(jìn)去后能填寫對(duì)應(yīng)不同類別的事項(xiàng)，添加事項(xiàng)上，能填寫事項(xiàng)的相關(guān)內(nèi)容，還能提交報(bào)告文檔和活動(dòng)圖片。主任還能對(duì)職工的事項(xiàng)進(jìn)行審核，能讓他們審核通過(guò)或是駁回申請(qǐng)。主任還能制定制度，每個(gè)事項(xiàng)都會(huì)對(duì)應(yīng)其中一個(gè)制度，每個(gè)制度有不同的事項(xiàng)條目。4.2系統(tǒng)總體設(shè)計(jì)4.2.1總體設(shè)計(jì)系統(tǒng)框架本系統(tǒng)使用的主要是React+express框架的前后端分離系統(tǒng)。系統(tǒng)由mysql數(shù)據(jù)庫(kù)保存數(shù)據(jù)，然后express服務(wù)器進(jìn)行數(shù)據(jù)庫(kù)的增刪查改操作，然后提供對(duì)外開(kāi)放接口再由React服務(wù)器對(duì)它進(jìn)行訪問(wèn)。網(wǎng)站結(jié)構(gòu)，如圖圖基本數(shù)據(jù)約定項(xiàng)目目錄結(jié)構(gòu)如圖.1，performance為根目錄名稱，根目錄下主要存放performance_react文件夾、performance_express文件夾、performance_react文件夾、config.json文件、init.bat文件和run.bat文件。performance_react文件夾內(nèi)存放init.bat、run.bat和React服務(wù)器的其他代碼或運(yùn)行文件。init.bat文件主要用于React服務(wù)器初始化和服務(wù)器使用的包安裝；run.bat文件主要用于運(yùn)行React服務(wù)器以保證系統(tǒng)在云服務(wù)器上一鍵啟動(dòng)。performance_express文件夾存放init.bat和react服務(wù)器的其他代碼或運(yùn)行文件。init.bat文件主要用于express服務(wù)器初始化和服務(wù)器使用的包安裝；run.bat文件主要用于運(yùn)行express服務(wù)器以保證系統(tǒng)在云服務(wù)器上一鍵啟動(dòng)。config.json文件主要用于服務(wù)器基礎(chǔ)配置，配置內(nèi)容詳見(jiàn)表.3。根目錄的init.bat文件主要用于初始化react服務(wù)器和express服務(wù)器，具體運(yùn)行為運(yùn)行performance_react/文件夾下的init.bat和performance_express/文件夾下的init.bat。根目錄的run.bat文件主要用于開(kāi)啟react服務(wù)器和express服務(wù)器，該文件對(duì)應(yīng)代碼如圖.2。注：項(xiàng)目所有文件統(tǒng)一使用不帶BOM的UTF-8編碼文件圖.1@echo

offpushd

performance_expressstart

run.batpopdpushd

performance_reactstart

run.batREM

pauseexit圖.2配置項(xiàng)配置名稱數(shù)據(jù)類型配置值備注express服務(wù)器使用端口express_portint3001react服務(wù)器使用端口react_portint3002事項(xiàng)狀態(tài)acticity_statusobjectobject事項(xiàng)狀態(tài)·待審核acticity_status["1"]string待審核事項(xiàng)狀態(tài)·通過(guò)審核acticity_status["2"]string通過(guò)審核事項(xiàng)狀態(tài)·駁回acticity_status["3"]string駁回?cái)?shù)據(jù)庫(kù)連接mysqlobjectobject數(shù)據(jù)庫(kù)主機(jī)mysql.hoststring根據(jù)實(shí)際情況填寫數(shù)據(jù)庫(kù)用戶mysql.userstring根據(jù)實(shí)際情況填寫數(shù)據(jù)庫(kù)密碼mysql.passwordstring根據(jù)實(shí)際情況填寫數(shù)據(jù)庫(kù)端口mysql.portstring根據(jù)實(shí)際情況填寫數(shù)據(jù)庫(kù)多語(yǔ)句執(zhí)行mysql.multipleStatementsbooltrue數(shù)據(jù)庫(kù)名稱databasestringperformance_db數(shù)據(jù)庫(kù)編碼mysql_encodingstringutf8/utf8_general_ci職位等級(jí)officeobjectobject管理員等級(jí)office.adminint-1主任等級(jí)office.directorint201副主任等級(jí)office.deputy_directorint101職工等級(jí)office.workerint1表.34.2.2React服務(wù)器服務(wù)器主要的庫(kù)React主要使用了React、Router、Redux、Antd。其中React是基礎(chǔ)的頁(yè)面布局和控件的設(shè)計(jì)；Router主要用于頁(yè)面的跳轉(zhuǎn)，而這種頁(yè)面的跳轉(zhuǎn)也由于React而只更新局部?jī)?nèi)容來(lái)保證系統(tǒng)的高效運(yùn)轉(zhuǎn)；Redux最主要是用作應(yīng)用狀態(tài)的管理，Redux把許多控件的狀態(tài)完美地保存，方便其他的控件使用。譬如登錄狀態(tài)，用戶登錄之后將用戶狀態(tài)信息保存到Redux，方便所有控件對(duì)用戶信息的應(yīng)用。Antd全名antdesign，Antd主要在于界面的布局的美化上，它自帶了許多美化界面的布局供開(kāi)發(fā)者使用，開(kāi)發(fā)者能非常方便地使用這個(gè)庫(kù)的相關(guān)控件。服務(wù)器代碼結(jié)構(gòu)服務(wù)器代碼都在服務(wù)器根目錄的src文件夾如圖.1。其中Api文件夾主要是訪問(wèn)express服務(wù)器的異步處理操作；Common文件夾主要是存放服務(wù)器的一些靜態(tài)圖片；Components文件夾主要存放主要的布局頁(yè)面；Pages主要存放了每個(gè)操作頁(yè)面的主要代碼；Store文件夾主要存放每個(gè)頁(yè)面需要進(jìn)行的后臺(tái)的訪問(wèn)連接方式；App.js是React服務(wù)器開(kāi)啟的主界面；config.json是服務(wù)器的基本配置文件；index.js是React服務(wù)器開(kāi)啟時(shí)自動(dòng)運(yùn)行的代碼。src|-Api|-Common|-Components|-Pages|-Router|-Store|-App.js|-config.json|-index.js圖.用戶展示頁(yè)面基本結(jié)構(gòu)React服務(wù)器主要是系統(tǒng)展示頁(yè)面和用戶操作的重要部分，主頁(yè)面布局如圖，我們主要做的是中間的界面，而側(cè)邊欄和頁(yè)頭只做一次就夠了。界面在跳轉(zhuǎn)更新的時(shí)候一般只更新中間最重要的框體而其他位置不做變動(dòng)。如在點(diǎn)擊個(gè)人事項(xiàng)時(shí)候，主要中間的部分的界面進(jìn)行了變化，如圖。圖4.2.3express服務(wù)器服務(wù)器主要文件目錄結(jié)構(gòu)express服務(wù)器是主要用于訪問(wèn)數(shù)據(jù)庫(kù)并返回?cái)?shù)據(jù)的接口服務(wù)器。服務(wù)器為了方便實(shí)現(xiàn)多個(gè)接口的書寫和實(shí)現(xiàn)，服務(wù)器采用了讀取配置來(lái)生成接口的方式來(lái)生成大量接口。首先是express服務(wù)器的文件目錄，如圖.1。其中head文件夾、image文件夾、word文件夾和temp文件夾是保存上傳文件的文件夾，其中：temp文件夾是上傳文件的主要文件夾，上傳的所有文件將全部放到這里，直到用戶的表單完全提交，再將對(duì)應(yīng)文件放到對(duì)應(yīng)的文件夾，而為了防止占用過(guò)多的服務(wù)器空間，該文件夾下的所有文件會(huì)在服務(wù)器開(kāi)啟是全部刪除；head文件夾是放置用戶頭像的主要文件夾，當(dāng)用戶沒(méi)有頭像時(shí)，會(huì)返回默認(rèn)的頭像路徑；image文件夾是專門放置事項(xiàng)圖片的文件夾，用戶完成事項(xiàng)的申請(qǐng)時(shí)會(huì)從temp文件夾將對(duì)應(yīng)的文件移動(dòng)到該文件夾；word文件夾是專門放置事項(xiàng)文檔的文件夾，用戶完成事項(xiàng)的申請(qǐng)時(shí)會(huì)從temp文件夾將對(duì)應(yīng)的文件移動(dòng)到該文件夾，并以事項(xiàng)編號(hào)作為文件名稱；head文件夾是放置用戶頭像的文件夾，用戶在修改用戶信息中上傳頭像圖片會(huì)直接放到該文件夾，并以用戶編號(hào)作為文件名稱。icons文件夾則是后臺(tái)存放的一些資源圖片，如用戶的默認(rèn)頭像。log文件夾由系統(tǒng)自動(dòng)生成，用于寫下服務(wù)器運(yùn)行的打印信息，用于服務(wù)器的錯(cuò)誤排查。server文件夾則是存放服務(wù)器代碼的主要文件夾。package.json和package-lock.json是Node.js生成的服務(wù)器配置文件，保存當(dāng)前項(xiàng)目基本信息。config.json主要用于各種服務(wù)器的配置。performance_express|-head|-icons|-image|-log|-server|-temp|-word|-config.json|-nodemon.json|-package.json|-pakeage-lock.json|-init.bat|-run.bat圖.express服務(wù)器代碼總體架構(gòu)express服務(wù)器的所有代碼文件均在server文件夾下，server文件夾下的文件如圖.1，最先啟動(dòng)的是server/app.js文件，app.js文件主要用于啟動(dòng)express服務(wù)器以及修改返回報(bào)頭、調(diào)用其他路由、資源等打開(kāi)對(duì)應(yīng)的路徑接口。activity文件夾、department文件夾、rules文件夾、user文件夾都是幾個(gè)模塊相關(guān)的主要代碼存放文件夾。files文件夾是文件上傳相關(guān)代碼的主要文件夾。autofun.js文件主要用于解析根目錄config.json配置并生成對(duì)應(yīng)的接口路徑。connectMysql.js文件主要用于連接數(shù)據(jù)庫(kù)。input.js文件主要用于讀取控制臺(tái)的輸入，并作出對(duì)應(yīng)的操作。resources.js文件主要用于加載靜態(tài)資源文件目錄logs.js文件主要用于生成和打印系統(tǒng)運(yùn)行日志數(shù)據(jù)。server

|-

activity

|

|-

activity.js

|

|-

method.js

|-

department

|

|-

department.js

|

|-

method.js

|-

files

|

|-

files.js

|-

rules

|

|-

method.js

|

|-

rules.js

|-

user

|

|-

method.js

|

|-

user.js

|-

utils

|

|-

method.js

|-

app.js

|-

autofun.js

|-

connectMysql.js

|-

input.js

|-

logs.js

|-

resources.js

|-

util.js圖.config.json主要書寫方式config.json主要書寫個(gè)數(shù)如圖.1，其中：express_header是服務(wù)器返回?cái)?shù)據(jù)的報(bào)頭；resources是資源的配置，里面files是在服務(wù)器本地磁盤的相對(duì)路徑，path則是映射到服務(wù)器根目錄上的相對(duì)路徑；head是用戶頭像的配置，path是頭像資源在服務(wù)器根目錄上的相對(duì)路徑，default是用戶沒(méi)有頭像時(shí)的相對(duì)服務(wù)器根目錄的相對(duì)路徑；word是事項(xiàng)文檔的配置，upload_path是事項(xiàng)文檔保存在服務(wù)器本地的相對(duì)路徑，resources_path是事項(xiàng)文檔在服務(wù)器根目錄上的相對(duì)路徑；image是事項(xiàng)圖片的配置，local_path是事項(xiàng)文檔保存在服務(wù)器本地的相對(duì)路徑，download_path是事項(xiàng)文檔在服務(wù)器根目錄上的相對(duì)路徑；code_message是服務(wù)器返回狀態(tài)碼對(duì)應(yīng)的信息；sql_sentence是服務(wù)器主要接口的生成配置，其中分自動(dòng)(automatic)生成的和手動(dòng)(manual)生成的，其中每個(gè)接口的配置方式如圖.2所示，其中url代表接口路徑；flag是每個(gè)接口的標(biāo)識(shí)符；method是接口的連接方式；param是傳入接口的參數(shù)名稱；data_change是對(duì)傳入?yún)?shù)的名稱進(jìn)行轉(zhuǎn)換；sql_num是該接口執(zhí)行sql語(yǔ)句的數(shù)量；sql是連接數(shù)據(jù)庫(kù)sql語(yǔ)句的具體內(nèi)容，其中head是語(yǔ)句的主體，tail是會(huì)根據(jù)參數(shù)而接到語(yǔ)句主體的部分，auto是判斷是否可以使用tail接入head主體語(yǔ)句，jump則是該語(yǔ)句沒(méi)接收到參數(shù)的時(shí)候是否通過(guò)并繼續(xù)；params是將傳入接口的哪些參數(shù)接入到數(shù)據(jù)庫(kù)語(yǔ)句，第一層數(shù)組的每個(gè)元素對(duì)應(yīng)著每一個(gè)數(shù)據(jù)庫(kù)語(yǔ)句，第二層數(shù)組每個(gè)元素對(duì)應(yīng)數(shù)據(jù)庫(kù)語(yǔ)句每個(gè)需要替換位置對(duì)應(yīng)的參數(shù)，第三層數(shù)組長(zhǎng)度為5，第一個(gè)參數(shù)是參數(shù)名稱，第二個(gè)參數(shù)是參數(shù)類型，第三個(gè)參數(shù)是該參數(shù)的數(shù)據(jù)最小個(gè)數(shù)，最小個(gè)數(shù)只能是0或1，第四個(gè)參數(shù)是該參數(shù)的數(shù)據(jù)最大個(gè)數(shù)，最大個(gè)數(shù)一般是1或-1，-1代表數(shù)據(jù)最大個(gè)數(shù)沒(méi)有限制，第五個(gè)參數(shù)代表該參數(shù)的默認(rèn)值，當(dāng)此接口接收到該參數(shù)為空時(shí)，會(huì)自動(dòng)將默認(rèn)值放入，若是默認(rèn)值為null而進(jìn)入接口不帶此參數(shù)，系統(tǒng)則返回編碼511代表傳入?yún)?shù)錯(cuò)誤；result是返回的參數(shù)的參數(shù)名稱。{

"express_header":

{

},

"resources":

{

"path":

"/resources",

"files":

[

"/head",

"/icons",

"/word",

"/image"

]

},

"head":

{

"path":

"/resources/head/",

"default":

"/resources/icons/head.jpg"

},

"word":

{

"local_path":

"/word/",

"resources_path":

"/resources/word/"

},

"image":

{

"download_path":

"/resources/image/",

"upload_path":

"/image/"

},

"code_message":

{

"200":

"連接正常",

"204":

"無(wú)數(shù)據(jù)",

"403":

"拒絕請(qǐng)求",

"404":

"頁(yè)面不存在",

"500":

"服務(wù)器內(nèi)部錯(cuò)誤",

"511":

"傳入?yún)?shù)不存在或類型錯(cuò)誤",

"601":

"用戶不存在",

"602":

"用戶名或密碼錯(cuò)誤"

},

"sql_sentence":

{

"automatic":

{

"users":

{

},

"activity":

{

},

"rules":

{

},

"department":

{

}

},

"manual":

{

"users":

{

},

"activity":

{

}

}

}}圖.1name|-url(string)|-flag(string)|-method("get"/"post")|-param(array[string])|-data_change(object<string,string>)|-sql_num(int)|-sql(array[object])||-head(string)||-tail(string)||-auto(int/bool)||-jump(bool)|-patams(array[array[array]])||-param_name(string)||-param_type(string)||-param_min(int)||-param_max(int)||-param_default(string/number/bool)|-result(array[string])圖.24.2.4服務(wù)器交互接口數(shù)據(jù)交接方式express服務(wù)器于React服務(wù)器數(shù)據(jù)交接方式主要通過(guò)網(wǎng)絡(luò)連接，即ip+端口+頁(yè)面路徑。而不同的接口有著不同的連接方式。連接方式只有g(shù)et和post方式。在傳入數(shù)據(jù)量較少，而且連接相對(duì)安全的情況下采用get連接方式獲取api數(shù)據(jù)；而傳入?yún)?shù)需要相對(duì)安全的環(huán)境或者傳入?yún)?shù)多的情況則采用port方式連接。在port連接方式中主要接受x-requested-with方式的提交和multipart/form-data方式的提交。其中x-requested-with方式的提交主要是表單信息的提交，而multipart/form-data方式的提交則是文件的提交。express服務(wù)器的數(shù)據(jù)返回有特定的格式，具體格式如圖.1，其中status_code是狀態(tài)碼，標(biāo)記返回?cái)?shù)據(jù)是否正常，狀態(tài)碼具體含義如表.2；message是狀態(tài)碼對(duì)應(yīng)的信息；result是返回的數(shù)據(jù)主體，數(shù)據(jù)會(huì)根據(jù)api接口不同而不同，error是錯(cuò)誤的具體信息。express服務(wù)器具體接口路徑、連接方式傳入?yún)?shù)和返回參數(shù)如表.3{

status_code:

200,

message:

"連接正常",

result:

null,

error:

null

}

圖.1狀態(tài)碼狀態(tài)碼含義200連接正常404頁(yè)面不存在500服務(wù)器內(nèi)部錯(cuò)誤511傳入?yún)?shù)不存在或類型錯(cuò)誤表.2接口名稱接口路徑連接方式接受參數(shù)、含義及類型返回參數(shù)字段、含義及類型登錄/loginpostname職工號(hào)(string)password密碼(string)u_id用戶編號(hào)(int)u_ids職工號(hào)(string)u_name職工名稱(string)u_password職工密碼(string)u_sex職工性別(string)u_phone職工電話(string)u_email職工郵箱(string)u_address職工住址(string)u_birthday職工生日(string)u_onboarding職工入職時(shí)間(string)score職工得分(int)d_id部門編號(hào)d_name所屬部門(string)p_id職位編號(hào)(int)p_name任職(string)p_level職位等級(jí)(int)u_head頭像路徑(string)個(gè)人信息/u_infogetid用戶編號(hào)(int)ids職工號(hào)(string)name用戶名稱(string)u_id用戶編號(hào)(int)u_ids職工號(hào)(string)u_name用戶名(string)u_password用戶密碼(string)u_sex用戶性別(string)u_phone聯(lián)系電話(string)u_email聯(lián)系郵箱(string)u_address用戶住址(string)u_birthday用戶生日(string)u_onboarding用戶入職(string)score用戶績(jī)效(float)d_id部門編號(hào)(int)d_name所屬部門(string)po_id職位編號(hào)(int)po_name用戶職位(string)u_head用戶頭像(string)添加用戶/u_addpostids職工號(hào)(string)name用戶名稱(string)password用戶密碼(string)onboarding入職時(shí)間(string)p_id職位(int)添加完整用戶/u_admin_addpostids職工號(hào)(string)name用戶名(string)password用戶密碼(string)sex用戶性別(string)phone用戶電話(string)address用戶住址(string)email用戶郵箱(string)birthday用戶生日(string)onboarding用戶入職時(shí)間(string)p_id用戶職位(int)imageid頭像編號(hào)(string)簡(jiǎn)要用戶信息/u_slistpostid登錄用戶所屬部門編號(hào)(int)u_id用戶編號(hào)(int)u_ids職工號(hào)(string)u_name用戶名(string)d_id部門編號(hào)(int)d_name部門名稱(string)d_status事項(xiàng)默認(rèn)狀態(tài)(int)修改密碼/u_upasswordpostid用戶編號(hào)(int)password用戶新密碼(string)用戶修改信息/u_uupdatepostid用戶編號(hào)(int)phone用戶電話(string)address用戶住址(string)birthday用戶生日(string)email用戶郵箱(string)修改完整信息/u_aupdatepostid用戶編號(hào)(int)ids職工號(hào)(string)name用戶名(string)sex用戶性別(string)phone用戶電話(string)address用戶住址(string)email用戶郵箱(string)birthday用戶生日(string)onboarding用戶入職(string)用戶完整列表/u_listpostu_id用戶編號(hào)(int)u_ids職工號(hào)(string)u_name用戶名稱(string)u_sex用戶性別(string)u_phone用戶電話(string)u_address用戶住址(string)u_email用戶郵箱(string)u_birthday用戶生日(string)u_onboarding用戶入職(string)po_id職位編號(hào)(int)po_name職位名稱(string)po_level職位等級(jí)(int)d_id部門編號(hào)(int)d_name部門名稱(string)用戶職位變動(dòng)/u_pupdatepostid用戶編號(hào)(int)po_id職位編號(hào)(int)事項(xiàng)信息/a_infopostid事項(xiàng)編號(hào)(int)p_id事項(xiàng)編號(hào)(int)p_topic活動(dòng)標(biāo)題(string)p_starttime活動(dòng)時(shí)間(string)p_timelength活動(dòng)時(shí)長(zhǎng)(int)p_address活動(dòng)地址(string)p_text活動(dòng)內(nèi)容(string)p_status活動(dòng)狀態(tài)(int)p_applytime事項(xiàng)申請(qǐng)時(shí)間(string)p_turndown事項(xiàng)駁回(string)p_other其他條目(string)applicant主辦人(string)r_id制度編號(hào)(int)r_type制度名稱(string)r_text制度內(nèi)容(string)r_d_id細(xì)則編號(hào)(int)r_d_name細(xì)則名稱(string)r_d_p_word細(xì)則內(nèi)容(string)people活動(dòng)人數(shù)(int)p_word活動(dòng)文檔(string)users用戶(array)u_id用戶編號(hào)(int)u_ids職工號(hào)(string)u_name用戶名稱(string)a_score用戶得分(int)p_image圖片(array)f_id圖片編號(hào)(int)f_name文件名(string)f_path文件路徑(string)添加事項(xiàng)/a_addposttopic事項(xiàng)標(biāo)題(string)starttime活動(dòng)時(shí)間(string)timelength活動(dòng)時(shí)長(zhǎng)(int)address活動(dòng)地址(string)text活動(dòng)內(nèi)容(string)status活動(dòng)狀態(tài)(int)other其他條目及內(nèi)容(string{json})r_id細(xì)則編號(hào)(int)applicant主辦人(int)u_id用戶編號(hào)(array[int])score用戶得分(array[int])imageid活動(dòng)圖片(array[int])用戶事項(xiàng)列表/a_plistgetid用戶編號(hào)(int)p_id事項(xiàng)編號(hào)(int)p_topic事項(xiàng)標(biāo)題(string)applicant主辦人名稱(string)people活動(dòng)人數(shù)(int)a_score用戶活動(dòng)得分(int)p_starttime活動(dòng)時(shí)間(string)p_timelength活動(dòng)時(shí)長(zhǎng)(int)p_address活動(dòng)地點(diǎn)(string)p_text活動(dòng)內(nèi)容(string)p_status活動(dòng)狀態(tài)(int)p_applicant事項(xiàng)申請(qǐng)時(shí)間(string)r_id制度編號(hào)(int)r_type制度類型(string)r_text制度內(nèi)容(string)r_d_id細(xì)則編號(hào)(int)r_d_name細(xì)則名稱(string)r_d_p_words細(xì)則內(nèi)容(string)全體事項(xiàng)列表/a_alistgetstart開(kāi)始時(shí)間(string)end結(jié)束時(shí)間(string)id部門編號(hào)(array[int])p_id事項(xiàng)編號(hào)(int)p_topic事項(xiàng)標(biāo)題(string)applicant主辦人(string)people人數(shù)(int)p_starttime事項(xiàng)時(shí)間(string)p_timelength事項(xiàng)時(shí)長(zhǎng)(int)p_address事項(xiàng)地址(string)p_text事項(xiàng)內(nèi)容(string)p_status事項(xiàng)狀態(tài)(int)p_applytime事項(xiàng)申請(qǐng)時(shí)間(string)d_id所屬部門編號(hào)(int)d_name部門名稱(string)審核事項(xiàng)列表/a_vlistgetid部門編號(hào)(int)p_id事項(xiàng)編號(hào)(int)p_topic事項(xiàng)標(biāo)題(string)applicant主辦人(string)people活動(dòng)人數(shù)(int)p_starttime活動(dòng)時(shí)間(string)p_timelength活動(dòng)時(shí)長(zhǎng)(int)p_address活動(dòng)地址(string)p_text活動(dòng)內(nèi)容(string)p_status事項(xiàng)狀態(tài)(int)p_applytime事項(xiàng)申請(qǐng)時(shí)間(string)d_id部門編號(hào)(int)d_name部門名稱(string)績(jī)效統(tǒng)計(jì)/c_countgetstart開(kāi)始時(shí)間(string)end結(jié)束時(shí)間(string)id部門編號(hào)(array[int])u_id用戶編號(hào)(int)u_ids職工號(hào)(string)u_name用戶名稱(string)u_sex用戶性別(string)u_phone用戶電話(string)u_address用戶住址(string)u_email用戶郵箱(string)u_birthday用戶生日(string)u_onboarding用戶入職(string)d_id部門編號(hào)(int)d_name部門名稱(string)po_id職位名稱(int)p_name職位名稱(string)score用戶績(jī)效(int)活動(dòng)狀態(tài)變更/a_statuspostid事項(xiàng)編號(hào)(int)status事項(xiàng)狀態(tài)(int)turndown事項(xiàng)駁回理由(string)部門添加/d_addpostname部門名稱(array[string])status部門默認(rèn)狀態(tài)(array[int])部門改名/d_nupdatepostid部門編號(hào)(int)name部門名稱(string)部門修改默認(rèn)狀態(tài)/d_supdatepostid部門編號(hào)(int)status部門默認(rèn)狀態(tài)(int)部門刪除/d_deletepostid部門編號(hào)(array[int])部門列表/d_listgetd_id部門編號(hào)(int)d_name部門名稱(string)d_status部門狀態(tài)(int)職位添加/po_addpostname職位名稱(array[string])level職位等級(jí)(array[int])d_id部門編號(hào)(array[int])職位修改/po_updatepostpo_id職位編號(hào)(int)name職位名稱(string)level職位等級(jí)(int)d_id部門編號(hào)(int)職位刪除/po_deletepostpo_id職位編號(hào)(array[int])職位列表/po_listgetd_id部門編號(hào)(array[int])d_id部門編號(hào)(int)d_name部門名稱(string)d_status部門狀態(tài)(int)po_id職位編號(hào)(int)po_name職位名稱(string)p_level職位等級(jí)(int)制度添加/r_addpostname制度名稱(string)text制度內(nèi)容(string)制度修改/r_updatepostr_id制度編號(hào)(int)name制度名稱(string)text制度內(nèi)容(string)制度刪除/r_deletepostr_id制度編號(hào)(int)制度列表/r_listgetr_id制度編號(hào)(int)r_type制度名稱(string)r_text制度內(nèi)容(string)r_num細(xì)則數(shù)量(int)detail細(xì)則(array)r_id制度編號(hào)(int)r_type制度名稱(string)r_text制度內(nèi)容(string)r_d_id細(xì)則編號(hào)(int)r_d_name細(xì)則名稱(string)r_d_u_scores主辦人得分(int)r_d_p_scores員工得分(int)r_d_p_words細(xì)則內(nèi)容(string)r_d_other其他條目(string)細(xì)則添加/rd_addpostname細(xì)則名稱(string)h_score主辦人得分(int)l_score成員得分(int)text細(xì)則內(nèi)容(string)other其他條目(string[json])r_id制度編號(hào)(int)細(xì)則修改/rd_updatepostname細(xì)則名稱(string)h_score主辦人得分(int)l_score成員得分(int)text細(xì)則內(nèi)容(string)other其他條目(string[json])r_id制度編號(hào)(int)rd_id細(xì)則編號(hào)(int)細(xì)則刪除/rd_deletepostrd_id細(xì)則編號(hào)(array[int])表.3

第5章：數(shù)據(jù)庫(kù)設(shè)計(jì)本章節(jié)主要描述了數(shù)據(jù)庫(kù)相關(guān)的設(shè)計(jì)。5.1數(shù)據(jù)庫(kù)描述本課題用的Mysql數(shù)據(jù)庫(kù)版本為。Mysql5.7相對(duì)之前幾個(gè)版本安全性、靈活性、易用性、性能、嚴(yán)格性都有著很大的提升。安全性上：mysql.user的plugin字段不允許為空值，默認(rèn)值是mysql_native_password，而不是mysql_old_password，不支持就的密碼格式；增加了密碼過(guò)期機(jī)制，過(guò)期后需要修改密碼，否則可能會(huì)被禁用，或者進(jìn)入沙箱模式；提供了更簡(jiǎn)單的SSL安全訪問(wèn)配置，并且默認(rèn)連接就采用SSL的加密方式。靈活性上：可以混合存儲(chǔ)結(jié)構(gòu)化數(shù)據(jù)和非結(jié)構(gòu)化數(shù)據(jù)，同時(shí)擁有關(guān)系型數(shù)據(jù)庫(kù)和非關(guān)系型數(shù)據(jù)庫(kù)的優(yōu)點(diǎn)；能夠提供完整的事務(wù)支持；generatedcolumn是MySQL5.7引入的新特性，所謂generatedcolumn，就是數(shù)據(jù)庫(kù)中這一列由其他列計(jì)算而得。易用性上：在MySQL5.7之前，如果用戶輸入了錯(cuò)誤的SQL語(yǔ)句，按下ctrl+c，雖然能夠”結(jié)束”SQL語(yǔ)句的運(yùn)行，但是，也會(huì)退出當(dāng)前會(huì)話，MySQL5.7對(duì)這一違反直覺(jué)的地方進(jìn)行了改進(jìn)，不再退出會(huì)話。性能上：臨時(shí)表的性能改進(jìn)；臨時(shí)表只在當(dāng)前會(huì)話中可見(jiàn)；臨時(shí)表的生命周期是當(dāng)前連接（MySQL宕機(jī)或重啟，則當(dāng)前連接結(jié)束）；只讀事務(wù)性能改進(jìn)。嚴(yán)格性上：默認(rèn)啟用STRICT_TRANS_TABLES模式；對(duì)ONLY_FULL_GROUP_BY模式實(shí)現(xiàn)了更復(fù)雜的特性支持，并且也被默認(rèn)啟用；其他被默認(rèn)啟用的sqlmode還有NO_ENGINE_SUBSTITUTION。5.2數(shù)據(jù)庫(kù)設(shè)計(jì)5.2.1功能E-R圖本系統(tǒng)根據(jù)模塊通過(guò)實(shí)體關(guān)系圖依次描述本應(yīng)用的每一個(gè)模塊所涉及到的實(shí)體，實(shí)體屬性和實(shí)體間相互的關(guān)系畫了對(duì)應(yīng)的E-R圖，如圖5.2.1。圖.2功能模塊描述用戶管理模塊：主要用于用戶的登錄還有記錄個(gè)人的基本信息，同時(shí)還記錄了每個(gè)用戶屬于哪個(gè)系部擔(dān)任哪個(gè)職位。事項(xiàng)管理模塊：主要用于記錄事項(xiàng)的主要信息。制度管理模塊：制度表和制度細(xì)則表都是屬于該模塊的，制度表的是一個(gè)總類別，制度細(xì)則則是一個(gè)大類別里面的小類別，例如：論文這個(gè)制度大類別，它可以分成期刊論文，普通論文等小類別?？?jī)效統(tǒng)計(jì)模塊：該模塊主要是用戶和事項(xiàng)的關(guān)系表，它準(zhǔn)確的記錄了每個(gè)用戶每個(gè)事項(xiàng)的得分，還能很方便地得知事項(xiàng)對(duì)應(yīng)的主辦人。5.3數(shù)據(jù)字典及描述5.3.1用戶表(users)用戶表屬于用戶管理模塊，主要記錄用戶個(gè)人信息還有賬戶信息，如表。用戶表中外鍵對(duì)應(yīng)職位表的主鍵，代表用戶屬于哪個(gè)部門的什么職位字段描述字段名稱字段類型字段長(zhǎng)度備注用戶編號(hào)u_idinteger主鍵、非空職工號(hào)u_idsvarchar127職工名稱u_namevarchar50非空用戶密碼u_passwordvarchar50非空職工性別u_sexchar10職工電話u_phonevarchar20職工郵箱u_emailvarchar50職工住址u_addressvarchar255職工職位ps_idinteger外鍵、非空出生日期u_birthdaydate入職時(shí)間u_onboardingdate表5.3.2事項(xiàng)表(performance)事項(xiàng)表屬于事項(xiàng)管理模塊記錄活動(dòng)事項(xiàng)的基本信息，而其他條目可用json文本記錄事項(xiàng)更多的其他信息，如表。事項(xiàng)表中外鍵對(duì)應(yīng)制度細(xì)則表中的主鍵，代表該活動(dòng)事項(xiàng)屬于那種制度細(xì)則。字段描述字段名稱字段類型字段長(zhǎng)度備注事項(xiàng)編號(hào)p_idinteger主鍵、非空事項(xiàng)標(biāo)題p_topicvarchar1024非空活動(dòng)時(shí)間p_starttimetimestamp非空活動(dòng)時(shí)長(zhǎng)p_timelengthfloat6(單位：小時(shí))活動(dòng)地點(diǎn)p_addressvarchar1024非空事項(xiàng)內(nèi)容p_texttext非空事項(xiàng)狀態(tài)p_statusinteger非空制度細(xì)則r_d_idinteger外鍵、非空駁回理由p_turndownvarchar1024其他條目p_othertext申請(qǐng)時(shí)間p_applytimetimestamp表5.3.3系部表(department)系部表屬于用戶管理模塊主要記錄用戶的所屬部門，事項(xiàng)默認(rèn)狀態(tài)可由主任或副主任編輯，如表。字段描述字段名稱字段類型字段長(zhǎng)度備注系部編號(hào)d_idinteger主鍵、非空系部名稱d_namevarchar1024非空事項(xiàng)默認(rèn)狀態(tài)d_statusinteger非空表5.3.4制度表(rules)制度表對(duì)應(yīng)的是制度模塊，而由于制度表保存的是一個(gè)制度的大類別，故該表單只保存名稱和制度說(shuō)明內(nèi)容，如表。字段描述字段名稱字段類型字段長(zhǎng)度備注制度編號(hào)r_idinteger主鍵、非空制度名稱r_typevarchar1024非空制度內(nèi)容r_texttext非空表5.3.5制度細(xì)則表(r_detail)制度細(xì)則表對(duì)應(yīng)的是制度模塊，不同的制度有著不同的事項(xiàng)條目，故制度細(xì)則表其他條目以json格式專門保存該細(xì)則有哪些其他的條目信息，如表。制度細(xì)則表中外鍵對(duì)應(yīng)制度表的主鍵，代表是哪個(gè)制度大類的哪個(gè)細(xì)分部分。字段描述字段名稱字段類型字段長(zhǎng)度備注細(xì)則編號(hào)r_d_idinteger主鍵、非空細(xì)則名稱r_d_namevarchar1024非空主辦人得分r_d_u_scoresinteger非空細(xì)則得分r_d_p_socresinteger非空細(xì)則內(nèi)容r_d_p_wordstext非空制度編號(hào)r_idinteger外鍵、非空其他條目r_d_othertext表5.3.6文件表(files)文件表主要保存上傳文件的服務(wù)器路徑，如表。文件表中外鍵對(duì)應(yīng)事項(xiàng)表的主鍵，代表這個(gè)上傳文件對(duì)應(yīng)哪個(gè)事項(xiàng)。字段描述字段名稱字段類型字段長(zhǎng)度備注文件編號(hào)f_idinteger主鍵、非空文件名稱f_namevarchar1024非空文件地址f_pathvarchar1024非空事項(xiàng)編號(hào)p_idinteger外鍵、非空表5.3.7職位關(guān)系表(positions)職位關(guān)系表屬于用戶模塊部分，是用戶表和部門表中的關(guān)系表。職位關(guān)系表記錄哪個(gè)用戶屬于哪個(gè)部門的什么職位，如表。職位關(guān)系表中外鍵對(duì)應(yīng)部門表的部門編號(hào)，代表這個(gè)職位是屬于哪個(gè)部門的。字段描述字段名稱字段類型字段長(zhǎng)度備注職位編號(hào)p_idinteger主鍵、非空職位名稱p_namevarchar1024非空系部編號(hào)d_idinteger外鍵、非空職位等級(jí)p_levelinteger非空表5.3.8活動(dòng)關(guān)系表(activity)活動(dòng)關(guān)系表屬于績(jī)效統(tǒng)計(jì)模塊部分，是用戶表和事項(xiàng)表的關(guān)系表?；顒?dòng)關(guān)系表主要記錄哪個(gè)用戶由什么事項(xiàng)得到多少分，如表?；顒?dòng)關(guān)系表中外鍵對(duì)應(yīng)用戶表的用戶編號(hào)和事項(xiàng)表中的事項(xiàng)編號(hào)，代表這個(gè)條目是哪個(gè)用戶在哪個(gè)事項(xiàng)的得分信息。字段描述字段名稱字段類型字段長(zhǎng)度備注用戶編號(hào)u_idinteger主鍵、外鍵、非空事項(xiàng)編號(hào)p_idinteger主鍵、外鍵、非空用戶編號(hào)(舉辦人)p_applicantinteger外鍵、非空獲得分?jǐn)?shù)a_scorefloat非空表

第6章：系統(tǒng)開(kāi)發(fā)與測(cè)試本章節(jié)主要描述本人在本課題負(fù)責(zé)的主要工作內(nèi)容、開(kāi)發(fā)過(guò)程和開(kāi)發(fā)過(guò)程中遇到的情況等。6.1系統(tǒng)開(kāi)發(fā)及其頁(yè)面描述6.1.1頁(yè)面基本流程首先，進(jìn)入網(wǎng)站后會(huì)自動(dòng)跳轉(zhuǎn)到登錄頁(yè)面，如圖。圖登錄完成之后進(jìn)入主頁(yè)，如圖，在主頁(yè)用戶可以在側(cè)邊欄上選擇個(gè)人事項(xiàng)、事項(xiàng)列表、以及申請(qǐng)各種類型的事項(xiàng)。圖當(dāng)用戶點(diǎn)入個(gè)人事項(xiàng)的時(shí)候，用戶能看到自己參加了哪些活動(dòng)事項(xiàng)，如圖。圖當(dāng)用戶點(diǎn)進(jìn)事項(xiàng)詳情就能看到事項(xiàng)的完整信息，如圖。圖點(diǎn)擊事項(xiàng)列表能看到全部的事項(xiàng)活動(dòng)，如圖。圖事項(xiàng)列表頁(yè)面，狀態(tài)列旁邊還有個(gè)小按鈕，按下后能選擇查看哪些狀態(tài)的事項(xiàng)，如圖。圖用戶若是想要申請(qǐng)事項(xiàng)，用戶可以選擇事項(xiàng)申請(qǐng)，鼠標(biāo)移到事項(xiàng)申請(qǐng)，窗體就會(huì)彈出各種制度類型的事項(xiàng)，用戶選擇不同制度的事項(xiàng)能夠出現(xiàn)不同的事項(xiàng)界面，如圖和圖。圖圖6.2部分核心代碼展示6.2.1express接口配置與生成接口主要是根據(jù)配置生成的，如圖，express新建一個(gè)接口主要是調(diào)用get()或post()函數(shù)，而我們則可以根據(jù)配置，循環(huán)地調(diào)用get()或是post()函數(shù)，則生成了批量的接口了。function

autoFun(config,

app,

addRsts

=

{},

lasts

=

{},

dataChange

=

{},

sqlModify

=

{},

factory_

=

factory_v2)

{

let

ex

=

{};

for

(let

f

in

config)

{

try{

var

fn

=

(req,

res)

=>

{

try

{

let

flag

=

config[f].flag;

factory_(req,

res,

config[f],

-1,

true,

true,

lasts[flag]

==

null

?

last_

:

lasts[flag],

addRsts[flag]

==

null

?

addRst_

:

addRsts[flag],

dataChange[flag]

==

null

?

dataChange_

:

dataChange[flag],

sqlModify[flag]

==

null

?

sqlModify_

:

sqlModify[flag],

);

}

catch

(error)

{

logs.tolog('serverFnError',

error);

try

{

res.status(500).json({

status_code:

500,

message:

"server

error",

})

}

catch

(error)

{

logs.tolog('serverResError',

error);

}

}

}

if

(config[f].method

===

'post')

{

app.post(config[f].url,

fn);

}

else

if

(config[f].method

===

'get')

{

app.get(config[f].url,

fn);

}

ex[config[f].url]

=

[config[f].method,

fn];

}

catch

(e)

{

logs.tolog('autoFunction',

e);

}

}

logs.tolog('autoFunction',

ex);

return

ex;}圖6.2.2事項(xiàng)申請(qǐng)?zhí)峤魂P(guān)鍵代碼事項(xiàng)提交關(guān)鍵代碼在React服務(wù)器的申請(qǐng)事項(xiàng)控件里面，如圖，hsubmit函數(shù)就是在提交時(shí)運(yùn)行的代碼。函數(shù)代碼先是獲取所有需要提交的數(shù)據(jù)然后打包放到URLSearchParams對(duì)象內(nèi)部進(jìn)行封裝，再將數(shù)據(jù)進(jìn)行Axios的異步操作發(fā)送到后臺(tái)，直到express服務(wù)器有這記錄成功的反饋，如果有錯(cuò)誤，則提示用戶申請(qǐng)失敗。hsubmit

=

()

=>

{

const

userData

=

JSON.parse(sessionStorage.getItem("userData"));

const

{

p_id,

p_topic,

p_starttime,

p_timelength,

people,

p_address,

p_text,

p_img,

p_word,

u_id,

status,

score1,

score2,

}

=

this.state;

const

url

=

":3001/a_add";

let

uid

=

[userData.u_id];

for

(let

i

=

0;

i

<

u_id.length;

i++)

{

uid.push(u_id[i]);

}

var

time

=

moment().format("YYYY-MM-DD

HH:mm:ss");

var

score

=

[score1];

if

(u_id.length)

{

score.push(score2);

}

console.log(u_id);

var

data

=

{

topic:

p_topic,

starttime:

p_starttime

||

time,

timelength:

p_timelength,

address:

p_address,

text:

p_text,

status:

status,

r_id:

1,

u_id:

uid,

score:

score,

applicant:

userData.u_id,

imageid:

null,

};

let

par

=

new

URLSearchParams(data);

console.log(par.toString());

Axios.post(url,

par,

{

headers:

{

"Content-Type":

"application/x-www-form-urlencoded;charset=UTF-8",

},

})

.then((rep)

=>

{

const

res

=

rep.data;

console.log(res);

console.log("send

message

finish");

ps.history.push("ItemList");

//頁(yè)面跳轉(zhuǎn)

})

.catch((error)

=>

{

console.log("send

message

error");

console.log(error.message);

alert('申請(qǐng)失敗');

});

console.log("");};圖6.2.3事項(xiàng)展示關(guān)鍵代碼事項(xiàng)展示在React服務(wù)器的事項(xiàng)詳情控件上，如圖，它是要事先將該事項(xiàng)的信息從后臺(tái)獲取，再在服務(wù)器進(jìn)行一定的數(shù)據(jù)整理保證后臺(tái)返回的數(shù)據(jù)匹配我們需要的格式，再將數(shù)據(jù)放到界面上。render()

{

const

userData

=

JSON.parse(sessionStorage.getItem('userData'));

console.log(ps.itemmessage);

const

{

itemmessage

}

=

ps;

var

sta

=

[];

for

(let

i

in

activity_state)

{

sta.push(activity_state[i])

}

var

a

=

"0";

for

(let

k

in

itemmessage.users)

{

if

(itemmessage.users[k].u_name

==

itemmessage.applicant)

{

if

(itemmessage.users[k].a_score

!==

0)

{

a

=

itemmessage.users[k].a_score;

break;

}

}

}

var

peo

=

"";

for

(let

i

in

itemmessage.users)

{

if

(itemmessage.users[i].u_name

!=

userData.u_name)

{

peo

+=

(itemmessage.users[i].u_name)

+

","

}

}

peo

=

peo.substring(0,

peo.length

-

1);

var

time

=

"0"

if

(itemmessage.p_timelength

!==

0)

{

time

=

itemmessage.p_timelength;

}

var

stas

=

''

if

(itemmessage.p_turndown

!==

""

&&

activity_state[itemmessage.p_status]

==

'駁回')

{

stas

=

activity_state[itemmessage.p_status]

+

"，駁回理由："

+

[itemmessage.p_turndown]

}

else

{

stas

=

activity_state[itemmessage.p_status]

}

console.log([itemmessage.p_turndown])

return

(

<div>

<Descriptions

title="事項(xiàng)信息"

bordered>

<Descriptions.Item

label="事項(xiàng)編號(hào)">{itemmessage.p_id}</Descriptions.Item>

<Descriptions.Item