怎么样实现左侧页面点击后右边页面显示内容

实现结果图片



前端页面的代码

<div class="row">

<div class="col-md-2 ceterL">

<ul class="centerMenu cf ">

<li class="curr"><a href="aboutUs">关于我们</a><i></i></li>

<li><a href="contactUs">联系我们</a><i></i></li>

</ul>

</div>

<div class="col-md-10 ceterR">

<div class="fb about-title yh detailsT">关于我们</div>

<div class="about-cont">

<p class="f12">好农易商城是天津滨海新区新兴的一家集农产品、调料、冲饮、茗茶及化妆品等种类为一体的大型购物网站，主打农产品遵从绿色、有机、自然，无公害，为用户提供放心食材，深受广大用户喜爱。</p>

<p class="f12"><span class="fb f14">主营业务</span><br/>粮食、调料、化妆品、冲饮、零食、茗茶等。</p>

<p class="f12"><span class="fb f14">经营优势</span><br/>1、源头采购，正品保证。<br/>2、一流仓储，闪电配送。<br/>3、货真价廉，让利顾客。</p>

</div>

</div>

</div>

根据链接实现到controller的跳转以及返回的页面

@RequestMapping(value = "aboutUs", method = RequestMethod.GET)

public String aboutUs(Model model, HttpSession session, Device device) {

UVO uvo=(UVO) session.getAttribute("UVO");

if (uvo == null) {

uvo = new UVO();

session.setAttribute("UVO", uvo);

}//用来设置当前session中的值

GoodsForm goodsForm = new GoodsForm();

List<GoodsForm> commodityType = goodsService.getType();

goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());

model.addAttribute("goodsForm", goodsForm);//完成页面中用到的menu的检索

model.addAttribute("commodityType",commodityType);

CartForm cartForm=new CartForm();

cartForm.setGuestId(uvo.getGuestId());

cartForm.setStatus("未付款");

model.addAttribute("cartList", cartService.searchCartList(cartForm));//用来实现在页面中显示的购物车的沙青年宫品数

if(device.isNormal()) {

return "shop/aboutUs";

} else {

return "mobile/aboutUs";//返回的界面

}

}

@RequestMapping(value = "contactUs", method = RequestMethod.GET)

public String contactUs(Model model, HttpSession session, Device device) {

UVO uvo=(UVO) session.getAttribute("UVO");

if (uvo == null) {

uvo = new UVO();

session.setAttribute("UVO", uvo);

}

GoodsForm goodsForm = new GoodsForm();

List<GoodsForm> commodityType = goodsService.getType();

goodsForm.setCommodityTypeId(commodityType.get(0).getCommodityTypeId());

model.addAttribute("goodsForm", goodsForm);

model.addAttribute("commodityType",commodityType);

CartForm cartForm=new CartForm();

cartForm.setGuestId(uvo.getGuestId());

cartForm.setStatus("未付款");

model.addAttribute("cartList", cartService.searchCartList(cartForm));

if(device.isNormal()) {

return "shop/contactUs";

} else {

return "mobile/contactUs";

}‍//基本类似上面‍

}

SQL文

<select id="selectCartList" parameterClass="cn.agriculture.web.form.CartForm"

resultClass="cn.agriculture.web.form.CartForm">

SELECT cart.cart_id as cartId,

cart.guest_id as guestId,

cart.count as count,

commodity.commodity_id as commodityId,

commodity.type as type,

supplier.supplier_name as supplierName,

brand.brand_name as brandName,

commodity.commodity_name as commodityName,

commodity.weight as weight,

commodity.is_gift as isGift,

commodity.specifications as specifications,

commodity.unit as unit,

commodity.benchmark_price as benchmarkPrice,

commodity.guide_price as guidePrice,

commodity.retail_price as retailPrice,

commodity.competition_level as competitionLevel,

commodity.note as note,

cart.update_time as updateTime,

cart.update_user as updateUser,

commodity.picture_id as pictureId

FROM cart, commodity, supplier, brand

WHERE cart.commodity_id = commodity.commodity_id

AND commodity.supplier_id = supplier.supplier_id

AND commodity.brand_id = brand.brand_id

AND cart.status = #status#

AND cart.guest_id = #guestId#

</select>