mui與springMVC前後端分離
阿新 • • 發佈：2018-07-17
reload ont 發送數據 nta out 修改 cell header print 
這個小dome簡單來說的前後端分離，通過跨域調用接口來顯示數據。
前端用到mui框架，主要來顯示數據。
後端用到Java的springMVC，restful服務來做增刪改查管理，
這裏主要實現動態顯示商品，剩下那些數據都是寫固定的，不是動態的。
先看沒有數據的的樣子
前端的商品顯示：
後臺的管理：
核心代碼
package com.lch.kyu.Controller; import com.lch.kyu.entity.Hungry; import com.lch.kyu.service.HungryService; importView Codeorg.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; @RestController @RequestMapping(path = "/hungry") public class HungryCo { @Autowired HungryService hungryService; //查詢 @RequestMapping(path = "", method = RequestMethod.GET)public AjaxState getAllHung() { List<Hungry> hungries=(hungryService.queryAllHungry()); for (Hungry h:hungries ) { System.out.println(h.getName()); } boolean result=hungries!=null; return new AjaxState(result?"success":"error",hungries,result?"獲得數據成功！":"獲得數據失敗!"); }//添加 @RequestMapping(path = "", method = RequestMethod.POST) public AjaxState addhungry(@RequestBody Hungry hungry) { boolean result=hungryService.addHungry(hungry); return new AjaxState(result?"success":"error",hungry,result?"添加成功！":"添加失敗"); } //修改 @RequestMapping(path = "", method = RequestMethod.PUT) public AjaxState updatehungry(@RequestBody Hungry hungry) { boolean result=hungryService.editHungry(hungry); return new AjaxState(result?"success":"error",hungry,result?"修改成功！":"修改失敗"); } //刪除 @RequestMapping(path = "/{id}", method = RequestMethod.DELETE) public AjaxState deleteHungryid(@PathVariable int id) { Boolean result=hungryService.deleteHungry(id); return new AjaxState(result?"success":"error",id,result?"刪除成功！":"刪除失敗"); } } class AjaxState{ public String state; public Object data; public String message; public AjaxState(String state, Object data, String message) { this.state = state; this.data = data; this.message = message; } public AjaxState(){} }
註意：這裏xml配置跨域，這裏配置了跨域的端口號，前端那邊才正常可以調用接口，要不然會報錯。這裏就舉例了springMVC跨域，其實還有幾個方法可以實現的。
<!--配置跨域的端口號--> <mvc:cors> <mvc:mapping path="/**" allowed-origins="http://127.0.0.1:8020,http://192.168.155.1:8020,http://192.168.2.105:8020,http://172.16.1.136:8020" allowed-methods="POST,GET, OPTIONS,DELETE,PUT" allowed-headers="Content-Type,ContentType,Access-Control-Allow-Headers, Authorization, X-Requested-With" allow-credentials="true"/> </mvc:cors>View Code
後臺xml文件不配置端口號情況，相信做前後端的分離的人都見過這種情況
mui前端的代碼，這裏用的模板引擎來渲染頁面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>分布式應用</title> <link href="css/mui.min.css" rel="stylesheet"/> <link rel="stylesheet" href="css/JavaScript.css" /> <style> </style> </head> <body> <div id="zui"> <header class="mui-bar mui-bar-nav mui-bar-nav-bg herder-color"> 全國 <a id="icon-menu" class="mui-action-back mui-pull-left"> </a> <a class="mui-action-back mui-icon mui-icon-home mui-pull-right mui-a-color color"></a> <h1 class="mui-title" id="mycss1"> <!--<input type="search" placeholder="輸入商戶名，產品名"> <span class="mui-icon mui-icon-search"></span>--> <div class="mui-input-row "> <input type="search" class="mui-input-clear" placeholder="輸入商戶名，產品名"> </div> </h1> </header> <ul class="mui-table-view" id="center"> <li class="mui-table-view-cell" id="tubiao"> <div class="tjie"> <div class="tu1"> <img src="img/tb1.jpg" width="44" height="44"/> <div>美食</div> </div> <div class="tu1"> <img src="img/tb2.jpg" width="44" height="44"/> <div>貓眼電影</div> </div> <div class="tu1"> <img src="img/tb3.jpg" width="44" height="44"/> <div>酒店</div> </div> <div class="tu1"> <img src="img/tb4.jpg" width="44" height="44"/> <div>休閑娛樂</div> </div> <div class="tu1"> <img src="img/tb5.jpg" width="44" height="44"/> <div>外賣</div> </div> </div> <div class="tjie"> <div class="tu1"> <img src="img/tb6.jpg" width="44" height="44"/> <div>火鍋</div> </div> <div class="tu1"> <img src="img/tb7.jpg" width="44" height="44"/> <div>麗人</div> </div> <div class="tu1"> <img src="img/tb8.jpg" width="44" height="44"/> <div>購物</div> </div> <div class="tu1"> <img src="img/tb9.jpg" width="44" height="44"/> <div>周邊遊</div> </div> <div class="tu1"> <img src="img/tb10.jpg" width="44" height="44"/> <div>KTV</div> </div> </div> </li> </ul> <div id="dayi"> <div class="dayi-o"> <div class="dayi-right"> <div class="tt">好禮天天送</div> <div class="ren">人人有獎領</div> </div> <div class="dayi-left"> <img src="img/tb11.jpg" width="55" height="55"/> </div> </div> <div class="dayi-o1"> <div class="dayi-right"> <div class="tt">100%中獎</div> <div class="ren1">送超豪華紅包</div> </div> <div class="dayi-left"> <img src="img/tb12.jpg" width="55" height="55"/> </div> </div> </div> <script src="js/jquery-1.11.3.min.js"></script> <script src="artTemplate3/template.js" type="text/javascript" charset="utf-8"></script> <script src="js/mui.min.js"></script> <ul class="mui-table-view" id="tab"> </ul> <script type="text/html" id="huns"> {{each list as pdt}} <li class="mui-table-view-cell mui-media"> <div class="bj"><img src="images/{{pdt.pic}}" class="da" ></div> <div class="name ">{{pdt.name}}</div> <div class="address mui-ellipsis">{{pdt.address}}</div> <div class="price">{{pdt.price | round:‘￥‘}}/<span class="meir">人</span> <span class="qian"> <del> 199 </del> </span> </div> <div class="volume">已售：{{pdt.volume}}</div> </li> {{/each}} </script> <div id="footer"> <nav class="mui-bar mui-bar-tab" id="foonter1"> <a class="mui-tab-item mui-active" href="#tabbar" id="xin"> <span class="mui-icon mui-icon-home"></span> <span class="mui-tab-label">首頁</span> </a> <a class="mui-tab-item" href="#tabbar-with-chat"> <span class="mui-icon mui-icon-email"><span class="mui-badge">88</span></span> <span class="mui-tab-label">添加</span> </a> <a class="mui-tab-item" href="#tabbar-with-contact"> <span class="mui-icon mui-icon-contact"><span class="mui-badge">12</span></span> <span class="mui-tab-label">我的</span> </a> <a class="mui-tab-item" href="#tabbar-with-map"> <span class="mui-icon mui-icon-gear"></span> <span class="mui-tab-label">設置</span> </a> </nav> </div> </div> <script type="text/javascript" charset="utf-8"> var app = { //http://192.168.7.193:8020 //http://192.168.155.1:8020 init: function() { //為模板引擎定義輔助函數 template.helper("round",function(value,mark){ return (mark||"")+Math.round(value); }); //為模板引擎定義輔助函數 this.query(); this.sha(); }, sha:function(){ $("#xin").click(function(){ /* location.href= location.reload();*/ location.reload(); }); }, query: function() { //192.168.155.1 $.ajax("http://172.16.1.136:8080/hungry",{ //type:請求方式 type:"get" , //服務器向客戶端發送數據的類型,如：text,json dataType:"Json" , success:function(data) { //alert(data); //console.log(data); $("#tab tr:not(:first)").remove(); // $(data.data).each(function(index,hungry) { // $("#tab").append("<tr align=‘center‘><td>"+hungry.id+"</td><td><img src=‘images/"+hungry.pic+"‘ class=‘da‘/></td><td>"+hungry.name+"</td><td>"+hungry.price+"</td><td>"+hungry.volume+"</td><td>"+hungry.address+"</td></tr>") ; // }); $("#tab").append(template("huns",{list:data.data})); } }); }, } app.init(); </script> </body> </html>View Code
後臺的頁面的頁面代碼
View Code
大概把學的重點的東西列出來了，寫了一次就加深自已的記憶。菜鳥筆記
mui與springMVC前後端分離