当前位置：网站首页>Microservice architecture practice: user login and account switching design, order query design of the mall

Microservice architecture practice: user login and account switching design, order query design of the mall

2022-06-26 17:03:00 【Seconds to write code】

The design of user login and account switching in the mall

In the design of mobile Mall , Except that commodity and category queries are pages with full open permissions , Other personal information involving personal privacy 、 Permission management is required for order query and shopping cart .

Functions related to user rights management , Here, according to the characteristics of mobile devices , Local storage is used , It provides user login design and account switching design .

Be careful , To save space , The user information here is just a demonstration data , It is not bound to the actual user service .

User login design

In user login design , In order to ensure the authenticity of user identity , The user can provide the mobile phone number , And verify through the verification code received by the SMS .

The user login design is mainly in the view verify.html To realize , This is a H5 Single page design , It mainly uses local storage to save the login status of users , The code is as follows :

<! 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> The user login </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"> Phone number </p>
<input type="text" placeholder="" value="13500001111"/></div>
<div class= " verifyBox">
<p class="tips"> Verification Code </p>
<input type="text" placeholder="" value="123456"/></div>
<div class="verifyErro" style="display:none; ">
<span></span>
<pclass="tips"> Verification code error </p><p class="countdown"></p>
</div>
<div class="sure"><input class="verifyBtn" type="submit" value=" determine 
"/></div>
</div>
<div class="copy"> About us </div></body>
<script>
/*<![CDATA[*/
$(function(){
$('.verifyBtn') ﹒click(function(){// Validation failed 
//$(".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>

Here to simplify the design , We put the mobile phone number and verification code into the program .

When the user passes the authentication , The user's mobile number and user... Will be registered in the local storage ID, Keep the user in login status until the user switches the account , Before exiting the current login status . So when testing , Directly click “ determine ” After button , The login status of the user can be saved .

After the user login design is completed , The display effect is as shown in the figure 9-4 Shown .

After the user logs in , When identity verification is required , You can get user information through local storage , Execute relevant operation procedures .

Account switching design

If the user does not clear the cache of the mobile device , Then local storage will exist for a long time . To enable the user to log out of the login state , Or switch to another account for operation , Here is a switch account design .

Switch account view design “switch.html” It's a H5 Single page , The implementation code is as follows :

<!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> Switch account </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"> Switch login account </p></div>
<div class="sure"><input class="switchBtn" type="submit" value=" indeed 
 set 
"/></div>
</div>
<div class="copy"> About us </div></body>
<script>
/*<![CDATA[*/
$(function(){
$(' .switchBtn') .click (function(){
var storage=window. 1ocalStorage;
storage. removeItem ("user");
window. location.href ="./index";});
});/*]]>*/</script>
</html>

As you can see from the code above , Just clear the user object saved when the user logs in in the local storage , You can exit the login status , Then guide the user to the home page of order query , Users will be automatically asked to log in here .

After the switch account design is completed , The display effect is as shown in the figure 9-5 Shown .

Order query design

In order query design , It mainly displays the orders of each specific user in the form of order list .

First, in the OrderController The controller , Design a home page link for an order , Display the order list and its details through the home page , The code is as follows :

@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)）;
}
}

In the code above , adopt “/index” link , Return to the home page view design of order query “index.html”

The home page view design of order query is similar to that of commodity query , The automatic paging function is realized through the sliding pull-down of the screen , The difference lies in the design of permission management and information display processing .

To ensure that each user can only query their own orders , In the order list query view design, the user's login status will be checked . If the user is not logged in , Prompt the user to log in , The implementation code is as follows :

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

in addition , In order information processing , The design shown below is used :

<script>
/*<! [CDATA[*/
// Refresh page data 
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> book   single   Number :'+v.orderNo +'('+
v.statusStr +')</p>';
html += '<p> Order amount :￥'+v.amount.toFixed(2)+'</p>';html += '<p> Order time :'+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>

In the above code, four parameters are used to query , Immediate order No ( orderNo）、 The user id (userid) Page number (page） And the number of lines per page (size). among , The order number can be entered by the user , If the user does not provide the order number , Then all orders will be displayed . meanwhile , The decimal places of the order amount are also set , To avoid long decimal places due to floating-point numbers , Impact on user experience . The order details are displayed in the form of product pictures .

After the order query design is completed , The display effect is as shown in the figure 9-6 Shown .

Integration testing

When the mobile mall is designed , You can perform an integration test . In this integration test , You can start related applications in the following order :

catolog-restapi: Class interface service application .
goods-restapi: Commodity interface service application .
order-restapi: Order interface service application .
mall-microservice: Mobile mall service application .
order-web: Order management application .

Once the boot is complete , You can view the startup status of all applications through the registry , Pictured 9-7 Shown .

Now enter the following link in the browser , Open the mobile Mall for testing :

http://localhost: 7090

If the opening is successful , You can adjust the browser to a mobile phone or iPad The display interface of , Simulate mobile device operation , Pictured 9-8 Shown .

When on a cell phone or iPad When testing on , Please confirm your mobile phone or iPad In the same LAN as the computer , And then put the top “localhost” Change to the one on the computer P Address access . stay iPad The home page of the mobile mall opened on the is shown in the figure 9-9 Shown . What we use here P The address is “192.168.0.104”.

When testing on a mobile phone , You can refer to the renderings of various scenarios provided in the previous development explanation .

When we do something in the test , Some data will be generated , You can open it through the following link PC End of the order management background , Look at the list of orders , Perform order management .

http://localhost:8095

After opening the link , You can see the figure below 9-10 The page shown . This is the first 8 The work of chapter , That is, the operation interface of the order management background home page . In this interface , You can perform some order management operations .

Summary

This chapter uses the various interface services designed in the previous chapter , Designed and developed a mobile terminal mall . In this design , Demonstrates the calling method of the microservice interface , meanwhile , For mobile devices H5 Single page design practice . During the whole development process , Readers can more deeply realize that interface calls between microservices are very convenient . While using SpringCloud Tool suite for mobile application development , It is also lightweight and pleasant .

The content of this article SpringCloud Microservice architecture practice ： Design of user login and account switching in mall 、 Order query design 、 Integration testing

The next article will explain to you SpringCloud Microservice architecture practice ： Business management background and sso Design ;
Friends who think the article is good can forward this article and pay attention to Xiaobian ;
Thank you for your support !

原网站

版权声明
本文为[Seconds to write code]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202170447304967.html