商城的用戶登錄與賬號切換設(shè)計

在移動商城的設(shè)計中，除商品和分類查詢是完全開放權(quán)限的頁面外，其他涉及個人隱私的個人信息、訂單查詢和購物車等都必須進行權(quán)限管理。

有關(guān)用戶權(quán)限管理的功能,在這里根據(jù)移動設(shè)備的特點，使用了本地存儲的方式，提供了用戶登錄設(shè)計和賬號切換設(shè)計。

注意，為了節(jié)省篇幅，這里的用戶信息只是一個演示數(shù)據(jù)，并沒有跟實際用戶服務(wù)進行綁定。

用戶登錄設(shè)計

在用戶登錄設(shè)計中，為了保證用戶身份的真實性，可以由用戶提供手機號，并通過短信接收到的驗證碼進行驗證。

用戶登錄設(shè)計主要在視圖 verify.html 中實現(xiàn)，這是一個H5單頁設(shè)計，主要使用本地存儲來保存用戶的登錄狀態(tài)，代碼如下所示:

<! 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">關(guān)于我們div>body>
<script>
/*
$(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>

這里為了簡化設(shè)計，我們把手機號和驗證碼都寫進了程序中。

當用戶通過驗證后,將在本地存儲中登記用戶的手機號和用戶ID,讓用戶處于登錄狀態(tài)中直到用戶切換賬號時，才退出當前登錄狀態(tài)。所以在測試時，直接單擊“確定”按鈕后，即可保存用戶的登錄狀態(tài)。

用戶登錄設(shè)計完成之后，顯示效果如圖9-4所示。

用戶登錄之后，當需要進行身份確認時，就可以通過本地存儲取得用戶信息，執(zhí)行相關(guān)的操作流程。

賬號切換設(shè)計

如果用戶沒有清除移動設(shè)備的緩存，則本地存儲將長期存在。為了讓用戶能夠退出登錄狀態(tài)，或者切換到另一個賬號進行操作，這里提供了一個切換賬號設(shè)計。

切換賬號視圖設(shè)計“switch.html”是一個H5單頁，實現(xiàn)代碼如下所示:

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-styleformat-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">關(guān)于我們div>body>
<script>
/*
$(function(){
$(' .switchBtn') .click (function(){
var storage=window. 1ocalStorage;
storage. removeItem ("user");
window. location.href ="./index";});
});/*]]>*/script>
html>

從上面的代碼可以看出，只要在本地存儲中清除用戶登錄時保存的用戶對象，就可以退出登錄狀態(tài)，然后將用戶引導(dǎo)到訂單查詢的主頁上，在這里會自動要求用戶進行登錄。

切換賬號設(shè)計完成之后，顯示效果如圖9-5所示。

訂單查詢設(shè)計

在訂單查詢設(shè)計中，主要是使用訂單列表的方式顯示每一個特定用戶的訂單。

首先在OrderController 控制器中，設(shè)計一個訂單的主頁鏈接，通過主頁顯示訂單列表及其詳細信息,代碼如下所示:

@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 PageString,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>(){}.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”鏈接，返回訂單查詢的主頁視圖設(shè)計“index.html”

訂單查詢的主頁視圖設(shè)計與商品查詢設(shè)計相似，都是通過屏幕的滑動下拉實現(xiàn)自動分頁功能的,不同之處在于權(quán)限管理和信息顯示處理設(shè)計。

為了保證每個用戶只能查詢自己的訂單，在訂單列表查詢視圖設(shè)計中會檢查用戶的登錄狀態(tài)。如果用戶未登錄，則提示用戶登錄，實現(xiàn)代碼如下所示:

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

另外，在訂單的信息處理中，使用了如下所示的設(shè)計:

<script>
/*
//刷新頁面數(shù)據(jù)
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 +='';
html += '';
html += '';
html+= '訂?單?號:'+v.orderNo +'('+
v.statusStr +')
';
html += '訂單金額:￥'+v.amount.toFixed(2)+'
';html += '下單時間:'+new Date(v.created).format
("yyyy-MM-dd HH:mm:ss")+ '
';
html += '
';
html += '';$.each(v.orderDetails, function (j,w){
html += ''"/>';});
html += '
';html += '
';html += '
';
});
$dataUl .append (html);callback &&callback();
});
/*]]>*/
script>

