my大衆點評做業思路實現：app+跨域+模板引擎+artDialog彈出層+ajax基本增刪改查的使用

時間  2019-11-17
標籤 大衆 點評 思路 實現 app 模板 引擎 artdialog 彈出 ajax 基本 增刪 使用 欄目 Ajax 简体版
原文   原文鏈接

8、做業

8.一、請完成一個簡單的分佈式應用，使用Java做爲服務器對外發布服務，PC客戶端實現「品牌或商品」的管理，移動端實現以下列表：javascript

  • a)、分析出數據庫的設計，建庫、建表 (MySQL)
  • b)、建立後臺項目，實現5個服務，可使用RETSFul (IDEA)
  • c)、建立PC Web項目（HBuilder）,使用AJAX消費後臺提供的5個服務 ，完成增長、刪除、修改、查詢功能
  • d)、建立App項目（HBuilder）,先完成頁面的靜態佈局，使用AJAX調用服務
  • e)、注意跨域、能夠選擇三方的UI框架，但界面需徹底同樣
  • f)、在PC Web中，添加，刪除，編輯、詳細功能請使用artDialog彈出層
  • g)、在PC Web與App中請使用artTemplate渲染頁面HTML

系統結構以下：css

 參考網站：https://m.dianping.com/html

 

 

  • a)、分析出數據庫的設計，建庫、建表 (MySQL)
  • b)、建立後臺項目，實現5個服務，可使用RETSFul (IDEA)
  1. 使用idea新建maven項目
  2. 右鍵變爲web項目
  3. 在pom.xml文件中導入相關的依賴包，並在構建中把依賴包放在lib文件夾裏面：

  4. 添加spring資源文件java

     

     

  5. 在web.xml文件中添加相關的配置springmvc DispatcherServlet（中心控制器）

  6. 開始寫相關的後臺代碼jquery

     

  7.  總index.html代碼實現與後臺效果展現web

    <%--
  Created by IntelliJ IDEA.
  User: Sunny.by
  Date: 2017/12/14
  Time: 20:07
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>大衆點評</title>
</head>
<link rel="stylesheet" type="text/css" href="js/artDialog6/ui-dialog.css" />
<style type="text/css">
  .dialog {
    width: 350px;
    height: 250px;
    margin: auto auto;
    line-height: 12px;
    display: none;
  }
  .dialog p {
    text-indent: 2em;
  }

  #addForm,#formEmps {
    display: none;
  }
  .pic {
    width: 50px;
    height: 50px;
  }

</style>
<body>
<table id="tab" border="1" cellspacing="1" cellpadding="1" width="90%" align="center">
  <tr style="height: 40px;">
    <th>編號</th>
    <th>圖片</th>
    <th>標題</th>
    <th>地區</th>
    <th>類別</th>
    <th>現價</th>
    <th>條數</th>
    <th>瀏覽量</th>
    <th>操做<button onclick="addBtn()" style="float: right;background: cornflowerblue;width: 55px;height: 33px;">添加</button></th>
  </tr>
  <tbody id="tbody"></tbody>
</table>


<%--彈窗-遍歷全部（查詢）：多個遍歷模板引擎開始--%>
<script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/artDialog6/dialog-min.js" type="text/javascript" charset="utf-8"></script>
<%--模板引擎：與AJAX結合應用--%>
<script src="js/artTemplate3/template.js" type="text/javascript" charset="utf-8"></script>
<script type="text/html" id="querytmp">
  {{each shoplist as shop}}
  <tr align="center">
    <td>{{shop.id}}</td>
    <td><img src="images/{{shop.img}}" class="pic"></td>
    <td>{{shop.title}}</td>
    <td>{{shop.area}}</td>
    <td>{{shop.discountText}}</td>
    <td>{{shop.priceNew | round:'￥'}}</td>
    <td>{{shop.priceOld | round:'￥'}}</td>
    <td>{{shop.boughtCound}}</td>
    <td>
      <button onclick='del("{{shop.id}}")'>刪除</button> <button onclick='exit("{{shop.id}}")'>修改</button> <button onclick='xiangqing("{{shop.id}}")'>詳情</button>
    </td>
  </tr>
  {{/each}}
</script>
<%--彈窗-遍歷全部（查詢）：多個遍歷模板引擎結束--%>

