課程設計——部落格作業教學資料分析系統(201521123084 林正晟)


1.團隊課程設計部落格連結

部落格作業教學資料分析系統

2.個人負責模組或任務說明

  • 學生登陸介面的前端實現和與資料庫的連線
  • 學生部落格作業成績查詢介面的前端實現和與資料庫的連線

3.自己的程式碼提交記錄截圖

4.自己負責模組或任務詳細說明

(1)學生登入介面的前端實現和與資料庫建立連線

這只是一個簡單的登入介面(或者說是查詢介面可能比較合適,因為這個頁面不需要輸入密碼就可以直接用學號查詢自己的成績分析)。所以從網頁上找來一個較為美觀的js程式碼。之後再在最後加上一段html程式碼並進行調參:

</style>
</head>
<body>
<form action="LoginServlet" method="post" id="slick-login">
<h1 align="center" style="color:white;font-size:30 px";>個人作業統計</h1>
<label for="username">username</label>
<input type="text" name="username" class="placeholder" placeholder="學號">
<input type="submit" value="登入">
</form>
</body>
</html>

但最終,由於這個介面只能進行學生查詢,而不能進行教師登入等比較完善的功能而被棄用。

實現效果:

(2)學生部落格作業成績查詢介面的前端實現和與資料庫的連線

這個成績查詢頁面實現主要是靠兩個程式碼檔案,一個是GetDataServlet.java檔案,另一個是echarts實現檔案showTheChartjsp。首先,在編寫echarts檔案時,需要引入一個echarts.min.js檔案來進行實現。首先從官網上找來柱狀折線圖例項的原始碼,之後再進行一些必要的調參,並在其中寫入必要的java程式碼,用'bar'(柱狀圖)來實現學生的部落格作業成績,再用'line'(折線圖)來實現該次作業全班同學的本次平均成績。而GetDataServlet.java主要是建立echarts與資料庫的連線,關鍵程式碼如下:

之後還用到了Map類,用來生成JSON字串,關鍵程式碼如下:

而最終實現效果:

5.課程設計感想

本次的課程設計是在李嘉廉同學的邀請下,思索了良久最終加入了“五條狗”的團體,猶豫的原因是因為自己的程式碼能力實在有限,怕跟不上大神們的節奏。但最終,在各位大神的幫助下,我還是艱難完成了屬於自己模組的任務。

本次課設需要用到echarts圖表,這是一個全新的領域,以前從來沒接觸過,而且本次課設安排在兩門考試中間,在時間上顯得非常的緊迫,怕自己沒辦法做好,以至於我們要提早一週開始做課程設計。但最終,在老師的程式碼示例,以及echarts官網上的例項,還有大神的幫助一下,還是艱難的將圖表頁面完成。我負責的是學生成績查詢頁面以及前端與資料庫的連線,做出了來的頁面效果還較為美觀滿意的。

本次Java課設是我接觸程式碼以來最難得一次課設,對我的幫助還是挺大的,學會了如何在網頁端製作echarts圖表,如何基於web來實現各種功能,還略微瞭解了一些網路爬蟲的技術,我相信這次的Java課程設計對我在大學生涯中的學習起到了非常大的作用。