Java Web應用開發(fā)項目教程（第3版） 教案 拓展實踐2-estoreSSM開發(fā)文檔 Angularjs+SSM+ json

Angularjs+SSM+json1目標用angularjs+SSM+json查詢展示所有商品，和之前的差別：1、沒有jsp頁面，只有html頁面，因此頁面中不會再有任何Java代碼或者jstl代碼，只有前端代碼。2、頁面加載時主動從向控制器要數(shù)據(jù)，控制器和頁面之間只傳遞json數(shù)據(jù)3、頁面拿到json數(shù)據(jù)后，由angularjs框架將數(shù)據(jù)展示到頁面中，數(shù)據(jù)嵌入頁面的過程完全在客戶端瀏覽器完成。2服務端環(huán)境和配置下面過程只詳細介紹和老版本SSM網(wǎng)站不同的地方，未介紹的配置，表示和老版本沒有差別。2.1添加jackson包為工程添加三個jacksonjar包，如下：1、啟動annotation-driven，這是一個主要差別！2.21、啟動annotation-driven，這是一個主要差別！3、視圖前綴以實際為準，后綴改為.html2、3、視圖前綴以實際為準，后綴改為.html2、控制層組件掃描，包名以實際為準3控制器代碼4、向map中放兩對數(shù)據(jù)<“total”,查出的商品數(shù)量><“products“，商品列表>這個map對象將會以json數(shù)組的形式傳到瀏覽器3、4、向map中放兩對數(shù)據(jù)<“total”,查出的商品數(shù)量><“products“，商品列表>這個map對象將會以json數(shù)組的形式傳到瀏覽器3、調(diào)用service層，查詢所有商品，返回商品列表。Dao和service層缺的方法，自行補充2、加responsebody注解，方法直接返回對象----主要差別！1、和之前的沒有差別，只是現(xiàn)在依據(jù)配置會跳轉(zhuǎn)到index.html4客戶端環(huán)境配置在js文件夾中添加angular.min.js。5index.html頁面創(chuàng)建一個index.html文檔，下面的js代碼寫在index.html文檔中body的最后，因為流程的原因，先解釋下面的js。Scope(作用域)是應用在HTML(視圖)和JavaScript(控制器)之間的紐帶。Scope是一個對象，有可用的方法和屬性。當在控制器中為

$scope

對象添加屬性和方法時，視圖(HTML)可以獲取了這些屬性Scope(作用域)是應用在HTML(視圖)和JavaScript(控制器)之間的紐帶。Scope是一個對象，有可用的方法和屬性。當在控制器中為

$scope

對象添加屬性和方法時，視圖(HTML)可以獲取了這些屬性和方法。2、如果成功，將商品總條數(shù)賦值給scope對象的total屬性，將商品列表賦值給scope對象的productList屬性。1、頁面畫完后，執(zhí)行js代碼，請求selectAllProducts.do,拿回商品數(shù)據(jù)控制器使用下面兩句，向map中存入數(shù)據(jù)：map.put("total",pruductList.size());map.put("products",pruductList);這個map傳到瀏覽器是什么樣子？response.data又是什么？在瀏覽器調(diào)試下可以清楚看到，response.data.total就是存入的商品總數(shù)。展開products可以看到，它就是一個對象數(shù)組，數(shù)組的每個元素都是一個商品對象。下面兩句話，將商品條目存儲到作用域的total屬性中，將所有商品組成的對象數(shù)組存儲到作用域的productList屬性中。這兩個屬性可以直接綁定到html中并展示。$scope.total=response.data.total;//總條數(shù) $ductList=ducts;//所有商品下面來看index.html的頁面部分，頁面只有一個簡單的表格，對$ductList進行循環(huán)，每個商品對象畫一行。這個過程有點像JSTL，但是JSTL是JSP標簽庫，是在服務端執(zhí)行的，而下面的代碼都是在客戶端瀏覽器執(zhí)行的。1、引入jquery和angularjs，路徑以實際為準1、引入jquery和angularjs，路徑以實際為準3、ng-repeat指令表示循環(huán)，對productList進行循環(huán)，每次循環(huán)畫一行,productList就是$scope.productList，視圖里直接寫屬性名就可以2、為body添加ng-app指令，和ng-controller指令6、scope的total屬性值，在視圖里，不用寫$scope4、AngularJS表達式寫在雙大括號內(nèi)：{{expression}}。{{p.picture}}，picture是商品對象的屬性名，和實體類中的屬性名一致。3、ng-repeat指令表示循環(huán)，對productList進行循環(huán)，每次循環(huán)畫一行,productList就是$scope.productList，視圖里直接寫屬性名就可以2、為body添加ng-app指令，和ng-controller指令6、scope的total屬性值，在視圖里，不用寫$scope4、AngularJS表達式寫在雙大括號內(nèi)：{{expression}}。{{p.picture