<%--彈窗-詳情：單個模板引擎開始--%>
<script type="text/html" id="xiangqingtmp">
      <form class="dialog">
      <p>
        <label>圖片：</label>
        <span id="eimg"><img src="images/{{img}}" class="pic"></span>
      </p>
      <p>
        <label>商品編號：</label>
        <span id="eid">{{id}}</span>
      </p>
      <p>
        <label>標題：</label>
        <span id="etitle">{{title}}</span>
      </p>
      <p>
        <label>地區：</label>
        <span id="earea">{{area}}</span>
      </p>
      <p>
        <label>現價：</label>
        <span id="epriceNew">{{priceNew | round:'￥'}}</span>
      </p>
      <p align="right" style="margin-right: 2em;"><button style="background: cornflowerblue;width: 55px;height: 33px;" onclick="sure()">確認</button></p>
  </form>
</script>
<%--彈窗-詳情：單個模板引擎結束--%>


<%--修改模板引擎開始--%>
<script type="text/html" id="xiugaitpm">
  <form id="formEmps">
      <p>
        <label for="id">編號：</label>
        <input name="id" id="xid" type="text" value="{{id}}" required="required" maxlength="32"/>
      </p>
      <p>
        <label for="img">圖片：</label>
        <input name="img" id="ximg" value="{{img}}" required="required" maxlength="8"/>
      </p>
      <p>
        <label for="title">標題：</label>
        <input name="title" id="xtitle" value="{{title}}" type="text" required="required" maxlength="128"/>
      </p>
      <p>
        <label for="area">地區：</label>
        <input name="area" id="xarea" value="{{area}}" type="text" required="required" maxlength="11"/>
      </p>
      <p>
        <label for="priceNew">現價：</label>
        <input name="priceNew" id="xpriceNew" value="{{priceNew}}" type="text" required="required" maxlength="11"/>
      </p>
      <p>
        <button type="button" onclick="update()" style="width: 100%; height:40px; background: cornflowerblue;">保存</button>
      </p>
  </form>
</script>
<%--修改模板引擎結束--%>

<%--添加彈窗開始--%>
<form id="addForm">
    <p>
      <label for="img">圖片：</label>
      <input name="img" id="img" value="" required="required" maxlength="8"/>
    </p>
    <p>
      <label for="id">編號：</label>
      <input name="id" id="id" type="text" value="" required="required" maxlength="32"/>
    </p>
    <p>
      <label for="title">標題：</label>
      <input name="title" id="title" value="" type="text" required="required" maxlength="128"/>
    </p>
    <p>
      <label for="area">地區：</label>
      <input name="area" id="area" value="" type="text" required="required" maxlength="11"/>
    </p>
    <p>
      <label for="discountText">類別：</label>
      <input name="discountText" id="discountText" value="" type="text" required="required" maxlength="11"/>
    </p>
    <p>
      <label for="priceNew">現價：</label>
      <input name="priceNew" id="priceNew" value="" type="text" required="required" maxlength="11"/>
    </p>
    <p>
      <button type="button" onclick="add()" style="width: 100%; height:40px; background: cornflowerblue;">添加</button>
    </p>
</form>
<%--添加彈窗結束--%>

