移动商城的分类查询设计、商品详情页设计、用户下单功能实现

商城的分类查询设计

商城的分类查询主要用于展示一个一级分类列表，通过一级分类列表提供的分类ID(作为参数），跳转到商品控制器中进行商品查询。

分类查询主要是通过分类列表进行跳转的。分类主页的控制器SortsController 的设计代码如下所示:

代码语言：javascript复制

@Restcontroller
@RequestMapping( "/sorts")
public class SortsController {
CAutowired
private SortsRestService sortsRestService;
@RequestMapping(value="/index")
public ModelAndview findAll() {
Gson gson= TreeMapConvert.getGson();
List<SortsQo> sortses = gson.fromJson(sortsRestService.findist (),new
TypeToken<List<SortsQ0>>(){].getType());
return new ModelAndView ( "sorts/index", "sortses",sortses);}
}

即通过链接“lindex”所在的方法中，取得分类列表数据，然后返回分类主页视图设计“index.html”。

分类主页视图设计是一个H5单页，主体部分的实现代码如下所示:

代码语言：javascript复制

<section class="orderList">
<ul th:each-"sorts: ${sortses} ">
<li th:onclick=" 1javascript:gotoGoods (' $ {sorts.id} ');'">
<div class-"orderInfList">
<div class="orderInfTxtclearPb">
<p><a th:href=" '/goods/index?sortsid=' ${sorts.id}"
th:text="${sorts.name) "></a></p>
</div>
</div>
</li>
</ul></section>

这里只是简单地使用一个“th:each”循环语句，将一级分类列表逐条进行显示。当在操作界面上单击一个分类时，将使用分类ID作为参数，跳转到商品控制器设计中进行商品查询。

分类查询的显示效果如图9-2所示。

商品详情页设计

首先通过控制器调用商品服务接口GoodsRestService的 findByld获取数据，然后返回一个页面视图设计“show.html”，其中，控制器的实现代码如下所示:

代码语言：javascript复制

@RestController
@RequestMapping ( "/goods")
public class GoodsController {
@Autowired
private GoodsRestService goodsRestService;
@RequestMapping (value="/{id} "')
public ModelAndView findById (@Pathvariable Long id)
String json = goodsRestService. findById(id);
GoodsQo goodsQo =new Gson().fromJson(json, GoodsQo.class);return new ModelAndView ("goods/show", "goods",goodsQ0);
}
}

页面视图设计“show.html”是一个H5单页，实现代码如下所示:

代码语言：javascript复制

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"<meta name="format-detection" content="telephone=no"/>
<title>商品内容</title>
<link th:href="@{/styles/main.css}" rel="stylesheet" type="text/css"<style type="text/css">
article,aside,dialog, footer,header,section, footer,nav,figure,menuldisplay:block }
</style>
<script th:src="@{/scripts/jquery-1.10.2.min.js}"></script><script th:src="@{/scripts/viewscale.js}"></script>
</head>
<body>
<div class="swiper-container" style="height: 450px;">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img th:src="${ goods.photo}"/></div>
</div></div>
<div class="spxg prize">
<div class="intro" th:text="${ goods.name}">商品名称</div><div class="info">
<span class="prize">
<em>价格:￥</em><em id="priceShowl" original="0.1"
th:text="${goods.price} ">67</em>
/span>
</div>
</div>
<div class="contents">
<div class="abstract"></div>
<div th:text="${goods.contents} "></div>
</div>
<div class="fix-bottom-buy">
<input id="goodsid" name="goodsid" type="hidden"
th:value="${goods.id} "/>
<div class="col-2">
  <a id="addCartBtn" href="javascript:void(0)"
onclick="history.back();"class="btn white">返回商城</a>
<a id="buyNowBtn" th:href=" ' /order/accounts/' ${goods.id}"
class="btn red">立即购买</a>
</div>
</div></body></html>

详情页显示了商品的详细信息，并且提供了“立即购买”的跳转链接。单击“立即购买”按钮后将进行用户登录状态检查。

商品详情页设计完成之后，显示效果如图9-3所示。

用户下单功能实现

当用户在商品详情页中单击“立即购买”按钮之后，将调用OrderController控制器，代码如下所示:

代码语言：javascript复制

