angularjs+springMvc學習筆記

回調

說白了,就是把函數當參數傳給另外一根函數,在另外一個函數執行時調用此函數
例如,在下面這段代碼中,上面定義了兩個函數success和error,下面的promise.then(success,error)方法請求成功執行success,失敗執行error
clipboard.pngphp

異步

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

clipboard.png

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

跨域CROS

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

按照需求進行改寫就好了sql

clipboard.png

創建數據表(後臺)

在thinkphp中,咱們經過navicatMysql數據庫工具創建數據表,而在spring中,則是經過新建類來創建數據表,對應關係以下
clipboard.pngthinkphp

teacher類對應表名,私有屬性對應表的各個字段數據庫

clipboard.png

而後創建接口來訪問和操做數據跨域

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

clipboard.png

官方推薦使用AUTO,可是因爲咱們的數據庫存在一些問題,只能使用IDENTITY來暫時解決app

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

ui-router的出現使得路由定製很是簡單易用,在安裝完ui-router後,改寫app.js
clipboard.png

接着,在V層添加ui-view標籤就能夠實現頁面的跳轉了

功能性開發(前臺)

1.定義路由對應的控制器(ui-router)
2.初始化控制器->yoman命令->yo angular.controller user 生成位置app/scripts/controller/user.js
3.數據綁定至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的開發更加規範,很容易作到代碼風格的統一和程序的易讀,能夠將更多的精力投放到功能的設計和實現上來

相關文章
相關標籤/搜索