少兒編程、BS結(jié)構(gòu)、微信小程序、MVC模式

摘要本編程學(xué)習(xí)系統(tǒng)是一個基于微信小程序，并根據(jù)國內(nèi)少兒編程學(xué)習(xí)的現(xiàn)狀而設(shè)計開發(fā)的一款面向少兒的編程學(xué)習(xí)平臺。因為微信小程序具有方便快捷、速度快、安全穩(wěn)定、保密性強(qiáng)以及功能豐富等優(yōu)點，所以本編程學(xué)習(xí)系統(tǒng)理論上可以擴(kuò)大國內(nèi)少兒編程學(xué)習(xí)的規(guī)模和提高少兒對編程學(xué)習(xí)的興趣。編程是一份嚴(yán)謹(jǐn)且細(xì)致的活，程序員如果想得到最終的程序結(jié)果，那么就免不了要經(jīng)過四個嚴(yán)格的步驟，那就是分解問題、問題抽象、模式識別以及設(shè)計算法四個過程。從理解問題到找到方法路徑，孩子們能在這過程中訓(xùn)練到自己的邏輯思維能力。因此從另一個角度上來講，本編程學(xué)習(xí)系統(tǒng)還可以提升6-18歲年齡段兒童的邏輯思維能力。本文在開頭首先介紹了國內(nèi)編程教育和微信小程序的發(fā)展現(xiàn)狀和相關(guān)政策背景，然后闡述了系統(tǒng)的實現(xiàn)目標(biāo)，開發(fā)技術(shù)和主要架構(gòu)，接著較為詳細(xì)地介紹了系統(tǒng)的具體設(shè)計與實現(xiàn)。最后，本文對編程學(xué)習(xí)系統(tǒng)進(jìn)行了總結(jié)，并提出了一些有待改進(jìn)的地方。本系統(tǒng)主要為用戶提供了登錄注冊，課程學(xué)習(xí)以及代碼驗證等功能，其中課程學(xué)習(xí)包括關(guān)于編程學(xué)習(xí)視頻的觀看、課程文檔的查看以及課程試題訓(xùn)練等方式。為管理員提供了用戶信息管理，課程管理、題庫管理和個人稱號管理等功能。在后臺管理的設(shè)計上，本系統(tǒng)采用B/S結(jié)構(gòu)，運(yùn)用MVC模式來開發(fā)服務(wù)器功能，同時也利用JSP技術(shù)進(jìn)行動態(tài)頁面設(shè)計。在面向用戶的設(shè)計上，使用wxml、wxss、js等開發(fā)技術(shù)來開發(fā)微信小程序客戶端。服務(wù)器的后臺數(shù)據(jù)庫選用MySQL數(shù)據(jù)庫。關(guān)鍵詞：少兒編程、B/S結(jié)構(gòu)、微信小程序、MVC模式AbstractTheprogramminglearningsystemisaminiprogrambasedonWeChat,andaccordingtothedomesticchildren'sprogramminglearningstatusanddesignanddevelopmentofaprogramminglearningplatformforchildren.BecauseWeChatminiprogramhastheadvantagesofconvenience,fastspeed,safetyandstability,strongconfidentialityandrichfunctions,theprogramminglearningsystemcantheoreticallyexpandthescaleofdomesticchildren'sprogramminglearningandimprovechildren'sinterestinprogramminglearning.Programmingisarigorousandmeticulouswork,iftheprogrammerwantstogetthefinalprogramresults,thenitisinevitabletogothroughfourstrictsteps,thatis,problemdecomposition,problemabstraction,patternrecognitionanddesignalgorithmfourprocesses.Fromunderstandingproblemstofindingmethodsandpaths,childrencantraintheirlogicalthinkingabilityinthisprocess.Atthebeginningofthispaper,thedevelopmentstatusandrelatedpolicybackgroundofdomesticprogrammingeducationandWeChatappletareintroduced.Thenthesystemrealizationgoal,developmenttechnologyandmainstructureareexpounded.Thenthespecificdesignandimplementationofthesystemareintroducedindetail.Finally,thispapersummarizestheprogramminglearningsystemandputsforwardsomeareasforimprovement.Thesystemmainlyprovidesuserswithloginregistration,courselearningandcodeverificationandotherfunctions,includingcourselearningaboutprogramminglearningvideoview,viewofcoursedocumentsandcoursequestionstrainingandotherways.Fortheadministratortoprovideuserinformationmanagement,coursemanagement,questionbankmanagementandpersonaltitlemanagementandotherfunctions.Inthedesignofbackgroundmanagement,thesystemusesB/Sarchitecture,theuseofMVCpatterntodevelopserverfunctions,butalsotheuseofJSPtechnologyfordynamicpagedesign.Intermsofuser-orienteddesign,developmenttechnologiessuchasWXML,WXSSandjsareusedtodevelopWeChatsmallprogramclient.ThebackgrounddatabaseoftheserverisMySQLdatabase.KeyWord：Children'sprogramming、WeChatminiProgram、MVC、B/S目錄25432_WPSOffice_Level1第1章概述 125680_WPSOffice_Level21.1系統(tǒng)開發(fā)背景 125680_WPSOffice_Level31.1.1編程教育的發(fā)展 19144_WPSOffice_Level31.1.2微信小程序的發(fā)展 224269_WPSOffice_Level31.1.2編程學(xué)習(xí)小程序的現(xiàn)狀 39144_WPSOffice_Level21.2系統(tǒng)實現(xiàn)的目標(biāo) 424269_WPSOffice_Level21.3系統(tǒng)的開發(fā)意義 525680_WPSOffice_Level1第2章系統(tǒng)開發(fā)技術(shù)和主要架構(gòu) 614420_WPSOffice_Level22.1開發(fā)技術(shù)的選擇 614420_WPSOffice_Level32.1.1小程序部分 626461_WPSOffice_Level32.1.2后臺管理 721402_WPSOffice_Level32.1.3服務(wù)端開發(fā) 726461_WPSOffice_Level22.2系統(tǒng)的主要架構(gòu)及開發(fā)模型 924137_WPSOffice_Level32.2.1基于B/S的體系結(jié)構(gòu)的后臺管理 923989_WPSOffice_Level32.2.2基于MVC應(yīng)用開發(fā)框架的后臺管理 109144_WPSOffice_Level1第3章系統(tǒng)功能和流程分析 1321402_WPSOffice_Level23.1系統(tǒng)的功能分析 1324137_WPSOffice_Level23.2平臺功能模塊的設(shè)計分析 1423989_WPSOffice_Level23.3系統(tǒng)流程分析 148399_WPSOffice_Level33.3.1用戶登錄流程 1411193_WPSOffice_Level33.3.2用戶課程學(xué)習(xí)流程 153947_WPSOffice_Level33.3.3課程試題訓(xùn)練流程 1624269_WPSOffice_Level1第4章系統(tǒng)的具體設(shè)計與實現(xiàn) 1815056_WPSOffice_Level24.1數(shù)據(jù)庫設(shè)計 1812603_WPSOffice_Level34.1.1數(shù)據(jù)庫概念設(shè)計。 1812539_WPSOffice_Level34.1.2數(shù)據(jù)庫邏輯設(shè)計。 2111220_WPSOffice_Level24.2后臺原型設(shè)計 2530851_WPSOffice_Level34.2.1菜單欄 2513263_WPSOffice_Level34.2.3管理部分 2611193_WPSOffice_Level24.3服務(wù)器功能開發(fā) 2729616_WPSOffice_Level34.3.1項目目錄結(jié)構(gòu) 2710345_WPSOffice_Level34.3.2主要功能的實現(xiàn) 293947_WPSOffice_Level24.4微信小程序的設(shè)計與實現(xiàn) 3124226_WPSOffice_Level34.4.1客戶端目錄結(jié)構(gòu) 3123721_WPSOffice_Level34.4.2基于MVC模式設(shè)計的客戶端 3230318_WPSOffice_Level34.4.3小程序各頁面的設(shè)計與實現(xiàn) 334.5項目測試 394.5.1運(yùn)行環(huán)境搭建 394.5.2軟件測試 394.5.3測試總結(jié) 4014420_WPSOffice_Level1第5章總結(jié)與改進(jìn) 4126461_WPSOffice_Level1參考文獻(xiàn) 4221402_WPSOffice_Level1致謝 45第1章概述1.1系統(tǒng)開發(fā)背景1.1.1編程教育的發(fā)展根據(jù)2019年2月28日中國互聯(lián)網(wǎng)絡(luò)信息中心（CNNIC）在京發(fā)布的第四十三次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》，我國網(wǎng)民規(guī)模已經(jīng)達(dá)到8.29億[8]。這就意味我國除了高年齡段和低年齡段的人群外，基本已經(jīng)實現(xiàn)全民通網(wǎng)。虛擬的網(wǎng)絡(luò)世界擁有這么龐大的網(wǎng)民數(shù)量，如何去滿足這些人的各種需求呢？于是就有人提出了通過線下線上結(jié)合運(yùn)作的電子商務(wù)；有人就提出了基于互聯(lián)網(wǎng)的金融服務(wù)；有人提出了基于互聯(lián)網(wǎng)的醫(yī)療服務(wù)。有需求就有市場，這個龐大的虛擬市場催生出各種各樣的基于互聯(lián)網(wǎng)的產(chǎn)業(yè)概念。在十二屆全國人大三次會議上，李克強(qiáng)總理在政府工作報告中首次提出“互聯(lián)網(wǎng)＋”行動計劃[22]。政府寄希望互聯(lián)網(wǎng)能夠跟傳統(tǒng)產(chǎn)業(yè)相結(jié)合，改造傳統(tǒng)產(chǎn)業(yè)的生產(chǎn)方式和產(chǎn)業(yè)結(jié)構(gòu)等，提高產(chǎn)業(yè)生產(chǎn)效率。集國家之力量大力推動互聯(lián)網(wǎng)產(chǎn)業(yè)發(fā)展，目的在于希望信息化促進(jìn)工業(yè)化，從而帶動國家經(jīng)濟(jì)發(fā)展。在這種環(huán)境下，各種各樣的互聯(lián)網(wǎng)+的概念如雨后春筍般涌現(xiàn)，互聯(lián)網(wǎng)+工業(yè)、互聯(lián)網(wǎng)+金融、互聯(lián)網(wǎng)+商貿(mào)等等。于是，有人就順勢提出了互聯(lián)網(wǎng)+教育這個概念。互聯(lián)網(wǎng)+教育的概念并不新鮮，早在2012年以前就有人提出了在線教育的概念，直到2017年，在線教育才作為一種新興的教育方式，被首次寫入我國的政府工作報告。在政府和社會的扶持下，在線教育產(chǎn)業(yè)發(fā)展迅速。第四十三次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告》顯示，截至2018年12月，我國在線教育用戶規(guī)模達(dá)2.01億，其中手機(jī)在線教育用戶規(guī)模達(dá)1.94億，同比增長63.3%，占整體用戶規(guī)模96.5%[8]。在線教育之所以能夠迅速地發(fā)展，是因為它擁有很多線下教育所沒有的優(yōu)勢，如用戶可以跨域跨校選擇老師，不被局限在單一教學(xué)區(qū)域和單一的教師資源，同時提高了用戶的學(xué)習(xí)效率?；趪鴥?nèi)的相關(guān)政策和在線教育本身的優(yōu)點，在線的教育勢必將會成為未來教育的常態(tài)。2017年，國務(wù)院印發(fā)《新一代人工智能發(fā)展規(guī)劃》，規(guī)劃提出要實施全民智能教育項目，在中小學(xué)設(shè)置人工智能相關(guān)課程，逐步推廣編程教育[11]?？梢灶A(yù)見，在今后的時間里，編程教育的門檻會逐步會降低到到低年齡階段。傳統(tǒng)的課程，只需要在線下課堂中傳授相關(guān)知識即可讓孩子們理解其中的原理，編程學(xué)習(xí)課程與之最大的區(qū)別是具有很強(qiáng)的實踐性，學(xué)生還需要經(jīng)過對知識進(jìn)行編程檢驗才會懂得如何去運(yùn)用這些知識。單方面地向孩子灌輸編程概念并不能促進(jìn)他們對編程的理解，孩子們還應(yīng)能夠?qū)崟r地對知識進(jìn)行檢驗。而在線編程教育能夠解決線下編程教育的局限性，它允許孩子們在學(xué)習(xí)完課程后就能夠通過線上的編程軟件對課程進(jìn)行實操，加深了他們對相關(guān)編程知識的理解。基于以上所闡述的情況，所以我提出了一個面向少兒的、基于微信小程序的編程學(xué)習(xí)系統(tǒng)的解決方案。這個編程序?qū)W習(xí)系統(tǒng)最大的特點是運(yùn)行在微信平臺上的、免費(fèi)的、面向6-18歲低齡兒童的。1.1.2微信小程序的發(fā)展在觸屏手機(jī)出現(xiàn)之前，網(wǎng)民獲取信息和娛樂的來源主要是web網(wǎng)頁和pc端應(yīng)用程序。隨著移動設(shè)備進(jìn)入功能性時代和java等編程技術(shù)的發(fā)展，手機(jī)App應(yīng)運(yùn)而生。從最初的貪吃蛇之類的游戲到現(xiàn)在涉及到生活方方面面的超級App，手機(jī)app的功能越來越多樣化。APP為用戶提供了豐富的內(nèi)容和功能的同時，也在將其信息封鎖在圍墻之內(nèi)，并不能被搜索引擎檢索到。由此帶來的問題是，如果用戶想要得到不同優(yōu)質(zhì)的服務(wù)，那這個用戶的手機(jī)就需要安裝大量的應(yīng)用程序。而這些app會占據(jù)大量的手機(jī)內(nèi)存，嚴(yán)重降低手機(jī)運(yùn)行速度。針對手機(jī)原生態(tài)app的瓶頸，微信小程序應(yīng)運(yùn)而生。微信之父張小龍對小程序的期許是這樣的：“本質(zhì)上來說，我們更希望在智能手機(jī)里，用戶可以更快捷地獲取服務(wù)，但是他的體驗又比網(wǎng)站要好很多，同時它的麻煩程度又比去下載一個APP要好很多，它不像下載一個APP那么麻煩，這個就是小程序的定位[23]?；谶@個定位可以看出小程序的特性：無須安裝、觸手可及、用完即走、無須卸載”。因此對微信用戶來說，用戶想要獲取一項服務(wù)，并不需要去下載一個新的app，或者打開一個新的應(yīng)用程序，只需要在已經(jīng)打開了的微信程序中使用小程序即可，方便又快捷，觸手可得，節(jié)省了大量的安裝時間和等待軟件打開的時間。更為重要的是，使用微信小程序并不會占用手機(jī)存儲空間，用戶在享受需要的服務(wù)的同時并不會因此降低手機(jī)的運(yùn)行速度。目前的微信小程序也有局限性。小程序的定位是“小”應(yīng)用，所以輕量級、低頻、非剛需、功能單一的應(yīng)用更適合小程序。而其他的應(yīng)用，比如高頻的應(yīng)用不適合小程序，因為小程序代碼的1M大小限制了應(yīng)用功能的擴(kuò)展，也就限制了用戶的體驗，這跟高頻應(yīng)用的定位相沖突。還有就是復(fù)雜的應(yīng)用也不適合小程序，因為小程序代碼不能超過1M大小，而這個大小的代碼量無法支撐復(fù)雜的應(yīng)用邏輯和功能?；谝陨纤f微信小程序的種種優(yōu)點，微信小程序在小場景中有著天然的優(yōu)勢。根據(jù)阿拉丁小程序統(tǒng)計平臺（）和阿拉丁指數(shù)（）共同發(fā)布的2018年上半年小程序生態(tài)白皮書，2018年小程序用戶預(yù)計約6億，國內(nèi)微信小程序的平均日活用戶已經(jīng)超過2.3億，而微信小程序的數(shù)量則突破了230萬，超過了2017年蘋果AppStore的應(yīng)用數(shù)量[10]。小程序在許多付費(fèi)的O2O類、生活服務(wù)類、桌面工具類、聊天增強(qiáng)工具類以及群管理業(yè)務(wù)等使用頻率不高，功能單一、使用頻率低的領(lǐng)域上正占據(jù)著重要的地位。1.1.2編程學(xué)習(xí)小程序的現(xiàn)狀編程學(xué)習(xí)系統(tǒng)既然是一個系統(tǒng)，那么它就應(yīng)該是一個由部分組成的整體。正常的學(xué)習(xí)流程應(yīng)該是要經(jīng)過課前預(yù)習(xí)、課中學(xué)習(xí)和課后復(fù)習(xí)這三個過程的，一個學(xué)習(xí)軟件系統(tǒng)缺少其中一個過程就不能夠成為一個完整的學(xué)習(xí)系統(tǒng)。目前市場上的面向少兒的編程學(xué)習(xí)的微信小程序主要有有眨編程，編程王者，編程貓以及其他，這些主流的編程學(xué)習(xí)小程序都有這樣那樣的缺點。眨編程提供了各種各樣的編程語言的學(xué)習(xí)視頻，比如python，scratch圖形化編程以及培養(yǎng)思維能力的酷比特積木。可惜的是眨編程并沒有提供課后習(xí)題以及代碼驗證這兩個重要的功能。讀者觀看這些編程視頻，他們只經(jīng)歷了閱讀、聽講和思考過程，或者說是課前預(yù)習(xí)和課中學(xué)習(xí)過程。而要把從視頻里學(xué)習(xí)到的東西化為自己的知識，讀者還需要經(jīng)過自己的再研究和實踐也就是課后復(fù)習(xí)，而這種再研究和實踐可以具象為做一套題或者是編寫一些代碼進(jìn)行驗證，而這些功能恰恰是眨編程缺失的。編程王者是一款答題類的微信小游戲，跟答題王者十分相似。它提供有好友對戰(zhàn)和隨機(jī)匹配的排位賽等常規(guī)的對戰(zhàn)方式。它的答題規(guī)則是系統(tǒng)隨機(jī)給出一些有關(guān)編程知識的題目，在限定時間內(nèi)答題最快最準(zhǔn)的那人就是贏家。從本質(zhì)上來講，答題小游戲只是作為學(xué)習(xí)過程中的課后復(fù)習(xí)部分而存在，但它并不提供給讀者課前預(yù)習(xí)或者課中學(xué)習(xí)功能，因此從嚴(yán)格意義上講，它并不是一個完善學(xué)習(xí)系統(tǒng)。編程貓系列的微信小程序都是商業(yè)化小程序，或者說只是課程的前端入口，而后續(xù)的授課和考試等等都還要通過他們線下授課進(jìn)行。比如編程貓商城就是一個給用戶購買他們的課程的小程序產(chǎn)品，購買之后再通過客服來告知用戶如何進(jìn)行下一步的授課，這一系列服務(wù)并不是在微信小程序上運(yùn)作的，所以從本質(zhì)上來講，編程貓商城這只是一個購物小程序，跟在線教育并沒有太大的聯(lián)系而其他類型的微信小程序也大多延續(xù)了編程貓系列的做法，凈是一些商業(yè)化的小程序，大多只是一個線下課程購買的入口。在線教育強(qiáng)調(diào)把線下教育轉(zhuǎn)移到線上，而它們卻將線上教育轉(zhuǎn)移到線下來，這些編程學(xué)習(xí)小程序都嚴(yán)重偏離了在線教育的初衷，雖然小程序還處于一個爆發(fā)式增長時期，但很多小程序開發(fā)者在資本刺激下出現(xiàn)了盲目跟風(fēng)的情況。很多在線教育小程序都被金錢的銅臭味污染了，因此才會出現(xiàn)以上說的各種商業(yè)化嚴(yán)重的小程序。我國國務(wù)院是在2017年明確指出要逐步開展全民智能教育項目，逐步推廣編程教育后。直到2019年3月才明確表示，要在2019年啟動中小學(xué)生信息素養(yǎng)測，相關(guān)政策的落實具有滯后性。跟國際相比，我國在在線編程教育上還處于一個落后階段，相關(guān)市場也處于一個迷茫狀態(tài)，這也就導(dǎo)致了不管是在pc端的應(yīng)用程序、web網(wǎng)頁還是手機(jī)app上都甚少有看到優(yōu)秀的面向少兒的在線編程學(xué)習(xí)的產(chǎn)品。而且微信小程序也才剛剛兩周歲，雖說正處于快速發(fā)展時期，但還存在很多尚未解決的問題，因此市場上面向少兒的在線編程學(xué)習(xí)的微信小程序不管是數(shù)量還是質(zhì)量都還不達(dá)標(biāo)。我認(rèn)為一個標(biāo)準(zhǔn)的編程學(xué)習(xí)系統(tǒng)應(yīng)該能夠提供給用戶課前預(yù)習(xí)、課中學(xué)習(xí)和課后復(fù)習(xí)等必要的功能。用戶能夠根據(jù)需要學(xué)習(xí)課程的知識，如通過視頻的觀看和課程文檔的學(xué)習(xí)，同時用戶還能在學(xué)完課程之后對知識做一個鞏固，如做一套試題，最重要的時候用戶還應(yīng)該能自己編寫一些代碼，并對代碼進(jìn)行驗證。1.2系統(tǒng)實現(xiàn)的目標(biāo)針對上面所講的面向少兒編程學(xué)習(xí)系統(tǒng)的乏力點，本系統(tǒng)致力于實現(xiàn)一個基于微信小程序的面向少兒的編程學(xué)習(xí)系統(tǒng)。所以系統(tǒng)能夠跟微信連接在一起，也就是用戶無需手動地注冊一個系統(tǒng)帳號，只需授權(quán)系統(tǒng)他的微信用戶信息即可完成注冊登錄操作。這個系統(tǒng)還能夠提供給用戶一個課前預(yù)習(xí)、課中學(xué)習(xí)和課后復(fù)習(xí)的環(huán)境。實現(xiàn)學(xué)習(xí)視頻的觀看和學(xué)習(xí)資料的查看功能，以便用戶能夠根據(jù)需要來選擇不同的方式進(jìn)行學(xué)習(xí)，事后還能反復(fù)觀看資料以便加深記憶。同時還要實現(xiàn)用戶在學(xué)習(xí)完這些課程之后，能針對每一個知識點做一套試題以便鞏固所學(xué)知識。針對高年齡段的用戶，本系統(tǒng)還需要提供一個代碼驗證的功能，也就是要實現(xiàn)用戶在文本框輸入一段代碼后，系統(tǒng)能夠?qū)Υa進(jìn)行編譯且執(zhí)行，然后給用戶輸出代碼的執(zhí)行結(jié)果。系統(tǒng)主要目標(biāo)群體是6-18歲的少兒，考慮到低年齡段的兒童的理解能力還有所欠缺，所以本系統(tǒng)把答題系統(tǒng)改為只要順序點擊答案即可完成答題。同時還要將代碼驗證模塊脫離課程存在，高年齡段的兒童可根據(jù)自身的學(xué)習(xí)情況來選用這個模塊。兒童的注意力很難長時間集中在屏幕中，而且兒童天性好玩。因此本系統(tǒng)添加了一個稱號功能來增強(qiáng)其娛樂性，根據(jù)用戶所完成的課程比例來授予他一個稱號。本系統(tǒng)還提供一個面向管理員的后臺管理頁面，提供了用戶管理、課程管理、題庫管理以及稱號管理等功能。1.3系統(tǒng)的開發(fā)意義微信小程序推出至今才剛剛過了兩周年就收獲了大量用戶的芳心，在輕量級、低頻、非剛需以及功能單一的應(yīng)用場景上占據(jù)了半壁江山。微信小程序還在急劇擴(kuò)張，微信小程序的未來在哪里，誰也說不清楚。只有自己親自去開發(fā)一款微信小程序，才能真正地理解微信小程序的優(yōu)勢和未來的發(fā)展方向。本系統(tǒng)提供有基于jsp的后臺管理頁面，同時去開發(fā)微信小程序和網(wǎng)頁web，有助于了解網(wǎng)頁的前端設(shè)計技術(shù)和微信小程序的設(shè)計技術(shù)之間的異同。這對于探究微信小程序的優(yōu)勢也有很大的幫助本系統(tǒng)能夠解決目前國內(nèi)面向少兒的編程學(xué)習(xí)產(chǎn)品功能不完全的缺點，提供一個全方位的學(xué)習(xí)環(huán)境，有助于國內(nèi)少兒編程教育的發(fā)展。國內(nèi)面向少兒的編程教育才剛剛起步，一些不良商家就趁機(jī)推出價格昂貴的線下編程興趣班，而這些線下編程課程稂莠不齊。對普通的家庭來說，給孩子報一個線下的編程興趣班花費(fèi)太高，對中產(chǎn)家庭來說，線下的編程興趣班有可能會擠壓孩子的其他藝術(shù)類興趣班的時間。這些都是不利于國家關(guān)于面向少兒的編程教育的政策的實施的。本系統(tǒng)能夠給廣大家庭提供一個免費(fèi)在線的編程學(xué)習(xí)環(huán)境，解決了當(dāng)下面向少兒的編程學(xué)習(xí)花費(fèi)高、質(zhì)量低和耗時等缺點。