<script type="text/javascript">
    /*方法封裝*/
    var shop = {
        url:"http://localhost:8080/shop/",
        init: function() {
            $.ajax({
                url:shop.url,
                type: "get",
                success: function(data) {
                    $("#tab tr:gt(0)").remove();
                    /*$(data.data).each(function(i,h){
                        $("#tab").append("<tr><td>"+h.boughtCound+"</td></tr>");
                        console.log(h.boughtCound);
                    });*/
                    $("#tab").append(template("querytmp",{shoplist:data.data}));
                }
            });
            //爲模板引擎定義輔助函數
            template.helper("round",function(value,mark){
                return (mark||"")+Math.round(value);
            });
        },

        xiangqing: function(id){
            //數據需從後臺遍歷
            $.ajax({
                url:shop.url+id,
                type: "get",
                success: function(data) {
                    //console.log("現價："+data.priceNew+",圖片："+data.img+",瀏覽量："+data.boughtCound);
                    $("body").append(template("xiangqingtmp",data.data));

                    /*彈窗*/
                    var d = dialog({
                        title: '店鋪詳情信息',
                        content: $(".dialog"),
                        backdropOpacity:0.3
                    });
                    d.showModal();
                }
            });
        },

        del: function(i) {
            var delflag = confirm("您真的要刪除嗎？");
            if(delflag){
                $.ajax({
                    url:shop.url+i,
                    type:"delete",
                    success:function(){
                        alert("刪除成功");
                        shop.init();
                    }
                });
            }
        },

        exit: function(i){
            $.ajax({
                url:shop.url+i,
                type: "get",
                success: function(data) {
                    //console.log("現價："+data.priceNew+",圖片："+data.img+",瀏覽量："+data.boughtCound);
                    $("body").append(template("xiugaitpm",data.data));
                    /*彈窗*/
                    var d = dialog({
                        title: '修改店鋪信息',
                        content: $("#formEmps"),
                        backdropOpacity:0.3
                    });
                    d.showModal();
                }
            });
        },
        getUpdataShop: function () {
            return {
                "id": $("#xid").val(),
                "img": $("#ximg").val(),
                "title": $("#xtitle").val(),
                "area": $("#xarea").val(),
                "discountText": $("#xdiscountText").val(),
                "priceNew": $("#xpriceNew").val(),
                "priceOld": $("#xpriceOld").val(),
                "boughtCound": $("#xboughtCound").val()
            };
        },
        update: function(){
            $.ajax({
                url:shop.url,
                type:"put",
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify(shop.getUpdataShop()),
                dataType: "json",
                success: function(data) {
                    alert("修改爲功");
                    shop.init();
                }
            });
        },

        getAddShop: function () {
            return {
                "id": $("#id").val(),
                "img": $("#img").val(),
                "title": $("#title").val(),
                "area": $("#area").val(),
                "discountText": $("#discountText").val(),
                "priceNew": $("#priceNew").val(),
                "priceOld": $("#priceOld").val(),
                "boughtCound": $("#boughtCound").val()
            };
        },
        add: function() {
            $.ajax({
                url:shop.url,
                type:"post",
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify(shop.getAddShop()),
                dataType: "json"
            });
            shop.init();
        }
    }

    /*方法調用*/
    shop.init();

    function xiangqing(i){
        shop.xiangqing(i);
    }

    /*對話框:關閉*/
    function sure(){
        document.getElementById("dialog").style.display="none";
    }

    function del(i){
        shop.del(i);
    }

    function exit(i){
        shop.exit(i);
    }

    function update(){
        shop.update();
    }

    function  addBtn() {
        /*彈窗*/
        var d = dialog({
            title: '添加店鋪信息',
            content: $("#addForm"),
            backdropOpacity:0.3
        });
        d.showModal();
    }
    function add(){
        shop.add();
    }
