1. 程式人生 > >angularjs+springMvc學習筆記

angularjs+springMvc學習筆記

回撥

說白了,就是把函式當引數傳給另一根函式,在另一個函式執行時呼叫此函式例如,在下面這段程式碼中,上面定義了兩個函式success和error,下面的promise.then(success,error)方法請求成功執行success,失敗執行errorclipboard.png

非同步

非同步的原理我看了網上的一些部落格和例子,大都以定時任務setTimeout, setInterval為例子說明,但具體的原理我還是不太明白,我只知道js非同步的執行順序和c/c++的不同例如,我把上面的success方法中的$scope.teachers = response.data寫到外面,即:

clipboard.png

按照c/c++的順序,當上面promise.then()語句執行完之後,才執行下面的賦值語句,可js的非同步處理會直接執行下面的賦值語句,如果在控制檯輸出teachers,會顯示undefined

跨域CROS

在前後臺對接時會發生跨域問題clipboard.png在spring官方文件有詳細的解決方案,如下圖clipboard.png

按照需求進行改寫就行了

clipboard.png

建立資料表(後臺)

在thinkphp中,我們通過navicatMysql資料庫工具建立資料表,而在spring中,則是通過新建類來建立資料表,對應關係如下clipboard.png

teacher類對應表名,私有屬性對應表的各個欄位

clipboard.png

然後建立介面來訪問和操作資料

這裡遇到一個小問題,在定義Teacher類時,設定主鍵自增

clipboard.png

官方推薦使用AUTO,但是由於我們的資料庫存在一些問題,只能使用IDENTITY來暫時解決

通過ui-router定製路由(前臺)

ui-router的出現使得路由定製非常簡單易用,在安裝完ui-router後,改寫app.jsclipboard.png

接著,在V層新增ui-view標籤就可以實現頁面的跳轉了

功能性開發(前臺)

1.定義路由對應的控制器(ui-router)2.初始化控制器->yoman命令->yo angular.controller user 生成位置app/scripts/controller/user.js3.資料繫結至V層(雙向繫結)4.功能開發

功能性開發(後臺)

後臺1.增加路由註解(1)指明方法(get,post,delete,put,patch)(2)指明地址(例如127.0.0.1:8080/Teacher)2.有cros設定的,增加cros設定

關於第一步,按照下面的寫法改寫就行clipboard.png

@Autowired 自動裝置介面例項化的物件@GetMapping使用的方法

總結

1.第一次接觸angularjs與springMVC前後臺分離開發的模式,感受到了它比thinkphp強大的原因,非常方便團隊分工開發2.使用註解的方式寫程式,就好像給程式註釋一樣,非常方便,而且易讀3.yoman的自動重新整理機制解放了每次寫前臺F5重新整理,在寫原型時相當方便,有了angularJs的雙向繫結,就再也不會出現thinkphp裡十幾行長的$this->assign()4.idea編譯器強大的功能省下很多用在程式規範的精力,alt+insert生成模板相當方便,出了錯打斷點debug可以很快可以發現問題5.總之,相比於thinkphp,angularJs+springMVC的開發更加規範,很容易做到程式碼風格的統一和程式的易讀,可以將更多的精力投放到功能的設計和實現上來