第2章系統(tǒng)開發(fā)技術(shù)和主要架構(gòu)2.1開發(fā)技術(shù)的選擇本系統(tǒng)主要分為三個部分，一個是微信小程序，一個是基于web的后臺管理部分，最后也是最重要的部分就是服務(wù)端的開發(fā)。2.1.1小程序部分面向用戶的前端部分，本系統(tǒng)采用微信小程序來開發(fā)。微信小程序的代碼構(gòu)成有JSON配置、WXML靜態(tài)的超文本標(biāo)記語言、WXSS樣式、JS邏輯交互。微信小程序的開發(fā)方式跟傳統(tǒng)的web開發(fā)方式類似，前端的技術(shù)跟H5技術(shù)也大致相同，但是開發(fā)難度比用腳本語言像VBScript或JavaScript開發(fā)要簡單不少。小程序之所有能有開發(fā)上的優(yōu)勢，主要得益于它的架構(gòu)，微信小程序的基本架構(gòu)圖如圖所示。它分為三個部分，視圖層、邏輯層以及系統(tǒng)層，視圖層主要是頁面顯示部分，包含有WXML和WXSS；邏輯層主要用于業(yè)務(wù)邏輯的撰寫，包含有Manager和程序API；系統(tǒng)層是通過JSBridge來調(diào)用底層的系統(tǒng)API，比如微信自身的能力、離線存儲以及網(wǎng)絡(luò)請求等等，所以開發(fā)者就不用太多地去考慮不同的操作系統(tǒng)所帶來的差異，只需專注于視圖層和邏輯層的開發(fā)即可。小程序利用JSBridge將JS和系統(tǒng)連接，實現(xiàn)了JS和原生系統(tǒng)之間的相互調(diào)用，當(dāng)用戶在小程序上進(jìn)行相關(guān)操作時，會觸發(fā)相應(yīng)的事件，而這些動作會傳遞給原生Webviews，最后再到JS邏輯層。編程學(xué)習(xí)微信小程序開發(fā)框架，如圖2.1所示。圖2.1微信小程序開發(fā)框架圖2.1.2后臺管理針對后臺管理這部分，不同的Web開發(fā)技術(shù)適用于不同的開發(fā)框架，錯誤的選擇會嚴(yán)重降低程序的開發(fā)速度。要開發(fā)一個網(wǎng)絡(luò)站點，第一步就要選擇一個合適的動態(tài)網(wǎng)頁開發(fā)技術(shù)。當(dāng)前比較流行的動態(tài)網(wǎng)頁開發(fā)技術(shù)有JSP、ASP、PHP。它們的特性比較如下：技術(shù)名稱ASPJSPPHP對數(shù)據(jù)庫的支持好好好開發(fā)難易度容易容易較難使用平臺Windows9X/NTWindows/UNIXUNIX安全性不好好不好對組件的支持支持支持不支持執(zhí)行方式解釋執(zhí)行編譯之后執(zhí)行解釋執(zhí)行跨平臺不好好好表2.1asp/jsp/php比較表這三種技術(shù)是通過其他語言或技術(shù)來動態(tài)地生成一個頁面的技術(shù)，屬于對HTML的擴(kuò)展。ASP采用VBScript語言或Javascripr等腳本語言作為自己的開發(fā)語言，通過結(jié)合HTML代碼的方式動態(tài)生成網(wǎng)頁；JSP內(nèi)置的腳本語言是基于java的，所有的JSP頁面都會被編譯成javaservlet，主要用于響應(yīng)客戶端請求而動態(tài)生成HTML、XML或其格式文檔[24]。PHP適用于數(shù)據(jù)庫+Web頁面應(yīng)用，但對于業(yè)務(wù)邏輯過于復(fù)雜的Web應(yīng)用就不太適用。從表3-1中，我們不難看出，JSP的綜合實力在三者之中是最強(qiáng)的，主要體現(xiàn)在安全性和跨平臺性這兩個方面。同時也因為本人學(xué)習(xí)java已久，在java方面有一定的開發(fā)經(jīng)驗，所以，我最后選擇了基于Java的JSP技術(shù)作為動態(tài)網(wǎng)頁的開發(fā)技術(shù)。2.1.3服務(wù)端開發(fā)服務(wù)端使用其中Servlet、JSP、JDBC技術(shù)來響應(yīng)來自客戶端的請求，采用的是J2EE標(biāo)準(zhǔn)。J2EE是基于Java平臺的，是一個能夠針對不同層次進(jìn)行開發(fā)的統(tǒng)一的開發(fā)平臺，能夠降低應(yīng)用的復(fù)雜性和開發(fā)成本，同時也支持現(xiàn)有的應(yīng)用程序。J2EE將傳統(tǒng)的兩層應(yīng)用模型細(xì)分為許多層，如客戶層、Web層和業(yè)務(wù)層，不同的層次提供不同的服務(wù)，J2EE典型的四層結(jié)構(gòu)，如圖2.2:圖2.2J2EE四層結(jié)構(gòu)圖用J2EE開發(fā)的應(yīng)用程序是由組件構(gòu)成的。J2EE組件是具有獨立功能的軟件單元，它們通過相關(guān)的類和文件組裝成J2EE應(yīng)用程序，并與其他組件交互[25]。J2EE說明書中定義了以下的J2EE組件:1、應(yīng)用客戶端程序和applets是客戶層組件.2、JavaServlet和JavaServerPages(JSP)是web層組件.3、EnterpriseJavaBeans(EJB)是業(yè)務(wù)層組件.他們之間的關(guān)系是：圖2.3J2EE組件關(guān)系圖目前市場上使用的技術(shù)主流是SSH、SSM以及Springboot框架，他們都是J2EE方向的一個具體結(jié)構(gòu)、框架展示，能夠節(jié)省了我們大量的編碼工作，并且可以讓我們把更多精力放到系統(tǒng)業(yè)務(wù)邏輯處理上而不是花費(fèi)到無用的編碼上。雖然這些框架能夠加快我們的編碼速度，但本人還是希望能夠從更底層去編寫本系統(tǒng)，因為接觸底層可以加深自己對J2EE標(biāo)準(zhǔn)的理解，為以后使用框架打下基礎(chǔ)。2.2系統(tǒng)的主要架構(gòu)及開發(fā)模型2.2.1基于B/S的體系結(jié)構(gòu)的后臺管理B/S結(jié)構(gòu)，即Browser/Server(瀏覽器/服務(wù)器)結(jié)構(gòu)。這種結(jié)構(gòu)以瀏覽器作為客戶端，而用戶可以根據(jù)服務(wù)器提供的域名地址來訪問服務(wù)器，瀏覽器則會根據(jù)地址向服務(wù)器發(fā)出http請求，服務(wù)器會對該http請求進(jìn)行邏輯判斷和處理，然后再將處理后的最終結(jié)果返回給瀏覽器。這種結(jié)構(gòu)將傳統(tǒng)的客戶端的許多工作交由服務(wù)端來處理，瀏覽器只需要配置或安裝少數(shù)軟件就可以向服務(wù)器請求服務(wù)，服務(wù)器則要完成對數(shù)據(jù)庫進(jìn)行數(shù)據(jù)訪問和應(yīng)用的執(zhí)行等任務(wù)，然后通過動態(tài)網(wǎng)頁生成技術(shù)來承載來自數(shù)據(jù)庫的數(shù)據(jù)，最終再把渲染出來的html格式的文檔再通過http請求的方式返回給客戶端。實際上，B/S體系結(jié)構(gòu)是對C/S結(jié)構(gòu)的改進(jìn)，它從根本上解決的C/S結(jié)構(gòu)的缺陷。它將原來C/S兩層結(jié)構(gòu)中，客戶端層需要完成的事務(wù)邏輯處理從客戶端中摘除掉，然后再將這任務(wù)分給服務(wù)器，這樣子，客戶端只需要負(fù)責(zé)將數(shù)據(jù)展示給用戶，服務(wù)端負(fù)責(zé)跟展示無關(guān)的其他任務(wù)。這種三層結(jié)構(gòu)每一層之間是相互獨立的，對任何一層的修改都不會影響到其他兩層。三層體系結(jié)構(gòu)如圖所示。B/S結(jié)構(gòu)具有很多優(yōu)點：(1)、有利于業(yè)務(wù)的擴(kuò)展。服務(wù)端只需要添加相對應(yīng)的頁面就能增加服務(wù)器的功能，而瀏覽器無需做任何修改。(2)、維護(hù)簡單方便。服務(wù)器只需要修改相對應(yīng)的頁面即可完成對頁面的更新，所有的用戶在同一時間都可以拿到更新后的結(jié)果。(3)、共享性強(qiáng)。由于客戶端只需要一個瀏覽器即可對服務(wù)器請求服務(wù)，無需下載額外的東西，所以，共享性比C/S結(jié)構(gòu)要更強(qiáng)。(4)、安全性強(qiáng)。C/S結(jié)構(gòu)不僅需要考慮服務(wù)端的安全性，還需要考慮客戶端的安全性。B/S結(jié)構(gòu)只需要注意服務(wù)端的安全性即可，因此安全性更強(qiáng)。Browse瀏覽器Browse瀏覽器Web服務(wù)器數(shù)據(jù)庫圖2.4B/S結(jié)構(gòu)圖2.2.2基于MVC應(yīng)用開發(fā)框架的后臺管理在以往的網(wǎng)頁開發(fā)中，開發(fā)者通常會將對數(shù)據(jù)庫進(jìn)行查詢操作的代碼和與網(wǎng)頁展示相關(guān)的代碼放到同一個頁面上，比如PHP等過程化語言。這種將數(shù)據(jù)邏輯、業(yè)務(wù)邏輯以及展示邏輯放到一起的開發(fā)方式，對頁面要求很高。要求在同一個頁面里，在進(jìn)行頁面的表示的同時還要對數(shù)據(jù)庫進(jìn)行數(shù)據(jù)存取，其中還要有業(yè)務(wù)邏輯。這樣子編寫應(yīng)用程序，既不利于開發(fā)者對業(yè)務(wù)邏輯部分進(jìn)行調(diào)試，也不利于前端開發(fā)者對交互頁面的設(shè)計，加劇了軟件開發(fā)過程中開發(fā)成員分工合作的難度。最后的程序成品也不具備優(yōu)秀的可擴(kuò)展性，當(dāng)開發(fā)者需要在現(xiàn)有業(yè)務(wù)上對業(yè)務(wù)進(jìn)行擴(kuò)展時，應(yīng)用程序很有可能會出現(xiàn)牽一發(fā)而動全身的情況，比如開發(fā)者對業(yè)務(wù)邏輯部分進(jìn)行修改更新時，還需要對數(shù)據(jù)邏輯部分再進(jìn)行響應(yīng)的修改，最后甚至還需要對展示邏輯部分進(jìn)行修改。面對這種情況，以往的解決經(jīng)驗是重新編寫程序，但這會大大增加了成本，也延長了系統(tǒng)上線時間，失去了競爭市場的優(yōu)勢。針對本編程學(xué)習(xí)系統(tǒng)中的后臺管理部分，本人將采用MVC模型來構(gòu)建。MVC(ModalViewControler)，其中的Model指的是數(shù)據(jù)模型，用于處理業(yè)務(wù)的邏輯；View指的是展示部分，用于向用戶展示數(shù)據(jù)；Controler指的是業(yè)務(wù)邏輯控制，作為模型層和視圖層之間的的調(diào)用通道存在。MVC的具體處理流程是，首先控制層負(fù)責(zé)接收用戶的請求，然后根據(jù)不同的請求交由不同的模型來處理，而模型層依賴自身的業(yè)務(wù)邏輯來處理請求并返回最終的數(shù)據(jù)，最后由控制器選擇相應(yīng)的視圖承載實體數(shù)據(jù)，然后服務(wù)器就會將視圖轉(zhuǎn)換成HTML文件返回給客戶端。這三層結(jié)構(gòu)，每一層之間是相互獨立的，對任何一層進(jìn)行修改也不會影響到其他兩層。MVC的層級機(jī)構(gòu)圖如下。應(yīng)用服務(wù)器應(yīng)用服務(wù)器EJB容器業(yè)務(wù)組件數(shù)據(jù)庫Web服務(wù)器瀏覽器JspServerlet控制器圖2.5MVC的層級機(jī)構(gòu)圖通過這種方案，我們可以快速開發(fā)實現(xiàn)整一個程序，MVC框架的特點和優(yōu)勢如下：Model(模型)層：把業(yè)務(wù)邏輯封裝起來，這個負(fù)責(zé)封裝業(yè)務(wù)的組件就是EBJ。EBJ內(nèi)部又具體將業(yè)務(wù)分為Server(業(yè)務(wù))層、DAO(數(shù)據(jù)訪問對象)層和持久層。業(yè)務(wù)層負(fù)責(zé)處理具體的業(yè)務(wù)，DAO層負(fù)責(zé)將訪問數(shù)據(jù)庫的操作封裝起來，也就是提供一個面向?qū)ο蟮臄?shù)據(jù)庫接口，實現(xiàn)無差別連接，而持久層就是要將具體的SQL語句與DAO層連接起來，實現(xiàn)數(shù)據(jù)庫記錄到具體對象的過程。因此，EBJ具有安全、高性能和可重用等優(yōu)點。View(視圖)層：由JSP和HTML組成。主要負(fù)責(zé)向用戶展示經(jīng)由業(yè)務(wù)邏輯處理過的數(shù)據(jù)結(jié)果，具備可描繪的功能。同時還具備動態(tài)插入數(shù)據(jù)，動態(tài)生成頁面的功能。開發(fā)者就不必將頁面寫死，可以根據(jù)不同的頁面需求進(jìn)行個性化定制。Controler(控制)層：作為Model層和View層的中間樞紐而存在。根據(jù)接收到的來自客戶端的不同請求來選擇相應(yīng)的Model處理，然后再根據(jù)Model返回的結(jié)果來選擇相應(yīng)的View，也就是JSP來顯示數(shù)據(jù)結(jié)果。通常Controler層由Servlet來實現(xiàn)的，而Servlet根據(jù)HTTP請求的"GET""POST"方式來選擇不同的邏輯處理方法。也因為Servlet在業(yè)務(wù)的調(diào)用和流程的處理方面具有很大的優(yōu)勢，的所以在現(xiàn)有的MVC框架中，Servlet常被用作控制邏輯上。使用MVC模型來構(gòu)建我們編程學(xué)習(xí)系統(tǒng)的后臺管理部分，那么我們整一個系統(tǒng)就具備了很好的性能和可擴(kuò)展性。通過將業(yè)務(wù)層和視圖層進(jìn)行分離，并利用控制層來描述兩者之間的調(diào)用關(guān)系。不同的層次可以交由不同的人員進(jìn)行同步開發(fā)，開發(fā)人員互不干擾，可以進(jìn)行獨立測試，因此MVC模型可以提高我們的開發(fā)效率。除此之外，MVC模型還可以增強(qiáng)系統(tǒng)的擴(kuò)充能力。因為MVC層級之間分離明顯，所以我們可以針對不同的層次進(jìn)行擴(kuò)展升級，并且保證升級過程中不會對其他層次產(chǎn)生影響或者產(chǎn)生很少的影響，這樣子就可以使我們的系統(tǒng)可以滿足不同用戶、不同階段和各種各樣的業(yè)務(wù)需求。JSF技術(shù)JSF技術(shù)EJB3SessionBeanJPAPO對象業(yè)務(wù)層DAO持久層邏輯接口用戶界面控制器顯示對象客戶端瀏覽器數(shù)據(jù)庫VO對象Web容器EBJ容器事務(wù)事務(wù)圖2.6J2EE組件圖

