基于vue+Element+nodejs+mongoDB的企業(yè)官網(wǎng)及后臺系統(tǒng)設(shè)計與實現(xiàn)

PAGE基于Vue+Element+nodeJs+MongoDB的企業(yè)官網(wǎng)及后臺系統(tǒng)設(shè)計與實現(xiàn)摘要：在新世紀，Internet已經(jīng)成為人類別的必需品之一，使人們獲取世界各地的信息更加迅速便捷。特別是HTML5、CSS3和三大主流框架的快速發(fā)展，推動社會信息化、數(shù)字化的快速發(fā)展，企業(yè)的網(wǎng)站建設(shè)是企業(yè)信息化的重要表現(xiàn)之一，這使得企業(yè)官網(wǎng)已經(jīng)是每一個企業(yè)的剛需，通過官網(wǎng)能使外界更快速便捷的了解本公司，也是展示自身的平臺，而隨之而來的是網(wǎng)站的維護和管理。所以官網(wǎng)+后臺是一個企業(yè)建設(shè)官方網(wǎng)站必需品。本文以可以跨越移動端、平板和PC端的企業(yè)官網(wǎng)和官網(wǎng)的后臺管理系統(tǒng)為開發(fā)目標，通過vue框架和Element組件庫來開發(fā)響應(yīng)式官網(wǎng)，使用flex彈性布局和@media來實現(xiàn)官網(wǎng)的跨設(shè)備可觀看；使用vue、Element和avue來開發(fā)后臺管理系統(tǒng)；用nodejs+MongoDB來開發(fā)官網(wǎng)和后臺的接口和數(shù)據(jù)庫。此次設(shè)計主要面向中小企業(yè)，為企業(yè)提供一個充分展示自己的產(chǎn)品、理念、實時動態(tài)等信息的平臺，以及管理自己官網(wǎng)的后臺。關(guān)鍵詞：Vue、Element、nodejs、MongoDB、flex、@mediaDesignandImplementationofEnterpriseOfficialWebsiteandBackOfficeSystemBasedonVue+Element+nodeJs+MongoDBAbstract：Inthenewcentury,theInternethasbecomeoneofthenecessitiesofthehumancategory,makingiteasierandfasterforpeopletoobtaininformationfromallovertheworld.Inparticular,therapiddevelopmentofHTML5,CSS3andthethreemainstreamframeworkspromotestherapiddevelopmentofsocialinformatizationanddigitization.Theconstructionofanenterprise’swebsiteisoneoftheimportantmanifestationsofenterpriseinformatization.Throughtheofficialwebsite,theoutsideworldcanunderstandthecompanymorequicklyandconveniently,anditisalsoaplatformfordisplayingitself,andthenthemaintenanceandmanagementofthewebsite.Therefore,theofficialwebsite+backgroundisanecessityforanenterprisetobuildanofficialwebsite.Thisarticletakestheenterpriseofficialwebsiteandtheofficialwebsiteback-endmanagementsystemthatcanspanmobile,tablet,andPCasthedevelopmentgoals.ItusesthevueframeworkandElementcomponentlibrarytodeveloparesponsiveofficialwebsite,andusesflexelasticlayoutand@mediatorealizethecross-deviceofficialwebsiteWatch;usevue,Elementandavuetodeveloptheback-endmanagementsystem;usenodejs+MongoDBtodeveloptheofficialwebsiteandback-endinterfaceanddatabase.Thisdesignismainlyforsmallandmedium-sizedenterprises,providingcompanieswithaplatformtofullydisplaytheirproducts,concepts,real-timedynamicsandotherinformation,aswellasthebackgroundtomanagetheirofficialwebsite.Keywords：Vue、Element、nodejs、MongoDB、flex、@media.目錄19077第1章緒論 186361.1背景和意義 1125821.1.1背景 12941.1.2研究意義 277091.2國內(nèi)外現(xiàn)狀分析 2187591.2.1國內(nèi)現(xiàn)狀分析 217391.2.2國外現(xiàn)狀分析 34261.3研究方法和內(nèi)容 3259761.3.1方法 3124731.3.2研究內(nèi)容 420261第2章開發(fā)工具及相關(guān)技術(shù) 517342.1前端 5114912.2后端 6640第3章系統(tǒng)整體設(shè)計 7238063.1可行性 7250733.1.1需求可行性 7252213.1.2技術(shù)可行性 831833.2主體功能模塊設(shè)計 8158533.2.1官網(wǎng)模塊設(shè)計 8177133.2.2后臺模塊設(shè)計 981563.3系統(tǒng)流程 12131533.3.1官網(wǎng) 13285273.4數(shù)據(jù)庫設(shè)計 15296653.4.1數(shù)據(jù)庫分析 15100913.4.2數(shù)據(jù)庫實體關(guān)系 15189763.4.3數(shù)據(jù)庫集合 1727193第4章系統(tǒng)詳細設(shè)計 20288494.1官網(wǎng)功能設(shè)計 20273084.1.1內(nèi)容顯隱 20203574.1.2響應(yīng)式 21306694.1.3首頁設(shè)計 23196944.1.4新聞頁面設(shè)計 24113404.1.5產(chǎn)品頁面設(shè)計 25224964.2后臺系統(tǒng)功能設(shè)計 2616124.2.1登錄模塊 26320044.2.2新聞模塊 2747594.2.3用戶模塊 299625第5章系統(tǒng)測試 30282995.1系統(tǒng)測試 30220815.2測試過程 30159225.2.1測試用例 30135925.2.2測試方法 31246805.3測試結(jié)果 3366195.3.1登錄測試結(jié)果 33146005.3.2增刪改查權(quán)限測試結(jié)果 35163555.3.3新聞發(fā)布測試結(jié)果 36269755.3.4新聞修改測試結(jié)果 37125975.3.5新聞刪除測試結(jié)果 38208705.3.6新聞查看測試結(jié)果 39314945.3.7官網(wǎng)隨機路徑測試結(jié)果 40187765.3.8官網(wǎng)PC、手機測試響應(yīng)式布局 4032606第6章結(jié)論 42138356.1畢業(yè)設(shè)計總結(jié) 4253046.2存在問題及改進 422499參考文獻： 4327610致謝 44PAGE44第1章緒論1.1背景和意義1.1.1背景新世紀以來，科技技術(shù)信息萬變，特別是IT技術(shù)得到迅猛發(fā)展，而隨著IT技術(shù)、通信技術(shù)的快速發(fā)展，Internet滲入到社會的大多數(shù)行業(yè)的范疇，它已經(jīng)是人民生活習(xí)慣的重要部分。有了Internet，人們只需要通過電腦、手機、電視、平板等終端設(shè)備，就能實現(xiàn)古人難以實現(xiàn)的“秀才不出門，便知天下事”，特別是智能手機的普及，互聯(lián)網(wǎng)得到了再次跨越式發(fā)展，人們現(xiàn)在遇到自己不懂得、想要了解的人、事、物，只需要通過網(wǎng)絡(luò)，就能了解得一清二楚。這也促使企業(yè)必須要擁有屬于自己的官方網(wǎng)站，只有有了自己網(wǎng)站，才能讓想要了解自己的合作伙伴和個人有了了解的途徑，才能充分展示自己。隨之而來的，現(xiàn)在社會，手機上網(wǎng)率比PC高的多，這就要求企業(yè)的官網(wǎng)必須兼容手機端，所以，響應(yīng)式網(wǎng)站就是現(xiàn)階段網(wǎng)站的必須方向。當(dāng)然，有了網(wǎng)站，維護和管理就成為一個新的問題，后臺系統(tǒng)也成為不可或缺的一部分。目前，絕大部分企業(yè)都擁有自己的響應(yīng)式官網(wǎng)和后臺系統(tǒng)，建立響應(yīng)式網(wǎng)站，讓企業(yè)可以跨設(shè)備，在移動端開辟屬于自己的天地，也為用戶提供了方便快捷的隨時隨地了解自身動態(tài)的途徑。而后臺管理系統(tǒng)，則可以讓企業(yè)內(nèi)部實時管理和更新官網(wǎng)的內(nèi)容和最新動態(tài)，可以知道有哪些有合作意向的企業(yè)。官網(wǎng)設(shè)置多個模塊，每個模塊頁面都是相互獨立的。主要有新聞頁面、企業(yè)產(chǎn)品、企業(yè)介紹和合作意向表單等。而后臺管理系統(tǒng)，則主要是給企業(yè)內(nèi)部人員進行官網(wǎng)資訊、圖片等進行管理和發(fā)布的，管理人員可以把公司最新的動態(tài)通過管理系統(tǒng)發(fā)布到官網(wǎng)，實現(xiàn)官網(wǎng)的實時更新。官網(wǎng)和后臺的前端開發(fā)主要還是用到vue、html、css、javaScript和Element組件庫，而后端和數(shù)據(jù)庫則用到nodej和MongoDB,關(guān)鍵在于怎么把三者串聯(lián)起來。最終要實現(xiàn)管理員可以對官網(wǎng)和后臺系統(tǒng)進行綜合的管理，發(fā)布企業(yè)的相關(guān)信息；對企業(yè)的感興趣的求職者和合作企業(yè)能夠通過官網(wǎng)來了解本企業(yè)的相關(guān)信息。1.1.2研究意義官網(wǎng)使用MVVM模式開發(fā)，對于代碼維護性、開發(fā)效率、使用效率都有提高，充分發(fā)揮了vue的組件優(yōu)勢;后端使用MVV結(jié)構(gòu)開發(fā)，有效優(yōu)化代碼的可復(fù)用性，發(fā)揮了nodejs的模塊化開發(fā)。建立企業(yè)官網(wǎng)，可以為企業(yè)提供一個充分展示自己的平臺，通過官網(wǎng)，展示一個企業(yè)的業(yè)務(wù)范疇、聯(lián)系方式、實時信息、地址等等，為想要了解本企業(yè)的個人、企業(yè)提供了一個很好的途徑；而與之對應(yīng)的后臺系統(tǒng)，則可以讓企業(yè)內(nèi)部人員更方便快捷的對官網(wǎng)內(nèi)容進行管理、更新，實時發(fā)送一些新的信息上官網(wǎng)。具體為：（1）有助于求職者、合作意向企業(yè)等隨時通過官網(wǎng)了解和熟悉本企業(yè)；（2）便于內(nèi)部人員實時管理官網(wǎng)內(nèi)容，做到實時性。1.2國內(nèi)外現(xiàn)狀分析1.2.1國內(nèi)現(xiàn)狀分析1.截至2018年12月，我國網(wǎng)民規(guī)模為8.29億，全年新增網(wǎng)民5653萬，互聯(lián)網(wǎng)普及率達59.6%，網(wǎng)民中使用手機上網(wǎng)的比例由2017年底的97.5%提升至2018年底的98.6%引用《新聞研究導(dǎo)刊》2019,(02):34-35。隨著手機的普及度越來越高，人們的使用網(wǎng)絡(luò)的門檻越來越低，愈來愈多的普通民眾使用上Internet引用《新聞研究導(dǎo)刊》2019,(02):34-352.Vue在近兩年中得到了快速發(fā)展，北京在招的前端職位中40%的崗位對vue技能有要求，在18年之后，我們看到像美團、滴滴、餓了么等這樣的大型互聯(lián)網(wǎng)公司已經(jīng)把vue作為主要的前端技術(shù)棧，這使得vue在業(yè)界中的影響力和認可度得到迅速提升。來自知乎慕課網(wǎng)[/p/35253650]1.2.2國外現(xiàn)狀分析1.截至2015，有超過80%的APP將全部或部分基于HTML5，這意味著大部分APP的內(nèi)容都將以網(wǎng)頁的形式呈現(xiàn)，典型的例子：微信、Facebook、Twitter等這些大型應(yīng)用。數(shù)據(jù)來源：國際科技媒體?ReadWriteWeb，20152.NicholasC.Zakas：JavaScript是一種非常松散的面向?qū)ο笳Z言，也是Web開發(fā)中極受歡迎的一門語言，JavaSript是一種全新的動態(tài)語言，它植根于全球數(shù)億名都在使用的Web瀏覽器之中，致力于增強網(wǎng)站和Web應(yīng)用程序的交互性。NicholasC.Zakas.《JavaScript高級程序設(shè)計》第三版.前言，20123.BrianP.Hogon：HTML5和CSS3幫助奠定了下一代Web應(yīng)用的基礎(chǔ)，這兩項技術(shù)可以讓我們的網(wǎng)站更易開發(fā)、維護、用戶用戶友好性，兩者使一些復(fù)雜的功能再也不需要編寫復(fù)雜的Javascript代碼、無需使用PS等圖形工具，就可以把網(wǎng)站做得更炫酷。BrianP.Hogon.《HTML5和CSS3實例教程》前言，20141.3研究方法和內(nèi)容1.3.1方法本論文主要運用了以下幾種研究方法：1、調(diào)查對比法。通過對當(dāng)前企業(yè)對官網(wǎng)建設(shè)的需求調(diào)查分析，以及對其他企業(yè)的官網(wǎng)進行觀摩學(xué)習(xí)，來研究該網(wǎng)站的可行性和其所要完成的功能。2、分析法。對網(wǎng)站和系統(tǒng)進行系統(tǒng)的分析。分析其可行性、應(yīng)具備哪些功能、要完善某功能所需的技術(shù)知識和技術(shù)支持。3、實驗法。對該網(wǎng)站和系統(tǒng)系統(tǒng)進行系統(tǒng)編碼，同時還應(yīng)不斷的運行、測試該編碼是否正確，該網(wǎng)站和系統(tǒng)是否能如期的實現(xiàn)其功能。4、總結(jié)法。對運行測試的結(jié)果和現(xiàn)象進行分析、總結(jié)，及時修改bug、完善網(wǎng)站和系統(tǒng)。最后，根據(jù)實驗的過程和結(jié)果，完成畢業(yè)設(shè)計的說明書最終稿。1.3.2研究內(nèi)容本文主要研究現(xiàn)在社會企業(yè)對建立自身網(wǎng)站的剛需，為企業(yè)提供一套官網(wǎng)及后臺管理系統(tǒng)，具體擬從下面幾方面研究：1.緒論。主要介紹本論文的研究背景，分析官網(wǎng)及后臺系統(tǒng)建立的背景。同時，對涉及技術(shù)的相關(guān)文獻資料進行綜述。闡述本論文的研究意義。2.系統(tǒng)分析。主要介紹現(xiàn)狀，分析用戶、功能的需求。同時，從技術(shù)、經(jīng)濟方面進行可行性分析。3.開發(fā)工具和涉及技術(shù)簡介。主要介紹了官網(wǎng)及后臺開發(fā)涉及到的技術(shù)棧，另外，還介紹了使用哪些工具進行開發(fā)。4.系統(tǒng)概要設(shè)計。主要對官網(wǎng)和后臺的功能需求進行設(shè)計，對基本功能、操作流程和總體模塊進行羅列和設(shè)計。5.系統(tǒng)詳細設(shè)計。對企業(yè)官網(wǎng)的一些功能模塊的設(shè)計和實現(xiàn)，以及對后臺管理系統(tǒng)的功能設(shè)計與實現(xiàn)。6.系統(tǒng)測試。簡介一些官網(wǎng)、后臺、數(shù)據(jù)庫三者進行綜合聯(lián)調(diào)測試。第2章開發(fā)工具及相關(guān)技術(shù)2.1前端1、開發(fā)環(huán)境第一步是搭建npm（javaScript的包管理工具），通過npm可以為自己的項目插入一些開發(fā)中需要使用到的第三方包，通過使用現(xiàn)成的包來提高開發(fā)效率；然后是安裝Git，它是最先進的代碼版本控制軟件，通過它可以把托管在碼云上的代碼拉到本地來開發(fā)，當(dāng)然也可以把本地代碼通過Git上傳到碼云上；還有就是需要開發(fā)工具VScode編輯器，它提供了很多插件使開發(fā)前端方便快捷；當(dāng)然瀏覽器是開發(fā)前端必不可少的，使用一些瀏覽器上的插件能更方便的調(diào)試代碼；最后就是通過vuecli腳手架來初始化項目，使用scss來寫css樣式。前端開發(fā)本質(zhì)還是HTML5開發(fā)，主要由用戶交互、視覺體驗等來配合，根據(jù)設(shè)計原型來合理規(guī)劃布局頁面，合理編寫代碼來實現(xiàn)各種功能需求，實現(xiàn)各種交互效果。2、開發(fā)工具（1）VisualStudioCode 是微軟發(fā)布的一款兼容各大主流桌面系統(tǒng)的源代碼編輯器，里面集成了所有類似軟件具備的特性。（2）GoogleChrome、FireFox 兩大主流瀏覽器，用于調(diào)試代碼，查看效果的（3）Postman 是一款用于測試后端接口的工具，主要用于測試后端接口能否正常請求和返回來的數(shù)據(jù)是否正常。3、開發(fā)技術(shù) （1）Vue 是當(dāng)前前端的主流框架之一，提高開發(fā)者的開發(fā)效率。 （2）Elementui Elementui是一整套基于vue.js的的PC端的組件庫。就是把PC端常用的一些功能模塊封裝成組件，開發(fā)者只需要導(dǎo)入就可以使用，能大大提高開發(fā)者的效率。2.2后端1、開發(fā)環(huán)境首先安裝Node.js，里面內(nèi)嵌了NPM包管理工具，然后是安裝MongoDB,配置好MongoDB環(huán)境，然后使用VSCode來進行具體開發(fā)，使用npm來安裝各種開發(fā)中使用的各種第三方包，當(dāng)然，Git版本控制系統(tǒng)來管理代碼也是必不可少的，還有就是使用Postman來進行后端接口的測試。2、開發(fā)工具（1）VisualStudioCode 主要進行代碼的編寫。（2）NavicatforMongoDB