@RestController
@RequestMapping ("/order")@slf4j
public class OrderController {
@Autowired
private GoodsRestService goodsRestService;
@ReguestMapping (value=" /accounts/{id} ")
public ModelAndView accounts (ModelMap model, (PathVariable Long id)(
String json = goodsRestService.findById(id);
GoodsQo goodsQo = new Gson ().fromJson(json,GoodsQo.class);return new ModelAndView( "order/accounts", "goods", goodsQ0);
}
}

首先通过商品ID取得商品信息，然后，返回一个账号视图设计。在这个视图设计中，一方面显示商品的价格，另一方面进行用户登录状态检查。

账号视图设计“accounts.html”是一个H5单页，完整的实现代码如下所示:

代码语言：javascript复制

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta  charset="utf-8"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black" name="apple-mobile-web-app-status-bar-style"/><meta name="format-detection" content="telephone=no"/>
<title>结算</title>
<link th:href="G{/styles/microApply.css}" rel="stylesheet"
type="text/css"/>
<link th:href="@{/styles/globalWap.css}" rel="stylesheet"
type="text/css"/>
<style type="text/css">
article,aside,dialog, footer, header, section, footer, nav, figure
menu{display:block}
</style>
<script th:src="@{/scripts/viewscale.js}"></script>
<script th:src="@(/scripts/jquery-1.10.2.min.js}"></script><script th:srC="@ {/scripts/Event_alert.js}"></script>
</head>
<body>
<div class="content prompt1">
<div class=" verifyErrO">
<span></span>
</diV>
<div class="sure"><input class="longinBtn" type="submit" value="确定
" /></div>
</div>
<input id="goodsid" name="goodsid" type="hidden"
th:value="${goods.id] "/>
<input id="merchantid" name="goodsid" type="hidden"
th:value="${goods.merchantid}"/>
<div class="content prompt2">
<div class= "verifyErro">
<span></span>
<p class="swit" th:text="'订单金额:￥' (${ goods.price} ?
$ {#numbers.formatDecimal (goods.price,0,'COMMA',2,'POINT')}:'')">确认购买吗?</p>
<p class="countdown"></p></div>
<div class="sure">xinput class="accountsBtn" type="submit" value="
确定"/></div>
</div>
<div class="copy">关于我们</div></body>
<script>
/*<![CDATA[*/$(function(){
var storage = window. localStorage;var user = storage.getItem ("user");var userid;
var goodsid = $('#goodsid').val();
var merchantid =$('#merchantid').val();
if(user){
var a=JSON.parse(user);userid = a.userid;
//console. log (a.userid);$('.prompt1').hide ();
$('.prompt2 ').show();
}else {
$('.prompt2 ').hide();$('.prompt1') .show();
$('.longinBtn').click (function(){
$(' .accountsBtn').click(function(){
$.ajax({
url:"../buyone" ,data:{
id:goodsid,subsid:userid,
merchantid:merchantid},
type: "POST",
dataType: "json",
success: function(data){
if(data && (parseInt (data) >0)){
alertEC("购买成功!");
}else{
alertEC("下单失败!");
});
setTimeout(function(){
window . location.href="../index";}, 600);
});
});
/*]]>*/</script></html>

在这个设计中，首先对用户的账号进行检查。如果是未登录状态，则转到登录页面提示用户登录。

如果用户已经登录，则提示用户确认购买，然后执行购买下单的操作。如果下单成功,则提示“购买成功”，并从操作界面跳转到订单列表页面。

注意:这里为了“跑通”整个下单的操作流程，省略了支付的环节。

用户进行购买下单的操作是通过控制器OrderController实现的，代码如下所示:

代码语言：javascript复制

@RestController
@RequestMapping ( "/order")@slf4j
public class OrderController {
@Autowired
private OrderRestService orderRestService;CAutowired
private GoodsRestService goodsRestService;
@RequestMapping(value="/buyone", method = RequestMethod. POST)public String buyone (GoodsQo buyone){
String json = goodsRestService.findById (buyone.getId());GoodsQo goodsQ0 = new Gson().fromJson(json,GoodsQo.class);if(goodsQ0 !=null){
Integer sum = 1;
OrderDetailQ0 orderDetailQ0 = new OrderDetailQ0();orderDetailQ0.setGoodsid(goodsQo.getId());
orderDetailQo.setGoodsname(goodsQo.getName());orderDetai1Qo.setPrice(goodsQo.getPrice());orderDetailQ0.setPhoto (goodsQo.getPhoto());orderDetailQo.setNums(sum);
orderDetailQ0.setMoney(sum * goodsQo.getPrice());
List<0rderDetailQ0> list = new ArrayList<>();
1ist .add(orderDetailQ0);
OrderQo orderQ0 = new OrderQo();orderQo.setOrder Details(list);//借用分类ID来传输用户编号
orderQo.setUserid (buyone.getSubsid()）;
orderQo.setMerchantid(goodsQo.getMerchantid());orderQo.setAmount(sum *goodsQo.getPrice());
orderQo.setOrderNo (new Long ( (new Date()).getTime()).toString()//已付款
orderQo. setStatus (StatusEnum. PAID.getCode());orderQo.setCreated(new Date());
String response = orderRestService.create (orderQo);
1oa.info ( "====下单结果:" response);
//更新库存
if(response !=null) {
Integer buynum = goodsQo.getBuynum() == null ? sum : sum
goodsQ0 .getBuynum();
goodsQo.setBuynum (buynum);
goodsRestService. update(goodsQo);//下单成功
return "1";
}else{
//下单失败
return "-1";
}
//系统异常return "-2";
}
}

首先获取商品信息和用户信息，然后根据这些信息，调用订单服务接口创建一个新订单，最后调用商品服务接口更新库存信息。

如果下单成功，则通过上面的视图设计，提示下单成功。提示信息会停留600ms，随后自动跳转到订单的主页中。在订单主页中用户可以看到订单列表。

本文给大家讲解的内容SpringCloud微服务架构实战：商城的分类查询设计、商品详情页设计、用户下单功能实现

下篇文章给大家讲解的是SpringCloud微服务架构实战：商城的用户登录与账户切换设计、订单查询设计、集成测试；
觉得文章不错的朋友可以转发此文关注小编；
感谢大家的支持!

本文就是愿天堂没有BUG给大家分享的内容，大家有收获的话可以分享下，想学习更多的话可以到微信公众号里找我，我等你哦。

html html5 访问管理微服务

0 人点赞