第3章系統(tǒng)功能和流程分析3.1系統(tǒng)的功能分析經(jīng)過前期的深入調(diào)查和研究，總結(jié)出該平臺需要完成的一些具體功能，分析如下：本人經(jīng)過對現(xiàn)有編程學(xué)習(xí)系統(tǒng)的深入調(diào)查與研究，現(xiàn)總結(jié)出本系統(tǒng)需要完成的一些基本功能，總結(jié)如下：1、后臺管理部分需要完成：(1)、用戶管理功能。能夠?qū)ξ⑿庞脩粜畔⑦M(jìn)行顯示查看，因為微信信息是既有的通過微信授權(quán)的客觀信息，所以不宜對其進(jìn)行修改和刪除操作。(2)、課程管理功能。能夠?qū)φn程信息進(jìn)行添加、刪除、查看和修改功能。(3)、題庫管理功能。能夠?qū)︻}庫里面的試題進(jìn)行添加、刪除、查看、修改功能。(4)、稱號管理功能。能夠?qū)ο到y(tǒng)授予的個人稱號進(jìn)行添加、刪除、查看和修改功能。(5)、系統(tǒng)消息功能。能夠完成對所有用戶發(fā)送系統(tǒng)消息的功能。2、面向用戶部分需要完成:(1)、課程列表查看功能。用戶能夠查看推薦的課程和所有課程。(2)、課程視頻觀看功能。用戶能夠觀看所選的課程的教學(xué)視頻。(3)、課程文檔查看功能。用戶能夠查看所選課程的學(xué)習(xí)文檔。(4)、完成課程試題功能。用戶能夠在觀看完視頻和文檔也就是學(xué)習(xí)完課程之后能夠做一套試題去鞏固知識。(5)、代碼調(diào)試功能。用戶在輸入框內(nèi)輸入代碼后，系統(tǒng)能夠編譯執(zhí)行這些代碼并將最終結(jié)果返回。