</script>
</body>
</html>

    查詢全部效果圖ajax

    詳情彈窗效果圖spring

    修改彈窗效果圖；添加彈窗效果圖數據庫

  8. 建立App項目（HBuilder）,先完成頁面的靜態佈局，使用AJAX調用服務；app代碼實現 
    <!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" />
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <!--標準mui.css-->
        <link rel="stylesheet" href="css/mui.min.css">
        <link rel="stylesheet" type="text/css" href="js/artDialog6/ui-dialog.css" />
        <!--App自定義的css-->
        <link rel="stylesheet" type="text/css" href="css/app.css"/>
        <title>大衆App</title>
        
        <style>
            .title{
                margin: 20px 15px 10px;
                color: #6d6d72;
                font-size: 15px;
            }
            
            .oa-contact-cell.mui-table .mui-table-cell {
                padding: 11px 0;
                vertical-align: middle;
            }
            
            .oa-contact-cell {
                position: relative;
                margin: -11px 0;
            }
    
            .oa-contact-avatar {
                width: 75px;
            }
            .oa-contact-avatar img {
                border-radius: 50%;
            }
            .oa-contact-content {
                width: 100%;
            }
            .oa-contact-name {
                margin-right: 20px;
            }
            .oa-contact-name, oa-contact-position {
                float: left;
            }
            
            
            /*首頁:*/
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            
            body {
                    font-family: Hiragino Sans GB,Arial,Helvetica,\\5B8B\4F53,sans-serif;
                    font-size: 14px;
            }
            
            #top01 {
                width: 100%;
                height: 50px;
                background: #f63;
                text-align: center;
                line-height: 50px;
            }
            
            #top01 span {
                color: #FFFFFF;
                font-size: 14px;
                text-align: center;
            }
            
            .topWeizi {
                height: 100%;
                display: inline-block;
            }
            
            #top01 #top01_left{
                padding-left: 10px;
                width: 15%;
                /*background: #2AC845;*/
                float: left;
            }
            
            #top01 #top01_right {
                width: 10%;
                /*background: orchid;*/
                float: right;
            }
            #top01 #top01_right span {
                font-size: 32px;
            }
            
            #top01 #search {
                width: 75%;
                float: left;
                /*background: blue;*/
            }
            #top01 #search input {
                width: 100%;
                height: 30px;
                background: #FFFFFF;
                border-radius: 20px;
            }
            
            
            #nav01 {
                width: 100%;
                height: 195px;
                background: #FFFFFF;
            }
            
            #nav01 .nav01_inner {
                width: 98%;
                height: 100%;
                margin: 0 auto;
            }
            
            #nav01 .nav01_cls {
                width: 20%;
                height: 87px;
                float: left;
                text-align: center;
                padding-top: 10px;
            }
            
            #nav01 .nav01_inner img {
                width: 44px;
                height: 44px;
            }
            #nav01 .nav01_inner span {
                display: block;
            }
            
            #guanggao01 {
                width: 100%;
                height: 280px;
                background: #FFFFFF;
                margin: 30px 0 ;
            }
            
            #guanggao01 img {
                width: 100%;
                height: 100%;
            }
            

            .img_cls  {
                width: 90px;
                height: 90px;
                float: left;
            }
            
            .context_cls {
                /*background: palevioletred;*/
                float: left;
                padding-left: 20px;
            }
            
            .context_cls div {
                color: gray;
                font-size: 14px;
                line-height: 20px;
            }
            
            .xiaoshouliang {
                float: right;
                margin-left: 15px;
            }
            
            .fontcolor {
                color: #f63;
                font-size: 15px;
            }
        </style>
    </head>

    <body>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active" href="#tabbar">
                <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">9</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>
                <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 class="mui-content">
            <div id="tabbar" class="mui-control-content mui-active">
                <header id="top01">
                    <div class="topWeizi" id="top01_left">
                        <span>
                            珠海
                            <span class="mui-icon mui-icon-arrowdown"></span>
                        </span>
                    </div>
                    <div class="topWeizi" id="search">
                        <input type="text" name="sousuo" id="sousuo" value="" placeholder="輸入商戶名.地點"/>
                    </div>
                    <div class="topWeizi" id="top01_right">
                        <span class="mui-icon mui-icon-contact"></span>
                    </div>
                </header>
                <nav id="nav01">
                    <div class="nav01_inner">
                        <div class="nav01_cls">
                            <img src="images/nav01.png"/>
                            <span id="">
                                美食
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav02.png"/>
                            <span id="">
                                貓眼電影
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav03.png"/>
                            <span id="">
                                酒店
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav04.png"/>
                            <span id="">
                                休閒娛樂
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav05.png"/>
                            <span id="">
                                外賣
                            </span>
                        </div>
                        
                        
                        <div class="nav01_cls">
                            <img src="images/nav06.png"/>
                            <span id="">
                                火鍋
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav07.png"/>
                            <span id="">
                                麗人
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav08.png"/>
                            <span id="">
                                購物
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav09.png"/>
                            <span id="">
                                周邊遊
                            </span>
                        </div>
                        <div class="nav01_cls">
                            <img src="images/nav10.png"/>
                            <span id="">
                                KTV
                            </span>
                        </div>
                    </div>
                </nav>
                
                <div id="guanggao01">
                    <img src="images/guanggao01.png"/>
                </div>
                <!--<div id="section"></div>-->
                <ul class="mui-table-view" id="section"></ul>
                  <script type="text/html" id="querytmp">
                      {{each shoplist as pdt}}
                        <li class="mui-table-view-cell mui-media">
                               <div><img src="images/{{pdt.img}}" class="img_cls"></div><br />
                               <div class="context_cls">
                                       <div><h4>{{pdt.title}}</h4></div>
                                       <div>{{pdt.area}}</div>
                                       <div><span class="fontcolor">{{pdt.priceNew | round:'￥'}}/人</span>
                                           <span>
                                            <del>
                                                {{pdt.priceOld | round:'￥'}}
                                            </del>
                                        </span>
                                        <span class="xiaoshouliang">
                                            銷售量：{{pdt.boughtCound}}
                                        </span>
                                       </div>
                               </div>
                        </li>
                      {{/each}}
                   </script>
            </div>
            <div id="tabbar-with-chat" class="mui-control-content">
                <div class="title">這是div模式選項卡中的第2個子頁面，該頁面展現一個消息列表</div>
            </div>
            <div id="tabbar-with-contact" class="mui-control-content">
                <div class="title">這是div模式選項卡中的第3個子頁面，該頁面展現一個通信錄示例.</div>
            </div>
            <div id="tabbar-with-map" class="mui-control-content">
                <div class="title">這是div模式選項卡中的第4個子頁面，該頁面展現一個常見的設置示例.</div>
            </div>
        </div>
    </body>
    <script src="js/mui.min.js"></script>
    <!--/*彈窗*/-->
    <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/artDialog6/dialog-min.js" type="text/javascript" charset="utf-8"></script>
    <!--模板引擎：與AJAX結合應用-->
    <script src="js/artTemplate3/template.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        mui.init({
            swipeBack:true //啓用右滑關閉功能
        });
        
        //http://192.168.191.1:8020/kayumuiHW/index.html?__hbt=1513661899526
        
        var shop = {
            url:"http://192.168.191.1:8080/shop/",
            init: function() {
                $.ajax({
                    url:shop.url,
                    type: "get",
                    success: function(data) {
                           //console.log(data.data.length);
                        $("#section").html(template("querytmp",{shoplist:data.data}));
                    }
                });
                //爲模板引擎定義輔助函數
                template.helper("round",function(value,mark){
                    return (mark||"")+Math.round(value);
                });
            }
        }
    
        /*方法調用*/
        shop.init();
          
    </script>
    <script type="text/javascript" src="js/clientWith.js"></script>
