PAGEPAGE10大數(shù)據(jù)可視化分析課程教案首頁8-2一、核心要素章節(jié)名稱項目4智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸任務(wù)實施4.3在智慧農(nóng)業(yè)大屏中加載農(nóng)資產(chǎn)品市場價格JSON數(shù)據(jù)教學(xué)課時2授課班級大數(shù)據(jù)技術(shù)2401班授課時間第8周-2授課地點介夫樓307教學(xué)目標知識目標掌握農(nóng)資產(chǎn)品市場價格excel轉(zhuǎn)換為JSON數(shù)據(jù)的過程理解jQuery動態(tài)搭建布局方法掌握數(shù)據(jù)展示方法能力目標能獨立將技術(shù)資源excel轉(zhuǎn)換為JSON數(shù)據(jù)能根據(jù)業(yè)務(wù)需求用jQuery動態(tài)搭建布局能夠解析JSON數(shù)據(jù)并放置在指定位置素質(zhì)目標通過演示任務(wù)步驟與過程，理解并梳理項目的業(yè)務(wù)功能結(jié)構(gòu)。激發(fā)學(xué)生對數(shù)據(jù)可視化技術(shù)的探索興趣培養(yǎng)嚴謹?shù)拇a調(diào)試習(xí)慣教學(xué)內(nèi)容主要內(nèi)容jQuery動態(tài)搭建布局準備開發(fā)資源模塊JSON數(shù)據(jù)解析JSON數(shù)據(jù)并放置在指定位置重點excel轉(zhuǎn)換為JSON數(shù)據(jù)解析JSON數(shù)據(jù)難點jQuery動態(tài)搭建布局教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過課堂討論提出問題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思學(xué)生在編程過程中安全防范意識欠缺，暴露出將安全防護視為"可選功能"的認知偏差。改進方法：搭建模擬攻擊環(huán)境，讓學(xué)生親身經(jīng)歷未轉(zhuǎn)義數(shù)據(jù)導(dǎo)致的頁面劫持，通過司法案例解讀（如某公司未加密API接口被罰50萬元）強化法規(guī)認知。