NavicatforMongoDB是MongoDB數(shù)據(jù)庫的可視化工具，它能使你更方便快捷的連接上本地、遠程的服務(wù)器，為你的數(shù)據(jù)的管理、增刪改查提高效率。（3）Postman 是一款用于測試后端的接口是否正常的接口功能測試工具，支持主流的請求方式。3、開發(fā)技術(shù)（1）Node.js Node.js本質(zhì)是JavaScript，只不過是運行在服務(wù)端的而已，是基于谷歌的V8引擎的服務(wù)器平臺，是事務(wù)驅(qū)動的，高效、迅速。（2）Express Express是一款基于Nodejs的靈活的框架，里面封裝了常用的nodejs功能模塊。（3）MongoDB MongoDB是由C++語言編寫的，是一個分布式文件存儲的開源數(shù)據(jù)庫系統(tǒng)，MongoDB將數(shù)據(jù)存儲為一個文檔，數(shù)據(jù)結(jié)構(gòu)由鍵值(key=>value)對組成，MongoDB文檔類似于JSON對象，字段值可以包含其他文檔，數(shù)組及文檔數(shù)組。菜鳥教程.MongoDB教程./mongodb/mongodb-tutorial.html第3章系統(tǒng)整體設(shè)計3.1可行性3.1.1需求可行性在現(xiàn)代這個信息化時代，互聯(lián)網(wǎng)已經(jīng)滲透到各個領(lǐng)域，它把世界各地聯(lián)系在一起，拉近了人們的距離。萬維網(wǎng)www作為互聯(lián)網(wǎng)上先進的，已經(jīng)被人們高度接受的信息檢索、獲取的手段，已經(jīng)成為當(dāng)今世界最大的信息資源庫，里面的資源成千上萬，只要你想得到的信息，通過它都能夠找到。web站點是互聯(lián)網(wǎng)的重要載體之一，數(shù)量早已難以估計，其內(nèi)容范疇跨域了金融、教育、文化、娛樂、體育、等各個領(lǐng)域，用戶群體龐大，每天訪問量數(shù)幾十億為單位。目前，人們主要通過互聯(lián)網(wǎng)來獲取各種自己想要了解的信息，所以，建設(shè)一個好的網(wǎng)站對于一個企業(yè)的發(fā)展是十分重要的，在現(xiàn)如今，企業(yè)自己的官網(wǎng)建設(shè)已經(jīng)成為企業(yè)信息化建設(shè)中的重要組成部分。企業(yè)通過自己的官網(wǎng)來表達自己的相關(guān)信息，展示自己本公司的優(yōu)秀產(chǎn)品，闡述自己企業(yè)的理念和企業(yè)文化，為想要了解公司客戶和個人的提供一個平臺、途徑，也讓合作伙伴可以通過它與企業(yè)及時的交換意見，產(chǎn)生互動。后臺管理系統(tǒng)是一個網(wǎng)站的“后勤部”，有了官網(wǎng)，如果要更新一些內(nèi)容、新聞，不可能由程序員來更新的，而是由專門的人來負責(zé)官網(wǎng)的內(nèi)容的管理和更新，這時，后臺管理系統(tǒng)就是必要的輔助后勤了，管理員通過后臺來進行官網(wǎng)的內(nèi)容更新替換，發(fā)布新的新聞等等，建設(shè)官網(wǎng)能給企業(yè)帶來以下好處：1、公司形象企業(yè)可以利用自己的網(wǎng)站來宣傳自身的企業(yè)文化理念、公司情況、本公司的產(chǎn)品及動態(tài)信息。通過圖文結(jié)合、視頻等的方式把自己公司的實時信息、產(chǎn)品發(fā)到公司網(wǎng)站，體現(xiàn)本公司的形象。2、降低成本有了網(wǎng)站，客戶可以通過網(wǎng)站得到公司的聯(lián)系方式，促使客戶可以通過該聯(lián)系方式與公司洽談業(yè)務(wù)，減少了業(yè)務(wù)人員的出差等等。3、受眾面廣企業(yè)網(wǎng)站是發(fā)布到公網(wǎng)上的，任何人都可以瀏覽的，不收區(qū)域限制，所以受眾面面會很廣。4、功能全面一個企業(yè)有了網(wǎng)站以后能做和本公司相關(guān)的新聞系統(tǒng)、產(chǎn)品系統(tǒng)、在線下載系統(tǒng)、招聘系統(tǒng)等。及時交流、與客戶的直接溝通，并及時收集隱藏的客戶的資料。故而，在信息化時代，企業(yè)自身的官網(wǎng)和后臺管理系統(tǒng)是公司自身信息化建設(shè)的重要組成部分，是一個企業(yè)能力的重要展示平臺，是為外界提供一個展示自我的重要途徑，是一個企業(yè)發(fā)展中不可或缺的一部分，是一個企業(yè)的必需品。3.1.2技術(shù)可行性官網(wǎng)及后臺管理系統(tǒng)開發(fā)周期并不長，主體是官網(wǎng)，后臺只是輔助，不對外公布，只需要重點雕琢官網(wǎng)即可。公司只需要讓一位稍微熟悉nodejs開發(fā)的前端工程師自主進行整套項目的開發(fā)即可。整套項目，有強大合適的軟件開發(fā)工具VSCode，里面可以安裝各種輔助開發(fā)包來提高我們的開發(fā)工具，且前后端使用同一個軟件即可，大大節(jié)省我們?nèi)ナ煜げ煌浖臅r間。前端只需用到前端工程師熟悉的vue框架、javaScript、css，這些都無需額外的復(fù)雜、不熟悉的知識，通過結(jié)合ElementUI組件庫開發(fā)，通過使用現(xiàn)成的組件，無需我們自己封裝；后端用到nodejs和MongoDB數(shù)據(jù)庫，nodejs本質(zhì)就是JavaScript，對于前端再熟悉不過了，邏輯基本和javaScript差不多，它提供了一些前端JavaScript不具備的核心模塊，而MongoDB數(shù)據(jù)庫和nodejs關(guān)聯(lián)很大，操作起來不需要像MySQL那樣寫SQL語句，官方都封裝成js函數(shù)，只需要調(diào)用對應(yīng)的函數(shù)即可實現(xiàn)各種增刪改查操作。前后端都無需很高的內(nèi)外存儲器，用戶只需有能連接上網(wǎng)絡(luò)的終端即可觀看官網(wǎng)，而后臺只需普通PC即可使用。所以，官網(wǎng)和后臺系統(tǒng)的開發(fā)在技術(shù)上是具有可行性的。3.2主體功能模塊設(shè)計3.2.1官網(wǎng)模塊設(shè)計當(dāng)前，企業(yè)的官方網(wǎng)站功能模塊趨于統(tǒng)一，大部分功能都差不多，不外乎新聞模塊、公司簡介、產(chǎn)品信息展示、聯(lián)系方式等，這些功能是每一個合格企業(yè)官網(wǎng)必須的。企業(yè)官網(wǎng)為客戶提供了解企業(yè)的重要方式之一，客戶可以通過官網(wǎng)取得聯(lián)系方式，并與企業(yè)取得溝通，同時，企業(yè)也可以獲取潛在客戶的信息，為企業(yè)的發(fā)展添磚加瓦。本次設(shè)計的官網(wǎng)的模塊主要是包含首頁、產(chǎn)品展示頁、新聞中心、關(guān)于我們、渠道合作、合作申請等11個頁面。（1）首頁：由輪播圖、其他頁面內(nèi)容的一些簡單展示、頂部導(dǎo)航欄、底部導(dǎo)航欄及版權(quán)信息等；（2）產(chǎn)品頁：主要是公司軟硬件設(shè)備的一些展示；（3）新聞中心：提供和本公司相關(guān)的新聞，以及一些和公司產(chǎn)品相關(guān)的新聞；（4）關(guān)于我們：展示公司相關(guān)信息、企業(yè)理念等；（5）渠道合作：提供一些招聘信息、申請合作的相關(guān)信息；（6）合作申請：填寫合作意向信息。圖3-SEQ圖\*ARABIC\s31官網(wǎng)結(jié)構(gòu)3.2.2后臺模塊設(shè)計每個企業(yè)的官網(wǎng)的都會提供新聞模塊，例如華為公司的官網(wǎng)、阿里巴巴集團官網(wǎng)等等，提供新聞模塊，利于展示企業(yè)專業(yè)信息、原創(chuàng)文章加快搜索引擎收錄（利于更多用戶能瀏覽到本公司的網(wǎng)站）。很多企業(yè)網(wǎng)站，并不是完全是靜態(tài)頁面，若是如此，每次更新都需要開發(fā)人員進行內(nèi)容的更新在發(fā)布，這樣一來會浪費很多時間和資源。這時，通過后臺管理系統(tǒng)來對新聞進行管理，就會非常節(jié)省資源和方便快捷，只需要管理員在后臺系統(tǒng)對新聞進心編輯輸入，然后發(fā)布，官網(wǎng)就會同步更新了。本節(jié)，主要描述后臺管理系統(tǒng)的各功能模塊登錄模塊賬號、密碼和驗證碼組成，主要給用戶進行后臺登錄的，必須只有在數(shù)據(jù)庫有這個賬號才能登錄。2、新聞模塊（如圖3-2）添加新聞分類：在新聞類別頁面中添加新聞的類別；修改分類：在類別頁面的編輯彈窗中修改類別；刪除分類：刪除數(shù)據(jù)庫中的類別；查看分類：查看該新聞類別的詳細信息；添加新聞：發(fā)布新聞，會根據(jù)類別分配；刪除新聞：刪除數(shù)據(jù)庫中該條新聞；修改新聞：修改新聞的各項內(nèi)容；查看新聞：查看新聞的各個字段的詳細信息；3、申請模塊查看申請：查看官網(wǎng)中的申請表單提交的申請信息；導(dǎo)出成表格：把整個數(shù)據(jù)庫中申請信息導(dǎo)出成一張Excel表格；批量刪除信息：批量刪除申請信息，必須選中一條及以上才行；改變申請狀態(tài)：即把“未聯(lián)系”改為“已聯(lián)系”，默認是“未聯(lián)系”4、系統(tǒng)模塊管理員：增加后臺菜單：即添加項目中已有的菜單名稱和對應(yīng)路由；刪除后臺菜單：刪除對應(yīng)菜單后，左側(cè)菜單導(dǎo)航欄就沒有該菜單了；修改后臺菜單：可以重新編輯該菜單的各項字段內(nèi)容；查看后臺菜單；添加后臺登錄賬號：管理員添加可以登錄后臺的賬號，同時配置密碼；刪除后臺登錄賬號；查看后臺登錄賬號；修改后臺登錄賬戶：刪除該賬號后，該賬戶不能再登錄后臺。普通用戶：查看后臺菜單：只能看后臺的具體菜單；查看后臺登錄賬號（出密碼外的賬號名）5、產(chǎn)品模塊修改產(chǎn)品圖文信息：重新編輯該產(chǎn)品的信息；增加信息：新增公司的產(chǎn)品圖文信息；刪除信息；查閱信息。修改賬號信息重新編輯賬號：修改原來賬號的名稱；重新編輯密碼：由現(xiàn)在密碼、新的密碼、確認密碼組成。圖3-2新聞模塊與官網(wǎng)的關(guān)系圖圖3-3后臺結(jié)構(gòu)3.3系統(tǒng)流程為了讓讀者更清晰了解本次設(shè)計的操作流程，故而設(shè)計了本小節(jié)。本小結(jié)分為兩個部分，分別是官網(wǎng)的流程和后臺流程。官網(wǎng)流程較為簡單，根據(jù)頂部導(dǎo)航菜單來選擇對應(yīng)的頁面即可；后臺必須登錄才能進入官網(wǎng)，進入后臺后，還會根據(jù)不同用戶類型分配不同的增刪改查權(quán)限和菜單，具體如下：3.3.1官網(wǎng)官網(wǎng)主要包含新聞、關(guān)于我們、渠道合作、產(chǎn)品信息、合作和體驗申請等功能，由于沒有登錄注冊功能，所以流程比較簡單，流程圖如圖3-4：（1）進入官網(wǎng)，一進入官網(wǎng)默認是首頁，首頁是整個官網(wǎng)的內(nèi)容的簡略版；（2）根據(jù)頂部（左側(cè)）導(dǎo)航菜單來選擇你想要看的頁面，頁面大體內(nèi)容如圖3.4；（3）新聞頁面包含新聞列表和新聞詳情，點擊新聞列表中的各個新聞，都會調(diào)到新聞詳情頁面；合作頁面的底部有個“申請合作”的按鈕，點擊會跳轉(zhuǎn)到一個表單頁面，填寫完后會跳會合作頁面；（4）其他模塊的流程都差不多。圖3-4官網(wǎng)流程圖3-5后臺系統(tǒng)流程3.4數(shù)據(jù)庫設(shè)計3.4.1數(shù)據(jù)庫分析在一個動態(tài)的網(wǎng)站中，本質(zhì)上它的動態(tài)就是通過數(shù)據(jù)庫的增刪改查，所以數(shù)據(jù)庫在動態(tài)網(wǎng)站中是很關(guān)鍵的。本次設(shè)計使用的數(shù)據(jù)庫是MongoDB，它是非關(guān)系型數(shù)據(jù)庫，是以文檔形式存儲的，以鍵值對（key-value）存儲，以JSON數(shù)據(jù)格式保存。本次對數(shù)據(jù)庫的需求不會很大，最大的需求就在新聞模塊，其他模塊對數(shù)據(jù)庫的需求不會很大，因為官網(wǎng)更新一般都在與新聞板塊，且新聞涉及的數(shù)據(jù)不少；其次是產(chǎn)品和輪播圖模塊。所以，本次數(shù)據(jù)庫的設(shè)計不會很復(fù)雜，可能較為復(fù)雜的就在于每個集合的分頁查詢和模糊搜索查詢這兩個需求。3.4.2數(shù)據(jù)庫實體關(guān)系在數(shù)據(jù)庫的設(shè)計中，首先要考慮的問題是確立對象模型，只有確立了對象模型，才能進行各種增刪改查。概念模型（信息模型）是各種數(shù)據(jù)模型的共同基礎(chǔ)，它可以充分地反映現(xiàn)實世界，包括事物和事物之間的聯(lián)系，能滿足用戶對數(shù)據(jù)的處理要求，是現(xiàn)實世界的一個真實模型，描述概念模型的有力工具是E-R模型百度百科.E-R圖百度百科.E-R圖E-R圖提供展示實體、聯(lián)系、屬性的方法，它主要由以下三者構(gòu)成：·實體：現(xiàn)實社會客觀存在的事物；·屬性：實體具備的特性稱為屬性；·聯(lián)系：現(xiàn)實世界中，事物內(nèi)部以及事物之間是有聯(lián)系的，這些聯(lián)系在信息世界中反映為實體內(nèi)部的聯(lián)系和實體之間的聯(lián)系，實體之間的聯(lián)系有一對一、一對多和多對多等多種類型。E-R圖的精細設(shè)計.E-R圖的精細設(shè)計.知網(wǎng).2015-04-25E-R關(guān)系圖如下：賬戶實體屬性：_id、賬號、密碼、用戶類型、創(chuàng)建時間。圖3-6帳戶E-R圖新聞實體屬性：_id、類別、標題、作者、新聞內(nèi)容、創(chuàng)建時間、更新時間。圖3-7新聞E-R圖官網(wǎng)申請合作信息實體屬性：_id、來源、所屬公司、姓名、電話、所在城市、狀態(tài)、創(chuàng)建時間。圖3-8官網(wǎng)申請合作E-R圖官網(wǎng)產(chǎn)品信息實體屬性：_id、圖片、標題、介紹、創(chuàng)建時間、更新時間。圖3-9官網(wǎng)產(chǎn)品信息E-R圖官網(wǎng)首頁輪播圖：_id、圖片、標題、內(nèi)容、創(chuàng)建時間。圖3-10官網(wǎng)首頁輪播圖3.4.3數(shù)據(jù)庫集合 MongoDB是一種面向集合存儲的數(shù)據(jù)庫，即數(shù)據(jù)被分組存儲在數(shù)據(jù)集中，被稱為一個集合，集合的概念類似關(guān)系型數(shù)據(jù)庫里的表，不同的是它不需要定義任何數(shù)據(jù)模式菜鳥教程.MongoDB教程./mongodb/mongodb-tutorial.html。下面是本次數(shù)據(jù)庫中的集合：菜鳥教程.MongoDB教程./mongodb/mongodb-tutorial.html賬戶集合：表3-SEQ表\*ARABIC1賬戶集合序號字段名類型說明