</html>

    重點代碼，跨域請求：1.在web項目中的sping資源文件中加入代碼json

    <mvc:cors>
        <mvc:mapping path="/**"
                     allowed-origins="http://127.0.0.1:8020,http://192.168.191.1: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>

    注意的是要加上http://192.168.191.1:8020（本機地址：doc命令，輸入ifconfig）；在app頁面中跨域，並同步借用到模板引擎

  9. <!--模板引擎需導入的JavaScript-->
        <script src="js/artTemplate3/template.js" type="text/javascript" charset="utf-8"></script>



<!--artDialog彈出層（彈框）需導入的JavaScript-->
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/artDialog6/dialog-min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="js/artDialog6/ui-dialog.css" />

    拓展：

    模板引擎使用案例
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>artTemplate</title>
    </head>
    <body>
        <div id="result">
        </div>
        
        <!--模板引擎需導入的JavaScript-->
        <script src="js/artTemplate3/template.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/html" id="template1">
            {{if isShow}}
              <h2>姓名：{{name}}</h2>
              <ul>
              {{each hobbies as hobby index}}
                 <li>
                     {{index+1}} {{hobby}}
                 </li>
              {{/each}}
              </ul>
            {{/if}}
        </script>
        <script type="text/javascript">
            var data={
                isShow:true,
                name:"Tom",
                hobbies:["看書","上網","運動","電影","購物"]
            };
            //用數據與模板渲染(render)出結果
            var html=template("template1",data);
            document.getElementById("result").innerHTML=html;
        </script>
    </body>
</html>
    artDialog彈出層（彈框）使用案例
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>artDialog</title>
    </head>
    <body>
        <button onclick="btn_dialog()">
            彈出框
        </button>
        <button onclick="btn_loading()">
            加載中
        </button>
        <!--artDialog彈出層（彈框）需導入的JavaScript-->
        <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/artDialog6/dialog-min.js" type="text/javascript" charset="utf-8"></script>
        <link rel="stylesheet" type="text/css" href="js/artDialog6/ui-dialog.css" />
        <script type="text/javascript">
            function btn_dialog() {
                var d = dialog({
                    title: '消息',
                    content: '風吹起的青色衣衫，夕陽裏的溫暖容顏，你比之前更加美麗，像怒放的花<br>——許巍《難忘的一天》',
                    okValue: '確 定',
                    ok: function() {
                        var that = this;
                        setTimeout(function() {
                            that.title('提交中..');
                        }, 2000);
                        return false;
                    },
                    cancelValue: '取消',
                    cancel: function() {
                        alert('你點了取消按鈕')
                    }
                });

                d.show();
            }
            
            function btn_loading(){
                dialog({
                    modal:true
                }).show();
            }
        </script>
    </body>