3.2平臺功能模塊的設(shè)計分析通過對系統(tǒng)功能的分析，得到本編程學(xué)習(xí)系統(tǒng)的功能模塊圖如下： 圖3.1功能模塊圖3.3系統(tǒng)流程分析3.3.1用戶登錄流程因為本編程學(xué)習(xí)系統(tǒng)的客戶端是微信小程序，所以用戶無需自行進(jìn)行注冊登錄操作，只需要授權(quán)個人的微信信息給服務(wù)端即可完成注冊登錄操作。用戶授權(quán)個人信息后客戶端得到有關(guān)用戶信息的userInfo對象，該對象擁有用戶的個人信息。然后客戶端再通過調(diào)用wx.login接口來獲取用戶唯一標(biāo)識(openid)和本次登錄的會話密鑰（session_key）等信息。獲取到用戶的openid后，將openid和用戶選擇的課程id作為請求數(shù)據(jù)通過http的方式向服務(wù)器請求登錄服務(wù)。服務(wù)器根據(jù)客戶端提交的登錄表單來判斷本次登錄的用戶是否已經(jīng)存在用戶表中，如果已經(jīng)存在，則計算該用戶目前的稱號并將其返回。如果不存在，則需要為該用戶在用戶表中創(chuàng)建一條記錄并且返回計算所得的稱號。圖3.2用戶登錄流程圖3.3.2用戶課程學(xué)習(xí)流程用戶點擊課程后，客戶端就會跳轉(zhuǎn)到相應(yīng)課程的詳情頁面，用戶再點擊進(jìn)入課程按鈕即可進(jìn)入學(xué)習(xí)頁面，里面提供有視頻觀看、文檔查看和課程試題訓(xùn)練三種學(xué)習(xí)方式。用戶觀看完視頻后，客戶端就會觸發(fā)完成觀看該視頻的事件，然后調(diào)用wx.request接口向服務(wù)器發(fā)出完成視頻請求。服務(wù)器則觸發(fā)相應(yīng)的servlet來處理該請求。如果數(shù)據(jù)庫中課程完成記錄表中不存在存在該用戶完成視頻觀看的的記錄，則服務(wù)器就會往完成記錄表中插入一條該用戶完成視頻觀看的記錄。文檔學(xué)習(xí)和試題訓(xùn)練的完成邏輯跟視頻觀看的邏輯是一樣的。完成記錄表中以字段type不同的值來區(qū)分視頻、文檔和試題訓(xùn)練，一旦服務(wù)器檢測到用戶在完成記錄表擁有一個課程的三種type記錄，就會向完成記錄表中插入一條關(guān)于該用戶已完成此課程的記錄，用不同與其他三種的type來表示圖3.3用戶課程學(xué)習(xí)流程圖3.3.3課程試題訓(xùn)練流程用戶進(jìn)入課程試題訓(xùn)練后，小程序就會將用戶的openid和課程id封裝進(jìn)請求體中然后向服務(wù)器發(fā)出獲取課程試題的請求。服務(wù)器首先會根據(jù)用戶的openid和課程id來查詢答題記錄表中有無相關(guān)記錄，如果查詢到用戶已經(jīng)完成了該考試，服務(wù)器將該信息返回給客戶端，而客戶端負(fù)責(zé)將頁面跳轉(zhuǎn)回課程詳情頁面。如果尚未完成考試，則服務(wù)器會返回尚未完成的試題給客戶端。課程試題訓(xùn)練流程圖如圖3.4。圖3.4課程試題訓(xùn)練流程