續(xù)表3-11_idObjectIDMongoDB自動生成的唯一id2userString唯一賬號3passwordString經(jīng)過加密的密碼4usertypeNumber用戶類型：1：管理員；0：普通用戶5createTimeDate賬號的創(chuàng)建時間新聞集合：表3-2新聞集合序號字段名類型說明1_idObjectIDMongoDB自動生成的唯一id2categoryObjectID對應(yīng)新聞類別集合的_id3titleString新聞標題4authorString新聞作者5contentString新聞的內(nèi)容6imageString新聞內(nèi)容的首圖7firstContentString新聞內(nèi)容的首句8updateTimeDate新聞的更新時間9createTimeDate新聞的創(chuàng)建時間產(chǎn)品集合：表3-3產(chǎn)品集合序號字段名類型說明1_idObjectIDMongoDB自動生成的唯一id2imageString產(chǎn)品的圖片3titleString標題4contentString產(chǎn)品的介紹5updateTimeDate產(chǎn)品的更新時間6createTimeDate產(chǎn)品的創(chuàng)建時間輪播圖集合：表3-4輪播圖集合序號字段名類型說明

續(xù)表3-41_idObjectIDMongoDB自動生成的唯一id2imageString圖片3titleString標題4contentString內(nèi)容5createTimeDate賬號的創(chuàng)建時間申請合作集合：表3-5申請合作集合序號字段名類型說明1_idObjectIDMongoDB自動生成的唯一id2nameString姓名3phoneString電話4companyString所屬公司5cityString所在城市6sourceNumber來源：1：官網(wǎng)--申請體驗；2：官網(wǎng)--渠道合作；7statusNumber狀態(tài)：0：已聯(lián)系；1：未聯(lián)系8createTimeDate賬號的創(chuàng)建時間第4章系統(tǒng)詳細設(shè)計4.1官網(wǎng)功能設(shè)計 官網(wǎng)使用vue框架來搭建，并使用ElementUI組件庫中的一些組件來提高開發(fā)效率的。核心功能是新聞模塊、內(nèi)容隨滾動條的滾動而不斷顯隱、官網(wǎng)跨設(shè)備（主要是PC和手機）兼容（即響應(yīng)式布局）、首頁等。其中響應(yīng)式是通過CSS3的@media來實現(xiàn)的。4.1.1內(nèi)容顯隱圖4-1滾動顯隱的流程這個功能是貫穿整個官網(wǎng)的比較核心的功能。簡單的來說，就是，頁面的內(nèi)容只有滾動條滾動到該內(nèi)容剛好在整個瀏覽器的顯示區(qū)域的1/3的時候，該內(nèi)容才能顯示，該內(nèi)容一旦消失在顯示區(qū)域，內(nèi)容就消失，且每次顯示和隱藏時都伴隨著對應(yīng)的動畫效果，具體實現(xiàn)如上圖4.1。首先，在主體頁面App.vue（官網(wǎng)整個項目的主頁面，所以頁面都會在這個頁面顯示，相當(dāng)于一個容器）監(jiān)聽一個scroll事件（滾動事件），然后在created周期函數(shù)中獲取瀏覽器的可視顯示高度clientHeight，接著在scroll事件的回調(diào)函數(shù)中，不斷獲取滾動出去的高度scrollTop，以及獲取本頁面將要實現(xiàn)顯隱的模塊Dom，獲取這些Dom元素距文檔頂部的距離top，然后通過top-scrollTop-(clientHeight/3*2)<=0來判斷內(nèi)容是否顯隱；代碼如上圖。4.1.2響應(yīng)式 隨著踏入移動互聯(lián)網(wǎng),手機上網(wǎng)率大幅超過PC上網(wǎng)率，傳統(tǒng)的網(wǎng)站只能兼容PC，越來越多的傳統(tǒng)網(wǎng)站已經(jīng)滿足不了市場的需求，所以，開發(fā)兼容PC和移動端的網(wǎng)站已經(jīng)是現(xiàn)在的主流方向，而HTML5響應(yīng)式網(wǎng)站是主要方向之一。 響應(yīng)式網(wǎng)站使網(wǎng)站可以跨設(shè)備，使網(wǎng)站不再局限于PC端，能讓用戶直接通過手機即可瀏覽你的網(wǎng)站。 H5響應(yīng)式開發(fā)主要用到的是CSS3的@media媒體查詢，通過使用@media可以對不同分辨率尺寸的設(shè)備進行不同的樣式設(shè)計。官網(wǎng)通過@media媒體查詢設(shè)置了三種屏幕尺寸的不同樣式，這三種覆蓋了PC、平板、手機： 有了這三種不同尺寸的樣式，能使網(wǎng)站的內(nèi)容都能在主流的不同尺寸的PC、平板、手機等終端設(shè)備正常顯示，不出現(xiàn)樣式錯亂的情況。圖4-2min-width:1100px的情況圖4-3(min-width:769px)and(max-width:1100px)的情況圖4-4(min-width:100px)and(max-width:769px)的情況4.1.3首頁設(shè)計 首頁作為整個官網(wǎng)的門面擔(dān)當(dāng)，是整個官網(wǎng)設(shè)計中的重中之重。首頁是整個官網(wǎng)內(nèi)容的縮減版展示，主要由產(chǎn)品、新聞、合作伙伴、導(dǎo)航欄、輪播圖等小組件組成。 由于首頁的內(nèi)容比較多，如果把代碼都寫在一個.vue文件的話，會難以維護，故而把首頁的每一塊內(nèi)容模塊都寫成一個.vue文件，最后分別導(dǎo)入home.vue這個文件，組合成首頁，首頁一共由rotation.vue、role.vue、wisdom.vue、product.vue、partner.vue、news.vue等六個模塊組成，這樣，代碼清晰易維護；另外，首頁還有頂部、底部兩個導(dǎo)航菜單（貫穿整個官網(wǎng)的），頂部導(dǎo)航菜單會根據(jù)設(shè)備的大小自動變化成頂部、左側(cè)兩種，且根據(jù)滾動顯隱，當(dāng)向下滾動和靜止時導(dǎo)航欄消失，向上滾動，菜單欄會顯示，這樣會方便用戶操作。圖4-5首頁組成4.1.4新聞頁面設(shè)計官網(wǎng)的新聞頁面是由組件newsList.vue、newsDetail.vue組合成的newsCenter.vue頁面。newsList.vue、newsDetail.vue是newsCenter.vue的子孫組件，剛進入新聞頁面時，默認是由newsCenter、newsList組成的新聞列表，點擊新聞后，則是由newsCenter和newsDetail組成的新聞詳情頁。列表和詳情處于新聞頁面右側(cè)，導(dǎo)航欄（新聞類別）處于左側(cè)，新聞列表和新聞詳情不會同時出現(xiàn)，當(dāng)新聞列表模塊出現(xiàn)時，詳情頁隱藏；詳情模塊出現(xiàn)時，列表模塊消失。新聞列表會通過左邊的新聞類別導(dǎo)航欄劃分為對應(yīng)的列表，導(dǎo)航欄會根據(jù)設(shè)備的大小自動調(diào)整位置，當(dāng)是PC和平板時，導(dǎo)航欄位于左側(cè)，當(dāng)是手機時，導(dǎo)航欄位于頂部。另外新聞列表在底部有分頁模塊。圖4-6新聞頁面設(shè)計詳情4.1.5產(chǎn)品頁面設(shè)計產(chǎn)品模塊劃分好幾個頁面，由于產(chǎn)品頁面都是展示一些產(chǎn)品的圖文信息，且內(nèi)容排版都差不多，所以把這幾個產(chǎn)品頁面公用的排版模板封裝成一個公用組件，這樣能提高效率和減少代碼冗余。產(chǎn)品頁面是由頭部的頁面介紹、中間的產(chǎn)品圖文介紹、底部的其他內(nèi)容組成，比較簡略，中間排版主要由圖片和文字左右交叉展示，部分代碼如圖4-7。圖4-7產(chǎn)品公共組件部分代碼4.2后臺系統(tǒng)功能設(shè)計后臺系統(tǒng)使用了vue+ElementUI+基于Element的二度封裝的avue框架來搭建。核心的功能是登錄模塊、不同賬號類型的菜單權(quán)限分配、增刪改查的權(quán)限分配、各大模塊的增刪改查。每個模塊都是以表格來呈現(xiàn)，新增、編輯、查看都是以彈窗的形式呈現(xiàn)出來，刪除會有提示，只有點擊“確定”，才會刪除選中的那條數(shù)據(jù)；總體是左側(cè)為導(dǎo)航菜單，右側(cè)為內(nèi)容區(qū)域，頂部為企業(yè)logo和賬戶等一些輔助內(nèi)容。4.2.1登錄模塊登錄模塊是進入后臺的第一個頁面，若是沒有登錄成功，是不能進入后臺的首頁的。其中登錄頁面有一個表單組成，包含賬戶、驗證碼、密碼等組成。其中驗證碼是由英文大小寫字母和阿拉伯?dāng)?shù)字隨機組成字符串，再通過JavaScript的Math.random()方法生成的隨機數(shù)去選擇對應(yīng)字符串中的字母或數(shù)字，最后通過HTML5的cansva勾畫出來的。每次刷新頁面、點擊報錯后驗證碼都會重新獲取，驗證碼不區(qū)分大小。部分代碼：identifyCodes:"1234567890qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM",

