angularjs+springMvc學(xué)習(xí)筆記

dreamGong 發(fā)布于2019-08-23 11:59 / 3535人閱讀

摘要：回調(diào)說白了，就是把函數(shù)當(dāng)參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時調(diào)用此函數(shù)例如，在下面這段代碼中，上面定義了兩個函數(shù)和，下面的方法請求成功執(zhí)行，失敗執(zhí)行異步異步的原理我看了網(wǎng)上的一些博客和例子，大都以定時任務(wù)為例子說明，但具體的原理我還是不太

回調(diào)

說白了，就是把函數(shù)當(dāng)參數(shù)傳給另一根函數(shù)，在另一個函數(shù)執(zhí)行時調(diào)用此函數(shù)
例如，在下面這段代碼中，上面定義了兩個函數(shù)success和error，下面的promise.then(success,error)方法請求成功執(zhí)行success，失敗執(zhí)行error

異步

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

按照c/c++的順序，當(dāng)上面promise.then()語句執(zhí)行完之后，才執(zhí)行下面的賦值語句，可js的異步處理會直接執(zhí)行下面的賦值語句，如果在控制臺輸出teachers，會顯示undefined

跨域CROS

在前后臺對接時會發(fā)生跨域問題

在spring官方文檔有詳細的解決方案，如下圖

按照需求進行改寫就行了

建立數(shù)據(jù)表（后臺）

在thinkphp中，我們通過navicatMysql數(shù)據(jù)庫工具建立數(shù)據(jù)表，而在spring中，則是通過新建類來建立數(shù)據(jù)表，對應(yīng)關(guān)系如下

teacher類對應(yīng)表名，私有屬性對應(yīng)表的各個字段

然后建立接口來訪問和操作數(shù)據(jù)

這里遇到一個小問題，在定義Teacher類時，設(shè)置主鍵自增

官方推薦使用AUTO，但是由于我們的數(shù)據(jù)庫存在一些問題，只能使用IDENTITY來暫時解決

通過ui-router定制路由（前臺）

ui-router的出現(xiàn)使得路由定制非常簡單易用，在安裝完ui-router后，改寫app.js

接著，在V層添加ui-view標(biāo)簽就可以實現(xiàn)頁面的跳轉(zhuǎn)了

功能性開發(fā)(前臺)

1.定義路由對應(yīng)的控制器(ui-router)
2.初始化控制器->yoman命令->yo angular.controller user 生成位置app/scripts/controller/user.js
3.數(shù)據(jù)綁定至V層(雙向綁定)
4.功能開發(fā)

功能性開發(fā)(后臺)

后臺
1.增加路由注解
（1）指明方法(get,post,delete,put,patch)
（2）指明地址（例如127.0.0.1:8080/Teacher）
2.有cros設(shè)置的，增加cros設(shè)置

關(guān)于第一步，按照下面的寫法改寫就行

@Autowired 自動裝置接口實例化的對象
@GetMapping使用的方法

總結(jié)

1.第一次接觸angularjs與springMVC前后臺分離開發(fā)的模式，感受到了它比thinkphp強大的原因，非常方便團隊分工開發(fā)
2.使用注解的方式寫程序，就好像給程序注釋一樣，非常方便，而且易讀
3.yoman的自動刷新機制解放了每次寫前臺F5刷新，在寫原型時相當(dāng)方便，有了angularJs的雙向綁定，就再也不會出現(xiàn)thinkphp里十幾行長的$this->assign()
4.idea編譯器強大的功能省下很多用在程序規(guī)范的精力，alt+insert生成模板相當(dāng)方便，出了錯打斷點debug可以很快可以發(fā)現(xiàn)問題
5.總之，相比于thinkphp,angularJs+springMVC的開發(fā)更加規(guī)范，很容易做到代碼風(fēng)格的統(tǒng)一和程序的易讀，可以將更多的精力投放到功能的設(shè)計和實現(xiàn)上來