6-8 店铺列表展示之前端开发

1、编写shoplist.html

	

		
商店列表
	
	

		

			

				你好,增加店铺
			
			

				
商店名称
				
状态
				
操作
			
			

		
		

			

				

					帐号绑定
				
				

					退出系统
				
				

					修改密码
				
			
		
	



	
	
	
	
			

2、编写shoplist.js

$(function(){
	getlist();
	function getlist(e) {
		$.ajax({
			url:"/o2oDemo/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);
	}
	function handleList(data) {
		var html = '';
		data.map(function(item, index) {
			html += '
'
					+ item.shopName + '
'
					+ shopStatus(item.enableStatus)
					+ '
'
					+ goShop(item.enableStatus, item.shopId) + '
';

		});
		$('.shop-wrap').html(html);
	}
	
	function shopStatus(status) {
		if(status == 0){
			return '审核中';
		} else if(status == -1){
			return '店铺非法';
		} else if (status == 1) {
			return '审核通过';
		}
	}
	function goShop(status,id) {
		if(status == 1){
			return '';
		} else {
			return '';
		}
	}
});

3、编写shoplist.css样式

.row-shop{
	border:1px solid #999;
	padding: .5em;
	border-bottom:none;
}
.row-shop:last-child{
	border-bottom:1px solid #999;
}
.shop-name{
	white-space:nowrap;
	overflow-x:scroll;
}
.shop-wrap a{
	
}

4、编写访问路由

@Controller
@RequestMapping(value="shopadmin",method= {RequestMethod.GET})
public class ShopAdminController {
	@RequestMapping(value="/shoplist")
	public String shopList() {
		return "shop/shoplist";
	}
}

即访问shopadmin/shoplist，返回shop/shoplist

5、访问

http://localhost:8080/o2oDemo/shopadmin/shoplist