【基于Django框架的網(wǎng)上商城設計（論文）6800字】

基于Django框架的網(wǎng)上商城設計目錄摘要 1第1章緒論 21.1選題的目的及意義 21.2網(wǎng)上購物的發(fā)展現(xiàn)狀 21.3實現(xiàn)系統(tǒng)的主要內(nèi)容 2第2章設計的主要技術(shù)和分析 32.1Vue.js 32.2Python 32.3前后端分離架構(gòu) 32.4Django 3第3章詳細設計與實現(xiàn) 53.1數(shù)據(jù)庫的設計與實現(xiàn) 53.2系統(tǒng)功能模塊的概要設計 73.2.1功能設計圖 73.2.2用戶模塊 73.2.3商品模塊 83.2.4購物車模塊 83.2.5商品搜索模塊 83.3系統(tǒng)功能實現(xiàn) 83.3.1登錄注冊模塊 83.3.2用戶中心模塊 113.3.3購物車版塊 123.3.4商品模塊 133.3.5商品搜索模塊 133.4系統(tǒng)功能測試分析 143.4.1系統(tǒng)測試的目的與意義 143.4.2系統(tǒng)功能測試 15第4章結(jié)論 17參考文獻 18摘要：關(guān)鍵詞：網(wǎng)上商城；商品搜索；Django；Vue.js；Python第1章緒論1.1選題的目的及意義網(wǎng)上購物的潛力是巨大的，市場上有很多機會，互聯(lián)網(wǎng)營銷是世界上營銷的最重要方面之一。電子商務中心由在線銷售提供動力，通過在線銷售，消費者可以購買不同類別的產(chǎn)品，不用去超市或商場也能查找消費者要的產(chǎn)品分類區(qū)，使客戶可以快速獲得所需的產(chǎn)品。互聯(lián)網(wǎng)銷售與傳統(tǒng)方法相比，在商品種類方面：用戶可以挑選的商品種類多，可以做到貨比三家，擇優(yōu)選擇。在購物的便捷方面：用戶可以在手機或者電腦上進行挑選，不必去門店，節(jié)約了用戶的大量時間。在用戶體驗方面：用戶可以用更少的價錢買到更優(yōu)的產(chǎn)品。網(wǎng)上商城可以提供有關(guān)商店中所有產(chǎn)品的詳細信息。這樣的好處是有關(guān)產(chǎn)品的詳細信息都可以查看。因此網(wǎng)上商城對用戶的好處由此可見。對于商戶而言，網(wǎng)上商城不需要門店，節(jié)省很大一部分成本，商品價格可以降低，它吸引了更多的客戶并增加了利潤。只要有網(wǎng)絡連接，用戶可以在任何領(lǐng)域瀏覽產(chǎn)品，可以隨時隨地購買該產(chǎn)品。所以優(yōu)點是成本較低，利潤較高。1.2網(wǎng)上購物的發(fā)展現(xiàn)狀隨著4G網(wǎng)絡的普及，5G時代的到來，人們對寬帶互聯(lián)網(wǎng)的使用有了質(zhì)的飛躍，人們的生活方式也可以是選擇性的。如今，互聯(lián)網(wǎng)已經(jīng)成為許多生活的一部分，各種各樣的購物網(wǎng)站應運而生，購買形式豐富多彩。據(jù)中國互聯(lián)網(wǎng)信息中心發(fā)布的第45次《中國互聯(lián)網(wǎng)絡發(fā)展狀況統(tǒng)計報告》顯示，我國網(wǎng)民規(guī)模達9.04億，網(wǎng)絡購物用戶規(guī)模達7.10億，手機上網(wǎng)比例更達99.3%。未來，中國網(wǎng)民的人數(shù)將繼續(xù)增加，中國互聯(lián)網(wǎng)經(jīng)濟的實力將繼續(xù)保持并且更加強勁。由此可見，網(wǎng)上購物已經(jīng)占據(jù)了主要地位，已經(jīng)成為了一種潮流，更是以后的購物的發(fā)展趨勢。1.3實現(xiàn)系統(tǒng)的主要內(nèi)容基于Django的網(wǎng)上商城的系統(tǒng)設計需要實現(xiàn)以下功能：①用戶通過正確輸入圖片驗證碼及手機號來獲取短信驗證碼，校驗完短信驗證碼，設置密碼來完成注冊②用戶通過正確的手機號和密碼完成登錄③用戶在個人中心中設置自己收獲地址④后臺管理員可以通過CKEditor富文本編輯器來添加商品的種類⑤用戶可通過Elasticsearch搜索引擎來搜索自己想要的商品⑥用戶將商品添加至購物車，最后完成訂單第2章設計的主要技術(shù)和分析2.1Vue.jsVue.js是作者尤雨溪于2014年2月發(fā)布的。Vue.js被定義為Web界面開發(fā)的前端庫，是個非常方便的前端輕量級的工具。Vue.js和Google的AngularJS、Facebook的ReactJS相比較，它更加輕量級，使用也相當方便，這使其語法非常簡短、易于使用、靈活高效，這些特點使開發(fā)人員非常滿意。Vue.js一套開發(fā)用于創(chuàng)建用戶界面漸進式框架，Vue.js組件Component的概念使得它的設計方法是自上而下的。同時，Vue.js還能與現(xiàn)代工具鏈和各種輔助庫一起使用，如與element-ui整合，使得頁面更加美觀；與Axios整合，為與后端服務溝通提供了良好的橋梁作用。在本次設計中Vue.js主要用于前端界面設計，前端代碼的編寫，同時保證了與后端服務器的溝通。2.2PythonPython是一個高層次結(jié)合注釋，編輯，交互和基于對象的高級腳本語言,有相對較少的關(guān)鍵字，結(jié)構(gòu)相對簡單，有定義明確的語法，簡單易學,代碼定義很清楚，Python的成功在于源代碼中維護Python非常容易，最大的優(yōu)點是有更多、更大的資源庫，而且能跨平臺，在Linux,UNIX，Windows和Macintosh兼容很好。Python獲得支持的互動模式，您可以從終端輸入代碼執(zhí)行的語言并獲得結(jié)果，交互式測試和調(diào)試代碼的片段?；谠陂_源功能方面，Python已經(jīng)被移植（也就是使其工作）到許多平臺,如果你需要一段運行很快的關(guān)鍵代碼，或者是想要編寫一些不愿開放的算法，你可以使用C或C++完成那部分程序，然后從你的Python程序中調(diào)用。Python提供所有主要的商業(yè)數(shù)據(jù)庫的接口,Python支持GUI可以創(chuàng)建和移植到許多系統(tǒng)調(diào)用。在本次設計中主要采用Python語言作為后端代碼的編寫語言2.3前后端分離架構(gòu)隨著互聯(lián)網(wǎng)的發(fā)展，單機版架構(gòu)已經(jīng)不在適用于龐大的用戶請求了，而且單機版架構(gòu)也不利于后期的升級維護。因此，為了降低項目的耦合度，同時減少服務器的壓力，前后端分離架構(gòu)應運而生。前后端分離架構(gòu)將前端頁面與后端服務進行分離，前端頁面通過異步請求后端服務的API，而后端服務則將請求數(shù)據(jù)以JSON的形式返回，這就使得前后端分離了，提高了系統(tǒng)的性能。在本次設計中使用了前后端分離架構(gòu)2.4DjangoDjango是一個由Python編寫的一個開放源代碼的Web應用框架。使用Django，只要很少的代碼，Python的程序開發(fā)人員就可以輕松地完成一個正式網(wǎng)站所需要的大部分內(nèi)容，并進一步開發(fā)出全功能的Web服務Django本身基于MVC模型，即Model（模型）+View（視圖）+Controller（控制器）設計模式，MVC模式使后續(xù)對程序的修改和擴展簡化，并且使程序某一部分的重復利用成為可能。且Django具有低耦合、開發(fā)快捷、部署方便、可重用性高、維護成本低等特點在本次設計中Django作為后端服務器的框架，保證服務器和前端以及數(shù)據(jù)庫之間的交互。第3章詳細設計與實現(xiàn)3.1數(shù)據(jù)庫的設計與實現(xiàn)表結(jié)構(gòu)的設計是保證整個系統(tǒng)正常、高效運行的重要保證之一。如果一個表中某些列常用，則可以采用垂直拆分，另外垂直拆分可以使得數(shù)據(jù)行變小，一個數(shù)據(jù)頁就能存放更多的數(shù)據(jù)，在查詢時就會更容易定位。⑴用戶表tb_users用于存儲網(wǎng)上商城的用戶信息，相關(guān)字段有：用戶ID、賬戶名、密碼、創(chuàng)建時間、手機號、默認地址ID等具體如下表所示：表3.1用戶表字段名稱數(shù)據(jù)類型說明idint主鍵passwordvarchar密碼usernamevarchar用戶名date_joineddatetime創(chuàng)建時間mobilevarchar手機號（最大長度11位）default_address_idint外鍵（連接用戶默認地址表）⑵收貨地址表tb_address用于存儲用戶的收貨地址，相關(guān)字段有：地址ID、收貨人、收貨地址、電話號碼、收貨城市id、收貨縣區(qū)id以及關(guān)聯(lián)的用戶ID等,具體如下表所示：表3.2收獲地址表字段名稱數(shù)據(jù)類型說明idint主鍵receivervarchar收貨人mobilevarchar收貨電話city_idint收貨城市iddistrict_idint收貨縣區(qū)idprovince_idint收貨省id(按行政代碼設置id)基于Django框架的網(wǎng)上商城設計⑶收貨地址區(qū)域表tb_areas用于存儲各省市區(qū)縣的地址，相關(guān)字段有：ID、城市名稱、自關(guān)聯(lián)的ID,具體如下表所示：表3.3收獲地址區(qū)域表字段名稱數(shù)據(jù)類型說明idint主鍵namevarchar城市名稱parent_idint對應的上一級城市id（自關(guān)聯(lián)）⑷商品表tb_goods用戶存儲商品信息，相關(guān)字段有：ID、商品名稱、售賣數(shù)、剩余數(shù)、欄目ID具體如下圖所示：表3.4商品表字段名稱數(shù)據(jù)類型說明idint主鍵namevarchar商品名稱salesint售賣數(shù)commentsint庫存數(shù)category_idint所屬欄目⑸訂單表tb_orders用戶訂單表，相關(guān)字段有：創(chuàng)建時間、金額、重量、數(shù)量、地址ID、用戶ID具體如下圖所示：表3.5訂單表字段名稱數(shù)據(jù)類型說明create_timedatetime創(chuàng)建時間order_idint訂單號idint主鍵total_countint總數(shù)total_amountfloat總金額(小數(shù)點后兩位)address_idint對應的地址iduser_idint對應的用戶id⑹商品各版本表tb_sku,相關(guān)字段有：ID、名稱、介紹、價格、對應的商品ID、圖片地址具體如下圖所示：表3.6商品版本表字段名稱數(shù)據(jù)類型說明idint主鍵captionvarchar商品介紹namevarchar商品名稱pricefloat商品價格（小數(shù)點后兩位）good_idint對應的商品iddefault_image_urlvarchar商品圖片對應的url3.2系統(tǒng)功能模塊的概要設計3.2.1功能設計圖圖3-1功能設計圖3.2.2用戶模塊基于Django的網(wǎng)上商城系統(tǒng)為提高用戶體驗，提供了兩種登錄方式，賬號密碼登錄和用戶名密碼登錄。用戶可以根據(jù)個人喜好和習慣，選擇相應的登錄方式。在登錄界面時，當用戶輸入相對應的信息時，會觸發(fā)相應的前端代碼對輸入信息進行校驗，減少不符合格式的信息與服務器進行交互，降低服務器的壓力。在注冊模塊中，用戶在注冊界面輸入相對應的賬號密碼后，為緩解某些機器人注冊，設置了圖片驗證碼來發(fā)送手機驗證碼，如果這些都驗證無誤后，用戶才可進行注冊。當用戶注冊成功后，會直接跳轉(zhuǎn)至登錄界面，讓用戶進行登錄操作。在個人中心模塊中用戶可以設置自己的收貨地址、查看自己手機號碼。3.2.3商品模塊商品模塊將使用docker安裝FastDFS拉取鏡像和容器來存儲商品圖片，在運營后臺，運營人員需要錄入商品并編輯商品的詳情信息，而商品的詳情信息不是普通的文本，可以是包含了HTML語法格式的字符串。為了快速簡單的讓用戶能夠在頁面中編輯帶格式的文本，我們引入富文本編輯器。富文本即具備豐富樣式格式的文本。后端人員將使用ckedtor富文本編輯器上傳商品的描述、價格、圖片、存貨量等信息。3.2.4購物車模塊購物車模塊的功能主要包括購物車的增加、刪除、修改、查看，購物車的全選，購物車的指定選定，以及購物車的合并，用戶在沒有登錄的情況下，添加商品到購物車時，將購物里面的商品信息保存在session中，點結(jié)算時會跳轉(zhuǎn)至登錄界面，登錄用戶的購物車的商品信息會保存在redis中，登錄用戶和剛剛未登錄的購物車進行合并，將所有商品信息保存在redis中。3.2.5商品搜索模塊當用戶在搜索框輸入關(guān)鍵字后，我們要為用戶提供相關(guān)的搜索結(jié)果，商品搜索使用Docker安裝Elasticsearch及其擴展，使用haystack對接Elasticsearch，然后創(chuàng)建索引類，在索引類中所創(chuàng)建的字段，都可以借助haystack由elasticsearch搜索引擎查詢。3.3系統(tǒng)功能實現(xiàn)3.3.1登錄注冊模塊當進入登錄頁面時，用戶可根據(jù)自身需求，選擇不同的登錄方式，第一種登錄方式是手機號加密碼的登錄方式，第二種是用戶名加密碼的登錄方式如下圖所示：圖3-2登錄圖如果登錄時，輸入的用戶名或者密碼為空，將彈出信息，讓用戶輸入用戶名和密碼，避免登錄操作對服務器產(chǎn)生的壓力。當用戶的信息通過前端初次過濾后，通過post請求將用戶輸入的用戶名和密碼傳給后臺后臺API將獲取的用戶名和密碼與Mysql數(shù)據(jù)庫中用戶信息進行比對，當用戶不存在或密碼錯誤時，則會拋出相對應的錯誤：if(error.response.status==400){this.error_pwd_message='用戶名或密碼錯誤';}當用戶信息通過驗證時，頁面會跳轉(zhuǎn)到商城主頁面。圖3-3注冊圖用戶注冊時，要求填入5-20的用戶名，8-20位密碼，然后再次確認密碼（注冊時后端校驗完密碼相同后，只存儲一個密碼），以及11位的手機號，上述信息都輸入對之后，再輸入圖片驗證碼，如果圖片驗證碼不清晰時可以再次點擊進行刷新，該圖片驗證碼是由后端隨機生成的，生成后保存到redis數(shù)據(jù)庫以及發(fā)送給前端，當用戶點擊獲取短信驗證碼按鈕時，會將填寫的圖片驗證碼，發(fā)送給后端服務器，服務器將前端發(fā)送的圖片驗證碼，和后端存在redis中的圖片驗證碼作比較，若相同，則發(fā)送短信驗證碼，短信驗證碼和圖片存在redis中的有效期為3分鐘，超過時間redis將刪除短信驗證碼和圖片驗證碼，此操作會減少redis數(shù)據(jù)庫中存儲數(shù)據(jù)的量，服務器在查詢時速度會變快，同時為了緩解服務器的壓力，若redis數(shù)據(jù)庫中的短信驗證碼與用戶輸入的不一樣時，界面會彈出驗證碼不一致的信息，讓用戶再次輸入直至正確才能注冊才能成功，短信驗證碼的按鈕每60s才能點擊1次，這樣做的目的也是為防止用戶惡意注冊，給后端服務器帶來不必要的壓力，當所有信息都填寫準確之后，點擊注冊，注冊完成后直接跳轉(zhuǎn)至登錄界面。主要代碼如下：ifdata["password"]!=data["password2"]:raiseserializers.ValidationError("兩次輸入的密碼不一致")#判斷短信驗證碼redis_conn=get_redis_connection("verify_codes")mobile=data["mobile"]sms_code=data["sms_code"]real_sms_code=redis_conn.get("sms_{}".format(mobile))ifreal_sms_codeisNone:raiseserializers.ValidationError("短信驗證碼已過期")ifsms_code!=real_sms_code.decode():raiseserializers.ValidationError("短信驗證碼錯誤")returndata3.3.2用戶中心模塊圖3-4用戶中心圖用戶可在用戶中心中，可以查看自己的用戶名，手機號以及可以設置自己的郵箱號，并且查看自己最近所瀏覽的商品的瀏覽記錄，圖3-5收貨地址圖用戶在收貨地址中，主要用到了省市區(qū)地址的三級聯(lián)動，以及drf緩存，省市區(qū)的數(shù)據(jù)是經(jīng)常被用戶查詢使用的，而且數(shù)據(jù)基本不變化，所以我們可以將省市區(qū)數(shù)據(jù)進行緩存處理，減少數(shù)據(jù)庫的查詢次數(shù)。用戶可以新增自己收貨人，收貨地址選擇自己所在的區(qū)市縣，以及電話號碼等，每個用戶只能新增5個收貨地址主要代碼如下：defget_queryset(self):"""提供數(shù)據(jù)集"""ifself.action=="list":returnArea.objects.filter(parent=None)else:returnArea.objects.all()defget_serializer_class(self):"""提供序列化器"""ifself.action=="list":returnAreaSerializerelse:returnSubAreaSerializer3.3.3購物車版塊圖3-6購物車圖如果用戶是在登錄情況下挑選商品，則購物車中的商品信息將存儲在redis數(shù)據(jù)庫中，用戶還未登錄之前放在購物車的商品是json數(shù)據(jù)，通過base64加密，再轉(zhuǎn)換成字符串存儲在session中，用戶登錄后后端服務器會將session中數(shù)據(jù)還原成json類型，將redis中的數(shù)據(jù)取出進行疊加，最后可以勾選用戶自己想要的商品和數(shù)量進行結(jié)算3.3.4商品模塊圖3-7商品圖該頁面比較簡單，是個靜態(tài)頁面，在商品頁面中用戶可以選擇商品的的數(shù)據(jù)、版本、以及顏色，以json類型來加入購物車3.3.5商品搜索模塊該模塊通過docker安裝了Elasticsearch，使用haystack對接Elasticsearch，搜索引擎通過關(guān)鍵字，來查找相關(guān)商品的名稱、內(nèi)容圖3-8商品搜索圖主要代碼如下：text=indexes.CharField(document=True,use_template=True)id=indexes.IntegerField(model_attr='id')name=indexes.CharField(model_attr='name')price=indexes.CharField(model_attr='price')default_image_url=indexes.CharField(model_attr='default_image_url')comments=indexes.IntegerField(model_attr='comments')defget_model(self):"""返回建立索引的模型類"""returnSKUdefindex_queryset(self,using=None):"""返回要建立索引的數(shù)據(jù)查詢集"""returnself.get_model().objects.filter(is_launched=True)3.4系統(tǒng)功能測試分析3.4.1系統(tǒng)測試的目的與意義系統(tǒng)的功能測試是系統(tǒng)能夠順利上線前的重要保證之一。系統(tǒng)的功能測試能夠提前發(fā)現(xiàn)系統(tǒng)功能所存在的一系列問題，是保證系統(tǒng)正常運行的關(guān)鍵步驟之一。同時，系統(tǒng)測試報告也幫助程序員快速尋找出造成問題的原因，大大減少了問題檢索的時間，提高了工作效率3.4.2系統(tǒng)功能測試本系統(tǒng)采用的測試方式為黑盒測試，主要是測試系統(tǒng)的功能是否正常運行，實現(xiàn)效果是否與預期效果是否具有一致性。由于數(shù)據(jù)庫密碼采用Django的認證系統(tǒng)加密密碼，所以密碼在數(shù)據(jù)庫中為一大串加密字符，下面是對各板塊進行的測試登錄注冊模塊：表3.7登錄注冊測試表測試內(nèi)容測試結(jié)果是否與預期一樣賬號密碼登錄賬號密碼正確時，跳轉(zhuǎn)至首頁，密碼錯誤時，彈出錯誤信息是手機短信驗證碼發(fā)送驗證碼正確且未過期時，用戶正常使用注冊是用戶注冊當填寫所有信息都正確時，用戶正常注冊然后跳轉(zhuǎn)至登錄界面。信息不正確時，彈出失敗原因是用戶中心模塊：表3.8用戶中心測試表測試內(nèi)容測試結(jié)果是否與預期一樣個人信息用戶信息正常顯示，并能查看自己瀏覽記錄是收貨地址正常新增5個收貨地址，可修改地址信息是購物車模塊：表3.9購物車測試表測試內(nèi)容測試結(jié)果是否與預期一樣購物車的增刪改查購物車正常添加、刪除、修改、查詢商品是合并購物車用戶登錄后正常將未登錄時的購物車和登錄的購物車進行合并是商品模塊：表3.10商品測試表測試內(nèi)容測試結(jié)果是否與預期一樣新增商品商品通過富文本編輯器正常新增是商品圖片Docker容器正常使用，圖片正常顯示是商品信息商品價格、顏色、數(shù)量等信息正常顯示是商品搜索模塊：表3.11商品測試表測試內(nèi)容測試結(jié)果是否與預期一樣商品搜索用戶通過關(guān)鍵字搜索商品正常顯示是第4章結(jié)論在指導老師蘇老師和企業(yè)老師兩個多月的幫助下，完成此次的畢業(yè)設計，本次畢業(yè)設計主要主要分為下面的幾個方面：實現(xiàn)了基于Django框架加密密碼的的登錄注冊，可以實現(xiàn)短信驗證碼的注冊，手機號或用戶名的登錄。實現(xiàn)了個人的信息和瀏覽商品記錄的查看，并且可根據(jù)自己的需求設置和修改五個自己的收貨地址。實現(xiàn)了購物車的增加、刪除、修改、查詢以及合并購物車的功能。實現(xiàn)了商品的查看及根據(jù)關(guān)鍵字搜索功能在本次畢業(yè)設計中，我學習到很多的相關(guān)知識，特別是怎么做畢業(yè)設計，要先做分析，需要用到什么技術(shù)，以及構(gòu)造大體框架，在網(wǎng)上查找相關(guān)的知識和方法進行匯總，用什么技術(shù)的利弊，綜合之后進行選擇，然后進行開發(fā)，在遇到問題時，在網(wǎng)上查看相關(guān)資料，給網(wǎng)上遇到問題的作者留言，尋