關於怎麼實現前端頁面中的前端的部分

怎麼實現頁面的登陸等註冊功能的排版和頁面跳轉

1.   <div class="container cf" th:fragment="page-top-bar">

<div class="phone">

<a href="#" class="btnLink" id="qrBtn"> <i class="ico-phone"></i>手機版商城 <i class="arrowB"></i></a>

<div class="qr" id="qrBox">

<i class="dot"></i>

<img src="images1/qr.jpg" alt=""/>

<p class="mt5">掃描二維碼<br/>安裝安卓客戶端</p>

</div>

</div>

<p class="userInfo">您好， 

<span th:if="${#strings.isEmpty(session.UVO.guestName)}">

<a th:href="@{initGuestLogin}"><span class="button-t">登陸</span></a></span>

<span th:if="${not #strings.isEmpty(session.UVO.guestId)}">

<a th:href="@{initEditGuest}"><span class="button-t" th:text="${session.UVO.guestId}">張三</span></a>

&nbsp;&nbsp;

<a th:href="@{/}" th:if="${not #strings.isEmpty(session.UVO.guestId)}"><span class="button-t">退出</span></a>

</span>

<span th:if="${ #strings.isEmpty(session.UVO.guestId)}">

<i class="line">|</i><a th:href="initGuestRegister" class="link">註冊</a></span>

<i class="line">|</i><a href="init" class="link">分銷商入口</a></p>

</div>

//用到的href連接到的是controller

//if用來判斷用戶是否登陸

//當點擊登陸時調到initGuestLogin  這個controller

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

    public String initGuestLogin(Model model, Device device) {

    log.info("客戶登陸界面初始化");

    GoodsForm goodsForm = new GoodsForm();

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

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

    model.addAttribute("goodsForm", goodsForm);

    model.addAttribute("commodityType",commodityType);

    List<CartForm> cartList = new ArrayList<>();

    model.addAttribute("cartList", cartList);

    GuestForm guestForm = new GuestForm();

    model.addAttribute("guestForm", guestForm);

    if(device.isNormal()) {

    return "shop/login";

    } else {

    return "mobile/login";

    }

    }

在login.html頁面實現登陸功能

<div class="container mt20 regBox ">

<form action="guestLogin" th:object="${guestForm}" method="post" class="form-horizontal">

 <div class="form-group">

   <label>用戶名：</label>

   <div class="col-sm-8">

   <input type="text" name="guestId" class="form-control" />

   </div>

 </div>

 <div class="form-group">

   <label>密 碼：</label>

   <div class="col-sm-8">

     <input type="password" name="password" class="form-control"/>

   </div>

 </div>

 

 <div class="form-group">

   <div>

    <button type="submit" class="btnYellow yh">登 錄</button>

   </div>

 </div>

</form>

<!-- 登陸 -->

</div>

將紅色部分提交到guestLogin這個controller 中

@RequestMapping(value = "guestLogin", method = RequestMethod.POST)

    public String guestLogin(Model model, HttpSession session, @Valid @ModelAttribute("guestForm")GuestForm guestForm,BindingResult result1, Device device) { 

log.info("客戶登陸，驗證客戶信息，成功後進入系統");

GuestForm result = guestService.searchGuest(guestForm);

GoodsForm goodsForm = new GoodsForm();

           model.addAttribute("goodsForm", goodsForm);

if(result != null) {

UVO uvo = new UVO();

uvo.setGuestId(result.getGuestId());

uvo.setGuestName(result.getGuestName());

uvo.setPassword(guestForm.getPassword());

uvo.setGender(result.getGender());

uvo.setEmail(result.getEmail());

uvo.setMobile(result.getMobile());

uvo.setQq(result.getQq());

uvo.setPhone(result.getPhone());

uvo.setZip(result.getZip());

session.setAttribute("UVO", uvo);

GoodsForm goodsForm1 = new GoodsForm();

}

   CartForm cartForm = new CartForm();

   cartForm.setGuestId(uvo.getGuestId());

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

return "shop/index";

} else {

model.addAttribute("message", "用戶名或密碼錯誤！");

   List<CartForm> cartList = new ArrayList<>();

   model.addAttribute("cartList", cartList);

return "shop/login";

}

}

//而後便在在跳到的index中根據 th:if="${not #strings.isEmpty(session.UVO.guestId)} 來完成不一樣的顯示信息

2.  實現購物車有多少件商品即是來根據

<p class="cartbar nobox mt25 yh">

<span th:if="${cartList.size() == 0}">爲空</span>

<span th:if="${cartList.size() != 0}">

有&nbsp;<a href="initCart"><strong> <span th:text="${cartList.size()}">1</span>件商品</strong></a></span></p>

來實現

<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>

對於搜索的主要是SQL語句

<select id="selectGoodsListrelative"

parameterClass="cn.agriculture.web.form.GoodsForm"

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

SELECT commodity.commodity_id as commodityId,

commodity.type as commodityTypeId,

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,

commodity.update_time as updateTime,

commodity.update_user as updateUser,

commodity.picture_id as pictureId,

stock.stock as stock

FROM commodity, supplier, brand, stock

WHERE commodity.commodity_id = stock.commodity_id

AND commodity.supplier_id = supplier.supplier_id

AND commodity.brand_id = brand.brand_id

AND commodity.commodity_name LIKE '%$commodityName$%'

</select>