【校园商铺SSM-32】店铺列表页面--View层的实现

文章目录

- - 1. shoplist.html
  - 2. shoplist.js
  - 3. shoplist.css
  - 4.common.js
  - 5. 添加前端路由
  - 6. 向数据库中添加店铺信息
  - 7. 测试

1. shoplist.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商店列表</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/o2o/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet"
	href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet"
	href="../resources/css/frontend/shoplist/shoplist.css">
</head>
<body>
	<div class="page-group">
		<div class="page">
			<header class="bar bar-nav">
				<a class="button button-link button-nav pull-left" external
					href="index" data-transition='slide-out'> <span
					class="icon icon-left"></span> 返回
				</a>
				<h1 class="title">商店列表</h1>
			</header>
			<div class="bar bar-header-secondary">
				<div class="searchbar">
					<a class="searchbar-cancel">取消</a>
					<div class="search-input">
						<label class="icon icon-search" for="search"></label> <input
							type="search" id='search' placeholder='输入关键字...' />
					</div>
				</div>
			</div>
			<nav class="bar bar-tab">
				<a class="tab-item" href="/o2o/frontend/index" external> <span
					class="icon icon-home"></span> <span class="tab-label">首页</span>
				</a> <a class="tab-item" href="#" id="me"> <span
					class="icon icon-me"></span> <span class="tab-label">我</span>
				</a>
			</nav>
			<div class="content infinite-scroll infinite-scroll-bottom"
				data-distance="100">
				<!-- 这里是页面内容区 -->
				<div class="shoplist-button-div" id="shoplist-search-div">
					<!-- <a href="#" class="button">所有货物</a>
                        <a href="#" class="button">吃的</a>
                        <a href="#" class="button">喝的</a>
                        <a href="#" class="button">Usual Button 1</a>
                        <a href="#" class="button">Usual Button 1</a>
                        <a href="#" class="button">Usual Button 1</a> -->
				</div>
				<div class="select-wrap">
					<select class="select" id="area-search"></select>
				</div>
				<div class="list-div shop-list">
					<!-- <div class="card">
                            <div class="card-header">传统火锅店</div>
                            <div class="card-content">
                                <div class="list-block media-list">
                                    <ul>
                                        <li class="item-content">
                                            <div class="item-media">
                                                <img src="http://gqianniu.alicdn.com/bao/uploaded/i4//tfscom/i3/TB10LfcHFXXXXXKXpXXXXXXXXXX_!!0-item_pic.jpg_250x250q60.jpg" width="44">
                                            </div>
                                            <div class="item-inner">
                                                <div class="item-subtitle"></div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                            <div class="card-footer">
                                <span>2015/01/15</span>
                                <span>5 评论</span>
                            </div>
                        </div> -->
				</div>
				<!-- 无极分页 -->
				<div class="infinite-scroll-preloader">
					<div class="preloader"></div>
				</div>
			</div>
		</div>
	</div>
	<!--侧边栏  -->
	<div class="panel-overlay"></div>
	<div class="panel panel-right panel-reveal" id="panel-left-demo">
		<div class="content-block">
			<p>
				<a href="/o2o/frontend/myrecord" class="close-panel">消费记录</a>
			</p>
			<p>
				<a href="/o2o/frontend/mypoint" class="close-panel">我的积分</a>
			</p>
			<p>
				<a href="/o2o/frontend/pointrecord" class="close-panel">积分兑换记录</a>
			</p>
			<!-- Click on link with "close-panel" class will close panel -->
		</div>
	</div>

	<script type='text/javascript'
		src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/common/common.js' charset='utf-8'></script>
	<script type='text/javascript'
		src='../resources/js/frontend/shoplist.js' charset='utf-8'></script>
</body>
</html>

2. shoplist.js

$(function () {
    getlist();
    function getlist() {
        $.ajax({
            url:"/o2o/shopadmin/getshoplist",
            type:"get",
            dataType:"json",
            success:function(data){
                if(data.success){
                    handleList(data.shopList);
                    handleUser(data.user);
                }
            }
        });
    }
    //显示用户名
    function handleUser(data) {
        $('#user-name').text(data.name);
    }
    //拼接list
    function handleList(data){
        var shopListHtml = '';
        data.map(function(item,index){
            shopListHtml += '<div class="row row-shop"><div class="col-40">'
                + item.shopName + '</div><div class="col-40">'
                + shopStatus(item.enableStatus)
                +'</div><div class="col-20">'
                + goShop(item.enableStatus,item.shopId)
                +'</div></div>'
        });
        $('.shop-wrap').html(shopListHtml);
    }

    //返回状态值，用文字来输出
    function shopStatus(status){
        if (status == 0 ) {
            return '审核中';
        } else if (status == 1) {
            return '审核通过';
        } else{
            return '店铺非法';
        }
    }

    // 进入到商铺的管理页面,请求/shopadmin/shopmanagement,进入到管理页面
    function goShop(status,shopId){
        if (status == 1 ) {
            return '<a href="/o2o/shopadmin/shopmanagement?shopId=' + shopId + '">进入</a>';
        }else{
            return '';
        }
    }
});

3. shoplist.css

.infinite-scroll-preloader {
    margin-top: -5px;
}
.shoplist-button-div {
    margin: 0 .3rem;
}
.shoplist-button-div > .button {
    width: 30%;
    height: 1.5rem;
    line-height: 1.5rem;
    display: inline-block;
    margin: 1%;
    overflow: hidden;
}
.select-wrap {
    margin: 0 .5rem;
}
.select {
    border: 1px solid #0894ec;
    color: #0894ec;
    background-color: #efeff4;
    width: 100%;
    height: 1.5rem;
    font-size: .7rem;
}

4.common.js

Date.prototype.Format = function(fmt) {
    var o = {
        "M+" : this.getMonth() + 1, // 月份
        "d+" : this.getDate(), // 日
        "h+" : this.getHours(), // 小时
        "m+" : this.getMinutes(), // 分
        "s+" : this.getSeconds(), // 秒
        "q+" : Math.floor((this.getMonth() + 3) / 3), // 季度
        "S" : this.getMilliseconds()
        // 毫秒
    };
    if (/(y+)/.test(fmt))
        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
            .substr(4 - RegExp.$1.length));
    for ( var k in o)
        if (new RegExp("(" + k + ")").test(fmt))
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k])
                : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
};

5. 添加前端路由

    @RequestMapping(value = "/shoplist", method = RequestMethod.GET)
    public String shopList() {
        return "frontend/shoplist";
    }

6. 向数据库中添加店铺信息

注意这里的店铺信息是通过代码生成的，不是手动添加的，刚开始生成的图片的路径左边缺少\，后面经过研究发现是PathUtil工具类的问题
在这里插入图片描述
先将缺少的\手工补上，再修改PathUtil工具类后生成店铺13，发现是正确的。

public class PathUtil {
    private static String seperator = System.getProperty("file.separator");
    public static String getImgBasePath() {
        String os =System.getProperty("os.name");
        String basePath = "";
        if(os.toLowerCase().startsWith("win")) {
            basePath = "F:/XiaoYuanShangPu/image";
        }else {
            basePath = "/home/o2o/image";
        }
        basePath = basePath.replace("/", seperator);
        return basePath;
    }
    public static String getShopImagePath(long shopId) {
        String imagePath = "/upload/item/shop/"+ shopId + "/";
        return imagePath.replace("/", seperator);
    }
}