//

驗證碼隨機數(shù)范圍identifyCode:

"",//驗證碼randomNum(min,

max)

{//獲取隨機數(shù)

return

Math.floor(Math.random()

*

(max

-

min)

+

min);

},refreshCode()

{//刷新驗證碼

this.identifyCode

=

"";

this.makeCode(this.identifyCodes,

4);},makeCode(o,

l)

{//從identifyCodes中獲取對應(yīng)字符

for

(let

i

=

0;

i

<

l;

i++)

{

this.identifyCode

+=

this.identifyCodes[

this.randomNum(0,

this.identifyCodes.length)

];

}

} 登錄模塊需要通過后臺和后端的雙重驗證，特別是后端的驗證，只有后端的驗證通過了，才能正式登錄后臺。后端驗證的流程：（1）首先把前端傳過來的賬號傳到數(shù)據(jù)庫中查詢，如果能在數(shù)據(jù)庫中找到，則進行下一步，反之，則報錯，返回“用戶不存在”的提示； （2）把前端穿過來的密碼和數(shù)據(jù)庫中對應(yīng)用戶的密碼通過第三方模塊bcryptjs的compareSync()方法進行解密匹配（因為之前管理員添加用戶的時候，密碼是使用bcryptjs的hashSync()方法加密過），匹配成功，則繼續(xù)下一步，反之，則報錯，返回“密碼錯誤”的錯誤提示； （3）返回通過jsonwebtoken的sign()方法生成的token、賬號、用戶類型、id、菜單權(quán)限給前端，這個token是后續(xù)前端向后端各種請求時必須添加進請求頭（RequestHeaders）的Authorization中的安全標識，后端響應(yīng)每個請求前都會判斷前端返回來的token是否是合法的，如果不是合法的，就不會返回任何數(shù)據(jù)，直接報錯，是合法的，則返回對應(yīng)數(shù)據(jù)。圖4-8登錄校驗流程4.2.2新聞模塊 在新聞模塊中，主要的功能其實就是新聞的增刪改查，難點就是新聞詳情的富文本和圖片的上傳。 本模塊的增改查都是通過彈窗實現(xiàn)的，無需跳轉(zhuǎn)到其他頁面，每次增刪改查成功后，都會重新向后端發(fā)送請求，重新獲取數(shù)據(jù)，起到刷新數(shù)據(jù)的效果。打開查看彈窗時，所有數(shù)據(jù)只能看，不能改（會全部disabled），編輯彈窗可以進行修改。 富文本主要實現(xiàn)圖片的上傳和新聞內(nèi)容的編輯，使用的是avue框架的avue-plugin-ueditor組件，由于該組件上傳圖片并不支持添加token，故而修改了一下該組件的源碼，實現(xiàn)上傳圖片時在請求頭添加token。通過富文本，可是實現(xiàn)新聞內(nèi)容的各種字體加粗、下劃線、顏色、字體大小等等操作，在發(fā)送給后端時，富文本的內(nèi)容是以HTML標簽式字符串發(fā)給后端并存儲進數(shù)據(jù)庫的。 由于新聞會有多條，所有在后臺還做了分頁，通過向后端請求新聞列表數(shù)據(jù)時，傳current（當(dāng)前頁）、size（一頁多少條）參數(shù)給后端，后端通過這兩個參數(shù)來跳過若干條數(shù)據(jù)獲取前端要求current頁的size條數(shù)據(jù)返回給前端來實現(xiàn)分頁功能。 另外，新聞模塊做了模糊查詢，前端把模糊查詢的條件發(fā)給后端，后端通過條件進數(shù)據(jù)庫對應(yīng)字段進行匹配，把所有匹配的數(shù)據(jù)返回給前端，部分實現(xiàn)代碼如圖4-12：圖4-9模糊查詢代碼4.2.3用戶模塊 這個模塊是用來展示后臺管理系統(tǒng)的賬號信息的，只有管理員有這個權(quán)限查看、修改、增加、刪除這個表格的數(shù)據(jù)，普通用戶是看不到這個菜單的，當(dāng)然，即使分配此模塊的菜單權(quán)限給普通用戶，他也只能看，增刪改權(quán)限是沒有的。實現(xiàn)管理員和普通用戶的區(qū)別，在于創(chuàng)建賬號時，會添加一個用戶類別的字段，共同存進數(shù)據(jù)庫。 在登錄時，后端通過識別該用戶的用戶類型來返回不同的菜單（是由管理員創(chuàng)建賬號時，分配給該賬戶的菜單），只有分配到的菜單，在用戶登錄后臺時才會顯示，沒有分配的菜單，是不會顯示的。不同類型的用戶類型，最大，也是唯一的區(qū)別，就是增刪改查權(quán)限，管理員擁有全部權(quán)限，普通用戶只有查看的權(quán)限。 部分代碼如下：圖4-10用戶的增刪改查部分代碼第5章系統(tǒng)測試5.1系統(tǒng)測試 軟件測試是程序開發(fā)的重要環(huán)節(jié)之一，通過它的結(jié)果決定你的項目能否最終上架，它的目的是最大限度的發(fā)現(xiàn)軟件中的bug和不完善的問題，并讓開發(fā)者修復(fù)，提高軟件的可靠性和完整性，對軟件開發(fā)具有重要意義。測試一般分為白盒和黑盒測試。白盒測試要求全面了解程序內(nèi)部邏輯結(jié)構(gòu)、對所有邏輯路徑進行測試，主要用于檢測軟件編碼過程中的錯誤，黑盒測試，主要檢測軟件的每一個功能是否能夠正常使用。王彥.移動互聯(lián)網(wǎng)軟件測試技術(shù)研究及應(yīng)用[J].現(xiàn)代信息科技,2019,3(3):8-9,12.王彥.移動互聯(lián)網(wǎng)軟件測試技術(shù)研究及應(yīng)用[J].現(xiàn)代信息科技,2019,3(3):8-9,12.5.2測試過程 本次設(shè)計的測試主要用到postman、chrome瀏覽器、Firefox瀏覽器和NavicatforMongoDB這幾個軟件，chorme和Firefox這兩個瀏覽器用于呈現(xiàn)官網(wǎng)和后臺頁面的，postman用于測試發(fā)送請求，測試接口能否正常接受來自前端的請求并返回對應(yīng)數(shù)據(jù)，NavicatforMongoDB是MongoDB的可視化工具，用于增刪改查數(shù)據(jù)庫中的數(shù)據(jù)的。通過這幾個軟件，分別使用整體測試和隨機測試方式，對官網(wǎng)、后臺進行完整的測試，把發(fā)現(xiàn)的問題加以解決，使設(shè)計更晚上。5.2.1測試用例 本次畢業(yè)設(shè)計的部分用例如下：表5-SEQ表\*ARABIC\s11測試用例過程預(yù)期結(jié)構(gòu)實際結(jié)果輸入賬號、密碼、驗證碼進入后臺首頁進入后臺首頁登錄后，根據(jù)不同用戶類型，分配增刪改查權(quán)限管理員擁有所有菜單的增刪改查權(quán)限；普通用戶只有查看的權(quán)限管理員擁有所有菜單的增刪改查權(quán)限；普通用戶只有查看的權(quán)限輸入新聞的標題、作者、詳情、類別添加新聞，并刷新數(shù)據(jù)，新加數(shù)據(jù)顯示在第一條添加新聞，并刷新數(shù)據(jù)，新加數(shù)據(jù)顯示在第一條附表5-1打開新聞編輯，把詳情修改了新聞詳情更新，并顯示到第一條新聞詳情更新，并顯示到第一條后臺點擊刪除新聞按鈕刪除新聞刪除新聞后臺點擊查看新聞按鈕查看新聞詳情查看詳情官網(wǎng)隨機輸入路徑跳到404頁面跳到404頁面官網(wǎng)PC、手機測試響應(yīng)式布局PC端和手機端都能正常顯示PC端和手機端都能正常顯示5.2.2測試方法測試主要分為兩大部分，整體測試和隨機測試。整體聯(lián)合測試，把所有模塊頁面都測試，這樣有利于發(fā)現(xiàn)一些比較大的問題，例如數(shù)據(jù)請求渲染不及時、增刪改查的錯誤等問題。主要是通過后臺系統(tǒng)對數(shù)據(jù)進行增刪改查時，通過NavicatPremium15軟件或是直接通過后臺的表格查看對應(yīng)數(shù)據(jù)庫中的集合（表）的數(shù)據(jù)是否出現(xiàn)對應(yīng)操作的變化；還有就是當(dāng)在后臺進行數(shù)據(jù)操作時，官網(wǎng)的數(shù)據(jù)有沒有出現(xiàn)對應(yīng)的變化。隨機測試，也是本設(shè)計測試的重要一環(huán)。通過模擬用戶的“暴力”、故意找茬式的測試，有利于發(fā)現(xiàn)一些不容易發(fā)現(xiàn)的、出現(xiàn)概率比較低的、隱藏得比較深的bug，例如，隨機輸入路徑是否能跳到404頁面等等，通過這樣測試修復(fù)bug，使我們的項目更趨完善。各個用例的測試過程（測試結(jié)果請看5.3）：后臺登錄分為四種情況來測試：輸入錯誤的驗證碼：用戶輸入賬號、密碼、驗證碼，點擊登錄后，會直接彈出驗證碼錯誤的提示，驗證碼框清空，要求重新輸入。輸入不存在的賬號：通過post把賬號密碼發(fā)給后端，后端通過賬號查詢數(shù)據(jù)庫，沒有查詢到，返回“用戶不存在”，登錄不了。輸入錯誤的密碼：后端查詢到該用戶后，把前端發(fā)過來的密碼和在數(shù)據(jù)庫中查詢到的對應(yīng)賬戶的已經(jīng)加密過的密碼進行解析匹配，密碼錯誤，直接返回“密碼錯誤”。輸入正確的賬號、密碼、驗證碼：通過前端的驗證碼、后端的賬號、密碼的全部校驗，生成token，返回該賬戶除密碼的信息和token給前端，后臺登錄成功，進入首頁。增刪改查權(quán)限分配用戶登錄成功后，會根據(jù)該用戶的用戶類型字段來進行增刪改查權(quán)限的分配。事先先創(chuàng)建兩個不同的賬號，分別是管理員和普通用戶（管理員創(chuàng)建的）。然后分別分別進行登錄，通過查看每個菜單的頁面，看新增、刪除、查看、編輯這四個按鈕是否顯示。管理員應(yīng)該是每個菜單頁面都會顯示這四個按鈕，普通用戶只會顯示查看按鈕。新聞發(fā)布（增加）打開后臺的新聞列表頁面，點擊新增按鈕，然后根據(jù)彈窗進行新聞的各個字段的輸入，全部輸入后，點擊保存按鈕，就會發(fā)布該新聞了，發(fā)布后，會自動重新請求獲取列表數(shù)據(jù)，實現(xiàn)數(shù)據(jù)刷新，新發(fā)布的新聞就會顯示在表格的首行；若點擊取消，則會放棄發(fā)布新聞。新聞修改在新聞列表頁面，隨機選一條新聞。點擊該新聞的右側(cè)操作欄中的編輯按鈕，就會打開一個彈窗，在該彈窗中修改你想要修改的字段內(nèi)容即可，完成后，點擊修改按鈕，就會把所有內(nèi)容通過post請求發(fā)給后端，后端會更新數(shù)據(jù)庫中對應(yīng)的數(shù)據(jù)，且會重新請求列表數(shù)據(jù)，達到數(shù)據(jù)刷新的效果，新修改的那條新聞會自動排在表格首行。新聞刪除點擊新聞列表中的某條新聞右側(cè)操作欄中的刪除按鈕，彈出個確認刪除彈窗，點擊“刪除”，會徹底刪除該新聞。新聞查看點擊查看按鈕，彈出查看彈窗，所有內(nèi)容都會disabled，只能看，不能修改。官網(wǎng)隨機路徑在瀏覽器中，隨機輸入官網(wǎng)不存在的url，會自動跳到404頁面，輸入正常路徑，會跳到對應(yīng)的頁面。官網(wǎng)PC、手機跨設(shè)備響應(yīng)式顯示在PC機打開官網(wǎng)，能正常顯示各個頁面，然后在手機上打開官網(wǎng)，頁面布局會自動適應(yīng)手機大小，每個頁面都會正常顯示。5.3測試結(jié)果5.3.1登錄測試結(jié)果圖5-1前端表單驗證圖5-2用戶不存在圖5-3密碼錯誤圖5-4登錄成功5.3.2增刪改查權(quán)限測試結(jié)果圖5-5管理員權(quán)限圖5-6普通用戶權(quán)限5.3.3新聞發(fā)布測試結(jié)果圖5-7新聞發(fā)布彈窗圖5-8新聞發(fā)布列表5.3.4新聞修改測試結(jié)果圖5-9修改前圖5-10修改后5.3.5新聞刪除測試結(jié)果圖5-11刪除新聞5.3.6新聞查看測試結(jié)果圖5-12新聞查看圖5-13成功刪除新聞5.3.7官網(wǎng)隨機路徑測試結(jié)果圖5-14404頁面5.3.8官網(wǎng)PC、手機測試響應(yīng)式布局圖5-15PC端圖5-16手機移動端第6章結(jié)論6.1畢業(yè)設(shè)計總結(jié) 在完成畢業(yè)設(shè)計的這段時間里，重新體驗到類似高三的那種時間的緊迫感。由于平時非周末時間要正常上班，沒有時間來完成畢業(yè)設(shè)計，只能在周末來開發(fā)，且要完成公司分配的開發(fā)任務(wù)，所以這段時間排的特別緊。 在過去的這段時間雖然過得辛苦，總是抱怨，但，當(dāng)看到自己的成品時，總是滿滿的滿足感，心中的抱怨早就煙飛云散了。畢設(shè)途中，讓我學(xué)到了很多新的知識，把以前覺得很遙遠、高大上的東西都紛紛收入囊中，變成自己的，正是這種不斷追求的新知識的渴望驅(qū)使我完成這份畢業(yè)設(shè)計。 通過這次畢業(yè)設(shè)計，個人動手能力、自我解決問題的能力都有了不錯的提高，也給了自己一個不合理安排和規(guī)劃時間的教訓(xùn)。6.2存在問題及改進 在這次畢業(yè)設(shè)計中，遇到了很多新的知識、技術(shù)，有些知識和技術(shù)已經(jīng)明白掌握，但有些還是不懂，這我明白前端涉及的知識是很廣闊的，需要自己不斷的完善自己的知識面，不斷鞏固已掌握的知識的同時，也要不斷學(xué)習(xí)新知識，不能滿足于現(xiàn)狀，道路還長。 由于時間緊迫，還是有不少功能未能實現(xiàn)，譬如用戶的評論功能等，后續(xù)會找時間完善的。參考文獻：[1](美)霍多羅夫(Chodorow).MongoDB權(quán)威指南[M].人民郵電出版社,2014.[2]樸靈.深入淺出Node.js[M].人民郵電出版社,2013.[3]黃丹華.Node.js開發(fā)實戰(zhàn)詳解[M].清華大學(xué)出版社,2014.[4]崔瑩,劉兵.Node.js與Express技術(shù)在計算機課程教學(xué)中的應(yīng)用[J].軟件導(dǎo)刊,2016(09).[5]麥冬,陳濤,梁宗灣.輕量級響應(yīng)式框架Vue.js應(yīng)用分析[J].信息與電腦(理論版),2017(07).[6]柴青山.基于MVVM模式的Vue.js框架在物流軟件自動化測試系統(tǒng)中的應(yīng)用研究[D].北京郵電大學(xué),2019.[7]劉德山.HTML5+CSS3Web前端開發(fā)技術(shù)[M].人民郵電出版社,2016.[8]王成,李少元,鄭黎曉,緱錦,曾梅琴,劉慧敏.Web前端性能優(yōu)化方案與實踐[J].計算機應(yīng)用與軟件,2014(12).[9]熊俊雄,陸海洪,周志文,蘭偉發(fā),朱師琳,徐元中.基于express的內(nèi)容發(fā)布系統(tǒng)[J]電子世界,2019(11):14-16.[10]BowersM,SynodinosD,SumnerV.ProHTML5andCSS3DesignPatterns,2013.致謝本次畢業(yè)設(shè)計能夠完成，離不開我的指導(dǎo)老師張亞林老師的細心指導(dǎo)和幫助，知道期間細心傳達畢業(yè)設(shè)計的具體要求和檢查時間，細致的檢查，犧牲自己的寶貴時間和精力幫助我們完善畢業(yè)設(shè)計，讓我們順利畢業(yè)，在此，讓我說聲謝謝。另外，還要特別感謝大學(xué)四年里給我傳授知識的所有老師和輔導(dǎo)員老師，是你們的辛勤付出，才造就了現(xiàn)在的我們。最后，由于時間叫倉促，自身知識技術(shù)的不足，整篇論文的缺點、錯誤還請各位閱讀過的老師、同學(xué)多多予與指正，謝謝。

