整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
者：HelloGitHub-追夢(mèng)人物
博客文章的模型有一個(gè) excerpt 字段，這個(gè)字段用于存儲(chǔ)文章的摘要。目前為止，還只能在 django admin 后臺(tái)手動(dòng)為文章輸入摘要。每次手動(dòng)輸入摘要比較麻煩，對(duì)有些文章來(lái)說(shuō)，只要摘取正文的前 N 個(gè)字符作為摘要，以便提供文章預(yù)覽就可以了。因此我們來(lái)實(shí)現(xiàn)如果文章沒有輸入摘要，則自動(dòng)摘取正文的前 N 個(gè)字符作為摘要，這有兩種實(shí)現(xiàn)方法。
覆寫 save 方法
第一種方法是通過(guò)覆寫模型的 save 方法，從正文字段摘取前 N 個(gè)字符保存到摘要字段。在 創(chuàng)作后臺(tái)開啟，請(qǐng)開始你的表演[1] 中我們提到過(guò) save 方法中執(zhí)行的是保存模型實(shí)例數(shù)據(jù)到數(shù)據(jù)庫(kù)的邏輯，因此通過(guò)覆寫 save 方法，在保存數(shù)據(jù)庫(kù)前做一些事情，比如填充某個(gè)缺失字段的值。
回顧一下博客文章模型代碼：
blog/models.py ? class Post(models.Model): # 其它字段... body=models.TextField() excerpt=models.CharField(max_length=200, blank=True) def save(self, *args, **kwargs): self.modified_time=timezone.now() super().save(*args, **kwargs)
其中 body 字段存儲(chǔ)的是正文，excerpt 字段用于存儲(chǔ)摘要。通過(guò)覆寫模型的 save 方法，在數(shù)據(jù)被保存到數(shù)據(jù)庫(kù)前，先從 body 字段摘取 N 個(gè)字符保存到 excerpt 字段中，從而實(shí)現(xiàn)自動(dòng)摘要的目的。具體代碼如下：
blog/models.py ? import markdown from django.utils.html import strip_tags ? class Post(models.Model): # 其它字段... body=models.TextField() excerpt=models.CharField(max_length=200, blank=True) # 其它方法... def save(self, *args, **kwargs): self.modified_time=timezone.now() ? # 首先實(shí)例化一個(gè) Markdown 類，用于渲染 body 的文本。 # 由于摘要并不需要生成文章目錄，所以去掉了目錄拓展。 md=markdown.Markdown(extensions=[ 'markdown.extensions.extra', 'markdown.extensions.codehilite', ]) ? # 先將 Markdown 文本渲染成 HTML 文本 # strip_tags 去掉 HTML 文本的全部 HTML 標(biāo)簽 # 從文本摘取前 54 個(gè)字符賦給 excerpt self.excerpt=strip_tags(md.convert(self.body))[:54] ? super().save(*args, **kwargs)
這里生成摘要的方案是，先將 body 中的 Markdown 文本轉(zhuǎn)為 HTML 文本，去掉 HTML 文本里的 HTML 標(biāo)簽，然后摘取文本的前 54 個(gè)字符作為摘要。去掉 HTML 標(biāo)簽的目的是防止前 54 個(gè)字符中存在塊級(jí) HTML 標(biāo)簽而使得摘要格式比較難看。可以看到很多網(wǎng)站都采用這樣一種生成摘要的方式。
然后在模板中適當(dāng)?shù)牡胤绞褂媚０鍢?biāo)簽引用 {{ post.excerpt }} 顯示摘要的值即可：
templates/blog/index.html
?
<article class="post post-{{ post.pk }}">
...
<div class="entry-content clearfix">
<p>{{ post.excerpt }}...</p>
<div class="read-more cl-effect-14">
<a href="{{ post.get_absolute_url }}" class="more-link">繼續(xù)閱讀 <span class="meta-nav">→</span></a>
</div>
</div>
</article>
新添加一篇文章（這樣才能觸發(fā) save 方法，此前添加的文章不會(huì)自動(dòng)生成摘要，要手動(dòng)保存一下觸發(fā) save 方法），可以看到摘要效果了。
使用 truncatechars 模板過(guò)濾器
第二種方法是使用 truncatechars 模板過(guò)濾器（Filter）。在 django 的模板系統(tǒng)中，模板過(guò)濾器的使用語(yǔ)法為 {{ var | filter: arg }}。可以將模板過(guò)濾看做一個(gè)函數(shù)，它會(huì)作用于被它過(guò)濾的模板變量，從而改變模板變量的值。例如這里的 truncatechars 過(guò)濾器可以截取模板變量值的前 N 個(gè)字符顯示。關(guān)于模板過(guò)濾器，我們之前使用過(guò) safe 過(guò)濾器，可以參考 讓博客支持 Markdown 語(yǔ)法和代碼高亮[2] 這篇文章中對(duì)模板過(guò)濾器的說(shuō)明。
例如摘要效果，需要顯示 post.body 的前 54 的字符，那么可以在模板中使用 {{ post.body | truncatechars:54 }}。
templates/blog/index.html
?
<article class="post post-{{ post.pk }}">
...
<div class="entry-content clearfix">
<p>{{ post.body|truncatechars:54 }}</p>
<div class="read-more cl-effect-14">
<a href="{{ post.get_absolute_url }}" class="more-link">繼續(xù)閱讀 <span class="meta-nav">→</span></a>
</div>
</div>
</article>
不過(guò)這種方法的一個(gè)缺點(diǎn)就是如果前 54 個(gè)字符含有塊級(jí) HTML 元素標(biāo)簽的話（比如一段代碼塊），會(huì)使摘要比較難看。所以推薦使用第一種方法。
References
[1] 創(chuàng)作后臺(tái)開啟，請(qǐng)開始你的表演: https://www.zmrenwu.com/courses/hellodjango-blog-tutorial/materials/65/
[2]讓博客支持 Markdown 語(yǔ)法和代碼高亮:
https://www.zmrenwu.com/courses/hellodjango-blog-tutorial/materials/67/
『講解開源項(xiàng)目系列』——讓對(duì)開源項(xiàng)目感興趣的人不再畏懼、讓開源項(xiàng)目的發(fā)起者不再孤單。跟著我們的文章，你會(huì)發(fā)現(xiàn)編程的樂(lè)趣、使用和發(fā)現(xiàn)參與開源項(xiàng)目如此簡(jiǎn)單。歡迎加入我們，讓更多人愛上開源、貢獻(xiàn)開源～
文章中的某段文字轉(zhuǎn)化為鏈接：
混沌現(xiàn)象——扇形內(nèi)部的光線反射現(xiàn)象_百度經(jīng)驗(yàn)
https://jingyan.baidu.com/article/0eb457e5ca429103f1a90507.html
先熟悉一下這個(gè)網(wǎng)頁(yè)！
然后在Runoob網(wǎng)頁(yè)里面運(yùn)行如下代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<p>
<a >扇形內(nèi)部的光線反射現(xiàn)象</a>
是一個(gè)指向百度經(jīng)驗(yàn)網(wǎng)站中的一個(gè)頁(yè)面的鏈接。</p>
</body>
</html>
點(diǎn)擊超鏈接，就會(huì)直接跳轉(zhuǎn)：
在移動(dòng)商城的設(shè)計(jì)中，除商品和分類查詢是完全開放權(quán)限的頁(yè)面外，其他涉及個(gè)人隱私的個(gè)人信息、訂單查詢和購(gòu)物車等都必須進(jìn)行權(quán)限管理。
有關(guān)用戶權(quán)限管理的功能,在這里根據(jù)移動(dòng)設(shè)備的特點(diǎn)，使用了本地存儲(chǔ)的方式，提供了用戶登錄設(shè)計(jì)和賬號(hào)切換設(shè)計(jì)。
注意，為了節(jié)省篇幅，這里的用戶信息只是一個(gè)演示數(shù)據(jù)，并沒有跟實(shí)際用戶服務(wù)進(jìn)行綁定。
用戶登錄設(shè)計(jì)
在用戶登錄設(shè)計(jì)中，為了保證用戶身份的真實(shí)性，可以由用戶提供手機(jī)號(hào)，并通過(guò)短信接收到的驗(yàn)證碼進(jìn)行驗(yàn)證。
用戶登錄設(shè)計(jì)主要在視圖 verify.html 中實(shí)現(xiàn)，這是一個(gè)H5單頁(yè)設(shè)計(jì)，主要使用本地存儲(chǔ)來(lái)保存用戶的登錄狀態(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">手機(jī)號(hào)碼</p>
<input type="text" placeholder="" value="13500001111"/></div>
<div class=" verifyBox">
<p class="tips">驗(yàn)證碼</p>
<input type="text" placeholder="" value="123456"/></div>
<div class="verifyErro" style="display:none; ">
<span></span>
<pclass="tips">驗(yàn)證碼錯(cuò)誤</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>
/*<![CDATA[*/
$(function(){
$('.verifyBtn') ﹒click(function(){//驗(yàn)證失敗
//$(".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>這里為了簡(jiǎn)化設(shè)計(jì)，我們把手機(jī)號(hào)和驗(yàn)證碼都寫進(jìn)了程序中。
當(dāng)用戶通過(guò)驗(yàn)證后,將在本地存儲(chǔ)中登記用戶的手機(jī)號(hào)和用戶ID,讓用戶處于登錄狀態(tài)中直到用戶切換賬號(hào)時(shí)，才退出當(dāng)前登錄狀態(tài)。所以在測(cè)試時(shí)，直接單擊“確定”按鈕后，即可保存用戶的登錄狀態(tài)。
用戶登錄設(shè)計(jì)完成之后，顯示效果如圖9-4所示。
用戶登錄之后，當(dāng)需要進(jìn)行身份確認(rèn)時(shí)，就可以通過(guò)本地存儲(chǔ)取得用戶信息，執(zhí)行相關(guān)的操作流程。
賬號(hào)切換設(shè)計(jì)
如果用戶沒有清除移動(dòng)設(shè)備的緩存，則本地存儲(chǔ)將長(zhǎng)期存在。為了讓用戶能夠退出登錄狀態(tài)，或者切換到另一個(gè)賬號(hào)進(jìn)行操作，這里提供了一個(gè)切換賬號(hào)設(shè)計(jì)。
切換賬號(hào)視圖設(shè)計(jì)“switch.html”是一個(gè)H5單頁(yè)，實(shí)現(xiàn)代碼如下所示:
<!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>切換賬號(hào)</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">切換登錄賬號(hào)</p></div>
<div class="sure"><input class="switchBtn" type="submit" value="確
定
"/></div>
</div>
<div class="copy">關(guān)于我們</div></body>
<script>
/*<![CDATA[*/
$(function(){
$(' .switchBtn') .click (function(){
var storage=window. 1ocalStorage;
storage. removeItem ("user");
window. location.href="./index";});
});/*]]>*/</script>
</html>從上面的代碼可以看出，只要在本地存儲(chǔ)中清除用戶登錄時(shí)保存的用戶對(duì)象，就可以退出登錄狀態(tài)，然后將用戶引導(dǎo)到訂單查詢的主頁(yè)上，在這里會(huì)自動(dòng)要求用戶進(jìn)行登錄。
切換賬號(hào)設(shè)計(jì)完成之后，顯示效果如圖9-5所示。
在訂單查詢?cè)O(shè)計(jì)中，主要是使用訂單列表的方式顯示每一個(gè)特定用戶的訂單。
首先在OrderController 控制器中，設(shè)計(jì)一個(gè)訂單的主頁(yè)鏈接，通過(guò)主頁(yè)顯示訂單列表及其詳細(xì)信息,代碼如下所示:
@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)）;
}
}在上面的代碼中，通過(guò)“/index”鏈接，返回訂單查詢的主頁(yè)視圖設(shè)計(jì)“index.html”
訂單查詢的主頁(yè)視圖設(shè)計(jì)與商品查詢?cè)O(shè)計(jì)相似，都是通過(guò)屏幕的滑動(dòng)下拉實(shí)現(xiàn)自動(dòng)分頁(yè)功能的,不同之處在于權(quán)限管理和信息顯示處理設(shè)計(jì)。
為了保證每個(gè)用戶只能查詢自己的訂單，在訂單列表查詢視圖設(shè)計(jì)中會(huì)檢查用戶的登錄狀態(tài)。如果用戶未登錄，則提示用戶登錄，實(shí)現(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è)計(jì):
<script>
/*<! [CDATA[*/
//刷新頁(yè)面數(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 +='<li>';
html +='<div class="orderInfList">';
html +='<div class="orderInfTxtclearPb">';
html+='<p>訂?單?號(hào):'+v.orderNo +'('+
v.statusStr +')</p>';
html +='<p>訂單金額:￥'+v.amount.toFixed(2)+'</p>';html +='<p>下單時(shí)間:'+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>在上面的代碼中使用了四個(gè)參數(shù)進(jìn)行查詢，即訂單號(hào) ( orderNo）、用戶編號(hào)(userid)頁(yè)碼(page）和每頁(yè)行數(shù)(size)。其中，訂單號(hào)可以由用戶輸入，如果用戶未提供訂單號(hào)，則顯示所有的訂單。同時(shí)，針對(duì)訂單金額的小數(shù)位數(shù)也進(jìn)行了設(shè)定，以避免因?yàn)楦↑c(diǎn)數(shù)的原因出現(xiàn)很長(zhǎng)的小數(shù)位，影響用戶體驗(yàn)。訂單明細(xì)數(shù)據(jù)則以商品圖片的形式進(jìn)行顯示。
訂單查詢?cè)O(shè)計(jì)完成之后，顯示效果如圖9-6所示。
當(dāng)移動(dòng)商城設(shè)計(jì)完成之后，可以進(jìn)行一個(gè)集成測(cè)試。在這個(gè)集成測(cè)試中，可以按下列順序啟動(dòng)相關(guān)應(yīng)用:
啟動(dòng)完成之后，可以通過(guò)注冊(cè)中心查看所有應(yīng)用的啟動(dòng)情況，如圖9-7所示。
下面在瀏覽器中輸入如下鏈接，打開移動(dòng)商城進(jìn)行測(cè)試:
http://localhost: 7090如果打開成功，則可以將瀏覽器調(diào)整成手機(jī)或iPad的顯示界面，模擬移動(dòng)設(shè)備操作，如圖9-8所示。
當(dāng)在手機(jī)或者iPad 上進(jìn)行測(cè)試時(shí)，請(qǐng)確認(rèn)手機(jī)或iPad與電腦處于同一個(gè)局域網(wǎng)中，然后將上面的“l(fā)ocalhost”改成電腦上的P地址進(jìn)行訪問(wèn)。在 iPad上打開的移動(dòng)商城首頁(yè)如圖9-9所示。這里用到的P地址是“192.168.0.104”。
在手機(jī)上測(cè)試時(shí)，可以參考前面在開發(fā)講解中提供的各種場(chǎng)景的效果圖。
當(dāng)我們?cè)跍y(cè)試中進(jìn)行了一些操作之后，會(huì)生成一些數(shù)據(jù)，這時(shí)可以通過(guò)如下鏈接打開PC端的訂單管理后臺(tái)，查看訂單列表，進(jìn)行訂單管理操作。
http://localhost:8095打開鏈接之后，可以看到如圖9-10所示頁(yè)面。這是第8章的工作成果，即訂單管理后臺(tái)主頁(yè)的操作界面。在這個(gè)界面中，可以進(jìn)行一些訂單管理操作。
本章使用前面章節(jié)設(shè)計(jì)的各種接口服務(wù)，設(shè)計(jì)并開發(fā)了一個(gè)移動(dòng)端的商城。在這個(gè)設(shè)計(jì)中，演示了微服務(wù)接口的調(diào)用方法，同時(shí)，針對(duì)移動(dòng)設(shè)備進(jìn)行了一些H5的單頁(yè)設(shè)計(jì)實(shí)踐。在整個(gè)開發(fā)過(guò)程中，讀者可以更加深刻地體會(huì)到微服務(wù)之間的接口調(diào)用是非常方便的。而使用SpringCloud工具套件進(jìn)行移動(dòng)端應(yīng)用的開發(fā)，同樣是輕量級(jí)且令人感到愉快的。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
