基于SSM的概念可视化程序设计学习系统 毕业设计-附源码021009
SSM概念可視化程序設計學習系統
摘 要
隨著計算機技術的發展，特別是計算機網絡技術與數據庫技術的發展，使用人們的生活與工作方式發生了很大的改觀。網絡技術的應用使得計算機之間通信、在線學習成為可能，而數據庫技術的應用則為人們提供了數據存儲、課程檢索等功能，從而使得工作更高效地進行。
本課題研究的概念可視化程序設計學習系統，主要功能模塊包括學生管理、課程查詢、課程類別、已選課程、在線學習以及概念圖知識店管理等，采取面對對象的開發模式進行軟件的開發和硬體的架設，能很好的滿足實際使用的需求，完善了對應的軟體架設以及程序編碼的工作，采取MySQL作為后臺數據的主要存儲單元，采用SSM框架進行系統的開發，實現了本系統的全部功能。本次報告，首先分析了研究的背景、意義，為研究工作的合理性打下了基礎。針對概念可視化程序設計學習系統的各項需求以及技術問題進行分析，證明了系統的必要性和技術可行性，然后對設計系統需要使用的技術軟件以及設計思想做了基本的介紹，最后來實現系統各大模塊。
關鍵詞：概念可視化程序設計學習系統；SSM框架；MySQL數據庫
SSM concept visual programming learning system
Abstract
With the development of computer technology, especially the development of computer network technology and database technology, great changes have taken place in people's way of life and work. The application of network technology makes communication between computers and online learning possible, while the application of database technology provides people with functions such as data storage and course retrieval, so as to make the work more efficient.
The main functional modules of the concept visualization program learning system studied in this subject include student management, course query, course category, selected courses, online learning and concept map knowledge store management. The object-oriented development mode is adopted for software development and hardware architecture, which can well meet the needs of practical use, The corresponding software erection and program coding are improved. MySQL is used as the main storage unit of background data, and the SSM framework is used for system development to realize all the functions of the system. This report first analyzes the background and significance of the research, which lays a foundation for the rationality of the research work. This paper analyzes the requirements and technical problems of the concept visualization program learning system, proves the necessity and technical feasibility of the system, then makes a basic introduction to the technical software and design idea needed to design the system, and finally realizes the major modules of the system.
Key words:Concept visualization program learning system; SSM framework; Mysql database
目 錄
第1章 緒論 1
1.1 研究背景 1
1.2 本文的組織結構 1
第2章 相關技術介紹 2
2.1 開發技術 2
2.2 ssm框架介紹 2
2.3 MySQL數據庫 2
2.4 B/S結構 2
2.5 B/S體系工作原理 2
2.6 ssm框架各層關系 3
2.7JavaScript 運行模式 3
第3章 系統分析 6
3.1 可行性分析 6
3.2 功能需求分析 6
3.2.1 前臺用戶功能 7
3.2.2 后臺管理員功能 8
3.3 非功能需求分析 8
3.4 安全性需求分析 9
3.4.1 系統的安全性 9
3.4.2 數據的安全性 9
3.5 數據流程分析 9
第4章 系統設計 11
4.1 系統架構設計 11
4.2 系統總體設計 11
4.3 系統功能設計 12
4.4 數據庫設計 12
4.4.1 數據需求分析 12
4.4.2 數據庫概念設計 13
4.4.3 數據庫表設計 13
第5章 系統實現 18
5.1 注冊模塊的實現 18
5.2 登錄模塊的實現 19
5.3 用戶資料修改模塊的實現 20
5.4 課程信息數據管理模塊的實現 21
5.5 已選課程模塊的實現 21
5.6 在線學習管理模塊的實現 22
5.7 概念圖知識點管理模塊的實現 24
第6章 系統測試 32
6.1 測試目的 32
6.2 功能測試 32
6.3 性能測試 33
第7章 總結與展望 35
參考文獻 36
致謝 38
緒論
研究背景
可視化有很多種方式，包括知識的可視化，界面的可視化等。在計算機語言中可視化還可以理解為：語句的可視化，界面設計的可視化，運行結果的可視化等等。作為計算機語言和算法的教學平臺，主要強調的是語句的可視化，以及運行結果的可視化。語句的可視化，即把語句本身及語句間的關系用圖形的方式表示出來。
現代教育技術在教育中發揮著極其重要作用。近些年來移動學習的發展對自主學習平臺的設計提出了更高的要求。隨著社會的快速發展，國民教育日益普及化、信息化和現代化，計算機和信息技術的飛速發展，使得自主學習在國民教育體系中占據了重要的地位。特別是移動互聯網絡和移動媒體技術的大規模應用，為可以應用在移動設備上的自主學習環境提供了支持。近年來，在經歷了遠程學習和數字學習的發展階段之后，遠程教育正在向著移動學習的方向飛速發展。充分利用移動計算技術和便攜式設備，使學習者可以不受空間和特定環境的限制自主學習。
本文旨在探討利用SSM框架開發的概念可視化程序設計學習系統。該系統可以在移動設備上工作，以方便學生移動學習。這種系統支持一種可以解釋執行的腳本語言，這種語言不使用鍵盤錄入，而是使用觸摸屏拖動選擇語言支持的元素和模塊進行組合，使得其功能等同于一種圖形化的腳本語言。并且這一系統有限的支持一些多媒體功能，使學生的自主學習具有更強的趣味，降低計算機語言學習過程中，初學者的入門門檻。
本文首先概括分析了基于SSM的可視化程序設計學習系統在開發時所面臨的主要問題。針對如何解決概念可視化程序設計學習系統所需要實現的一些功能,圖形化腳本語言所需要的設計工具以及解釋器相關技術的具體解決方案。
本文的組織結構
第一章是緒論，本文章的開頭部分，對本題目的研究背景和研究意義等一些做文字性的描述。
第二章研究了概念可視化程序設計學習系統所采用的開發技術和開發工具。
第三章是系統分析部分，包括系統總體需求描述、功能性角度分析系統需求、非功能性等各個方面分析系統是否可以實現。
第四章是系統設計部分，本文章的重要部分，提供了系統架構的詳細設計和一些主要功能模塊的設計說明。
第五章是系統的具體實現，介紹系統的各個模塊的具體實現。
第六章在前幾章的基礎上對系統進行測試和運行。
最后對系統進行了認真的總結，以此對未來有一個新的展望。
相關技術介紹
開發技術
本系統前端部分基于MVVM模式進行開發，采用B/S模式，后端部分基于Java的ssm框架進行開發。
前端部分：前端框架采用了比較流行的漸進式JavaScript框架Vue.js。使用Vue-Router和Vuex實現動態路由和全局狀態管理,Ajax實現前后端通信，Element UI組件庫使頁面快速成型，項目前端通過柵格布局實現響應式，可適應PC端、平板端、手機端等不同屏幕大小尺寸的完美布局展示。
后端部分：采用ssm作為開發框架，同時集成MyBatis、Redis等相關技術。
ssm框架介紹
SSM（Spring+SpringMVC+MyBatis）框架集由Spring、MyBatis兩個開源框架整合而成（SpringMVC是Spring中的部分內容）。常作為數據源較簡單的web項目的框架。
1.1 Spring
Spring就像是整個項目中裝配bean的大工廠，在配置文件中可以指定使用特定的參數去調用實體類的構造方法來實例化對象。也可以稱之為項目中的粘合劑。
Spring的核心思想是IoC（控制反轉），即不再需要程序員去顯式地`new`一個對象，而是讓Spring框架幫你來完成這一切。
1.2 SpringMVC
SpringMVC在項目中攔截用戶請求，它的核心Servlet即DispatcherServlet承擔中介或是前臺這樣的職責，將用戶請求通過HandlerMapping去匹配Controller，Controller就是具體對應請求所執行的操作。SpringMVC相當于SSH框架中struts。
1.3 mybatis
mybatis是對jdbc的封裝，它讓數據庫底層操作變的透明。mybatis的操作都是圍繞一個sqlSessionFactory實例展開的。mybatis通過配置文件關聯到各實體類的Mapper文件，Mapper文件中配置了每個類對數據庫所需進行的sql語句映射。在每次與數據庫交互時，通過sqlSessionFactory拿到一個sqlSession，再執行sql命令。
頁面發送請求給控制器，控制器調用業務層處理邏輯，邏輯層向持久層發送請求，持久層與數據庫交互，后將結果返回給業務層，業務層將處理邏輯發送給控制器，控制器再調用視圖展現數據。
MySQL數據庫
科技的進步，給日常帶來許多便利：教室的投影器用到了虛擬成像技術，數碼相機用到了光電檢測技術，比如超市貨物進出庫的記錄需要一個信息倉庫。這個信息倉庫就是數據庫，而這次的超市商品管理系統也需要這項技術的支持。
用MySQL這個軟件，是因為它能接受多個使用者訪問，而且里面存在Archive等。它會先把數據進行分類，然后分別保存在表里，這樣的特別操作就會提高數據管理系統自身的速度，讓數據庫能被靈活運用。MySQL的代碼是公開的，而且允許別人二次編譯升級。這個特點能夠降低使用者的成本，再搭配合適的軟件后形成一個良好的網站系統。雖然它有缺點，但是綜合各方面來說，它是使用者的主流運用的對象。
B/S結構
B/S（Browser/Server）比前身架構更為省事的架構。它借助Web server完成數據的傳遞交流。只需要下載瀏覽器作為客戶端，那么工作就達到“瘦身”效果， 不需要考慮不停裝軟件的問題。
B/S體系工作原理
B/S架構采取瀏覽器請求，服務器響應的工作模式。
用戶可以通過瀏覽器去訪問Internet上由Web服務器產生的文本、數據、圖片、動畫、視頻點播和聲音等信息；
而每一個Web服務器又可以通過各種方式與數據庫服務器連接，大量的數據實際存放在數據庫服務器中；
從Web服務器上下載程序到本地來執行，在下載過程中若遇到與數據庫有關的指令，由Web服務器交給數據庫服務器來解釋執行，并返回給Web服務器，Web服務器又返回給用戶。在這種結構中，將許許多多的網連接到一塊，形成一個巨大的網，即全球網。而各個企業可以在此結構的基礎上建立自己的Internet。
在 B/S 模式中，用戶是通過瀏覽器針對許多分布于網絡上的服務器進行請求訪問的，瀏覽器的請求通過服務器進行處理，并將處理結果以及相應的信息返回給瀏覽器，其他的數據加工、請求全部都是由Web Server完成的。通過該框架結構以及植入于操作系統內部的瀏覽器，該結構已經成為了當今軟件應用的主流結構模式。
ssm框架各層關系
DAO層、Service層這兩個層次都可以單獨開發，互相的耦合度很低，完全可以獨立進行，這樣的一種模式在開發大項目的過程中尤其有優勢。
Controller，View層因為耦合度比較高，因而要結合在一起開發，但是也可以看作一個整體獨立于前兩個層進行開發。這樣，在層與層之前只需要知道接口的定義，調用接口即可完成所需要的邏輯單元應用，一切顯得非常清晰簡單。
JavaScript 運行模式
JavaScript是一種屬于網絡的高級腳本語言,已經被廣泛用于Web應用開發,常用來為網頁添加各式各樣的動態功能,為用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。
1.1是一種解釋性腳本語言（代碼不進行預編譯）。
1.2主要用來向HTML（標準通用標記語言下的一個應用）頁面添加交互行為。
1.3可以直接嵌入HTML頁面，但寫成單獨的js文件有利于結構和行為的分離。
1.4跨平臺特性，在絕大多數瀏覽器的支持下，可以在多種平臺下運行（如Windows、Linux、Mac、Android、iOS等）。
1.5 JavaScript腳本語言同其他語言一樣，有它自身的基本數據類型，表達式和算術運算符及程序的基本程序框架。JavaScript提供了四種基本的數據類型和兩種特殊數據類型用來處理數據和文字。而變量提供存放信息的地方，表達式則可以完成較復雜的信息處理。
系統分析
可行性分析
開發任何一個系統，都要對其可行性進行分析，對其時間和資源上的限制進行考慮，這樣可以減少系統開發的風險。同時，分析之后不僅能夠合理的運用人力，還能在各方面資源的消耗上得到節省。下面就對技術、經濟和社會三個方面來介紹。
實用性方面，本次設計的主要任務是在概念可視化程序設計學習系統內課實現課程查詢、課程類別、已選課程學習、概念圖知識點管理等，符合當前潮流的發展。從用戶角度出發，同時也考慮系統運營成本和人力資源，采用網絡上的便捷方式，實現線上業務，使得業務流程更系統，也更方便用戶的體驗，比較實用。
經濟性方面，由于本課題中設計的概念可視化程序設計學習系統的主要目的是為了能夠更加方便及快捷的進行課程信息的查詢管理及檢索服務，也就是能夠可以直接投入使用的信息化軟件。同時這個概念可視化程序設計學習系統所帶來的實際應用方面的價值是遠遠的超過了實際系統進行開發與維護方面的成本，因此，從經濟上來說開發這個軟件是可行的。
功能需求分析
概念可視化程序設計學習系統的功能主要分為臺用戶根據自己的需求進行注冊登錄，學生瀏覽課程信息，在線學習。老師進行課程知識點發布等，后臺系統管理員主要對注冊用戶，課程管理、課程類別管理、概念圖知識點管理維護。
學生用例圖如下所示。
圖3-1 學生用例圖
管理員用例圖如下所示。
圖3-2 管理員用例圖
老師用例圖如下所示。
圖3-3 老師用例圖
前臺用戶功能
前臺學生功能如下：
注冊賬號：學生填寫個人信息，并驗證手機號碼。
登錄：根據賬號密碼進行登錄操作。
瀏覽課程信息數據：學生可以瀏覽主頁面的課程信息數據。
維護個人信息：學生因個人信息的變更可以隨時修改自己注冊信息。
課程查詢：學生可以查看課程名稱、課程類別、章節、知識點、課程附件信息等。
已選課程：學生可以查看已經選擇的課程信息、知識點章節等。
教師功能如下：
課程信息：發布課程信息可供學生瀏覽。
課程查詢：可以添加課程信息、知識點、章節點、課程附件上傳系統供學生前臺查看。
概念圖知識點管理：主要發布概念圖知識點信息。
后臺管理員功能
管理員功能如下：
修改密碼：管理員可以隨時修改自己進入系統的登錄密碼，以保證系統的安全性。
課程信息管理：對課程信息進行維護，添加、刪除、修改信息。
學生管理：對學生信息進行維護管理等。
課程查詢管理，已選課程管理，概念圖知識點管理。
非功能需求分析
首先主要考慮的是系統功能軟件，在具體設計的環節上，是不是能夠較好的滿足各類用戶的基本功能需求，如果不能較好的滿足用戶需求，那么這個系統的存在是沒有價值的。軟件系統的非功能性求分析，從7個方面展開，一個是性能分析，針對系統；一個是安全分析，針對系統，一個是完整度分析，針對系統，一個是可維護分析，針對系統，一個是可擴展性分析，針對系統，一個是適應業務的性能分析。面對概念可視化程序設計學習系統存在的性能、安全、擴展、完整度等7個方面性能綜合比對分析后發現，需要相應的非功能性需求分析。
安全性需求分析
系統的安全性
安全性對每一個系統來說都是非常重要的。安全性很好的系統可以保護企業的信息和用戶的信息不被竊取。提高系統的安全性不僅是對用戶的負責，更是對學校的負責。尤其針對于概念可視化程序設計學習系統來說，必須要有很好的安全性來保障整個系統。
系統具有對使用者有權限控制，針對角色的不通限制使用者的權限，以此來確保系統的安全性。
數據的安全性
數據庫中的數據是從外界輸入的，當數據的輸入時，由于種種原因，輸入的數據會無效，或者是臟數據。因此，怎樣保證輸入的數據符合規定，成為了數據庫系統，尤其是多用戶的關系數據庫系統首要關注的問題。
因此，在寫入數據庫時，要保證數據完整性、正確性和一致性。
數據流程分析
對系統的數據流進行分析，系統的使用者分為二類，用戶與管理員。系統主要對界面信息傳送，登錄信息的驗證，注冊信息的接收，用戶各種操作的響應做處理。
系統頂層數據流圖如下圖所示。
圖3-2 頂層數據流圖
要判斷用戶是是什么身份，是根據登錄的數據來判斷后，跳轉到對應的功能界面。在系統的內部用戶就可以對數據進行操作，數據庫中心就可以接收到系統傳輸的有效數據流來對數據sql語句進行對應操作。
系統底層數據流圖如下圖所示。
圖3-3 底層數據流圖
系統可以分為前臺和后臺兩部分，每一種操作后系統都返回操作結果。前臺和后臺的數據連接主要通過數據庫，既分別對數據庫做不同的操作。
系統設計
系統架構設計
本概念可視化程序設計學習系統的架構設計主要分為可以3層，主要有Web層，業務層，Model層。其中web層還包括View層和Controller層，Model層包括元數據擴展層和數據訪問層。
系統架構如下圖所示。
MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的數據同時幫忙處理 View 中由于需要展示內容而涉及的業務邏輯。它強制性的把應用程序的輸入、輸出和處理全部分開，將其分為三個核心部分，這三個部分分別有不同的功能。
圖4-1系統架構圖
視圖層視圖是指被用戶所看到的并且能夠與之進行交互的界面。視圖可以向用戶展示相關的數據，并接收用戶輸入的數據，但對用戶數據不進行任何實際業務操作處理。
模型層通過控制層來處理視圖層傳遞的數據，同一個模型可以給不同的視圖提供數據，也可以被不同的視圖重復使用。由于 Model 的主要內容是數據、方法和行為，其也是 MVVM 中邏輯最為復雜，代碼量最多的部分，其中包含了許多應用中需要用到的業務邏輯，因此模型層的開發也變得尤為重要，后期一般不會對模型層進行大規模改動，也是 MVVM最穩定的部分。
控制層主要負責視圖層和模型層之間的數據傳輸和處理請求操作。當用戶通過視圖發送數據和請求時，控制層可以接收請求和數據并決定調用哪些模型、通過模型的哪些操來處理數據和請求，處理完成后，控制層再將數據返回給相應的視圖。
系統總體設計
概念可視化程序設計學習系統總體分為前臺用戶（學生、教師）模塊和后臺管理員模塊。兩個模塊表現上是分別獨立存在，但是訪問的數據庫是一樣的。每一個模塊的功能都是根據先前完成的需求分析，并查閱相關資料后整理制作的。
綜上所述，系統功能結構圖如下圖所示。
圖4-2 系統功能結構圖
系統功能設計
登錄模塊：登錄模塊是進入系統的入口，所有用戶必須登錄后才能訪問系統。登錄需要輸入用戶名和密碼，如果多次嘗試登錄需要輸入驗證碼。登錄時需要選擇用戶的角色，是一般用戶還是管理員登錄等。登錄成功后，會通過數據庫獲取用戶的權限，并跳轉至用戶的主頁面。
課程信息數據模塊：可分為課程信息數據瀏覽、課程信息數據檢索、課程信息數據維護三個模塊，管理員對課程信息數據有維護的權限，發布新的課程信息數據、更新已有的課程信息數據等。
概念圖知識點管理模塊：概念圖知識點管理分為概念圖知識點添加、修改和刪除。概念圖知識點信息由管理員進行修改、添加、刪除操作。
數據庫設計
數據需求分析
從前面可以分析到數據庫中最重要的是功能是：課程信息，學生、老師信息，已選課程信息，同時存在課程查詢和概念圖知識點管理。分析可以得到如下數據描述：
平臺用戶：用于記錄用戶的各種信息，包括姓名、性別、手機、郵箱、專業、照片等數據項。
管理員：記錄管理員的登錄信息。包括用戶名，密碼，權限等數據項。
課程信息：存儲課程信息數據項。
已選課程：存儲學生的已選課程信息。
概念圖知識點管理：存儲概念圖知識點信息數據項。
數據庫概念設計
根據前面的數據流程圖，結合系統的功能模塊設計，設計出符合系統的各信息實體。
系統ER圖如下圖所示。
圖4-3 系統ER圖
數據庫表設計
概念可視化程序設計學習系統所擁有的數據表有以下：課程查詢表，已選課程表，課程信息表，課程類別表，概念圖知識點表等。
由于數據表較多，只展示系統主要數據表，如下表所示。
名稱 | 類型 | 長度 | 不是null | 主鍵 | 注釋 |
student_user_id | int | 11 | 是 | 是 | 學生用戶ID |
user_name | varchar | 64 | 是 | 否 | 用戶名 |
full_name | varchar | 64 | 否 | 否 | 姓名 |
age | varchar | 64 | 否 | 否 | 年齡 |
gender | varchar | 64 | 否 | 否 | 性別 |
class_name | varchar | 64 | 否 | 否 | 班級名稱 |
examine_state | varchar | 16 | 是 | 否 | 審核狀態 |
recommend | int | 11 | 是 | 否 | 智能推薦 |
user_id | int | 11 | 是 | 否 | 用戶ID |
create_time | datetime | 0 | 是 | 否 | 創建時間 |
update_time | timestamp | 0 | 是 | 否 | 更新時間 |
名稱 | 類型 | 長度 | 不是null | 主鍵 | 注釋 |
teacher_user_id | int | 11 | 是 | 是 | 教師用戶ID |
job_number | varchar | 64 | 是 | 否 | 工號 |
full_name | varchar | 64 | 否 | 否 | 姓名 |
age | varchar | 64 | 否 | 否 | 年齡 |
gender | varchar | 64 | 否 | 否 | 性別 |
title | varchar | 64 | 否 | 否 | 職稱 |
episcopal_curriculum | varchar | 64 | 否 | 否 | 主教課程 |
examine_state | varchar | 16 | 是 | 否 | 審核狀態 |
recommend | int | 11 | 是 | 否 | 智能推薦 |
user_id | int | 11 | 是 | 否 | 用戶ID |
create_time | datetime | 0 | 是 | 否 | 創建時間 |
update_time | timestamp | 0 | 是 | 否 | 更新時間 |
名稱 | 類型 | 長度 | 不是null | 主鍵 | 注釋 |
welcome_to_the_system_id | int | 11 | 是 | 是 | 歡迎使用本系統ID |
remarks | varchar | 64 | 否 | 否 | 備注 |
examine_state | varchar | 16 | 是 | 否 | 審核狀態 |
recommend | int | 11 | 是 | 否 | 智能推薦 |
create_time | datetime | 0 | 是 | 否 | 創建時間 |
update_time | timestamp | 0 | 是 | 否 | 更新時間 |
名稱 | 類型 | 長度 | 不是null | 主鍵 | 注釋 |
selected_courses_id | int | 11 | 是 | 是 | 已選課程ID |
user_name | int | 11 | 否 | 否 | 用戶名 |
course_name | varchar | 64 | 否 | 否 | 課程名稱 |
course_type | varchar | 64 | 否 | 否 | 課程類型 |
chapter | varchar | 64 | 否 | 否 | 章節 |
knowledge_points | varchar | 64 | 否 | 否 | 知識點 |
remarks | varchar | 64 | 否 | 否 | 備注 |
course_attachment | varchar | 255 | 否 | 否 | 課程附件 |
examine_state | varchar | 16 | 是 | 否 | 審核狀態 |
recommend | int | 11 | 是 | 否 | 智能推薦 |
create_time | datetime | 0 | 是 | 否 | 創建時間 |
update_time | timestamp | 0 | 是 | 否 | 更新時間 |
名稱 | 類型 | 長度 | 不是null | 主鍵 | 注釋 |
course_inquiry_id | int | 11 | 是 | 是 | 課程查詢ID |
course_name | varchar | 64 | 否 | 否 | 課程名稱 |
course_type | varchar | 64 | 否 | 否 | 課程類型 |
chapter | varchar | 64 | 否 | 否 | 章節 |
knowledge_points | varchar | 64 | 否 | 否 | 知識點 |
remarks | varchar | 64 | 否 | 否 | 備注 |
course_attachment | varchar | 255 | 否 | 否 | 課程附件 |
examine_state | varchar | 16 | 是 | 否 | 審核狀態 |
recommend | int | 11 | 是 | 否 | 智能推薦 |
create_time | datetime | 0 | 是 | 否 | 創建時間 |
update_time | timestamp | 0 | 是 | 否 | 更新時間 |
名稱 | 類型 | 長度 | 不是null | 主鍵 | 注釋 |
course_category_id | int | 11 | 是 | 是 | 課程類別ID |
course_type | varchar | 64 | 否 | 否 | 課程類型 |
examine_state | varchar | 16 | 是 | 否 | 審核狀態 |
recommend | int | 11 | 是 | 否 | 智能推薦 |
create_time | datetime | 0 | 是 | 否 | 創建時間 |
update_time | timestamp | 0 | 是 | 否 | 更新時間 |
名稱 | 類型 | 長度 | 不是null | 主鍵 | 注釋 |
concept_map_knowledge_point_management_id | int | 11 | 是 | 是 | 概念圖知識點管理ID |
job_number | int | 11 | 否 | 否 | 工號 |
publish_courses | varchar | 64 | 否 | 否 | 發布課程 |
course_type | varchar | 64 | 否 | 否 | 課程類型 |
chapter | varchar | 64 | 否 | 否 | 章節 |
knowledge_points | varchar | 64 | 否 | 否 | 知識點 |
remarks | varchar | 64 | 否 | 否 | 備注 |
course_attachment | varchar | 255 | 否 | 否 | 課程附件 |
examine_state | varchar | 16 | 是 | 否 | 審核狀態 |
recommend | int | 11 | 是 | 否 | 智能推薦 |
create_time | datetime | 0 | 是 | 否 | 創建時間 |
update_time | timestamp | 0 | 是 | 否 | 更新時間 |
系統實現
注冊模塊的實現
用戶在填寫數據的時候必須與注冊頁面上的驗證相匹配否則會注冊失敗，注冊頁面的表單驗證是通過驗證的，用戶名的長度必須在6到18之間，郵箱必須帶有@符號，密碼和密碼確認必須相同，你輸入的密碼，系統會根據你輸入密碼的強度給出指定的值，電話號碼和身份證號碼必須要求輸入格式與生活相符合，當你前臺驗證通過的時候你點擊注冊，表單會將你輸入的值通過name值傳遞給后臺并保存到數據庫中。
用戶注冊流程圖如下圖所示。
圖5-1用戶注冊流程圖
用戶注冊邏輯代碼如下：
/**
* 注冊
* @param user
* @return
*/
@PostMapping("register")
public Map<String, Object> signUp(@RequestBody User user) {
// 查詢用戶
Map<String, String> query = new HashMap<>();
query.put("username",user.getUsername());
List list = service.select(query, new HashMap<>()).getResultList();
if (list.size()>0){
return error(30000, "用戶已存在");
}
user.setUserId(null);
user.setPassword(service.encryption(user.getPassword()));
service.save(user);
return success(1);
}
/**
* 用戶ID：[0,8388607]用戶獲取其他與用戶相關的數據
*/
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "user_id")
private Integer userId;
/**
* 賬戶狀態：[0,10](1可用|2異常|3已凍結|4已注銷)
*/
@Basic
@Column(name = "state")
private Integer state;
/**
* 所在用戶組：[0,32767]決定用戶身份和權限
*/
@Basic
@Column(name = "user_group")
private String userGroup;
/**
* 上次登錄時間：
*/
@Basic
@Column(name = "login_time")
private Timestamp loginTime;
/**
* 手機號碼：[0,11]用戶的手機號碼，用于找回密碼時或登錄時
*/
@Basic
@Column(name = "phone")
private String phone;
/**
* 手機認證：[0,1](0未認證|1審核中|2已認證)
*/
@Basic
@Column(name = "phone_state")
private Integer phoneState;
/**
* 用戶名：[0,16]用戶登錄時所用的賬戶名稱
*/
@Basic
@Column(name = "username")
private String username;
/**
* 昵稱：[0,16]
*/
@Basic
@Column(name = "nickname")
private String nickname;
/**
* 密碼：[0,32]用戶登錄所需的密碼，由6-16位數字或英文組成
*/
@Basic
@Column(name = "password")
private String password;
/**
* 郵箱：[0,64]用戶的郵箱，用于找回密碼時或登錄時
*/
@Basic
@Column(name = "email")
private String email;
/**
* 郵箱認證：[0,1](0未認證|1審核中|2已認證)
*/
@Basic
@Column(name = "email_state")
private Integer emailState;
/**
* 頭像地址：[0,255]
*/
@Basic
@Column(name = "avatar")
private String avatar;
/**
* 創建時間：
*/
@Basic
@Column(name = "create_time")
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
private Timestamp createTime;
@Basic
@Transient
private String code;
}
登錄模塊的實現
主要由兩部分組成，登錄前的登錄界面以及登錄后的用戶功能界面。登錄界面，要求用戶輸入用戶名和密碼，當用戶名和密碼其中一個輸入為空時，給出提示“用戶名，密碼不能為空”。獲取用戶名和密碼后到數據庫中查找，如果用戶名存在，以及對應的密碼正確，則登錄成功，否則登錄失敗。登錄失敗后給出提示，并把焦點停在文本框中。登錄成功后將該次會話的全局變量username設置為用戶名。登錄成功后進入會員的功能模塊，主要有會員基本信息修改，已經發布考試信息管理，發布信息，和退出功能。退出功能是清除全局變量username的值，并跳回到首頁。
登錄流程圖如下圖所示。
圖5-2登錄流程圖
用戶登錄界面如下圖所示。
圖5-4用戶登錄界面
用戶登錄的邏輯代碼如下所示。
/**
* 登錄
* @param data
* @param httpServletRequest
* @return
*/
@PostMapping("login")
public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {
log.info("[執行登錄接口]");
String username = data.get("username");
String email = data.get("email");
String phone = data.get("phone");
String password = data.get("password");
List resultList = null;
Map<String, String> map = new HashMap<>();
if(username != null && "".equals(username) == false){
map.put("username", username);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(email != null && "".equals(email) == false){
map.put("email", email);
resultList = service.select(map, new HashMap<>()).getResultList();
}
else if(phone != null && "".equals(phone) == false){
map.put("phone", phone);
resultList = service.select(map, new HashMap<>()).getResultList();
}else{
return error(30000, "賬號或密碼不能為空");
}
if (resultList == null || password == null) {
return error(30000, "賬號或密碼不能為空");
}
//判斷是否有這個用戶
if (resultList.size()<=0){
return error(30000,"用戶不存在");
}
User byUsername = (User) resultList.get(0);
Map<String, String> groupMap = new HashMap<>();
groupMap.put("name",byUsername.getUserGroup());
List groupList = userGroupService.select(groupMap, new HashMap<>()).getResultList();
if (groupList.size()<1){
return error(30000,"用戶組不存在");
}
UserGroup userGroup = (UserGroup) groupList.get(0);
//查詢用戶審核狀態
if (!StringUtils.isEmpty(userGroup.getSourceTable())){
String sql = "select examine_state from "+ userGroup.getSourceTable() +" WHERE user_id = " + byUsername.getUserId();
String res = String.valueOf(service.runCountSql(sql).getSingleResult());
if (res==null){
return error(30000,"用戶不存在");
}
if (!res.equals("已通過")){
return error(30000,"該用戶審核未通過");
}
}
//查詢用戶狀態
if (byUsername.getState()!=1){
return error(30000,"用戶非可用狀態，不能登錄");
}
String md5password = service.encryption(password);
if (byUsername.getPassword().equals(md5password)) {
// 存儲Token到數據庫
AccessToken accessToken = new AccessToken();
accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));
accessToken.setUser_id(byUsername.getUserId());
tokenService.save(accessToken);
// 返回用戶信息
JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));
user.put("token", accessToken.getToken());
JSONObject ret = new JSONObject();
ret.put("obj",user);
return success(ret);
} else {
return error(30000, "賬號或密碼不正確");
}
}
用戶資料修改模塊的實現
用戶登錄/注冊成功之后可以修改自己的基本信息。修改頁面的表單中每一個input的name值都要與實體類中的參數相匹配，在用戶點擊修改頁面的時候，如果改后用戶名與數據庫里面重復了，頁面會提示該用戶名已經存在了，否則通過Id來查詢用戶，并將用戶的信息修改為表單提交的數據。
課程信息數據管理模塊的實現
如果課程信息數據需要修改，管理員可以通過查詢課程名稱來查詢課程信息數據，查詢課程信息數據是通過ajax技術來進行查詢的，需要傳遞課程信息數據的標題、編號等參數然后在返回到該頁面中,可以選中要修改或刪除的那條信息，如果選中了超過一條數據，頁面會挑一個窗口提醒只能選擇一條數，如果沒有選中數據會挑一個窗口題型必須選擇一條數據。當選擇確認修改的時候，后臺會根據傳過來的id到數據庫查詢，并將結果返回到修改頁面中，可以在修改頁面中修改剛剛選中的信息當點擊確認的時候from表單會將修改的數據提交到后臺并保存到數據庫中，就是說如果提交的數據數據庫中存在就修改，否則就保存。
課程信息展示界面如下圖所示。
圖5-5課程信息展示界面
課程信息的邏輯代碼如下：
@PostMapping("/add")
@Transactional
public Map<String, Object> add(HttpServletRequest request) throws IOException {
service.insert(service.readBody(request.getReader()));
return success(1);
}
@Transactional
public Map<String, Object> addMap(Map<String,Object> map){
service.insert(map);
return success(1);
}
public Map<String,Object> readBody(BufferedReader reader){
BufferedReader br = null;
StringBuilder sb = new StringBuilder("");
try{
br = reader;
String str;
while ((str = br.readLine()) != null){
sb.append(str);
}
br.close();
String json = sb.toString();
return JSONObject.parseObject(json, Map.class);
}catch (IOException e){
e.printStackTrace();
}finally{
if (null != br){
try{
br.close();
}catch (IOException e){
e.printStackTrace();
}
}
}
return null;
}
public void insert(Map<String,Object> body){
StringBuffer sql = new StringBuffer("INSERT INTO ");
sql.append("`").append(table).append("`").append(" (");
for (Map.Entry<String,Object> entry:body.entrySet()){
sql.append("`"+humpToLine(entry.getKey())+"`").append(",");
}
sql.deleteCharAt(sql.length()-1);
sql.append(") VALUES (");
for (Map.Entry<String,Object> entry:body.entrySet()){
Object value = entry.getValue();
if (value instanceof String){
sql.append("'").append(entry.getValue()).append("'").append(",");
}else {
sql.append(entry.getValue()).append(",");
}
}
sql.deleteCharAt(sql.length() - 1);
sql.append(")");
log.info("[{}] - 插入操作：{}",table,sql);
Query query = runCountSql(sql.toString());
query.executeUpdate();
}
已選課程模塊的實現
已選課程功能需要考慮高并發，防止出現課程重復選擇申請、課程狀態顯示出錯等情況，特對課程信息這一共享數據增加鎖機制。在樂觀鎖、悲觀鎖以及線程鎖中，綜合考慮性能效率和錯誤的可接受性選擇了樂觀鎖機制。樂觀鎖的實現方式是使用版本標識來確定讀到的數據與提交時的數據是否一致，提交后修改版本標識，不一致時可以采取丟棄和再次嘗試的策略。在數據庫已選課程表（對應已選課程實體）設計中增加了version字段，每次數據提交時（更改已選課程狀態）會判斷version是否匹配，若不匹配停止本次提交，若匹配則提交成功并增加version的值。
已選課程功能整體流程：用戶瀏覽已選課程信息時，同時會顯示已選課程的狀態，系統會在其顯示詳細信息的頁面時便會判斷已選課程的狀態，若課程狀態為可選，則會顯示課程列表的鏈接按鈕。在用戶點擊課程列表按鈕時，會先通過攔截器判斷用戶是否登錄，若未登錄，會跳轉至登錄頁面，提示用戶先登錄，若為登錄用戶就會跳轉至在線課程信息的頁面，點擊已選課程，成功之后進行學習。
已選課程流程圖如下圖所示。
圖5-6已選課程流程圖
已選課程界面如下圖所示。
圖5-7已選課程界面
已選課程界面邏輯代碼如下：
@RequestMapping(value = {"/avg_group", "/avg"})
public Map<String, Object> avg(HttpServletRequest request) {
Query count = service.avg(service.readQuery(request), service.readConfig(request));
return success(count.getResultList());
}
在線學習管理模塊的實現
此頁面的關鍵是學生在線學習已選課程，包括課程名稱，課程類別、章節、知識點等。管理員點擊左側菜單“在線學習管理”，頁面跳轉到在線學習管理外觀，調用后臺測試查詢。并將信息密封到數據集合List，綁定到請求對象，然后頁面跳轉到相應的界面，顯示出學習信息。
在線學習流程圖如下圖所示。
圖5-8在線學習流程圖
在線學習界面邏輯代碼如下：
@RequestMapping("/get_list")
public Map<String, Object> getList(HttpServletRequest request) {
Map<String, Object> map = service.selectToPage(service.readQuery(request), service.readConfig(request));
return success(map);
}
概念圖知識點管理模塊的實現
根據需求，需要對概念圖知識點進行添加、刪除或修改詳情信息。刪除或修改概念圖知識點時，系統根據概念圖知識點的狀態判定為可刪除狀態下，才會給出刪除和修改鏈接，點擊刪除鏈接按鈕時，請求到達后臺，還會先查詢概念圖知識點狀態再次做出判定能否刪除。點擊修改鏈接按鈕時，會跳轉到修改信息的頁面，重新填寫好數據后，數據提交到后臺會對數據庫中相應的記錄做出修改。
添加概念圖知識點時，會給出數據填寫的頁面，該頁面根據填寫好的概念圖知識點編號同樣會事先發送Ajax請求查詢編號是否已存在，數據填寫好之后提交到后臺，會調用相關服務在數據庫中插入記錄。
概念圖知識點添加界面設計效果如下圖所示。
圖5-12概念圖知識點添加界面
概念圖知識點管理界面效果如下圖所示。
圖5-13概念圖知識點管理界面
概念圖知識點管理界面關鍵代碼如下：
@RestController
@RequestMapping("auth")
public class AuthController extends BaseController<Auth, AuthService> {
/**
* 服務對象
*/
@Autowired
public AuthController(AuthService service) {
setService(service);
系統測試
測試目的
對任何系統而言，測試都是必不可少的環節，測試可以發現系統存在的很多問題，所有的軟件上線之前，都應該進行充足的測試之后才能保證上線后不會Bug頻發，或者是功能不滿足需求等問題的發生。下面分別從單元測試，功能測試和用例測試來對系統進行測試以保證系統的穩定性和可靠性。
功能測試
下表是課程信息管理功能的測試用例，檢測了課程信息管理中對課程信息信息的增加，刪除，修改，查詢操作是否成功運行。觀察系統的響應情況，得出該功能也達到了設計目標，系統運行正確。
前置條件；用戶登錄系統。
表6-1 課程信息管理的測試用例
功能描述 | 用于課程信息管理 | |
測試目的 | 檢測課程信息管理時的各種操作的運行情況 | |
測試數據以及操作 | 預期結果 | 實際結果 |
點擊添加課程信息，必填項合法輸入，點擊保存 | 提示添加成功 | 與預期結果一致 |
點擊添加課程信息，必填項輸入不合法，點擊保存 | 提示必填項不能為空 | 與預期結果一致 |
點擊修改課程信息，必填項修改為空，點擊保存 | 提示必填項不能為空 | 與預期結果一致 |
點擊修改課程信息，必填項輸入不合法，點擊保存 | 提示必填項不能為空 | 與預期結果一致 |
點擊刪除課程信息，選擇課程信息刪除 | 提示刪除成功 | 與預期結果一致 |
點擊搜索課程信息，輸入存在的課程信息名 | 查找出課程信息 | 與預期結果一致 |
點擊搜索課程信息，輸入不存在的課程信息名 | 不顯示課程信息 | 與預期結果一致 |
下表是已選課程管理功能的測試用例，檢測了已選課程管理中對已選課程信息的增加，刪除，修改，查詢操作是否成功運行。觀察系統的響應情況，得出該功能也達到了設計目標，系統運行正確。
前置條件；用戶登錄系統。
表6-2 已選課程管理的測試用例
功能描述 | 用于已選課程管理 | |
測試目的 | 檢測已選課程管理時的各種操作的運行情況 | |
測試數據以及操作 | 預期結果 | 實際結果 |
點擊添加已選課程，必填項合法輸入，點擊保存 | 提示添加成功 | 與預期結果一致 |
點擊添加已選課程，必填項輸入不合法，點擊保存 | 提示必填項不能為空 | 與預期結果一致 |
點擊修改已選課程，必填項修改為空，點擊保存 | 提示必填項不能為空 | 與預期結果一致 |
點擊修改已選課程，必填項輸入不合法，點擊保存 | 提示必填項不能為空 | 與預期結果一致 |
點擊刪除已選課程，選擇已選課程刪除 | 提示刪除成功 | 與預期結果一致 |
點擊搜索已選課程，輸入存在的已選課程名 | 查找出已選課程 | 與預期結果一致 |
點擊搜索已選課程，輸入不存在的已選課程名 | 不顯示已選課程 | 與預期結果一致 |
性能測試
使用阿里云PTS（Performance Testing Service）性能測試服務對線上系統進行壓力測試。線上服務器環境為：1核心CPU，1G內存，1Mbps公網帶寬，Centos7.0操作系統。
壓測過程中使用了2臺并發機器，每臺機器20個用戶并發，對系統主頁，登錄，數據查詢和數據維護等模塊進行并發訪問，測試結果是有40個用戶并發時，數據管理相關頁面的響應時間甚至達到了7s，通過查看服務器出網流量發現已經達到1381kb/s，可以看出服務器的帶寬已經達到峰值，如果系統使用5Mbps的帶寬，系統的響應時間和TPS將會大大增加。在整個測試的過程中，CPU的使用率占用僅8%，也提現出帶寬瓶頸對系統的影響非常嚴重。
總結與展望
隨著計算機互聯網技術的迅猛發展，各行各業都已經實現采用計算機相關技術對日益放大的數據進行管理。該課題是為概念可視化程序設計學習為核心展開的。本研究針對概念可視化程序設計學習系統需求建模，數據建模及過程建模分析。給出系統應用架構并分析優劣勢，通過功能分解圖，系統組件圖描述功能需求。設計建立了數據庫，給出系統關鍵數據結構的定義。通過類關系圖描述組件間的協作關系，給出各個類的定義方法。通過描述每一個類的字段，屬性及方法實現平臺的前后端代碼。最終給出系統集成整合方法，完成概念可視化程序設計學習系統的設計與實現。系統投入運行時，各功能均運行正常。系統的每個界面的操作符合常規邏輯，對使用者來說操作簡單，界面友好。整個系統的各個功能設計合理，體現了人性化。
但是由于自己在系統開發過程中對一些用到的相關知識和技術掌握不夠牢固，再加上自身開發經驗欠缺，因此系統在有些方面的功能還不夠完善，考慮的不夠全面，因此整個系統還有待日后逐步完善。
參考文獻
[1]徐偉東.例談以學習者為中心的程序設計教學策略[J].中國信息技術教育,2022(05):33-35.
[2]鎮鑫羽,景琴琴.Java語言程序設計的教學實踐[J].集成電路應用,2022,39(02):256-257.
[3]劉奕.計算機程序設計的多應用型開發分析[J].無線互聯科技,2021,18(24):78-79.
[4]韓冰,劉翠煥,黃振華,張波,陳明珠,張瀟.人工智能時代下“Java程序設計”課程教學改革[J].科技風,2021(33):98-100.
[5]劉麗,趙彥,徐威,高云,陸蔚,楊竹青.面向物聯網專業的程序設計類課程教學改革與探究[J].電子元器件與信息技術,2021,5(11):229-230.
[6]劉勇.程序設計課程“線上+線下”混合式模式教學的改革與創新[J].現代職業教育,2021(48):150-151.
[7]王勛,馮凱琪.概念圖及其可視化對說明文閱讀理解及元理解監測的影響[J].科技資訊,2021,19(32):162-165.
[8]王思瑞. 基于概念圖的高中物理可視化教學探索[C]//.2021年教育教學創新研究高峰論壇論文集.,2021:28-29.
[9]樊艷芬.概念圖在數據結構可視化教學中的應用研究[J].福建電腦,2021,37(01):30-33.
[10]陳麗華,張金良.基于概念圖的高中物理可視化教學初探——以“曲線運動”一章為例[J].教育教學論壇,2020(13):285-287.
[11]李帥帥. 基于概念圖的可視化教學能力建模與培養策略研究[D].華東師范大學,2019.
[12]向芳玉,郝建江,顧文玲,黃冬明.基于概念圖的可視化教學整合研究——以地理概念為例[J].中國教育信息化,2018(16):46-50.
[13]左延柏.基于概念圖促進學生思維可視化研究[J].中學生物學,2018,31(11):15-17.
[14]李艷瓊. 概念圖可視化功能對提高EFL大學生議論文連貫性的效力探析[D].四川外國語大學,2018.
[15]李良,高娜.基于概念圖的可視化教學設計分析[J].中國電力教育,2018(05):72-73+75.
[16]Kemal Emre ?zen,Kübra Erdo?an,Burhan Yarar,Gizem ?izmeci,Gonca Ay Keselik,Ferhan Elmal?,Mehmet Ali Malas. The practical examination types (spot test and slide test) of gross anatomy course in faculty of medicine: a simultaneous evaluation of the aspect of student success[J]. Surgical and Radiologic Anatomy,2021,43(4):
致謝
本次設計歷時3個月。在這個畢業設計中，它離不開指導教師的指導，使事情基本順利。指導老師無論是在畢業設計歷經中，還是在論文做完中都給了了我特別大的助益。另1個方面，教師認真負責的工作姿態，謹慎的教學精神厚重的理論水準都使我獲益匪淺。他勤懇謹慎的教學育人學習姿態也給我留下了特別特別深的感覺。我從老師那里學到了很多東西。在理論和實踐中，我的技能得到了特別大的提高。在此，特向教師表示由衷的感激。
經過對該畢業設計的全部研究和開發，我的系統研發經歷了從需求分析到實現詳細功能，再到最終測試和維護的特殊進展。讓我對系統研發有了更深層次的認識。如今我的動手本領單獨處理疑惑的本領也獲取到了特別大的演練學習增多，這是這次畢業設計最好的收獲。
最后，在整個系統開發過程中，我周圍的同學和朋友給了我很多意見，所以我很快就確認了系統的商業思想。在次，我由衷的向他們表示感激。
點贊+收藏+關注 → 私信領取本源代碼、數據庫
總結
以上是生活随笔為你收集整理的基于SSM的概念可视化程序设计学习系统 毕业设计-附源码021009的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何使用python读取excel表的某
- 下一篇： windows命令行下schtasks创