陳舊的開發模式

美工(ui工程師：出一個項目模型)

前端工程師做html頁面

java工程師：將原有的html轉成jsp，動態展示數據

前后端強依賴，后端必須要等前端的html做好才能套jsp。如果html發生變更，就更痛了，開發效率低

前后端分離

核心思想是前端html頁面通過ajax調用后端的restuful api接口并使用json數據進行交互。

前后端約定接口&數據&參數

在開發前約定數據交互的格式。

前后端并行開發(無強依賴，可前后端并行開發，如果需求變更，只要接口&參數不變，就不用兩邊都修改代碼，開發效率高)

美工：只管展示tree_data1.json

案例(easyui)

在同包的位置下創建一個js文件確定數據交互的格式，如下：

{"total":28,"rows":[

{"uid":"FI-SW-01","uname":"Koi","upwd":10.00,"status":"P","listprice":36.50,"attr1":"Large","itemid":"EST-1"},

{"uid":"K9-DL-01","uname":"Dalmation","upwd":12.00,"status":"P","listprice":18.50,"attr1":"Spotted Adult Female","itemid":"EST-10"},

{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":38.50,"attr1":"Venomless","itemid":"EST-11"},

{"uid":"RP-SN-01","uname":"Rattlesnake","upwd":12.00,"status":"P","listprice":26.50,"attr1":"Rattleless","itemid":"EST-12"},

{"uid":"RP-LI-02","uname":"Iguana","upwd":12.00,"status":"P","listprice":35.50,"attr1":"Green Adult","itemid":"EST-13"},

{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":158.50,"attr1":"Tailless","itemid":"EST-14"},

{"uid":"FL-DSH-01","uname":"Manx","upwd":12.00,"status":"P","listprice":83.50,"attr1":"With tail","itemid":"EST-15"},

{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":23.50,"attr1":"Adult Female","itemid":"EST-16"},

{"uid":"FL-DLH-02","uname":"Persian","upwd":12.00,"status":"P","listprice":89.50,"attr1":"Adult Male","itemid":"EST-17"},

{"uid":"AV-CB-01","uname":"Amazon Parrot","upwd":92.00,"status":"P","listprice":63.50,"attr1":"Adult Male","itemid":"EST-18"}

]}

前端代碼

jsp頁面：

人員信息維護管理界面

Dialog Content.

uid:

uname:

upwd:

保存

關閉

總結

以上是生活随笔為你收集整理的easyui框架前后端交互_easyui前后端分离的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。