第一次編程作業(My Own Score)

• 2020 年 9 月 12 日
• 筆記

1. 需求分析：

   從網頁中獲取屬於自己的經驗值，利用 java 編程和已知的成績演算法實現計算自己的期末成績，最後上傳源碼至碼雲。

2. 思路分析：

   分為三大塊來進行。

   • 解析保存到本地的網頁並獲取相對應的經驗值數據

   • 成績計算：讀取配置文件中的經驗值，用成績演算法（個人獲得的經驗值總分 / 應得經驗值總分 * 100）計算所得成績

   • 利用 Git 上傳源碼到遠程倉庫

   分為三大塊的優勢在於這樣理清了整個編程邏輯，可以分模組完成，若遇到自己不能解決的問題也能夠分步學習，提高了編程的效率。

3. 編程過程：

   • 首先要解析網頁，在度娘的幫助下我知道了要用到 Jsoup 來解析網頁內容，所以第一步要導入 Jsoup 的 jar 包。（這個過程我又一次鞏固了如何導包）

   那麼該如何利用 Jsoup 解析網頁呢？

   要利用到下面這段程式碼：

   File Html = new File("文件目錄");
   Document source = Jsoup.parse(文件名, "UTF-8", "未找到文件替換的URL");
   

   這樣 source 里現在存的就是整個網頁的源程式碼

   • 接下來獲取相應部分的經驗值：根據解析的源程式碼，利用 Jsoup 強大的選擇器找出所要的經驗值。

   我在這裡舉如何獲取課前自測部分的經驗為例，其他部分大同小異

   <div class="interaction-rows">
     	<div class="interaction-row" data-appraise-type="" data-appraiser-id="" data-type="QUIZ" data-show='show'
     	 data-row-status="END" data-id="EAB1BCA6-A538-F2B4-CE47-D83D44F9EEC9" data-url="//www.mosoteach.cn/web/index.php?                              c=interaction_quiz&m=quiz_ranking&clazz_course_id=CD7AE281-4AF8-11EA-9C7F-98039B1848C6&id=EAB1BCA6-A538-F2B4-CE47-D83D44F9EEC9&order_item=group&status=">
     		<img src="//static-cdn-oss.mosoteach.cn/mosoteach2/common/images/activities-list-icon-testing.png" alt=""
     		 style="width:60px;vertical-align:middle;margin-right:10px;" />
   
     		<div class="" style="display:inline-block;vertical-align:middle;">
     			<div style="width:822px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
     				<span class="interaction-status end">已結束</span>
     				<span class="interaction-name grey fontsize-14 color-33" title="2020-04-02課前自測：複習文件管理">
     					2020-04-02課前自測：複習文件管理 </span>
     			</div>
     			<div class="clear20"></div>
     			<div class="" style="width:822px;">
     				<div class="" style="float:left;">
     					<span>共</span>
     					<span>5</span>
     					<span>道題目</span>
     					<span style="margin:0 5px;">|</span>
     					<span>共 </span>
     					<span>56</span>
     					<span>
     						人作答 </span>
     					<span style="margin:0 5px;">|</span>
     					<span>2020-04-02</span>
     					<span style="margin:0 5px;">|</span>
     					<!-- 經驗值 START -->
     					<!-- 其他活動 -->
     					<span style="color:#8FC31F;">3 經驗</span>
     					<!-- 經驗值 END -->
     					<!-- 剩餘時間 -->
     				</div>
     				<div class="clear"></div>
     			</div>
     		</div>
     	</div>
   

   放出課前自測部分的源程式碼，我們想獲得其中的經驗值，最開始的工作就是要定位這個塊

   那麼該如何定位呢？（方法不止一種，我的僅作示例）

   仔細的同學不難看出，源程式碼開頭部分

   //課前自測部分：
   <div class="interaction-row" data-appraise-type="" data-appraiser-id="" data-type="QUIZ" data-show='show'
   data-row-status="END"
   

   //編程題部分：
   <div class="interaction-row"  data-appraise-type="TEACHER" data-appraiser-id=""
   data-type="HOMEWORK" data-show='show' data-row-status="END"
   

   觀察上面兩部分的程式碼塊，不難發現，課前自測部分我們可以用

   data-type="QUIZ"
   

   這個屬性值來進行定

   而編程題則用

   data-appraise-type="TEACHER"
   

   來進行定位,當然，每個人看到的區別都不一樣，選自己覺得最簡單的那個方法就OK。我選這個是因為除了編程題和附加題外，其他部分的 data-appraise-type 屬性都是不同的。

   知道了定位方法後肯定要實現出來，上程式碼

   Elements beforeParent = sourceSmall.select("[data-type=QUIZ]");
   // sourceSmall 為我們從小班課里解析的源碼，調用方法 select 即可定位到屬性值符合的 div 塊，非常的方便。
   

   定位完成，看下圖，我現在定位到的是紅圈圈位置。綠圈是我們要定位的最終位置，每個顏色代表每一級。我們可以用到 child() 方法來進行定位下級。

   
   按圖示，此段程式碼應為

   beforeParent.child(1)//第二個藍圈位置
   .child(2)//第二個粉圈位置
   .child(0)//第一個黑圈位置
   .child(10)//綠圈位置
   

   很好理解對吧，經驗值得獲取到這裡已經基本完成。

   我們考慮到

   data-appraise-type="TEACHER"//這個屬性並不唯一，故需要利用循環將相同部分的經驗值相加
   

   //循環程式碼
   for (int i = 0; i < beforeParent.size(); i++) { //利用獲取的條數作為循環次數
   Element beforeSmall= beforeParent.get(i).select("div").first().child(1).child(2).child(0).child(10);//獲取經驗值數據的定位
   String beforeScore =  beforeSmall.text().replaceAll(" 經驗", "");//獲取的數據中有字元串，要過濾
   float before = Float.parseFloat(beforeScore);//經驗值在這之前位字元串，要轉為浮點型
   beforeSum += before;//經驗值求和
     }
   

   這樣就完成了課前自測的經驗值總分。其他部分類似，有些要加判斷，例如是否已參與作為經驗值相加的條件。

   • 獲取配置中的經驗值總分

   要利用到 Properties 類 ，如何使用？ 程式碼如下

   class myProperties {
   public static void main(String[] args) throws Exception {
     Properties pps = new Properties();
     pps.load(new FileInputStream("file.properties"));//載入文件
     Enumeration fileName = pps.propertyNames();
     while (fileName.hasMoreElements()) { //判斷元素
         String strKey = (String) fileName.nextElement(); //獲取關鍵字
         String strValue = pps.getProperty(strKey); //獲取關鍵字對應的值
         System.out.println(strKey + "," + strValue);
                       }
                   }
               }
   

   網頁鏈接如何讀取配置文件

   • 最後按照權重和比例計算成績即可

4.git到遠程倉庫

  * 在碼雲創建倉庫。

  * 在本地創建倉庫

  * git 配置遠程倉庫

  * git clone 遠程倉庫到本地

  * 進入與遠程倉庫同名的文件夾，右鍵 git base here

  * 將要上傳的文件拖入文件夾中

  * 開始上傳，利用以下程式碼

  git add .
  git commit -m"備註"
  git push

 * 最後輸如碼雲帳號密碼即可

5.作業總結：

  主要學會了 Jsoup 的使用，爬取網頁內容的大概方式，讀取配置文件，從本地倉庫上傳文件至遠程倉庫。

6.還未解決的問題：

  程式碼冗餘嚴重，使用CMD命令行無法運行程式，待優化。

7.作業實際完成時間