整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
擊上方 "程序員小樂"關注公眾號, 星標或置頂一起成長
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小時內與您取得聯系。