第4章系統(tǒng)的具體設(shè)計與實現(xiàn)4.1數(shù)據(jù)庫設(shè)計要嚴(yán)格按照標(biāo)準(zhǔn)流程去開發(fā)一個項目，否則會對后續(xù)的代碼調(diào)試和維護(hù)部分帶來困難，從而降低了開發(fā)的速度，增加了上線難度。在需求分析環(huán)節(jié)結(jié)束之后，要進(jìn)入對系統(tǒng)進(jìn)行表結(jié)構(gòu)設(shè)計環(huán)節(jié)。對數(shù)據(jù)庫進(jìn)行表結(jié)構(gòu)設(shè)計的時候需要遵從數(shù)據(jù)庫設(shè)計的三大范式。第一范式要求數(shù)據(jù)表的每一個字段都是原子的，不可分的；第二范式要求數(shù)據(jù)表在第一范式的前提下做到非主字段依賴于主字段；第三范式要求數(shù)據(jù)表在第二范式的前提下做到非主字段之間對主字段的的依賴關(guān)系不能是傳遞的。遵從數(shù)據(jù)設(shè)計三大范式的目的就是要建立一個低冗余、高質(zhì)量的數(shù)據(jù)庫。設(shè)計數(shù)據(jù)表的時候要盡量降低表之間的耦合，每一張表含有盡量少的其他表的信息，要做到一個實體對應(yīng)一張表。經(jīng)過深入研究后，要確定表的屬性也就是表字段具體有哪些，這些表字段的定值要求等等。最后也是最重要的是要確定表與表之間的聯(lián)系關(guān)系，也就是我們常說的一對一、一對多或者多對多關(guān)系。實體、屬性與實體之間的聯(lián)系關(guān)系是進(jìn)行表結(jié)構(gòu)設(shè)計時要著重考慮的三個要素，只有理清了它們之間的關(guān)系，才有可能設(shè)計出一個好的數(shù)據(jù)庫。通過對編程學(xué)習(xí)小程序的需求分析，本文將按照數(shù)據(jù)庫的規(guī)范設(shè)計法對本編程學(xué)習(xí)系統(tǒng)的數(shù)據(jù)庫進(jìn)行概念設(shè)計、邏輯設(shè)計等步驟4.1.1數(shù)據(jù)庫概念設(shè)計。數(shù)據(jù)庫的概念結(jié)構(gòu)設(shè)計就是在需求分析的基礎(chǔ)上，將系統(tǒng)的實體數(shù)據(jù)幻化為一個信息數(shù)據(jù)結(jié)構(gòu)的過程。以本編程學(xué)習(xí)系統(tǒng)中的管理員信息為例，它具有很多用于描述管理員的屬性，聯(lián)系的意思就是實體之間的聯(lián)系關(guān)系，這個聯(lián)系分為三種，一對一，一對多，多對多。1、管理員實體圖中的屬性有管理員id、用戶名、密碼、昵稱、添加時間，如圖所示圖4.1管理員實體圖2、答題狀態(tài)實體圖中的屬性有id、課程id、題目id、用戶id、提交的答案、正確答案、是否正確、添加時間。如圖所示圖4.2答題狀態(tài)實體圖3、完成記錄實體圖中的屬性有id、課程id、提交人id、完成類型、完成狀態(tài)、添加時間。如圖所示圖4.3完成記錄實體圖4、稱號實體圖中有屬性id、完成程度、稱號、添加時間。如圖所示圖4.4稱號實體圖5、課程實體圖中包含有屬性id、課程名、圖片、簡介、視頻、文檔、推薦、添加時間。如圖所示圖4.5課程實體圖6、題目實體圖中的屬性有id、課程id、問題id、標(biāo)題、選項、答案、添加時間、解析，如圖所示圖4.6題目實體圖系統(tǒng)消息實體圖中的屬性有id、消息、添加時間，如圖所示圖4.7系統(tǒng)消息實體圖8、用戶實體圖中的屬性有id、用戶id、微信名、頭像、性別、國家、省份、城市、添加時間，如圖所示圖4.8用戶實體圖由本系統(tǒng)的實體與實體之間的關(guān)系可得到表關(guān)系圖如圖4.9.圖4.9表關(guān)系圖4.1.2數(shù)據(jù)庫邏輯設(shè)計。由上述表關(guān)系圖得出最后的數(shù)據(jù)模型，本文的數(shù)據(jù)模型以數(shù)據(jù)表的形式展示1、管理員表lb_admin基本數(shù)據(jù)表，如下表所示。字段名類型大小是否為空字段描述idint11否序號usernamechar50否用戶名passwordchar50否密碼nicknamevarchar255否姓名add_timechar13否添加時間is_deletetinyint1否是否刪除表4.1lb_admin基本數(shù)據(jù)表2、答題狀態(tài)表lb_answer_statistics基本數(shù)據(jù)表，如下表所示字段名類型大小是否為空字段描述idint11否序號cidint11否課程idqidint11否題目idopenidvarchar250否提交人Submit_answervarchar255否提交答案Exam_answervarchar255否正確答案statustinyint1否是否正確Add_timechar13否添加時間Is_deletetinyint1否是否刪除表4.2lb_answer_statistics基本數(shù)據(jù)表3、完成記錄表lb_complete_statistics基本數(shù)據(jù)表，如下表所示。字段名類型大小是否為空字段描述idint11否序號cidint11否課程idipenidvarchar250否提交人typetinyint1否完成類型statustinyit1否是否完成Add_timechar13否添加時間Is_deletetinyint1否是否刪除表4.3lb_complete_statistics基本數(shù)據(jù)表4、稱號表lb_complete_title基本數(shù)據(jù)表，如下表所示。字段名類型大小是否為空字段描述idint11否序號completion_degreeint11否完成度titlechar50否稱號Add_timechar13否添加時間Is_deletetinyint1否是否刪除表4.4lb_complete_title基本數(shù)據(jù)表5、課程表lb_course基本數(shù)據(jù)表，下表所示。字段名類型大小是否為空字段描述idint11否序號course_titlevarchar50否課程標(biāo)題course_describevcarcha100否課程描述courde_imgvarchar255否課程圖片course_hourchar50否課時安排course_contenttexttext否課程內(nèi)容course_videovarchar255否視頻鏈接course_documentvarchar255否文檔鏈接course_lablechar100否標(biāo)簽recommendtinyint1否是否推薦add_timechar13否添加時間is_deletetinyint1否是否刪除表4.5lb_course基本數(shù)據(jù)表6、試題表lb_questions基本數(shù)據(jù)表，如下表所示。字段名類型大小是否為空字段描述idint11否序號cidint11否課程idqidvarchar11否題目idexam_titlevarchar100否題目標(biāo)題exam_optionvarchar255否題目選項exam_answerchar255否題目答案add_timevarchar13否添加時間answer_analysisvarchar255否答案解析is_deletetinyint1否是否刪除表4.6lb_questions基本數(shù)據(jù)表7、系統(tǒng)消息表lb_system_message基本數(shù)據(jù)表，如下表所示。字段名類型大小是否為空字段描述idint11否序號messagevarchar250否消息add_timechar13否添加時間is_deletetinyint1否是否刪除表4.7lb_system_message基本數(shù)據(jù)表8、用戶表lb_user基本數(shù)據(jù)表，下表所示。字段名類型大小是否為空字段描述idint11否序號openidvarchar255否用戶唯一標(biāo)識user_namechar50否微信名head_imgvarchar255否頭像sextinyint1否性別statustinyint1否狀態(tài)countryvarchar50否國家provincevarchar50否省份cityvarchar50否城市add_timechar13否添加時間is_deletetinyint1否是否刪除表4.8lb_user基本數(shù)據(jù)表4.2后臺原型設(shè)計4.2.1菜單欄管理員進(jìn)入后臺管理后，首頁左側(cè)是菜單導(dǎo)航欄。管理員可以對不同實體數(shù)據(jù)進(jìn)行管理，包括微信用戶數(shù)據(jù)、課程管理、題庫管理、完成度稱號管理以及系統(tǒng)消息管理。里面的各種管理按鈕是收納在一個下拉框里的，用戶可以選擇隱藏這些管理按鈕。圖4.10菜單欄圖4.2.3管理部分課程管理界面的主體部分的上方是一個用于添加課程的按鈕，管理員可以通過點擊該按鈕來添加課程數(shù)據(jù)。主體部分的中間是課程列表展示，這些課程是以表格的形式展示給管理員，，每一行記錄代表一門課程，記錄中顯示課程的各個字段值，而在每一行記錄的后面還有修改課程、刪除課程按鈕，管理員可以通過點擊這些按鈕來對課程進(jìn)行相應(yīng)的更改操作。圖4.11課程管理界面圖圖4.12題庫管理界面圖圖4.13稱號管理界面圖圖4.14系統(tǒng)消息管理界面圖4.3服務(wù)器功能開發(fā)4.3.1項目目錄結(jié)構(gòu)項目的目錄結(jié)構(gòu)如下：extends文件夾存放第三方庫，lib存放項目依賴，src存放自定義類包，web目錄存放后臺管理web頁面相關(guān)文件。圖4.15項目目錄結(jié)構(gòu)圖Web下的目錄結(jié)構(gòu)：public存放頁面的頁眉頁腳部分的內(nèi)容；response存放后臺登錄以及成功后中間跳轉(zhuǎn)等待的頁面；static存放頁面相關(guān)樣式css以及js文件，用于美化網(wǎng)頁；ueditor存放有關(guān)輸入編輯框的工具類包；upload存放后臺上傳的一些文件；然后就是jsp格式的視圖文件。圖4.16Web下目錄結(jié)構(gòu)圖Src下的目錄結(jié)構(gòu)：api目錄存放面向微信小程序的servlet類；dao存放數(shù)據(jù)訪問對象；domain存放pojo類，也就是實體類，與數(shù)據(jù)庫表的記錄切合；response存放與后臺登錄相關(guān)的servlet；service存放service層類；util存放工具類，如httpclient、jdbcutil和cookies等相關(guān)工具類；web目錄存放面向web后臺管理網(wǎng)頁的servlet。圖4.17Src下的目錄結(jié)構(gòu)圖4.3.2主要功能的實現(xiàn)1、課程列表的展示。課程列表的展示分為面向網(wǎng)頁和面向小程序兩種。(1)、面向網(wǎng)頁。針對網(wǎng)頁部分，后臺采用mvc模式進(jìn)行開發(fā)。這里將servlet與url之間的映射關(guān)系放到web.xml文件里，這里的web.xml就相當(dāng)于controler，可以根據(jù)不同的url來選擇與之對應(yīng)的servlet處理。瀏覽器向服務(wù)器發(fā)出http請求，請求方式是GET，請求的url是/admin/course，根據(jù)web.xml里面的映射關(guān)系，服務(wù)器選擇名稱為CourseselectServlet的servlet來處理該請求。CourseselectServlet里的doGet方法用于處理GET請求，里面的具體邏輯是調(diào)用了courseService接口中的allcourse方法來獲取課程列表。根據(jù)面向接口編程的相關(guān)概念，實際上服務(wù)器在這里調(diào)用的是courseService的實現(xiàn)類courseDaoImpl中的allCourse方法。Allcourse方法中首先創(chuàng)建了sql語句select*fromlb_coursewhereis_delete=0，然后再建立與數(shù)據(jù)庫的連接，最后執(zhí)行sql語句獲得結(jié)果集并將其返回。CourseselectServlet將結(jié)果集以集合的形式返回給瀏覽器，同時也將視圖course.jsp返回。(2)、面向小程序。針對面向小程序部分?？蛻舳讼蚍?wù)器發(fā)出http請求，請求方式是GET，請求的url是/api/course，根據(jù)web.xml里面的映射關(guān)系，服務(wù)器選擇名稱為CourseServlet的servlet來處理該請求。CourServlet里的doGet方法用于處理GET請求，里面的具體邏輯是調(diào)用了courseService接口中的allcourse方法來獲取課程列表。根據(jù)面向接口編程的相關(guān)概念，實際上服務(wù)器在這里調(diào)用的是courseService的實現(xiàn)類courseDaoImpl中的allCourse方法。Allcourse方法中首先創(chuàng)建了sql語句select*fromlb_coursewhereis_delete=0，然后再建立與數(shù)據(jù)庫的連接，最后執(zhí)行sql語句獲得結(jié)果集并將其返回。CourseServlet將結(jié)果集加入到j(luò)son里面，然后服務(wù)器將json返回給小程序端。小程序再根據(jù)自身的顯示邏輯將數(shù)據(jù)展示給用戶。圖4.18課程列表展示功能類關(guān)系圖2、下一題試題。小程序端點擊下一題將觸發(fā)http請求，即小程序會向服務(wù)器發(fā)出POST請求，請求的url是/api/questionsnext，服務(wù)器根據(jù)配置文件選擇名稱為questionnextservlet的servlet來處理該請求。Servlet首先會從request里獲取到用戶的openid、課程id、問題id以及用戶提交的答案submit_answer，然后逐個檢查這些變量是否為空。接著通過調(diào)用answerService的insertAnswer方法向表lb_answer_statistics插入一條完成記錄。最后判斷插入的記錄的qid是否為本課程的最后一題，是則向表lb_complete_statistics插入一條完成試題的記錄。如果不是最后一題，則向客戶端返回下一道題。圖4.19下一題試題功能類關(guān)系圖4.4微信小程序的設(shè)計與實現(xiàn)4.4.1客戶端目錄結(jié)構(gòu)微信小程序的目錄結(jié)構(gòu)說明：Pages目錄存放頁面；style存放全局的一些wxss格式的樣式文件；wxParse目錄用于解析富文本內(nèi)容。由于微信小程序不支持html格式，所以需要將后臺用文本編輯器編輯的內(nèi)容轉(zhuǎn)換成微信小程序自己能夠理解的格式。Pages下的頁面說明：每個目錄都存放了與該頁面的相關(guān)的js、json、wxml和wxss格式的文件。Js里面編寫有頁面的請求邏輯和顯示邏輯，json存放數(shù)據(jù)，wxss存放樣式，wxml存放與頁面相關(guān)的標(biāo)簽語言。小程序目錄結(jié)構(gòu)圖(b)Pages下的目錄圖圖4.20客戶端目錄結(jié)構(gòu)圖4.4.2基于MVC模式設(shè)計的客戶端微信小程序的每一個頁面都需要四個類型格式的文件，分別是wxml模板文件、wxss樣式文件、js邏輯文件以及json配置文件。本編程學(xué)習(xí)系統(tǒng)采用wxml作為視圖層，js作為控制層和模型層的方案。其中js作為MVC模式結(jié)構(gòu)中的控制層和邏輯層，主要作用是對用戶的操作行為進(jìn)行邏輯判斷和返回模型數(shù)據(jù)給視圖層，而wxml作為MVC模式架構(gòu)中的視圖層，主要負(fù)責(zé)像向用戶展示頁面和來自模型層的數(shù)據(jù)，wxss美化wxml頁面。圖4.21小程序的MVC模式設(shè)計原理圖通過圖4.23，我們可以知道本編程學(xué)習(xí)小程序的基本處理邏輯。當(dāng)用戶點擊頁面的相關(guān)鏈接或按鈕時，頁面會觸發(fā)一個事件請求，而這個請求會轉(zhuǎn)給控制層js文件里的對應(yīng)的方法來處理。該方法會進(jìn)行相應(yīng)的業(yè)務(wù)邏輯處理，然后將處理的結(jié)果傳遞給視圖層，即wxml文件頁面。當(dāng)頁面需要跟服務(wù)器交互，想要獲取到數(shù)據(jù)庫里的數(shù)據(jù)時，控制層會調(diào)用模型層的網(wǎng)絡(luò)請求方法與服務(wù)器進(jìn)行網(wǎng)絡(luò)通信。模型層獲取到數(shù)據(jù)庫數(shù)據(jù)后會將其返回給控制層，而控制層會將數(shù)據(jù)傳遞給視圖層，要求視圖進(jìn)行頁面更新。這樣將界面展示、業(yè)務(wù)邏輯處理和數(shù)據(jù)處理分離的設(shè)計方法，降低了客戶端系統(tǒng)各個功能模塊的耦合，結(jié)構(gòu)清晰，，使得客戶端系統(tǒng)的設(shè)計與實現(xiàn)變得更加靈活可控。4.4.3小程序各頁面的設(shè)計與實現(xiàn)1、基本頁面。本編程學(xué)習(xí)小程序首頁的上方部分以”輪播圖”的形式向用戶展示熱門課程，用戶點擊輪播圖即可進(jìn)入熱門課程的課程詳情頁面。首頁的主體部分以圖文列表的形式向用戶展示推薦課程列表，圖是課程圖片縮略圖，文是課程簡介，用戶通過點擊課程的圖片即可進(jìn)入推薦課程的課程詳情頁面。首頁的頁腳設(shè)置了三個快捷切換界面導(dǎo)航按鈕，包括”發(fā)現(xiàn)”，”課程列表”，”個人中心”。點擊相應(yīng)的按鈕即可實現(xiàn)三個界面的來回切換。用戶瀏覽微信小程序首頁輪播圖的時序圖，如圖4.22。圖4.22用戶瀏覽微信小程序輪播圖的時序圖2、個人中心。用戶點擊頁腳的個人中心按鈕即可進(jìn)入個人中心頁面，界面的上方顯示了當(dāng)前用戶的個人信息，如頭像，微信昵稱以及個人稱號。界面的主體部分是一些周邊功能的列表，列表以文字的形式展示，包括”幫助中心”，”系統(tǒng)消息”，”代碼調(diào)試運(yùn)行”，”授權(quán)用戶信息”。用戶點擊幫助中心，小程序會自動彈出客服的微信二維碼，用戶可以通過添加客服的微信號來詢問具體問題。用戶點擊系統(tǒng)消息，小程序會跳轉(zhuǎn)到系統(tǒng)消息頁面，系統(tǒng)消息用于向用戶展示收到的來自系統(tǒng)的一些通知，這些通知以文字列表的形式展示。點擊代碼調(diào)試運(yùn)行，微信小程序就會跳轉(zhuǎn)到代碼調(diào)試運(yùn)行頁面，用戶可以在此頁面編寫代碼，然后點擊運(yùn)行按鈕對代碼進(jìn)行編譯執(zhí)行。通常情況下用戶點擊個人中心就會授權(quán)個人信息給服務(wù)器了，但有時候可能會授權(quán)不了信息，所以就需要用戶自行點擊授權(quán)用戶信息按鈕進(jìn)行授權(quán)。用戶點擊個人中心的時序圖，如圖4.23。圖4.23用戶點擊個人中心的時序圖3、課程列表課程列表界面，界面上面部分會顯示當(dāng)前日期、時間以及每日輪換的激勵語。界面主體部分就是以圖文列表的形式向用戶展示當(dāng)前的全部課程，每個課程用課程圖片縮略圖、課程名稱和課程簡介表示，用戶點擊課程縮略圖即可進(jìn)入對應(yīng)課程的課程詳情頁面。主體部分頁面的運(yùn)行效果圖，如圖4.24。(a)首頁圖(b)個人中心圖(c)課程列表圖圖4.24基本頁面運(yùn)行效果圖4、課程詳情。課程詳情界面的上方部分用于展示課程的封面和課程名稱。界面主體部分則是課程介紹，課程介紹部分是以圖文的形式展示給用戶，展示的具體格式跟微信公眾號的推文一樣。管理員在后臺對課程介紹部分進(jìn)行排版美化，微信小程序就可以對排版的內(nèi)容進(jìn)行格式轉(zhuǎn)換，轉(zhuǎn)換成小程序可以識別的wxml代碼。課程詳情頁面運(yùn)行效果圖如圖4.25，用戶進(jìn)入課程詳情的時序圖如圖4.26。頁面結(jié)構(gòu)圖(b)課程介紹詳情圖圖4.25課程詳情圖圖4.26用戶進(jìn)入課程詳情的時序圖5、課程學(xué)習(xí)。課程學(xué)習(xí)頁面的主體部分是視頻學(xué)習(xí)、文檔學(xué)習(xí)兩個按鈕，用戶可以根據(jù)自己的需要選擇不同的學(xué)習(xí)方式，用戶點擊相應(yīng)的按鈕后小程序就會跳轉(zhuǎn)的相應(yīng)的學(xué)習(xí)頁面，視頻學(xué)習(xí)界面顯示如圖4.27(b)，文檔學(xué)習(xí)界面顯示如圖4.27(c)。界面頁腳部分是進(jìn)入試題訓(xùn)練的按鈕，用戶點擊該按鈕，小程序就會跳轉(zhuǎn)到試題展示頁面。試題訓(xùn)練界面顯示如圖4.27(d)，課程學(xué)習(xí)頁面結(jié)構(gòu)圖如圖4.27(a)。用戶點擊開始做題的時序圖，如圖4.27。圖4.27用戶開始做題時序圖課程學(xué)習(xí)頁面結(jié)構(gòu)圖(b)視頻觀看圖文檔查看圖(d)課程測試圖圖4.27課程學(xué)習(xí)圖6、代碼調(diào)試運(yùn)行用戶可以在代碼調(diào)試運(yùn)行界面中的源代碼文本框里輸出想要執(zhí)行的代碼，點擊運(yùn)行按鈕，客戶端會將這些代碼進(jìn)行封裝成一個Pythonl腳本文件并將其提交給服務(wù)器，服務(wù)器編譯執(zhí)行Python腳本后將執(zhí)行結(jié)果返回給客戶端，客戶端的調(diào)試結(jié)果文本框里就會顯示其執(zhí)行結(jié)果。代碼調(diào)試運(yùn)行的運(yùn)行效果圖，如圖4.28。圖4.28代碼調(diào)試運(yùn)行圖4.5項目測試4.5.1運(yùn)行環(huán)境搭建本編程學(xué)習(xí)系統(tǒng)后臺管理部分采用的技術(shù)方案是基于java的servlet+jsp技術(shù)。因此，系統(tǒng)需要運(yùn)行在java的虛擬環(huán)境下，也就是要求電腦安裝有java運(yùn)行時環(huán)境jre。從java官方網(wǎng)站上下載1.8.0_101版本的java開發(fā)工具包jdk，jdk中包含有jre及與開發(fā)相關(guān)的工具。下載完jdk后，然后點擊window的高級系統(tǒng)設(shè)置中環(huán)境變量，在環(huán)境變量中新建一個變量名為JAVA_HOME變量值為jdk安裝路徑的系統(tǒng)變量。最后在cmd命令提示符中輸入java-version，檢查是否安裝成功。本系統(tǒng)的jdk安裝路徑是F:/JAVA/JAVA_JDK。Java環(huán)境搭建好之后還需要安裝一個server服務(wù)器，這里選擇tomcat。到官網(wǎng)下載tomcat的安裝包，本系統(tǒng)選擇tomcat7，版本是0.64。將下載到的壓縮包解壓到D:\tmall_tools目錄下即完成tomcat的安裝。打開tomcat安裝目錄bin文件夾下的startup.bat即可啟動tomcat，在瀏覽器上輸入http://localhost:8080/能進(jìn)入tomcat頁面即表示安裝成功。本系統(tǒng)采用的數(shù)據(jù)庫是mysql數(shù)據(jù)庫。首先要到/下載mysql安裝包，本系統(tǒng)選擇5.5.47版本。將mysql安裝到D:\Java\jspstudy\MySQL。然后配置系統(tǒng)環(huán)境變量，新建一個系統(tǒng)變量，變量名：MYSQL_HOME變量值：D:\Java\jspstudy\MySQL，同時往path里添加：%MYSQL_HOME%\bin；本系統(tǒng)采用的后臺開發(fā)集成環(huán)境是idea，所以還需要到idea官網(wǎng)中下載idea。本人最終選擇的是IntelliJIDEA2017.2x64版本。最后就要安裝微信web開發(fā)者工具以便調(diào)試微信小程序。首先需要到官網(wǎng)申請一個小程序帳號，獲取appid，然后到/miniprogram下載開發(fā)者工具。至此，系統(tǒng)正常運(yùn)行所需的環(huán)境已經(jīng)部署完成。4.5.2軟件測試軟件測試就是在特定的環(huán)境、特定的條件下運(yùn)行軟件，驗證其能正常運(yùn)行，并發(fā)現(xiàn)其缺陷，對軟件的質(zhì)量進(jìn)行評估的過程。系統(tǒng)開發(fā)出來后，本人對服務(wù)器的各個模塊功能進(jìn)行了比較詳細(xì)的測試。首先對每一個servlet都進(jìn)行了模擬輸入測試，通過大量的實例測試，得出的結(jié)果如下：(1)、獲取用戶稱號的GettitleServlet輸出了與期望不同的值。(2)、添加課程的CourseaddServlet并未將新增的課程視頻下載到upload目錄下。(3)、其他sevlet暫時沒發(fā)現(xiàn)問題。針對上述(1)的問題，本人對其進(jìn)行了單獨測試實驗，跟蹤GettitleServlet中的輸入數(shù)據(jù)走向和代碼運(yùn)行過程中的各種數(shù)據(jù)變化。最終，在跟蹤代碼到CompletestatisticDaoImpl實現(xiàn)類下的findOpenidCompleteNum方法時發(fā)現(xiàn)，在執(zhí)行完相關(guān)sql語句后，所得到的數(shù)據(jù)與預(yù)期值不同。經(jīng)過代碼排查，最終將問題鎖定在sql語句上。sql語句在執(zhí)行的時候加多了一個分組條件，所以導(dǎo)致所得結(jié)果與預(yù)期值不同。針對(2)的問題，本人也使用了與(1)相同的方法進(jìn)行測試，最終將問題鎖定在io流上，由于沒有使用FileOutputStream將文件輸出到指定目錄，所以就出現(xiàn)了后臺管理頁面在上傳課程視頻時，實際上數(shù)據(jù)庫并沒有得到相關(guān)的視頻路徑的情況。4.5.3測試總結(jié)軟件測試是軟件開發(fā)過程中必不可少的部分，目的就是盡可能地發(fā)現(xiàn)并改正被測試軟件中的錯誤，提高軟件可靠性。本人通過對系統(tǒng)進(jìn)行模塊測試和組裝測試等手段，基本上解決了本編程學(xué)習(xí)系統(tǒng)中的大部分錯誤。有一句名言說的好，任何軟件系統(tǒng)均有bug，只不過利用現(xiàn)有手段無法檢測到這些bug而已。同時E.W.Dijkstra有一句名言：“程序測試只能表明錯誤的存在，而不能表明錯誤不存在。”所以本編程學(xué)習(xí)系統(tǒng)不能說已經(jīng)排除掉了所有的錯誤，但至少在目前可視可測的范圍內(nèi)已經(jīng)檢查不到bug了，其他的不容易被發(fā)現(xiàn)的bug只能通過在后續(xù)的使用過程發(fā)現(xiàn)了。