</html>

     

  10. 其餘（ajax的使用）：在後臺web的index.html中調用ajax（只有添加和修改能夠不傳數據，直接封裝一個get對象的方法傳事後臺，但要注意的是須要轉爲json數據），即必須添加 
    contentType: "application/json;charset=utf-8",
    data:JSON.stringify(shop.getAddShop()),
    dataType: "json"
    var shop = {
        url:"http://localhost:8080/shop/",
        init: function() {
            $.ajax({
                url:shop.url,
                type: "get",
                success: function(data) {
                    $("#tab tr:gt(0)").remove();
                    /*$(data.data).each(function(i,h){
                        $("#tab").append("<tr><td>"+h.boughtCound+"</td></tr>");
                        console.log(h.boughtCound);
                    });*/
                    $("#tab").append(template("querytmp",{shoplist:data.data}));
                }
            });
            //爲模板引擎定義輔助函數
            template.helper("round",function(value,mark){
                return (mark||"")+Math.round(value);
            });
        },

        xiangqing: function(id){
            //數據需從後臺遍歷
            $.ajax({
                url:shop.url+id,
                type: "get",
                success: function(data) {
                    //console.log("現價："+data.priceNew+",圖片："+data.img+",瀏覽量："+data.boughtCound);
                    $("body").append(template("xiangqingtmp",data.data));

                    /*彈窗*/
                    var d = dialog({
                        title: '店鋪詳情信息',
                        content: $(".dialog"),
                        backdropOpacity:0.3
                    });
                    d.showModal();
                }
            });
        },

        del: function(i) {
            var delflag = confirm("您真的要刪除嗎？");
            if(delflag){
                $.ajax({
                    url:shop.url+i,
                    type:"delete",
                    success:function(){
                        alert("刪除成功");
                        shop.init();
                    }
                });
            }
        },

        exit: function(i){
            $.ajax({
                url:shop.url+i,
                type: "get",
                success: function(data) {
                    //console.log("現價："+data.priceNew+",圖片："+data.img+",瀏覽量："+data.boughtCound);
                    $("body").append(template("xiugaitpm",data.data));
                    /*彈窗*/
                    var d = dialog({
                        title: '修改店鋪信息',
                        content: $("#formEmps"),
                        backdropOpacity:0.3
                    });
                    d.showModal();
                }
            });
        },
        getUpdataShop: function () {
            return {
                "id": $("#xid").val(),
                "img": $("#ximg").val(),
                "title": $("#xtitle").val(),
                "area": $("#xarea").val(),
                "discountText": $("#xdiscountText").val(),
                "priceNew": $("#xpriceNew").val(),
                "priceOld": $("#xpriceOld").val(),
                "boughtCound": $("#xboughtCound").val()
            };
        },
        update: function(){
            $.ajax({
                url:shop.url,
                type:"put",
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify(shop.getUpdataShop()),
                dataType: "json",
                success: function(data) {
                    alert("修改爲功");
                    shop.init();
                }
            });
        },

        getAddShop: function () {
            return {
                "id": $("#id").val(),
                "img": $("#img").val(),
                "title": $("#title").val(),
                "area": $("#area").val(),
                "discountText": $("#discountText").val(),
                "priceNew": $("#priceNew").val(),
                "priceOld": $("#priceOld").val(),
                "boughtCound": $("#boughtCound").val()
            };
        },
        add: function() {
            $.ajax({
                url:shop.url,
                type:"post",
                contentType: "application/json;charset=utf-8",
                data:JSON.stringify(shop.getAddShop()),
                dataType: "json"
            });
            shop.init();
        }
    }


    手機端app訪問地址http://192.168.191.1:8020/kayumuiHW/index.html?__hbt=1513661899526

    1. 手機項目生成手機app安裝包步驟：
    2. 項目的

    4.  

    5.  

    6.  

       

    7.  

    8.  

    9.  

    10.  

      最後，把安裝包發送下載到手機便可

       

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程