我们想要查看商铺拥有者的所有商铺并且进行修改等，我们需要前端传来的信息来查看商铺拥有者的id以此为依据来查看此人拥有的所有商铺，并且在所有商铺显示列表有修改按钮，因为可能查出很多店铺，所以牵扯到分页问题我们也要考虑进去分页的问题
如图
接下来实现dao层：
我们通过一个userid来查询此人的店铺。
接下来实现mapper.xml
查询店铺信息：
<!--查询shop的信息，通过shopId，因为还要查出来shop的categoryName等信息，我们用resultMap-->
<resultMap id="shopMap" type="shop">
<!--基本类型查询-->
<id column="shop_id" property="shopId" />
<result column="shop_name" property="shopName"/>
<result column="shop_desc" property="shopDesc"/>
<result column="shop_addr" property="shopAddr"/>
<result column="phone" property="phone"/>
<result column="shop_img" property="shopImg"/>
<result column="priority" property="priority"/>
<result column="create_time" property="createTime"/>
<result column="last_edit_time" property="lastEditTime"/>
<result column="enable_status" property="enableStatus"/>
<result column="advice" property="advice"/>
<!--复合对象-->
<association property="owner" column="user_id" javaType="personinfo">
<id column="user_id" property="userId"></id>
<result column="name" property="name"></result>
</association>
<association property="area" column="area_id" javaType="area">
<id column="area_id" property="areaId"></id>
<result column="area_name" property="areaName"></result>
</association>
<association property="shopCategory" column="shop_categoryId" javaType="shopCategory">
<id column="shop_category_id" property="shopCategoryId"></id>
<result column="shop_category_name" property="shopCategoryName"></result>
</association>
</resultMap>
<!--分页查询店铺列表 ，可选条件有店铺名，店铺状态，店铺类别，区域id，owner-->
<select id="queryShopList" resultMap="shopMap" >
SELECT
s.shop_id,
s.shop_name,
s.shop_desc,
s.shop_addr,
s.phone,
s.shop_img,
s.priority,
s.create_time,
s.last_edit_time,
s.enable_status,
s.advice,
a.area_id,
a.area_name,
sc.shop_category_id,
sc.shop_category_name
FROM
tb_shop s,
tb_area a,
tb_shop_category sc
<where>
<if test="shopCondition.shopCategory!=null and shopCondition.shopCategory.shopCategoryId!=null">
and s.shop_category_id=#{shopCondition.shopCategory.shopCategoryId}
</if>
<if test="shopCondition.area!=null and shopCondition.area.areaId!=null">
and s.area_id=#{shopCondition.area.areaId}
</if>
<if test="shopCondition.shopName!=null">
and s.shop_name like '%${shopCondition.shopName}%'
</if>
<if test="shopCondition.enableStatus!=null">
and s.enable_status=#{shopCondition.enableStatus}
</if>
<if test="shopCondition.owner!=null and shopCondition.owner.userId!=null">
and s.owner_id=#{shopCondition.owner.userId}
</if>
AND s.area_id=a.area_id
AND s.shop_category_id=sc.shop_category_id
</where>
ORDER BY
s.priority
DESC
limit #{rowIndex},#{pageSize};
</select>
查询总数：
<!--条件查询出的总数-->
<select id="queryShopCount" resultType="Integer">
SELECT
count(1)
FROM
tb_shop s,
tb_area a,
tb_shop_category sc
<where>
<if test="shopCondition.shopCategory!=null and shopCondition.shopCategory.shopCategoryId!=null">
and s.shop_category_id=#{shopCondition.shopCategory.shopCategoryId}
</if>
<if test="shopCondition.area!=null and shopCondition.area.areaId!=null">
and s.area_id=#{shopCondition.area.areaId}
</if>
<if test="shopCondition.shopName!=null">
and s.shop_name like '%${shopCondition.shopName}%'
</if>
<if test="shopCondition.enableStatus!=null">
and s.enable_status=#{shopCondition.enableStatus}
</if>
<if test="shopCondition.owner!=null and shopCondition.owner.userId!=null">
and s.owner_id=#{shopCondition.owner.userId}
</if>
AND s.area_id=a.area_id
AND s.shop_category_id=sc.shop_category_id
</where>
</select>
我们看到select语句有许多</if>代码块，这用来使用不同条件组合查询使用。
Service层：
serviceimpl：
/*
* 根据页数和显示数量和shop条件得到shoplist的信息和count
* */
@Override
public ShopExecution getShopList(Shop shopCondition, int pageIndex, int pageSize) {
//先通过每页容纳的数量和页数将pageIndex转为rowIndex
int rowIndex= Pagecalculator.calculateRowIndex(pageIndex,pageSize);
//返回shop的list集合
List<Shop> shopList=shopDao.queryShopList(shopCondition,rowIndex,pageSize);
//计算符合条件的总记录数
int count=shopDao.queryShopCount(shopCondition);
//建立存储对象
ShopExecution shopExecution=new ShopExecution();
if(shopList!=null){
shopExecution.setShopList(shopList);
shopExecution.setCount(count);
}else {
shopExecution.setState(ShopStateEnum.INNER_ERROR.getState());
}
return shopExecution; //成功返回存储shop集合的shopExecution
}
这里没什么说的，当我们成功操作时，把相应的shopList和count存入shopExceution交出去，主要说的是这个方法
//先通过每页容纳的数量和页数将pageIndex转为rowIndex
int rowIndex= Pagecalculator.calculateRowIndex(pageIndex,pageSize);
想象下，前端都是显示的第几页，而后端显示的是第几条数据开始，所以我们需要将前端的数据的页数改为数据库中的第几行dao层才能操作，我们实现一个具体转换工具类。
我们要实现两个部分。
第一个部分是显示出商铺列表。
/*
* 通过owner查询条件返回当前用户拥有商铺列表
* */
@RequestMapping(value = "/getshoplist",method = RequestMethod.GET)
@ResponseBody
private Map<String, Object> getShopList(HttpServletRequest request) throws JsonProcessingException
{
Map<String,Object> modelMap=new HashMap<String,Object>();
PersonInfo user=new PersonInfo();
user.setUserId(1L);//先自己手动设置
user.setName("test");//返回名字，方便前台显示
request.getSession().setAttribute("user",user);//先手动设置默认值
user= (PersonInfo) request.getSession().getAttribute("user");//前面是先手动配置，目前功能未完善
try{
Shop shop=new Shop();
shop.setOwner(user);
ShopExecution shopExecution=shopService.getShopList(shop,0,100);//手动设置输出100个店铺
modelMap.put("shopList",shopExecution.getShopList());
modelMap.put("user",user);
modelMap.put("success",true);
}catch (Exception e){
modelMap.put("success",false);
modelMap.put("errMsg",e.getMessage());
}
return modelMap;//返回正确信息
}
进入
当我们点击进入时：
出现这样的页面：
然后：
点击商铺信息进行修改：
注意这些操作都带着id传入，具体的页面实现通过前端，我们要说的是，如果我们直接打开
这个页面时，那么我们希望它返回到商铺列表页面去，因为直接打开并没有带着shopId参数传入。这就时我们第二个任务处理的事情
controller（二）：
/*进入店铺管理界面
*
* 从商铺列表页面中，点击“进入”按钮进入
* 某个商铺的管理页面的时候，对session中的数据的校验从而进行页面的跳转，是否跳转到店铺列表页面或者可以直接操作该页面
* */
@RequestMapping(value = "/getshopmanageinfo", method = RequestMethod.GET)
@ResponseBody
public Map<String, Object> getShopManageinfo(HttpServletRequest request) {
Map<String, Object> modelMap = new HashMap<String, Object>();
// 获取shopId
long shopId = HttpServletRequestUtil.getLong(request, "shopId");
// 如果shopId不合法
if (shopId < 0) {
// 尝试从当前session中获取
Shop currentShop = (Shop) request.getSession().getAttribute("currentShop");
if (currentShop == null) {
// 如果当前session中也没有shop信息,告诉view层 重定向
modelMap.put("redirect", true);
modelMap.put("url", "/storepro/shopadmin/shoplist");
}else{
// 告诉view层 进入该页面
modelMap.put("redirect", false);
modelMap.put("shopId", currentShop.getShopId());
}
} else { // shopId合法的话
Shop shop = new Shop();
shop.setShopId(shopId);
// 将currentShop放到session中
request.getSession().setAttribute("currentShop", shop);
modelMap.put("redirect", false);
}
return modelMap;
}
这个contr方法实现了下面的步骤：
先通过获取request请求里的shopid
如果shopId不合法我们试着从session中取出，如果都没有那么说明我们直接打开了这个页面或者传入的id不合法，我们直接将list页面的url存入map交给前端跳转回list页面，如果成功获取正确id，我们进入该页面，我们将正确表示交给前端，由前端处理跳转到修改商铺的页面。
VIEW层：
概述
大致效果如下
功能点
-
用户如果直接进入商铺管理页面，如果没有传入shopId或者session中没有对应的信息，直接强制跳转到商铺列表页面
-
商铺管理页面的 【商铺信息】按钮，如果传入了shopId则为编辑商铺
商铺列表View层的开发
shoplist.html
<span style="color:#000000"><code><span style="color:#4f4f4f"><!DOCTYPE html></span>
<span style="color:#006666"><<span style="color:#4f4f4f">html</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">"utf-8"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">http-equiv</span>=<span style="color:#009900">"X-UA-Compatible"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"IE=edge"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">title</span>></span>商店列表<span style="color:#006666"></<span style="color:#4f4f4f">title</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"viewport"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"initial-scale=1, maximum-scale=1"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"shortcut icon"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/favicon.ico"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-capable"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"yes"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-status-bar-style"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"black"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"../resources/css/shop/shoplist.css"</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">body</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">header</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"bar bar-nav"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">h1</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"title"</span>></span>商铺列表<span style="color:#006666"></<span style="color:#4f4f4f">h1</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">header</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">p</span>></span>你好,<span style="color:#006666"><<span style="color:#4f4f4f">span</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"user-name"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">span</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"pull-right"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/shopadmin/shopoperation"</span>></span>增加店铺<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">p</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row row-shop"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-40"</span>></span>商店名称<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-40"</span>></span>状态<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-20"</span>></span>操作<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#880000"><!-- 通过js从后台加载数据，动态的添加内容 --></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"shop-wrap"</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
<span style="color:#880000"><!-- 先预占两个按钮，后续完善 --></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">""</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"log-out"</span>
<span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill button-danger"</span>></span>退出系统<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">""</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"change-pwd"</span>
<span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill button-success"</span>></span>修改密码<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/sj/lib/zepto/zepto.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/shop/shoplist.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">body</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">html</span>></span>
</code></span>shoplist.js
<span style="color:#000000"><code>$(<span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
<span style="color:#880000">// 调用，加载数据</span>
getshoplist();
<span style="color:#000088">function</span> <span style="color:#009900">getshoplist</span><span style="color:#4f4f4f">()</span>{
$.ajax({
url:<span style="color:#009900">"/o2o/shopadmin/getshoplist"</span>,
type:<span style="color:#009900">"get"</span>,
dataType:<span style="color:#009900">"json"</span>,
success:<span style="color:#000088">function</span><span style="color:#4f4f4f">(data)</span>{
<span style="color:#000088">if</span> (data.success) {
handleList(data.shopList);
handleUser(data.user);
}
}
});
}
<span style="color:#000088">function</span> <span style="color:#009900">handleUser</span><span style="color:#4f4f4f">(data)</span>{
$(<span style="color:#009900">'#user-name'</span>).text(data.name);
}
<span style="color:#000088">function</span> <span style="color:#009900">handleList</span><span style="color:#4f4f4f">(data)</span>{
<span style="color:#000088">var</span> shopListHtml = <span style="color:#009900">''</span>;
data.map(<span style="color:#000088">function</span><span style="color:#4f4f4f">(item,index)</span>{
shopListHtml += <span style="color:#009900">'<div class="row row-shop"><div class="col-40">'</span>
+ item.shopName + <span style="color:#009900">'</div><div class="col-40">'</span>
+ shopStatus(item.enableStatus)
+<span style="color:#009900">'</div><div class="col-20">'</span>
+ goShop(item.enableStatus,item.shopId)
+<span style="color:#009900">'</div></div>'</span>
});
$(<span style="color:#009900">'.shop-wrap'</span>).html(shopListHtml);
}
<span style="color:#000088">function</span> <span style="color:#009900">shopStatus</span><span style="color:#4f4f4f">(status)</span>{
<span style="color:#000088">if</span> (status == <span style="color:#006666">0</span> ) {
<span style="color:#000088">return</span> <span style="color:#009900">'审核中'</span>;
} <span style="color:#000088">else</span> <span style="color:#000088">if</span> (status == <span style="color:#006666">1</span>) {
<span style="color:#000088">return</span> <span style="color:#009900">'审核通过'</span>;
} <span style="color:#000088">else</span>{
<span style="color:#000088">return</span> <span style="color:#009900">'店铺非法'</span>;
}
}
<span style="color:#880000">// 进入到商铺的管理页面,请求/shopadmin/shopmanagement ，进入到管理页面</span>
<span style="color:#000088">function</span> <span style="color:#009900">goShop</span><span style="color:#4f4f4f">(status,shopId)</span>{
<span style="color:#000088">if</span> (status == <span style="color:#006666">1</span> ) {
<span style="color:#000088">return</span> <span style="color:#009900">'<a href="/o2o/shopadmin/shopmanagement?shopId='</span> + shopId + <span style="color:#009900">'">进入</a>'</span>;
}<span style="color:#000088">else</span>{
<span style="color:#000088">return</span> <span style="color:#009900">''</span>;
}
}
});</code></span>shoplist.css
<span style="color:#000000"><code><span style="color:#9b703f">.row-shop</span> {
border:<span style="color:#009900"> <span style="color:#009900">1</span>px solid <span style="color:#006666">#999</span></span>;
padding:<span style="color:#009900"> .<span style="color:#009900">5</span>rem</span>;
border-bottom:<span style="color:#009900"> none</span>;
}
<span style="color:#9b703f">.row-shop</span><span style="color:#000000">:last-child</span> {
border-bottom:<span style="color:#009900"> <span style="color:#009900">1</span>px solid <span style="color:#006666">#999</span></span>;
}
<span style="color:#9b703f">.shop-name</span> {
white-space:<span style="color:#009900"> nowrap</span>;
overflow-x:<span style="color:#009900"> scroll</span>;
}
<span style="color:#9b703f">.shop-wrap</span> <span style="color:#000000">a</span> {
}</code></span>通过商铺列表页面点击进入商铺的管理页面的开发
shopmanagement.html
<span style="color:#000000"><code><span style="color:#4f4f4f"><!DOCTYPE html></span>
<span style="color:#006666"><<span style="color:#4f4f4f">html</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">"utf-8"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">http-equiv</span>=<span style="color:#009900">"X-UA-Compatible"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"IE=edge"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">title</span>></span>商铺管理<span style="color:#006666"></<span style="color:#4f4f4f">title</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"viewport"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"initial-scale=1, maximum-scale=1"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"shortcut icon"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/favicon.ico"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-capable"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"yes"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">meta</span> <span style="color:#4f4f4f">name</span>=<span style="color:#009900">"apple-mobile-web-app-status-bar-style"</span> <span style="color:#4f4f4f">content</span>=<span style="color:#009900">"black"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">link</span> <span style="color:#4f4f4f">rel</span>=<span style="color:#009900">"stylesheet"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"../resources/css/shop/shopmanagement.css"</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">head</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">body</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">header</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"bar bar-nav"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">h1</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"title"</span>></span>商铺管理<span style="color:#006666"></<span style="color:#4f4f4f">h1</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">header</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"content-block"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"row"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50 mb"</span>></span>
<span style="color:#880000"><!--增加id,方便在js中操作--></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">id</span>=<span style="color:#009900">"shopInfo"</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/shopadmin/shopoperation"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill"</span>></span>商铺信息<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50 mb"</span>></span>
<span style="color:#880000"><!-- 待开发 --></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/shopadmin/productmanage"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill"</span>></span>商品管理<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-50 mb"</span>></span>
<span style="color:#880000"><!-- 待开发 --></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/shopadmin/productcategorymanage"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill"</span>></span>类别管理<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">div</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"col-100 mb"</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">a</span> <span style="color:#4f4f4f">href</span>=<span style="color:#009900">"/o2o/shopadmin/shoplist"</span> <span style="color:#4f4f4f">class</span>=<span style="color:#009900">"button button-big button-fill button-danger"</span>></span>返回<span style="color:#006666"></<span style="color:#4f4f4f">a</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">div</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/sj/lib/zepto/zepto.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#880000"><!--引入自定义的js --></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/shop/shopmanagement.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"><<span style="color:#4f4f4f">script</span> <span style="color:#4f4f4f">type</span>=<span style="color:#009900">'text/javascript'</span> <span style="color:#4f4f4f">src</span>=<span style="color:#009900">'../resources/js/common/common.js'</span> <span style="color:#4f4f4f">charset</span>=<span style="color:#009900">'utf-8'</span>></span><span style="color:#006666"></<span style="color:#4f4f4f">script</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">body</span>></span>
<span style="color:#006666"></<span style="color:#4f4f4f">html</span>></span>
</code></span>shopmanagement.js
<span style="color:#000000"><code>$(<span style="color:#000088">function</span><span style="color:#4f4f4f">()</span>{
<span style="color:#880000">// 获取shopId</span>
<span style="color:#000088">var</span> shopId = getQueryString(<span style="color:#009900">"shopId"</span>);
<span style="color:#880000">// 商铺管理的url</span>
<span style="color:#000088">var</span> shopInfoUrl = <span style="color:#009900">'/o2o/shopadmin/getshopmanageInfo?shopId='</span> + shopId;
$.getJSON(shopInfoUrl,<span style="color:#000088">function</span> <span style="color:#4f4f4f">(data)</span> {
<span style="color:#880000">// 如果后台返回redirect=true,则跳转后台到设置的url</span>
<span style="color:#000088">if</span>(data.redirect){
window.location.href = data.url;
}<span style="color:#000088">else</span>{
<span style="color:#880000">// 如果后台返回redirect=false，则设置shopId并给 按钮设置超链接属性（即编辑商铺）</span>
<span style="color:#000088">if</span> (data.shopId != <span style="color:#006666">undefined</span> && data.shopId != <span style="color:#006666">null</span>){
shopId = data.shopId;
}
$(<span style="color:#009900">'#shopInfo'</span>).attr(<span style="color:#009900">'href'</span>,<span style="color:#009900">'/o2o/shopadmin/shopoperation?shopId='</span> + shopId);
}
});
});</code></span>shopmanagement.css
<span style="color:#000000"><code><span style="color:#9b703f">.mb</span> {
margin-bottom:<span style="color:#009900"> .<span style="color:#009900">5</span>rem</span>;
}</code></span>Controller层配置路由
涉及到两个页面，不允许直接访问，所以需要在Controller层配置路由转发
com.artisan.o2o.web.shopadmin.ShopAdminController.java
<span style="color:#000000"><code> @RequestMapping(<span style="color:#000088">value</span> = <span style="color:#009900">"/shoplist"</span>, method = RequestMethod.GET)
<span style="color:#000088">public</span> String <span style="color:#009900">shopList</span>() {
<span style="color:#000088">return</span> <span style="color:#009900">"shop/shoplist"</span>;
}
@RequestMapping(<span style="color:#000088">value</span> = <span style="color:#009900">"/shopmanagement"</span>, method = RequestMethod.GET)
<span style="color:#000088">public</span> String <span style="color:#009900">shopManagement</span>() {
<span style="color:#000088">return</span> <span style="color:#009900">"shop/shopmanagement"</span>;
}</code></span>单元测试
验证获取店铺列表
com.artisan.o2o.web.shopadmin.ShopController#getShopList方法加入断点
tomcat以debug的模式启动，启动后 访问 http://localhost:8080/o2o/shopadmin/shoplist
逐步调测
检查结果是否符合预期，如果都没问题的话，就可以得到如下前端页面
验证商铺管理页面
首先我们先回顾下控制层的逻辑
当浏览器的请求 如下
http://localhost:8080/o2o/shopadmin/shopmanagement?shopId=5
即shopId合法
<span style="color:#000000"><code>Shop shop = new Shop()<span style="color:#880000">;</span>
shop<span style="color:#009900">.setShopId</span>(shopId)<span style="color:#880000">;</span>
// 将currentShop放到session中
request<span style="color:#009900">.getSession</span>()<span style="color:#009900">.setAttribute</span>(<span style="color:#009900">"currentShop"</span>, shop)<span style="color:#880000">;</span>
modelMap<span style="color:#009900">.put</span>(<span style="color:#009900">"redirect"</span>, false)<span style="color:#880000">;</span></code></span>此时将shop放在session中，key为currentShop，并且告诉View层 无需跳转，停留在该页面。
如果访问的是http://localhost:8080/o2o/shopadmin/shopmanagement 没有传递shopId，想直接访问 商铺管理页面 ， 我们首先获取shopId,
工具类 ：
此时，shopId = -1 , 走如下逻辑
<span style="color:#000000"><code> <span style="color:#000088">if</span> (shopId < <span style="color:#006666">0</span>) {
<span style="color:#880000">// 尝试从当前session中获取</span>
Shop currentShop = (Shop) request.getSession().getAttribute(<span style="color:#009900">"currentShop"</span>);
<span style="color:#000088">if</span> (currentShop == <span style="color:#000088">null</span>) {
<span style="color:#880000">// 如果当前session中也没有shop信息,告诉view层 重定向</span>
modelMap.put(<span style="color:#009900">"redirect"</span>, <span style="color:#000088">true</span>);
modelMap.put(<span style="color:#009900">"url"</span>, <span style="color:#009900">"/o2o/shopadmin/shoplist"</span>);
}<span style="color:#000088">else</span>{
<span style="color:#880000">// 告诉view层 进入该页面</span>
modelMap.put(<span style="color:#009900">"redirect"</span>, <span style="color:#000088">false</span>);
modelMap.put(<span style="color:#009900">"shopId"</span>, currentShop.getShopId());
}
}</code></span>首先尝试从session中通过key来获取该shop信息，取到的话，告诉前端View层，无需跳转，并将shopId传递给View层，方便给 shopInfo 这个按钮设置超链接，传入shopId,点击即为编辑商铺。
如果session中还是没有shop的信息，告诉view层跳转到商铺列表
<span style="color:#000000"><code> <span style="color:#000088">if</span>(<span style="color:#000088">data</span>.redirect){
<span style="color:#009900">window</span>.<span style="color:#009900">location</span>.<span style="color:#009900">href</span> = <span style="color:#009900">data</span>.<span style="color:#009900">url</span>;
}</code></span>所以测试的时候，为了安全起见，请将浏览器的缓存清空。
首先访问
http://localhost:8080/o2o/shopadmin/shopmanagement ,因为第一次访问，没有传入shopId ,session中也没有数据，会跳转到 http://localhost:8080/o2o/shopadmin/shoplist 商铺列表页面
然后在访问一个 http://localhost:8080/o2o/shopadmin/shopmanagement?shopId=5 ,进入到shopId=5的店铺管理页面。
最后在http://localhost:8080/o2o/shopadmin/shopmanagement ，因为 第二次访问了shopId=5的店铺，session中存入了数据，所以也进入到shopId=5的店铺管理页面。
这部分仅仅是session的操作，是否有权限进入改页面后续会通过拦截器来实现。
我们还预留了几个按钮，接着继续实现吧