整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
击上方 "程序员小乐"关注公众号, 星标或置顶一起成长
HTML的全称是超文本语言（Hyper Text Markup Language）。虽然这个名字听起来像是专业技术人员才能操作的，但事实上HTML是最简单的代码形式之一并且应用很广泛。
简而言之，HTML可以允许亚马逊卖家对产品描述进行排版（比如说添加粗体和斜体，换行，以及加入bullet points等），让买家能更清晰了解产品的卖点。
看到这里，你可能会问了：没有用HTML写出来的产品描述就不能用了吗？
答案是当然可以的，但是我们来对比一下不用HTML（图1）与使用HTML（图2）的产品描述的效果差异：
▲图片来源：亚马逊Bosch
▲图片来源：亚马逊Bosch
是不是看到没有用HTML的产品描述时只觉得杂乱无章，想要马上关掉这个页面呢？而用了HTML的产品描述更有条理，看起来更专业，可以让顾客很快地找到自己需要了解的内容。
在这个信息碎片化的时代，大家对同一件事情的注意力不会持续太久，没有人有耐心去读堆在一起的文字。如果顾客没有很快地得到自己想要的信息，他们会立马关闭页面去浏览别人更清晰明了的listing。因此，卖家需要用更好的listing内容来留住客户，吸引消费者下单购买。
想用HTML却对代码一无所知的卖家不用慌，你只需花几分钟了解最基础的HTML代码，就可以对自己的产品描述进行HTML编码了。如果卖家不想自己手动写HTML代码，还可以使用相关软件直接对自己的产品描述内容自动进行HTML编码。
那有了自动编码的软件，我们为什么还要推荐手动的呢?
因为亚马逊平台对HTML代码有诸多限制，很多代码经过我们的测试，是不被亚马逊支持的。
卖家使用手动编码软件来编写自己的产品描述会确保HTML编码的准确度和后续的顺利上传。所以对于到底是手动编码还是使用自动编码软件，卖家要根据自己的需求和具体情况来决定。
手动编写HTML
卖家只需了解以下这几个HTML代码就可以上手写产品描述了：
- <h1>标题</h1>
- <p>段落</p>
- <br>=换行
- <b>粗体</b>
- <li>=列表项
- <i>斜体</i>
- <ul></ul>=无序列表
- <ol></ol>=有序列表
使用这些代码时，要注意代码的完整性与准确性。比如说<b> </b>，不要只使用一部分。<b> 代表粗体开始的地方，</b>代表粗体结束，如果使用不完整，可能会造成无法对文字进行粗，或者所有字体都变成粗体。
在这里，我们推荐大家一个写HTML的免费工具W3 Schools（www.w3schools.com）。
网上可以找到很多免费的HTML编辑器，但是W3 Schools非常简单便捷，运行速度快，而且也不会像有些编辑器一样产生乱码现象。
那么怎么使用工具写出HTML格式的产品描述呢？
▲ 打开 W3 Schools HTML Editor。
▲ 将你为产品写的非HTML的文字描述粘贴到左侧框，再加入相应的代码进行排版（当然卖家也可以边写内容边用HTML代码排版，不过这样可能会扰乱思路）：
1. 将标题加入<h1></h1>中间
2. 每个段落的开头加<p>，结尾加</p>
3. 将<br>放到需要换行的文字前，想要换几次行就输入几个<br>即可
4. 将需要加粗的文字放到<b></b>中间
5. 将需要变成斜体的文字放到<i> </i>中间
6. 在bullet points的所有的内容前面添加上<ul>；然后在每一个bullet point之前要加入<li>；在bullet points内容后添加</ul>(如下图所示)
▲编码界面
▲显示界面
7.在有序列表的所有内容前添加<ol>；然后在每项之前要加入<li>；在有序列表内容后添加</ol>(如下图所示)
▲编码界面
▲显示界面
▲ 编排完内容后，点击RUN就可以在右侧看到你编排好的产品内容预览了。
▲ 仔细检查，确认无误之后，就可以将左侧栏中的内容复制粘贴到你的卖家平台上了。
□ 使用软件自动编写HTML
如果卖家选择用相关工具将产品描述自动变成HTML格式，我们推荐大家使用Html-Online工具（html-online.com/editor/）
下面用图片为大家进行简单地演示：
可以看到，卖家只需要在左侧输入产品内容再进行相应排版，即能在右侧得到HTML的代码，再将这些代码直接复制并粘贴到卖家平台进行保存，买家浏览时就会看到和左侧框的一模一样的内容版式，是不是非常简单方便呢？
在这里，经过我们的测试，亚马逊的卖家需要注意：在亚马逊上打造listing过程中，修改字体颜色、字体背景、添加表情、添加下划线、修改字体类型、调整字体大小、添加特殊符号、添加超链接和添加图片现在是不被允许的。但是我们都知道，亚马逊的规则实时都在变化，因此关注这些规则，收藏好这篇文章和工具以备未来之需！
毫无疑问，如果卖家进行了品牌注册并可以做EBC(A+)的话是最好不过了，但是如果你还没有在亚马逊上注册品牌或者还在等待品牌注册的商标申请，那么HTML将会是你提升产品内容描述的有力帮手！
如果您还想要了解各类编辑HTML的工具，我们在同名微信公众号上添加了福利噢！在公众号后台回复【HTML】即可免费领取HTML工具测评汇总！
在移动商城的设计中，除商品和分类查询是完全开放权限的页面外，其他涉及个人隐私的个人信息、订单查询和购物车等都必须进行权限管理。
有关用户权限管理的功能,在这里根据移动设备的特点，使用了本地存储的方式，提供了用户登录设计和账号切换设计。
注意，为了节省篇幅，这里的用户信息只是一个演示数据，并没有跟实际用户服务进行绑定。
用户登录设计
在用户登录设计中，为了保证用户身份的真实性，可以由用户提供手机号，并通过短信接收到的验证码进行验证。
用户登录设计主要在视图 verify.html 中实现，这是一个H5单页设计，主要使用本地存储来保存用户的登录状态，代码如下所示:
<! 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"/>
<script th:src="@{/scripts/viewscale.js}"></script>
<script th:src="@{/scripts/jquery-1.10.2.min.js)"></script><title>用户登录</title>
<link th:href="@(/styles/microApply.css}" rel="stylesheet"
type="text/css"/>
<style type="text/css">
article, aside,dialog, footer, header,section, footer, nav,figure, menu {display:block}
</style></head>
<body>
<div class="content">
<div class="iphone">
<pclass="tips">手机号码</p>
<input type="text" placeholder="" value="13500001111"/></div>
<div class=" verifyBox">
<p class="tips">验证码</p>
<input type="text" placeholder="" value="123456"/></div>
<div class="verifyErro" style="display:none; ">
<span></span>
<pclass="tips">验证码错误</p><p class="countdown"></p>
</div>
<div class="sure"><input class="verifyBtn" type="submit" value="确定
"/></div>
</div>
<div class="copy">关于我们</div></body>
<script>
/*<![CDATA[*/
$(function(){
$('.verifyBtn') ﹒click(function(){//验证失败
//$(".verifyErro") .show();
var storage=window.localStorage;
var customer=new Object(o;
new Object ();
customer-phone="13500001111";customer.userid-"11111235";
var str=JSON .stringify(customer);storage.setItem ("user", str);
window. location.href="./index";});
$( '.verifyBoX').find ( 'input').click(function(){
$( " .verifyErro").hide();
});
H);/*]]>*/</script>
</html>这里为了简化设计，我们把手机号和验证码都写进了程序中。
当用户通过验证后,将在本地存储中登记用户的手机号和用户ID,让用户处于登录状态中直到用户切换账号时，才退出当前登录状态。所以在测试时，直接单击“确定”按钮后，即可保存用户的登录状态。
用户登录设计完成之后，显示效果如图9-4所示。
用户登录之后，当需要进行身份确认时，就可以通过本地存储取得用户信息，执行相关的操作流程。
账号切换设计
如果用户没有清除移动设备的缓存，则本地存储将长期存在。为了让用户能够退出登录状态，或者切换到另一个账号进行操作，这里提供了一个切换账号设计。
切换账号视图设计“switch.html”是一个H5单页，实现代码如下所示:
<!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"/>
<script th:src="@{/scripts/viewscale.js}"></script>
<script th:src="@(/scripts/jquery-1.10.2.min.js}"></script><title>切换账号</title>
<link th:href="@{/styles/microApply.css}" rel="stylesheet"
type="text/css"/>
<style type="text/css">
article, aside,dialog,footer,header,section,footer,nav,figure, menu{display:block}
</style></head>
<body>
<div class="content">
<div class="iphone">
<pclass="swit">切换登录账号</p></div>
<div class="sure"><input class="switchBtn" type="submit" value="确
定
"/></div>
</div>
<div class="copy">关于我们</div></body>
<script>
/*<![CDATA[*/
$(function(){
$(' .switchBtn') .click (function(){
var storage=window. 1ocalStorage;
storage. removeItem ("user");
window. location.href="./index";});
});/*]]>*/</script>
</html>从上面的代码可以看出，只要在本地存储中清除用户登录时保存的用户对象，就可以退出登录状态，然后将用户引导到订单查询的主页上，在这里会自动要求用户进行登录。
切换账号设计完成之后，显示效果如图9-5所示。
在订单查询设计中，主要是使用订单列表的方式显示每一个特定用户的订单。
首先在OrderController 控制器中，设计一个订单的主页链接，通过主页显示订单列表及其详细信息,代码如下所示:
@RestController
@RequestMapping ("/order")CSlf4j
public class OrderController {
@Autowired
private OrderRestService orderRestService;
@RequestMapping (value="/index")
public ModelAndView index(ModelMap model) throws Exception{
return new ModelAndview ( "order/index");
}
@RequestMapping(value="/list")
public Page<Map<String,Object>> findAll (0rderQo orderQo){
String json=orderRestService.findPage(orderQo);
Pageable pageable=PageRequest.of (orderQo.getPage(),orderQo.getSize(),
null);
List<0rderQo> list=new Gson() .fromJson(json,new
TypeToken<List<orderQo>>(){}.getType()）;
for(0rderQo order :list){
order.setStatusStr (StatusEnum.valueOf (order.getStatus ()).getName ());
}
String count=orderRestService.getCount ();
return new Page Impl(list, pageable,new Long ( count)）;
}
}在上面的代码中，通过“/index”链接，返回订单查询的主页视图设计“index.html”
订单查询的主页视图设计与商品查询设计相似，都是通过屏幕的滑动下拉实现自动分页功能的,不同之处在于权限管理和信息显示处理设计。
为了保证每个用户只能查询自己的订单，在订单列表查询视图设计中会检查用户的登录状态。如果用户未登录，则提示用户登录，实现代码如下所示:
<script>
var storage=window. localStorage;
var user=storage.getItem("user");
var userid;var orderno;
if(user){
var a=JSON .parse(user);userid=a.userid;
Jelse{
window.location. href="./verify";
</script>另外，在订单的信息处理中，使用了如下所示的设计:
<script>
/*<! [CDATA[*/
//刷新页面数据
function listData(pageNum, pageSize, callback){
var $dataUl=$(" .dataUl");$.ajax({
url: "./list",data:{
orderNo:orderno,userid:userid,page: pageNum,size:pageSize},
type: "GET",
dataType: "json",
success: function (data){
$('#totalPage ').val(data.totalPages);var html='';
$.each(data.content, function (i,v){
html +='<li>';
html +='<div class="orderInfList">';
html +='<div class="orderInfTxtclearPb">';
html+='<p>订?单?号:'+v.orderNo +'('+
v.statusStr +')</p>';
html +='<p>订单金额:￥'+v.amount.toFixed(2)+'</p>';html +='<p>下单时间:'+new Date(v.created).format
("yyyy-MM-dd HH:mm:ss")+ '</p>';
html +='</div>';
html +='<div class="orderPicList">';$.each(v.orderDetails, function (j,w){
html +='<img src="' +w.photo +'"/>';});
html +='</div>';html +='</div>';html +='</li>';
});
$dataUl .append (html);callback &&callback();
});
/*]]>*/
</script>在上面的代码中使用了四个参数进行查询，即订单号 ( orderNo）、用户编号(userid)页码(page）和每页行数(size)。其中，订单号可以由用户输入，如果用户未提供订单号，则显示所有的订单。同时，针对订单金额的小数位数也进行了设定，以避免因为浮点数的原因出现很长的小数位，影响用户体验。订单明细数据则以商品图片的形式进行显示。
订单查询设计完成之后，显示效果如图9-6所示。
当移动商城设计完成之后，可以进行一个集成测试。在这个集成测试中，可以按下列顺序启动相关应用:
启动完成之后，可以通过注册中心查看所有应用的启动情况，如图9-7所示。
下面在浏览器中输入如下链接，打开移动商城进行测试:
http://localhost: 7090如果打开成功，则可以将浏览器调整成手机或iPad的显示界面，模拟移动设备操作，如图9-8所示。
当在手机或者iPad 上进行测试时，请确认手机或iPad与电脑处于同一个局域网中，然后将上面的“localhost”改成电脑上的P地址进行访问。在 iPad上打开的移动商城首页如图9-9所示。这里用到的P地址是“192.168.0.104”。
在手机上测试时，可以参考前面在开发讲解中提供的各种场景的效果图。
当我们在测试中进行了一些操作之后，会生成一些数据，这时可以通过如下链接打开PC端的订单管理后台，查看订单列表，进行订单管理操作。
http://localhost:8095打开链接之后，可以看到如图9-10所示页面。这是第8章的工作成果，即订单管理后台主页的操作界面。在这个界面中，可以进行一些订单管理操作。
本章使用前面章节设计的各种接口服务，设计并开发了一个移动端的商城。在这个设计中，演示了微服务接口的调用方法，同时，针对移动设备进行了一些H5的单页设计实践。在整个开发过程中，读者可以更加深刻地体会到微服务之间的接口调用是非常方便的。而使用SpringCloud工具套件进行移动端应用的开发，同样是轻量级且令人感到愉快的。
*请认真填写需求信息，我们会在24小时内与您取得联系。