在上面的代碼中使用了四個參數(shù)進行查詢，即訂單號 ( orderNo）、用戶編號(userid)頁碼(page）和每頁行數(shù)(size)。其中，訂單號可以由用戶輸入，如果用戶未提供訂單號，則顯示所有的訂單。同時，針對訂單金額的小數(shù)位數(shù)也進行了設(shè)定，以避免因為浮點數(shù)的原因出現(xiàn)很長的小數(shù)位，影響用戶體驗。訂單明細數(shù)據(jù)則以商品圖片的形式進行顯示。

訂單查詢設(shè)計完成之后，顯示效果如圖9-6所示。

集成測試

當移動商城設(shè)計完成之后，可以進行一個集成測試。在這個集成測試中，可以按下列順序啟動相關(guān)應(yīng)用:

catolog-restapi:類目接口服務(wù)應(yīng)用。
goods-restapi:商品接口服務(wù)應(yīng)用。
order-restapi:訂單接口服務(wù)應(yīng)用。
mall-microservice:移動商城服務(wù)應(yīng)用。
order-web:訂單管理應(yīng)用。

啟動完成之后，可以通過注冊中心查看所有應(yīng)用的啟動情況，如圖9-7所示。

下面在瀏覽器中輸入如下鏈接，打開移動商城進行測試:

http://localhost: 7090

如果打開成功，則可以將瀏覽器調(diào)整成手機或iPad的顯示界面，模擬移動設(shè)備操作，如圖9-8所示。

當在手機或者iPad 上進行測試時，請確認手機或iPad與電腦處于同一個局域網(wǎng)中，然后將上面的“l(fā)ocalhost”改成電腦上的P地址進行訪問。在 iPad上打開的移動商城首頁如圖9-9所示。這里用到的P地址是“192.168.0.104”。

在手機上測試時，可以參考前面在開發(fā)講解中提供的各種場景的效果圖。

當我們在測試中進行了一些操作之后，會生成一些數(shù)據(jù)，這時可以通過如下鏈接打開PC端的訂單管理后臺，查看訂單列表，進行訂單管理操作。

http://localhost:8095

打開鏈接之后，可以看到如圖9-10所示頁面。這是第8章的工作成果，即訂單管理后臺主頁的操作界面。在這個界面中，可以進行一些訂單管理操作。

小結(jié)

本章使用前面章節(jié)設(shè)計的各種接口服務(wù)，設(shè)計并開發(fā)了一個移動端的商城。在這個設(shè)計中，演示了微服務(wù)接口的調(diào)用方法，同時，針對移動設(shè)備進行了一些H5的單頁設(shè)計實踐。在整個開發(fā)過程中，讀者可以更加深刻地體會到微服務(wù)之間的接口調(diào)用是非常方便的。而使用SpringCloud工具套件進行移動端應(yīng)用的開發(fā)，同樣是輕量級且令人感到愉快的。

本文給大家講解的內(nèi)容SpringCloud微服務(wù)架構(gòu)實戰(zhàn)：商城的用戶登錄與賬戶切換設(shè)計、訂單查詢設(shè)計、集成測試

下篇文章給大家講解的是SpringCloud微服務(wù)架構(gòu)實戰(zhàn)：商家管理后臺與sso設(shè)計；
覺得文章不錯的朋友可以轉(zhuǎn)發(fā)此文關(guān)注小編；
感謝大家的支持!

本文就是愿天堂沒有BUG給大家分享的內(nèi)容，大家有收獲的話可以分享下，想學(xué)習(xí)更多的話可以到微信公眾號里找我，我等你哦。

微服務(wù)架構(gòu)實戰(zhàn)：商城的用戶登錄與賬戶切換設(shè)計、訂單查詢設(shè)計

商城的用戶登錄與賬號切換設(shè)計

訂單查詢設(shè)計

集成測試

小結(jié)

本文給大家講解的內(nèi)容SpringCloud微服務(wù)架構(gòu)實戰(zhàn)：商城的用戶登錄與賬戶切換設(shè)計、訂單查詢設(shè)計、集成測試

微服務(wù)架構(gòu)實戰(zhàn)：商城的用戶登錄與賬戶切換設(shè)計、訂單查詢設(shè)計

本文給大家講解的內(nèi)容SpringCloud微服務(wù)架構(gòu)實戰(zhàn)：商城的用戶登錄與賬戶切換設(shè)計、訂單查詢設(shè)計、集成測試