移动商城的设计和开发
移动商城是电商平台的重要组成部分，它面向终端用户，为用户提供商品浏览、选购、订单查询和个人信息管理等服务。
在移动商城的设计中，将使用前面章节开发的微服务接口，并通过这些接口服务实现分类和商品的展示，以及订单的生成和查询等。基于这些接口的调用，移动商城的设计就是一些页面的交互界面的设计，所以在移动商城的设计中，我们将主要使用HTML5(H5）页面设计。
移动商城的设计是一个独立的项目，项目代码可从本书源代码中下载，本章实例使用的是V2.1分支。
移动商城项目使用了类目、商品、订单三个服务接口，所以我们需要在项目对象模型pom中增加如下几个依赖引用，对相关接口服务进行调用:
代码语言：javascript复制<!--订单服务-->
<dependency>
<groupId>com.demo</groupId>
<artifactId>order-object</artifactId><version>2. 1-SNAPSHOT</version>
</dependency>
<!--商品服务--><dependency>
<groupId>com.demo</groupId>
<artifactId>goods-object</artifactId><version>2.1-SNAPSHOT</version>
</dependency>
<!--类目服务--><dependency>
<groupId>com.demo</groupId>
KartifactId>catalog-object</artifactId><version>2.1-SNAPSHOT</version>
</dependency>
移动商城首页设计
移动商城首页主要用于展示商品，所以首页设计包含商品搜索查询和列表显示两大功能。
在首页中使用一个控制器设计GoodsController，在这个控制器中提供首页的链接和数据查询功能，代码如下所示:
代码语言：javascript复制@RestController
@RequestMapping("/goods")
public class GoodsController {
@Autowired
private GoodsRestService goodsRestService;
@RequestMapping (value=" /index")
public ModelAndview index (ModelMap model, HttpServletRequest request) throwsException{
String sortsid = request.getParameter("sortsid");
return new ModelAndView ( "goods/index", "sortsid", sortsid);
@RequestMapping (value = "/list")
public Page<Map<String,0bject>> findAll(GoodsQo goodsQ0){
String json = goodsRestService.findPage(goodsQo);
Gson gson=TreeMapconvert.getGson();
TreeMap<String, 0bject> page = gson.fromJson (json, new TypeToken<
TreeMap<String, Object>>(){.getType());
Pageable pageable = PageRequest.of (goodsQo.getPage(),goodsQo.getSize(),
nul1）;
List<GoodsQo> list =new ArrayList<>();
if(page !=null && page.get ("list") I= null) {
list = gson.fromJson(page.get ("list").toString(),new
TypeToken<List<GoodsQo>>() {
}.getType());
}
String count = page.get("total").toString();
return new PageImpl(list, pageable,new Long(count));
}
}单击上面的首页链接“lindex”，将返回一个H5单页设计的页面视图“ index.html”。另外，链接“/list”是一个商品列表数据查询设计，使用查询对象GoodsQo传递参数，调用了商品服务接口GoodsRestService的 findPage来获取分页列表数据。
页面视图“index.html”的设计由页面设计和 JavaScript两部分组成，其中页面设计的主体部分的实现代码如下所示:
代码语言：javascript复制<body>
<div class= "mainBox pt-194">
<div class="topFixedArea">
<div class="searchBox">
<input class="searchInput" id="searchInput" type="text"
placeholder="搜索商品”value=""/>
<label class="searchIcon" for="searchInput"></label>
<div class="searchGo" >xa href="javascript:searchGo();">Go</a>
</div>
</div>
<header class-"navigatorBox">
<nav class="navigator fiveNav">
<a class="current" href=" /goods/index">商品</a><a href=" /sorts/index">分类</a>
<a href=" /order/index">订单</a>
<a href="javascript:void(0)">购物车</a><a href=" /order/switch">个人</a>
</nav>
</header></div>
<section class="orderList">
<ul class= "dataUl">
</ul>
</section>
<input type="hidden" id="totalPage" value="1"/></div>
<div th:replace="fragments/footer :: footer"></div>
</body>在页面的主体设计中，主要包含以下三个功能:
- 商品搜索查询
- 页面导航设计
- 列表数据显示
这些功能数据访问主要通过JavaScript 实现，代码如下所示:
代码语言：javascript复制<script>
/*<![CDATA[*/var goods name;
var pageNum = 0;$(function ({
listData(pageNum,10);//滑动加载更多
new Pull_Event(
promptselector: '.dataUl',
prompt method: 'append',//beforelprependlappendlafterhandle: function() {
var_this =this;
var totalPage=$('#totalPage').val();pageNum ;
if (pageNum >-totalPage){
this.destroy();
return;
setTimeout (function() {
listData(pageNum, 10, function {
this.done();
});
],500);
});
});
function searchGo(){
goods name =$('#search Input').val();//alert (goods name);
$( ".dataUl").empty();listData(pageNum,10);
}
//刷新页面数据
function listData(pageNum, pageSize, callback){
var $dataUl = $(".dataUl");s.ajax({
url: "./list"，data:{
name : goods_name,sortsid:sortsid,page:pageNum,size:pageSize},
type: "GET",
dataType: "json",
success:function (data){
$('#totalPage') .val (data.totalPages);var html ='';
$.each (data.content, funetion (i,v){
html ='<li>';
html ='<div class="orderInfList">';html ='<div class="goodsPicList">';
html = '<a href="./' v.id '"><img src="' v.photo
1"/>/a>';
html ＋一'</div>';
html = '<div class="orderInfTxt clearPb">';html ='<p>' v.name '</p>';
html = '<p>价格:￥' v.price.toFixed(2) '</p>';html = '<p>已购买:' (v.buynum==nul1?'0':v.buynum)
'</p>';
html ='</div>';html = '</div>';html = '</li>';
});
SdataUl.append(html);callback && callback();
}
}）；
}
/*]]>*/
</script>这里的分页设计与PC端的分页设计略有不同。在PC端的分页设计中，有一个分页的工具条，可以通过单击“下页”或“上页”按钮进行查询。而这里的分页设计主要是通过屏幕的滑动下拉事件来完成的，当操作界面进行翻屏滑动时，将自动完成分页查询。这个功能主要是由上面代码中的下拉事件“Pull_Event”实现的。
其中，数据的查询和显示由listData函数实现，即通过链接./list调用控制器GoodsController获取数据,然后使用页面上的<ul>控件输出数据视图。
控制器和页面这两部分设计完成之后，移动商城首页的显示效果如图9-1所示。
本文给大家讲解的内容SpringCloud微服务架构实战：移动商城首页设计
- 下篇文章给大家讲解的是SpringCloud微服务架构实战：商城的分类查询设计、商品详情页设计、用户下单功能实现；
- 觉得文章不错的朋友可以转发此文关注小编；
- 感谢大家的支持！
本文就是愿天堂没有BUG给大家分享的内容，大家有收获的话可以分享下，想学习更多的话可以到微信公众号里找我，我等你哦。