第5章總結(jié)與改進(jìn)通過本次畢業(yè)設(shè)計，我學(xué)習(xí)到了實際開發(fā)應(yīng)用中的一些具體實施方法。以前自己單獨去開發(fā)一個程序的時候，都是在未經(jīng)過需求分析等前期準(zhǔn)備過程的情況下就直接上手編碼了，想到哪就編寫到哪。這樣不規(guī)范地去設(shè)計程序的后果是，程序常常會出現(xiàn)大量bug甚至崩潰的情況，給后期的代碼測試和維護(hù)工作增加了難度，延長了程序上線的時間。通過進(jìn)行需求分析、表結(jié)構(gòu)設(shè)計、后臺原型設(shè)計、后臺開發(fā)、微信小程序原型設(shè)計、前臺開發(fā)以及軟件測試等步驟，本編程學(xué)習(xí)系統(tǒng)才能夠做到少bug少修改。以往在編寫代碼的時候我很少會注意一些微不足道的細(xì)節(jié)，通過完成本次設(shè)計，我才懂得一些微不足道的細(xì)節(jié)有可能會為未來系統(tǒng)的崩潰埋下伏筆，細(xì)節(jié)決定成敗。雖然本次畢業(yè)設(shè)計的最終成品能達(dá)到畢業(yè)設(shè)計的基本要求，但我覺得這個系統(tǒng)還有很多需要改進(jìn)的地方。后臺管理部分是非常重要的地方，稍有差錯都有可能會對數(shù)據(jù)庫造成不可挽回的損失。所以我覺得要對管理員的登錄密碼進(jìn)行md5加密，數(shù)據(jù)庫不應(yīng)存放密碼明文，而應(yīng)存放經(jīng)過md5加密過的密文。同時還需要防止sql注入，所以后臺的sql語句理應(yīng)是經(jīng)過預(yù)編譯的，可以通過preparestatment來解決。還有就是要對課程列表顯示和試題顯示進(jìn)行分頁，避免一個頁面顯示過長，影響用戶體驗。同時還應(yīng)將課程細(xì)分化，一個課程下應(yīng)有很多小知識點，每個知識點都有相對應(yīng)的文檔、視頻以及試題，完成所有的知識點才算是完成一個課程，然后再提供一個查看我的課程功能，用戶就能實時地查看自己加入課程列表中的課程。