ExcelXP的八則快速輸入技巧如果我們在用ExcelXP處理龐大的數(shù)據(jù)信息時，不注意講究技巧和方法的話，很可能會花費很大的精力。因此如何巧用ExcelXP，來快速輸入信息就成為各個ExcelXP用戶非常關(guān)心的話題，筆者向大家介紹幾則這方面的小技巧。1、快速輸入大量含小數(shù)點的數(shù)字如果我們需要在ExcelXP工作表中輸入大量的帶有小數(shù)位的數(shù)字時，按照普通的輸入方法，我們可能按照數(shù)字原樣大小直接輸入，例如現(xiàn)在要在單元格中輸入0.05這個數(shù)字時，我們會把“0.05”原樣輸入到表格中。不過如果需要輸入若干個帶有小數(shù)點的數(shù)字時，我們再按照上面的方法輸入的話，每次輸入數(shù)字時都需要重復(fù)輸入小數(shù)點，這樣工作量會變大，輸入效率會降低。其實，我們可以使用ExcelXP中的小數(shù)點自動定位功能，讓所有數(shù)字的小數(shù)點自動定位，從而快速提高輸入速度。在使用小數(shù)點自動定位功能時，我們可以先在ExcelXP的編輯界面中，用鼠標依次單擊“工具”/“選項”/“編輯”標簽，在彈出的對話框中選中“自動設(shè)置小數(shù)點”復(fù)選框，然后在“位數(shù)”微調(diào)編輯框中鍵入需要顯示在小數(shù)點右面的位數(shù)就可以了。以后我們再輸入帶有小數(shù)點的數(shù)字時，直接輸入數(shù)字，而小數(shù)點將在回車鍵后自動進行定位。例如，我們要在某單元格中鍵入0.06的話，可以在上面的設(shè)置中，讓“位數(shù)”選項為2，然后直接在指定單元格中輸入6，回車以后，該單元格的數(shù)字自動變?yōu)椤?.06”，怎么樣簡單吧？2、快速錄入文本文件中的內(nèi)容現(xiàn)在您手邊假如有一些以純文本格式儲存的文件，如果此時您需要將這些數(shù)據(jù)制作成ExcelXP的工作表，那該怎么辦呢？重新輸入一遍，大概只有頭腦有毛病的人才會這樣做；將菜單上的數(shù)據(jù)一個個復(fù)制/粘貼到工作表中，也需花很多時間。沒關(guān)系！您只要在ExcelXP中巧妙使用其中的文本文件導(dǎo)入功能，就可以大大減輕需要重新輸入或者需要不斷復(fù)制、粘貼的巨大工作量了。使用該功能時，您只要在ExcelXP編輯區(qū)中，依次用鼠標單擊菜單欄中的“數(shù)據(jù)/獲取外部數(shù)據(jù)/導(dǎo)入文本文件”命令，然后在導(dǎo)入文本會話窗口選擇要導(dǎo)入的文本文件，再按下“導(dǎo)入”鈕以后，程序會彈出一個文本導(dǎo)入向?qū)υ捒?，您只要按照向?qū)У奶崾具M行操作，就可以把以文本格式的數(shù)據(jù)轉(zhuǎn)換成工作表的格式了。3、快速輸入大量相同數(shù)據(jù)如果你希望在不同的單元格中輸入大量相同的數(shù)據(jù)信息，那么你不必逐個單元格一個一個地輸入，那樣需要花費好長時間，而且還比較容易出錯。你可以通過下面的操作方法在多個相鄰或不相鄰的單元格中快速填充同一個數(shù)據(jù)，具體方法為：首先同時選中需要填充數(shù)據(jù)的單元格。若某些單元格不相鄰，可在按住Ctrl鍵的同時，點擊鼠標左鍵，逐個選中；其次輸入要填充的某個數(shù)據(jù)。按住Ctrl鍵的同時，按回車鍵，則剛才選中的所有單元格同時填入該數(shù)據(jù)。4、快速進行中英文輸入法切換一張工作表常常會既包含有數(shù)字信息，又包含有文字信息，要錄入這樣一種工作表就需要我們不斷地在中英文之間反復(fù)切換輸入法，非常麻煩，為了方便操作，我們可以用以下方法實現(xiàn)自動切換：首先用鼠標選中需要輸入中文的單元格區(qū)域，然后在輸入法菜單中選擇一個合適的中文輸入法；接著打開“有效數(shù)據(jù)”對話框，選中“IME模式”標簽，在“模式”框中選擇打開，單擊“確定”按鈕；然后再選中輸入數(shù)字的單元格區(qū)域，在“有效數(shù)據(jù)”對話框中，單擊“IME模式”選項卡，在“模式”框中選擇關(guān)閉（英文模式）；最后單擊“確定”按鈕，這樣用鼠標分別在剛才設(shè)定的兩列中選中單元格，五筆和英文輸入方式就可以相互切換了。5、快速刪除工作表中空行刪除ExcelXP工作表中的空行，一般的方法是需要將空行都找出來，然后逐行刪除，但這樣做操作量非常大，很不方便。那么如何才能減輕刪除工作表中空行的工作量呢？您可以使用下面的操作方法來進行刪除：首先打開要刪除空行的工作表，在打開的工作表中用鼠標單擊菜單欄中的“插入”菜單項，并從下拉菜單中選擇“列”，從而插入一新的列Ｘ，在Ｘ列中順序填入整數(shù)；然后根據(jù)其他任何一列將表中的行排序，使所有空行都集中到表的底部。刪去所有空行中Ｘ列的數(shù)據(jù)，以Ｘ列重新排序，然后刪去Ｘ列。按照這樣的刪除方法，無論工作表中包含多少空行，您就可以很快地刪除了。6、快速對不同單元格中字號進行調(diào)整在使用ExcelXP編輯文件時，常常需要將某一列的寬度固定，但由于該列各單元格中的字符數(shù)目不等，致使有的單元格中的內(nèi)容不能完全顯示在屏幕上，為了讓這些單元格中的數(shù)據(jù)都顯示在屏幕上，就不得不對這些單元格重新定義較小的字號。如果依次對這些單元格中的字號調(diào)整的話，工作量將會變得很大。其實，您可以采用下面的方法來減輕字號調(diào)整的工作量：首先新建或打開一個工作簿，并選中需要ExcelXP根據(jù)單元格的寬度調(diào)整字號的單元格區(qū)域；其次單擊用鼠標依次單擊菜單欄中的“格式”/“單元格”/“對齊”標簽，在“文本控制”下選中“縮小字體填充”復(fù)選框，并單擊“確定”按鈕；此后，當(dāng)你在這些單元格中輸入數(shù)據(jù)時，如果輸入的數(shù)據(jù)長度超過了單元格的寬度，ExcelXP能夠自動縮小字符的大小把數(shù)據(jù)調(diào)整到與列寬一致，以使數(shù)據(jù)全部顯示在單元格中。如果你對這些單元格的列寬進行了更改，則字符可自動增大或縮小字號，以適應(yīng)新的單元格列寬，但是對這些單元格原設(shè)置的字體字號大小則保持不變。7、快速輸入多個重復(fù)數(shù)據(jù)在使用ExcelXP工作表的過程中，我們經(jīng)常要輸入大量重復(fù)的數(shù)據(jù),如果依次輸入，無疑工作量是巨大的?，F(xiàn)在我們可以借助ExcelXP的“宏”功能,來記錄首次輸入需要重復(fù)輸入的數(shù)據(jù)的命令和過程,然后將這些命令和過程賦值到一個組合鍵或工具欄的按鈕上,當(dāng)按下組合鍵時,計算機就會重復(fù)所記錄的操作。使用宏功能時，我們可以按照以下步驟進行操作:首先打開工作表，在工作表中選中要進行操作的單元格；接著再用鼠標單擊菜單欄中的“工具”菜單項，并從彈出的下拉菜單中選擇“宏”子菜單項，并從隨后彈出的下級菜單中選擇“錄制新宏”命令；設(shè)定好宏后，我們就可以對指定的單元格，進行各種操作，程序?qū)⒆詣訉λM行的各方面操作記錄復(fù)制。8、快速處理多個工作表有時我們需要在ExcelXP中打開多個工作表來進行編輯，但無論打開多少工作表，在某一時刻我們只能對一個工作表進行編輯，編輯好了以后再依次編輯下一個工作表，如果真是這樣操作的話，我們倒沒有這個必要同時打開多個工作表了，因為我們同時打開多個工作表的目的就是要減輕處理多個工作表的工作量的，那么我們該如何實現(xiàn)這樣的操作呢？您可采用以下方法：首先按住“Shift"鍵或“Ctrl"鍵并配以鼠標操作，在工作簿底部選擇多個彼此相鄰或不相鄰的工作表標簽，然后就可以對其實行多方面的批量處理；接著在選中的工作表標簽上按右鍵彈出快捷菜單，進行插入和刪除多個工作表的操作；然后在“文件”菜單中選擇“頁面設(shè)置……”，將選中的多個工作表設(shè)成相同的頁面模式；再通過“編輯”菜單中的有關(guān)選項，在多個工作表范圍內(nèi)進行查找、替換、定位操作；通過“格式”菜單中的有關(guān)選項，將選中的多個工作表的行、列、單元格設(shè)成相同的樣式以及進行一次性全部隱藏操作；接著在“工具”菜單中選擇“選項……”，在彈出的菜單中選擇“視窗”和“編輯”按鈕，將選中的工作表設(shè)成相同的視窗樣式和單元格編輯屬性；最后選中上述工作表集合中任何一個工作表，并在其上完成我們所需要的表格，則其它工作表在相同的位置也同時生成了格式完全相同的表格。高效辦公Excel排序方法"集中營"排序是數(shù)據(jù)處理中的經(jīng)常性工作，Excel排序有序數(shù)計算（類似成績統(tǒng)計中的名次）和數(shù)據(jù)重排兩類。本文以幾個車間的產(chǎn)值和名稱為例，介紹Excel2000/XP的數(shù)據(jù)排序方法。一、數(shù)值排序1.RANK函數(shù)RANK函數(shù)是Excel計算序數(shù)的主要工具，它的語法為:RANK（number，ref，order），其中number為參與計算的數(shù)字或含有數(shù)字的單元格，ref是對參與計算的數(shù)字單元格區(qū)域的絕對引用，order是用來說明排序方式的數(shù)字（如果order為零或省略，則以降序方式給出結(jié)果，反之按升序方式）。例如圖1中E2、E3、E4單元格存放一季度的總產(chǎn)值，計算各車間產(chǎn)值排名的方法是:在F2單元格內(nèi)輸入公式“=RANK（E2，$E$2:$E$4）”，敲回車即可計算出鑄造車間的產(chǎn)值排名是2。再將F2中的公式復(fù)制到剪貼板，選中F3、F4單元格按Ctrl+V，就能計算出其余兩個車間的產(chǎn)值排名為3和1。如果B1單元格中輸入的公式為“=RANK（E2，$E$2:$E$4，1）”，則計算出的序數(shù)按升序方式排列，即2、1和3。需要注意的是:相同數(shù)值用RANK函數(shù)計算得到的序數(shù)（名次）相同，但會導(dǎo)致后續(xù)數(shù)字的序數(shù)空缺。假如上例中F2單元格存放的數(shù)值與F3相同，則按本法計算出的排名分別是3、3和1（降序時）。2.COUNTIF函數(shù)COUNTIF函數(shù)可以統(tǒng)計某一區(qū)域中符合條件的單元格數(shù)目，它的語法為COUNTIF（range，criteria）。其中range為參與統(tǒng)計的單元格區(qū)域，criteria是以數(shù)字、表達式或文本形式定義的條件。其中數(shù)字可以直接寫入，表達式和文本必須加引號。仍以圖1為例，F(xiàn)2單元格內(nèi)輸入的公式為“=COUNTIF（$E$2:$E$4，">"&E2）+1”。計算各車間產(chǎn)值排名的方法同上，結(jié)果也完全相同，2、1和3。此公式的計算過程是這樣的:首先根據(jù)E2單元格內(nèi)的數(shù)值，在連接符&的作用下產(chǎn)生一個邏輯表達式，即“>176.7”、“>167.3”等。COUNTIF函數(shù)計算出引用區(qū)域內(nèi)符合條件的單元格數(shù)量，該結(jié)果加一即可得到該數(shù)值的名次。很顯然，利用上述方法得到的是降序排列的名次，對重復(fù)數(shù)據(jù)計算得到的結(jié)果與RANK3.IF函數(shù)Excel自身帶有排序功能，可使數(shù)據(jù)以降序或升序方式重新排列。如果將它與IF函數(shù)結(jié)合，可以計算出沒有空缺的排名。以圖1中E2、E3、E4單元格的產(chǎn)值排序為例，具體做法是:選中E2單元格，根據(jù)排序需要，單擊Excel工具欄中的“降序排序”或“升序排序”按鈕，即可使工作表中的所有數(shù)據(jù)按要求重新排列。假如數(shù)據(jù)是按產(chǎn)值由大到?。ń敌颍┡帕械?，而您又想賦予每個車間從1到n（n為自然數(shù)）的排名?？梢栽贕2單元格中輸入1，然后在G3單元格中輸入公式“=IF（E3=E2，G3,G3+1）”，只要將公式復(fù)制到G4等單元格，就可以計算出其他車間的產(chǎn)值排名。二、文本排序選舉等場合需要按姓氏筆劃為文本排序，Excel提供了比較好的解決辦法。如果您要將圖1數(shù)據(jù)表按車間名稱的筆劃排序，可以使用以下方法:選中排序關(guān)鍵字所在列（或行）的首個單元格（如圖1中的A1），單擊Excel“數(shù)據(jù)”菜單下的“排序”命令，再單擊其中的“選項”按鈕。選中“排序選項”對話框“方法”下的“筆畫排序”，再根據(jù)數(shù)據(jù)排列方向選擇“按行排序”或“按列排序”，“確定”后回到“排序”對話框（圖2）。如果您的數(shù)據(jù)帶有標題行（如圖1中的“單位”之類），則應(yīng)選中“有標題行”（反之不選），然后打開“主要關(guān)鍵字”下拉列表，選擇其中的“單位”，選中排序方式（“升序”或“降序”）后“確定”，表中的所有數(shù)據(jù)就會據(jù)此重新排列。此法稍加變通即可用于“第一名”、“第二名”等文本排序，請讀者自行摸索。三、自定義排序如果您要求Excel按照“金工車間”、“鑄造車間”和“維修車間”的特定順序重排工作表數(shù)據(jù)，前面介紹的幾種方法就無能為力了。這類問題可以用定義排序規(guī)則的方法解決:首先單擊Excel“工具”菜單下的“選項”命令，打開“選項”對話框中的“自定義序列”選項卡（圖3）。選中左邊“自定義序列”下的“新序列”，光標就會在右邊的“輸入序列”框內(nèi)閃動，您就可以輸入“金工車間”、“鑄造車間”等自定義序列了，輸入的每個序列之間要用英文逗號分隔，或者每輸入一個序列就敲回車。如果序列已經(jīng)存在于工作表中，可以選中序列所在的單元格區(qū)域單擊“導(dǎo)入”，這些序列就會被自動加入“輸入序列”框。無論采用以上哪種方法，單擊“添加”按鈕即可將序列放入“自定義序列”中備用（圖3）。使用排序規(guī)則排序的具體方法與筆劃排序很相似，只是您要打開“排序選項”對話框中的“自定義排序次序”下拉列表，選中前面定義的排序規(guī)則，其他選項保持不動?；氐健芭判颉睂υ捒蚝蟾鶕?jù)需要選擇“升序”或“降序”，“確定”后即可完成數(shù)據(jù)的自定義排序。需要說明的是:顯示在“自定義序列”選項卡中的序列（如一、二、三等），均可按以上方法參與排序，請讀者注意Excel提供的自定義序列類型。談?wù)凟xcel輸入的技巧在Excel工作表的單元格中，可以使用兩種最基本的數(shù)據(jù)格式：常數(shù)和公式。常數(shù)是指文字、數(shù)字、日期和時間等數(shù)據(jù)，還可以包括邏輯值和錯誤值，每種數(shù)據(jù)都有它特定的格式和輸入方法，為了使用戶對輸入數(shù)據(jù)有一個明確的認識，有必要來介紹一下在Excel中輸入各種類型數(shù)據(jù)的方法和技巧。一、輸入文本Excel單元格中的文本包括任何中西文文字或字母以及數(shù)字、空格和非數(shù)字字符的組合，每個單元格中最多可容納32000個字符數(shù)。雖然在Excel中輸入文本和在其它應(yīng)用程序中沒有什么本質(zhì)區(qū)別，但是還是有一些差異，比如我們在Word、PowerPoint的表格中，當(dāng)在單元格中輸入文本后，按回車鍵表示一個段落的結(jié)束，光標會自動移到本單元格中下一段落的開頭，在Excel的單元格中輸入文本時，按一下回車鍵卻表示結(jié)束當(dāng)前單元格的輸入，光標會自動移到當(dāng)前單元格的下一個單元格，出現(xiàn)這種情況時，如果你是想在單元格中分行，則必須在單元格中輸入硬回車，即按住Alt鍵的同時按回車鍵。二、輸入分數(shù)幾乎在所有的文檔中，分數(shù)格式通常用一道斜杠來分界分子與分母，其格式為“分子/分母”，在Excel中日期的輸入方法也是用斜杠來區(qū)分年月日的，比如在單元格中輸入“1/2”，按回車鍵則顯示“1月2日”，為了避免將輸入的分數(shù)與日期混淆，我們在單元格中輸入分數(shù)時，要在分數(shù)前輸入“0”（零）以示區(qū)別，并且在“0”和分子之間要有一個空格隔開，比如我們在輸入1/2時，則應(yīng)該輸入“01/2”。如果在單元格中輸入“81/2”，則在單元格中顯示“81/2”，而在編輯欄中顯示“三、輸入負數(shù)在單元格中輸入負數(shù)時，可在負數(shù)前輸入“-”作標識，也可將數(shù)字置在（）括號內(nèi)來標識，比如在單元格中輸入“（88）”，按一下回車鍵，則會自動顯示為“-88”。四、輸入小數(shù)在輸入小數(shù)時，用戶可以向平常一樣使用小數(shù)點，還可以利用逗號分隔千位、百萬位等，當(dāng)輸入帶有逗號的數(shù)字時，在編輯欄并不顯示出來，而只在單元格中顯示。當(dāng)你需要輸入大量帶有固定小數(shù)位的數(shù)字或帶有固定位數(shù)的以“0”字符串結(jié)尾的數(shù)字時，可以采用下面的方法：選擇“工具”、“選項”命令，打開“選項”對話框，單擊“編輯”標簽，選中“自動設(shè)置小數(shù)點”復(fù)選框，并在“位數(shù)”微調(diào)框中輸入或選擇要顯示在小數(shù)點右面的位數(shù)，如果要在輸入比較大的數(shù)字后自動添零，可指定一個負數(shù)值作為要添加的零的個數(shù)，比如要在單元格中輸入“88”后自動添加3個零，變成“88000”，就在“位數(shù)”微調(diào)框中輸入“-3”，相反，如果要在輸入“88”后自動添加3位小數(shù)，變成“0.088”，則要在“位數(shù)”微調(diào)框中輸入“3”。另外，在完成輸入帶有小數(shù)位或結(jié)尾零字符串的數(shù)字后，應(yīng)清除對“自動設(shè)置小數(shù)點”符選框的選定，以免影響后邊的輸入；如果只是要暫時取消在“自動設(shè)置小數(shù)點”中設(shè)置的選項，可以在輸入數(shù)據(jù)時自帶小數(shù)點。五、輸入貨幣值Excel幾乎支持所有的貨幣值，如人民幣（￥）、英鎊（￡）等。歐元出臺以后，Excel2000完全支持顯示、輸入和打印歐元貨幣符號。用戶可以很方便地在單元格中輸入各種貨幣值，Excel會自動套用貨幣格式，在單元格中顯示出來，如果用要輸入人民幣符號，可以按住Alt鍵，然后再數(shù)字小鍵盤上按“0165”即可。六、輸入日期Excel是將日