mui與springMVC先後端分離

時間 2019-11-17

標籤 mui springmvc 後端分離欄目 Spring 简体版

原文原文鏈接

這個小dome簡單來講的先後端分離，經過跨域調用接口來顯示數據。javascript

前端用到mui框架，主要來顯示數據。css

後端用到Java的springMVC，restful服務來作增刪改查管理，html

這裏主要實現動態顯示商品，剩下那些數據都是寫固定的，不是動態的。前端

先看沒有數據的的樣子java

前端的商品顯示：jquery

後臺的管理：web

核心代碼ajax

package com.lch.kyu.Controller;


import com.lch.kyu.entity.Hungry;
import com.lch.kyu.service.HungryService;
import org.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(){}
}

View Code

注意：這裏xml配置跨域，這裏配置了跨域的端口號，前端那邊才正常能夠調用接口，要否則會報錯。這裏就舉例了springMVC跨域，其實還有幾個方法能夠實現的。spring

                        <!--配置跨域的端口號-->
    <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文件不配置端口號狀況，相信作先後端的分離的人都見過這種狀況json

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>
                   &nbsp; <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>