參考文獻(xiàn)[1]李玉閣,劉軍.國內(nèi)中小學(xué)編程教育研究現(xiàn)狀分析[J].中國現(xiàn)代教育裝備,2018(08):26-29.[2]戚偉慧.少兒編程的可行性研究與分析[J].電子技術(shù)與軟件工程,2016(24):253-254.[3]陳勇,胡垂立.高校校園環(huán)境中基于微信的在線學(xué)習(xí)平臺設(shè)計與實現(xiàn)[J].無線互聯(lián)科技,2019(02):1-2.[4]張曉琳.基于J2EE的在線學(xué)習(xí)中心設(shè)計與實現(xiàn)[D].成都:電子科技大學(xué),2012.[5]張麗瑩.《教育技術(shù)理論與創(chuàng)新》課程的微信小程序的設(shè)計研究[D].內(nèi)蒙古師范大學(xué),2018.[6]劉琦,丁萍莉基于微信小程序的互聯(lián)網(wǎng)+教育學(xué)習(xí)平臺的研究與設(shè)計[J].內(nèi)江科技,2016(12):45-46.[7]牛琳,吳琳.基于微信小程序的移動學(xué)習(xí)平臺的設(shè)計與實現(xiàn)[J].軟件工程,2018(09):15-17+7.[8]中國互聯(lián)網(wǎng)絡(luò)信息中心.中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計報告(2019年2月)[R/OL]./gywm/xwzx/rdxw/20172017_7056/201902/W020190228474508417254.pdf,2019-02-28.[9]騰訊公司.2018微信年度數(shù)據(jù)報告[R/OL]./cgi-bin/mmsupport-bin/getopendays,2019-01-09[10]阿拉丁.2018年上半年全網(wǎng)小程序生態(tài)白皮書[R/OL]./assets/20180629_presentation/white_paper.pdf,2018-06-29.[11]中華人民共和國中央人民政府.國務(wù)院關(guān)于印發(fā)新一代人工智能發(fā)展規(guī)劃的通知[Z],2017-07-20.[12]陳世宇,鄧秋雪,陳正銘,etal.試析微信小程序前端界面與網(wǎng)站前端界面實現(xiàn)技術(shù)的異同[J].電腦編程技巧與維護(hù),2017(20).[13]田甜."互聯(lián)網(wǎng)+教育"的變革路徑[J].雙語學(xué)習(xí)（烏魯木齊）,2018(10).[14]鄶媛媛.移動互聯(lián)網(wǎng)下在線教育發(fā)展現(xiàn)狀探索[J].電腦迷,2018,No.97(06):184.[15]張蕓.文化傳播模式在“互聯(lián)網(wǎng)+”背景下的分析[D].山西省文化廳文化政策研究中心,2018.[16]程子珍.基于微信小程序的網(wǎng)上購物系統(tǒng)的設(shè)計與實現(xiàn)[D].[17]潘雪峰,張宇晴,毛敏,etal.在線教育產(chǎn)業(yè)發(fā)展現(xiàn)狀及產(chǎn)品設(shè)計研究[J].科技和產(chǎn)業(yè),2013,13(8):13-16.[18]贠天.在線教育不賺錢虧本只是暫時的[D].中國戰(zhàn)略新興產(chǎn)業(yè),2017.[19]陳柳紅.利用微信小程序?qū)崿F(xiàn)在線考試的設(shè)想[J].