二、教學(xué)設(shè)計教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計教師活動學(xué)生活動時間分配一、課程導(dǎo)入?本任務(wù)主要分析“農(nóng)資產(chǎn)品市場價格”的相關(guān)數(shù)據(jù)，并將其構(gòu)造為JSON數(shù)據(jù)的數(shù)組結(jié)構(gòu)，在智慧農(nóng)業(yè)大屏中實現(xiàn)農(nóng)資產(chǎn)品市場價格模塊的滾屏消息展示。準備數(shù)據(jù)文件“農(nóng)業(yè)數(shù)據(jù)平臺-農(nóng)資產(chǎn)品市場價格.xlsx”，代碼基礎(chǔ)文件“FarmingCenterScreen4.3.zip”。任務(wù)效果如圖所示。教師演示，引導(dǎo)思考明確本節(jié)課的目標效果5分鐘二、準備農(nóng)資產(chǎn)品市場價格JSON數(shù)據(jù)、實現(xiàn)農(nóng)資產(chǎn)品市場價格滾屏1.準備農(nóng)資產(chǎn)品市場價格JSON數(shù)據(jù)（1）打開Edge瀏覽器，在必應(yīng)搜索“exceltojson”關(guān)鍵字，尋找在線JSON數(shù)據(jù)轉(zhuǎn)換工具。（2）選擇/zh-cn/excel-to-json并進入（3）將準備好的農(nóng)業(yè)數(shù)據(jù)平臺-農(nóng)資產(chǎn)品市場價格.Xlsx拖入表格轉(zhuǎn)換工具中。（4）將excel數(shù)據(jù)轉(zhuǎn)換為JSON數(shù)據(jù)格式，并將JSON數(shù)據(jù)復(fù)制到剪切板。（5）創(chuàng)建JSON數(shù)據(jù)文件,命名為“productSummary.json”。其中,list屬性為結(jié)果數(shù)組,用于存放Excel表中的數(shù)據(jù)：pageTotal屬性為總記錄條數(shù)，用于記錄Excel表中的數(shù)據(jù)一共有多少條。{"list":[],"pageTotal":70}（6）將剪切板中的JSON格式數(shù)據(jù)內(nèi)容粘貼到"list":[]的[]中。（7）對代碼進行重排。思政內(nèi)容：通過演示任務(wù)步驟與過程，理解并梳理項目的業(yè)務(wù)功能結(jié)構(gòu)。演示方法，講解學(xué)生觀看演示并實踐代碼20分鐘三、實現(xiàn)農(nóng)資產(chǎn)品市場價格滾屏2.實現(xiàn)農(nóng)資產(chǎn)品市場價格滾屏(1)在靜態(tài)網(wǎng)頁中為“農(nóng)資產(chǎn)品市場價格”模塊的滾動表加入表頭，更改模塊標題為“農(nóng)資產(chǎn)品市場價格”。<divclass="title"><span>農(nóng)資產(chǎn)品市場價格</span></div>∥為模塊加入表頭內(nèi)容：產(chǎn)品名稱、產(chǎn)品種類、均價、單位<divid="FontScroll"class="myscroll"><ul><li><divclass="fontInnerclearfix"><span><b>山楂</b></span><span>水果類</span><span>14</span><span>元/公斤</span></div></li></ul></div>構(gòu)建10個<li>標簽數(shù)據(jù)內(nèi)容，運行代碼查看滾動效果，。(2)創(chuàng)建并引用JavaScript腳本文件main10.js?！ぴ趈s文件夾下創(chuàng)建main10.js文件。在main10.js文件中創(chuàng)建index10()函數(shù)。在main.js文件中調(diào)用index10()函數(shù);在index.html文件中引入main10.js文件。(3)加載JSON文件，并輸出在控制臺上。在main10.js文件中使用getJSON()方法加載JSON數(shù)據(jù),并輸出在控制臺上,如圖所示。教師講解演示代碼結(jié)構(gòu)學(xué)生觀看演示并實踐代碼20分鐘四、解析JSON數(shù)據(jù)并放置在指定位置(4)將JSON數(shù)據(jù)存放于index.html文件的<ul>標簽中?！h除滾屏位置的測試數(shù)據(jù)?！?lt;ul>標簽添加id="main10product"的id屬性?！ぴ趍ain10.js文件中使用jQuery,將數(shù)據(jù)存放于標簽中。functionindex10(){$.getJSON('./data/productSummary.json',function(data){//console.log(data);$.each(data.list,function(index,item){$("#main10product").append("<li><divclass="fontInnerclearfix"></div></li>");$("#main10product").children('li').eq(index).children("div").append("<span><b>"item.productName+"</b></span>");$("#main10product").children('li').eq(index).children("div").append("<span>"item.productCategory+"</span>");$("#main10product").children("li').eq(index).children("div").append("<span>"+item.average+"</spam>");$("#main10product").children("li').eq(index).children("div").append("<span>"+item.units+"</span>");});});}(5)刷新頁面，查看運行結(jié)果。教師講解示范學(xué)生觀看演示并操作15分鐘五、綜合練習(xí)與答疑知識梳理：JSON數(shù)據(jù)格式、JSON數(shù)據(jù)轉(zhuǎn)換方法、jQuery動態(tài)搭建布局、解析JSON數(shù)據(jù)并放置在指定位置拓展方向：從XML文件解析JSON數(shù)據(jù)并放置在指定位置總結(jié)常見錯誤討論、回答15分鐘六、課堂小結(jié)總結(jié)本次課的知識點，并發(fā)布作業(yè)總結(jié)記錄5分鐘

大數(shù)據(jù)可視化分析課程教案首頁8-2一、核心要素章節(jié)名稱項目4智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸任務(wù)拓展在大屏中加載市場分布JSON數(shù)據(jù)教學(xué)課時2授課班級大數(shù)據(jù)技術(shù)2401班授課時間第8周-2授課地點介夫樓307教學(xué)目標知識目標掌握市場分布excel轉(zhuǎn)換為JSON數(shù)據(jù)的過程理解jQuery動態(tài)搭建布局方法掌握數(shù)據(jù)展示方法能力目標能獨立將市場分布excel轉(zhuǎn)換為JSON數(shù)據(jù)能根據(jù)業(yè)務(wù)需求用jQuery動態(tài)搭建布局能夠解析JSON數(shù)據(jù)并放置在指定位置素質(zhì)目標通過演示任務(wù)步驟與過程，理解并梳理項目的業(yè)務(wù)功能結(jié)構(gòu)。激發(fā)學(xué)生對數(shù)據(jù)可視化技術(shù)的探索興趣培養(yǎng)嚴謹?shù)拇a調(diào)試習(xí)慣教學(xué)內(nèi)容主要內(nèi)容jQuery動態(tài)搭建布局準備開發(fā)資源模塊JSON數(shù)據(jù)解析JSON數(shù)據(jù)并放置在指定位置重點excel轉(zhuǎn)換為JSON數(shù)據(jù)解析JSON數(shù)據(jù)難點jQuery動態(tài)搭建布局教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過課堂討論提出問題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思學(xué)生反饋"jQuery技術(shù)棧與企業(yè)主流框架（Vue/React）存在代差"。??解決方案??：采用"雙軌制"教學(xué)：??基礎(chǔ)層??：保留jQuery講解數(shù)據(jù)綁定核心原理（如DOM操作與事件委托）；??進階層??：增設(shè)ECharts+Vue3實戰(zhàn)拓展包，提供企業(yè)級工程化項目腳手架；??銜接設(shè)計??：制作技術(shù)演進圖譜（jQuery→ECharts→AntV），組織框架差異對比研討會。

二、教學(xué)設(shè)計教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計教師活動學(xué)生活動時間分配導(dǎo)入課堂發(fā)布本節(jié)課任務(wù)實施目標及要求：本任務(wù)主要分析“市場分布”的相關(guān)數(shù)據(jù)，并將其構(gòu)造為JSON數(shù)據(jù)的數(shù)組結(jié)構(gòu)，在智慧農(nóng)業(yè)大屏市場分布模塊中完成相關(guān)數(shù)據(jù)的拼接和展示。準備數(shù)據(jù)文件“農(nóng)業(yè)數(shù)據(jù)平臺--市場分布xlsx”，代碼基礎(chǔ)文件“FarmingCenterScreen4.4.zip”。任務(wù)效果如圖所示。引導(dǎo)分享學(xué)生互動討論5分鐘知識準備-jQuery與JSON結(jié)構(gòu)回顧jQuery動態(tài)搭建布局JSON數(shù)據(jù)結(jié)構(gòu)規(guī)范與數(shù)據(jù)轉(zhuǎn)換方法教師講解理解數(shù)據(jù)層級關(guān)系15分鐘任務(wù)分解：在大屏中加載市場分布JSON數(shù)據(jù)①數(shù)據(jù)轉(zhuǎn)換流程（Excel→JSON）

②

main9.js核心代碼邏輯（初始化圖表、配置option、動態(tài)監(jiān)聽）

③使用jQuery的each()方法加載JSON數(shù)據(jù)分析執(zhí)行步驟：1.準備市場分布JSON數(shù)據(jù)2.創(chuàng)建JS腳本文件main9.js3.在main.js中調(diào)用index09()函數(shù)4.在index.html中引入main9.js思政內(nèi)容：通過演示任務(wù)步驟與過程，理解并梳理項目的業(yè)務(wù)功能結(jié)構(gòu)。教師引導(dǎo)學(xué)生思考學(xué)生觀看演示并思考15分鐘jQuery動態(tài)搭建布局在js文件夾下創(chuàng)建main9.js文件,并創(chuàng)建index08函數(shù),如圖所示。在main.js文件中調(diào)用index09函數(shù),如圖所示。在index.html文件中引用main9.js文件,如圖所示。為<ul>標簽分