基于 Vue的購(gòu)物商城設(shè)計(jì)與實(shí)現(xiàn)

1、基于 Vue的購(gòu)物商城設(shè)計(jì)與實(shí)現(xiàn)Design and Implementation of Online shopping mallBased on Vue摘要隨著網(wǎng)絡(luò)信息化的發(fā)展，網(wǎng)上的交易平臺(tái)日趨增多，也給大學(xué)生們提供了更多的便利。其中大部分大學(xué)生都會(huì)使用網(wǎng)上購(gòu)物，因?yàn)檫@更能夠給他們提供一個(gè)購(gòu)買安全、便捷的一個(gè)渠道。而二手的交易平臺(tái)也是如此，能夠?yàn)榇髮W(xué)生們提供物美價(jià)廉的交易平臺(tái)，也能夠?qū)⑽锲费h(huán)利用，而其核心也是商品的買賣。本購(gòu)物商城平臺(tái)，針對(duì)的是大學(xué)校內(nèi)的群體，商城的商品屬于二手交易，前臺(tái)交易的實(shí)現(xiàn)了用戶能夠進(jìn)行商品的瀏覽，也能對(duì)商品進(jìn)行選購(gòu)，更主要還是能夠上傳自己想要出售的商品，讓其他用

2、戶能夠購(gòu)買。本購(gòu)物商城采用了主流框架之一的使用Vue框架，簡(jiǎn)單易用，單頁面應(yīng)用讓用戶體驗(yàn)非常好，且減輕了對(duì)服務(wù)器的壓力。它通過MVVM思想就使得開發(fā)中的數(shù)據(jù)模型跟視圖之間能夠自主的轉(zhuǎn)換，不需要開發(fā)人員一步一步的對(duì)底層代碼進(jìn)行對(duì)比，能夠在開發(fā)的時(shí)候?qū)⒆⒁饬Υ蟛糠旨性诖a邏輯端，因此使得前端開發(fā)使用這個(gè)框架的企業(yè)越來越多。本交易平臺(tái)就是利用了Vue在開發(fā)時(shí)的組件化思想，使得我們的頁面可以被劃分為一個(gè)個(gè)小組件，然后很多的組件構(gòu)成這個(gè)頁面。在開發(fā)中如果我們能將每一個(gè)小的功能劃分為一個(gè)小組件，然后將這個(gè)可以被重復(fù)使用的組件在系統(tǒng)中被細(xì)分，那么整個(gè)系統(tǒng)就可以向著代碼的美觀、開發(fā)的效率高、運(yùn)行的速度快、耦

3、合性低的方向進(jìn)行，由此開發(fā)出一個(gè)基于 Vue的網(wǎng)上購(gòu)物商城平臺(tái)關(guān)鍵詞：前后端分離; Vue; 組件化; JavaScrip廣東東軟學(xué)院本科畢業(yè)設(shè)計(jì)（論文）AbstractWith the development of network informatization, online trading platforms are increasing, which also provides more convenience for college students. Most of the college students will use online shopping because it c

4、an provide them with a safe and convenient way to purchase. The same is true for second-hand trading platforms, which can provide college students with a good and cheap trading platform, and can also recycle items, and the core is also the sale of commodities.This shopping mall platform is aimed at

5、groups in colleges and universities. The products of the mall are second-hand transactions. The front-end transactions enable users to browse and purchase goods, and more importantly, they can upload what they want to sell Commodities, so that other users can buy.This shopping mall uses one of the m

6、ainstream frameworks, the Vue framework, which is simple and easy to use. The single-page application makes the user experience very good and reduces the pressure on the server. Through the idea of MVVM, it enables the independent conversion between the data model and the view in development. It doe

7、s not require developers to compare the underlying code step by step, and can focus most of the attention on the logical end of the code during development. More and more companies are using this framework for front-end development.This trading platform utilizes Vues component thinking during develo

8、pment, so that our page can be divided into small components, and then many components constitute this page. In development, if we can divide each small function into a small component, and then subdivide this reusable component in the system, then the entire system can be oriented towards the beaut

9、iful code, high development efficiency, and operation. The speed is fast and the coupling is low, thus developing an online shopping mall platform based on VueKeywords: front-end separation; Vue; componentization; JavaScript目錄1.緒論31.1研究背景31.2選題的意義與目的41.3研究現(xiàn)狀51.4課題研究的內(nèi)容51.5課題的開發(fā)目標(biāo)52.系統(tǒng)相關(guān)技術(shù)和開發(fā)環(huán)境52.1前端

10、相關(guān)技術(shù)62.1.1 HTML簡(jiǎn)介62.1.2 CSS簡(jiǎn)介62.1.3 JavaScript簡(jiǎn)介62.1.4Vue簡(jiǎn)介72.2 前端開發(fā)環(huán)境72.2.1VScode簡(jiǎn)介82.2.2Webpack簡(jiǎn)介82.2.3Vue-CLI簡(jiǎn)介82.2.4API簡(jiǎn)介83.系統(tǒng)分析93.1 系統(tǒng)可行性分析93.2 系統(tǒng)功能需求分析93.3 系統(tǒng)性能需求分析104.系統(tǒng)設(shè)計(jì)114.1 系統(tǒng)總體設(shè)計(jì)114.2系統(tǒng)模塊設(shè)計(jì)124.2.1用戶注冊(cè)模塊設(shè)計(jì)124.2.2用戶登錄模塊設(shè)計(jì)124.2.3用戶收藏模塊設(shè)計(jì)134.2.4用戶評(píng)論模塊設(shè)計(jì)134.2.5用戶上傳商品模塊設(shè)計(jì)144.2.6用戶注銷模塊設(shè)計(jì)154.3數(shù)據(jù)

11、庫設(shè)計(jì)154.3.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計(jì)154.3.2數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計(jì)165.系統(tǒng)實(shí)現(xiàn)215.1用戶注冊(cè)登錄界面功能215.2首頁界面225.3商品詳細(xì)信息功能235.4個(gè)人信息界面245.5購(gòu)物車功能255.6評(píng)論功能255.7上傳商品功能256.系統(tǒng)測(cè)試266.1測(cè)試概述266.2測(cè)試環(huán)境266.3測(cè)試用例276.4測(cè)試分析307.總結(jié)31參考文獻(xiàn)32致謝331.緒論1.1研究背景自21世紀(jì)以來，我們所熟知的電商，并不是簡(jiǎn)簡(jiǎn)單單的由舊事物被新事物所替代，而是在在互聯(lián)網(wǎng)中不斷的摸索、演變而來，就好比在03年的5月份，馬云所在的阿里集團(tuán)成立了，在其同年的12月份慧聰網(wǎng)也正式上市，次年1月份，京

12、東也加入了電子商務(wù)這個(gè)領(lǐng)域。從04年開始，國(guó)家就陸續(xù)發(fā)布了針對(duì)網(wǎng)絡(luò)商務(wù)的一系列準(zhǔn)則，不同用戶之間通過網(wǎng)絡(luò)并遵守著網(wǎng)絡(luò)規(guī)范準(zhǔn)則進(jìn)行信息交流和電商活動(dòng)。近幾年來,隨著信息化的不斷發(fā)展，大學(xué)生在網(wǎng)上購(gòu)物現(xiàn)在看起來也是十分的普遍，可以說網(wǎng)上購(gòu)物是大學(xué)生校園生活的必要，因?yàn)樵谛@周圍并不具備能夠出售豐富商品的地方，也給大學(xué)生網(wǎng)上購(gòu)物一個(gè)良好的契機(jī)。而網(wǎng)上購(gòu)物商城就使得當(dāng)前的購(gòu)買方式多樣化，不僅讓人能足不出戶便可以買到想要的商品，也能夠更快地讓人們得到需求，假如某種商品一個(gè)地方買不到，而另一個(gè)地方能買到，網(wǎng)上購(gòu)物商城便能解決這種尷尬的問題，網(wǎng)上購(gòu)物也推動(dòng)了物流等行業(yè)的蓬勃發(fā)展，因此，網(wǎng)上購(gòu)物商城是現(xiàn)在，也

13、是未來購(gòu)物的重要渠道。而現(xiàn)在市面上的二手交易平臺(tái)更是為大學(xué)生提供很多的便利，相對(duì)于淘寶、京東等單方面購(gòu)物平臺(tái)，大學(xué)生們更喜歡能夠在這種二手交易平臺(tái)上進(jìn)行商品的購(gòu)買，能讓自己出售閑置的商品，也能買到想要的商品，其價(jià)格也是這種平臺(tái)的一大優(yōu)勢(shì)。1.2選題的意義與目的現(xiàn)在是一個(gè)信息技術(shù)發(fā)達(dá)的時(shí)代，大部分的企業(yè)都有用自己的網(wǎng)頁應(yīng)用。而此次開發(fā)是設(shè)計(jì)并實(shí)現(xiàn)一個(gè)校內(nèi)進(jìn)行的能給大學(xué)生們提供的便利、安全、節(jié)源的二手交易平臺(tái)，而本二手交易平臺(tái)內(nèi)可以給大學(xué)生們很多的商品，比如電器、運(yùn)動(dòng)產(chǎn)品、書籍等不同種類的商品交易，鼓勵(lì)大學(xué)生們對(duì)資源的循環(huán)利用，能很好地進(jìn)行二手商品交易。而現(xiàn)在市面上的咸魚、58同城等之所以如此的火

14、爆，也是因?yàn)樗o用戶提供了一個(gè)自由的二手交易平臺(tái)，但它們都缺少第三方的校驗(yàn)，使得商品的質(zhì)量得不到保障，還有一些交易平臺(tái)沒有明確的追責(zé)制度、細(xì)化質(zhì)量的監(jiān)控，而對(duì)于大學(xué)生來說這些平臺(tái)并不是很適合。因而能夠開發(fā)出一個(gè)自由、信任度高、質(zhì)量有所保障的二手交易平臺(tái)對(duì)于大學(xué)生來說，就顯得尤為重要。而本平臺(tái)的開發(fā)，對(duì)于社會(huì)來說它也有著積極作用。它能夠很好地推動(dòng)著二手交易平臺(tái)的發(fā)展，使得我們的身邊的二手物品能夠充分的被利用，也是環(huán)保的體現(xiàn)。而且二手商品物廉價(jià)美，通過二手交易平臺(tái)也能讓大學(xué)生們懂得節(jié)儉，而對(duì)于剛畢業(yè)的學(xué)生也是一筆收入。另一方面通過針對(duì)大學(xué)生平臺(tái)交易，在一定程度上保證了質(zhì)量和安全性，能更快速、更準(zhǔn)確

15、地將物品送到買家手上，而這種情況更加能推動(dòng)二手交易的進(jìn)行。而本平臺(tái)意旨在能夠給大學(xué)生們提供這樣的一個(gè)平臺(tái)，讓大學(xué)生低價(jià)買到想要的商品，讓賣家出售自己不要的，提供一個(gè)更加快捷的方式。1.3研究現(xiàn)狀我國(guó)的電子商務(wù)始于90年代，有了多年的發(fā)展。就目前而言，有90%以上的大學(xué)生會(huì)選擇網(wǎng)上購(gòu)買生活中需要的商品，極少數(shù)人會(huì)去實(shí)體店進(jìn)行購(gòu)買，因此推動(dòng)了很多交易平臺(tái)的發(fā)展，不僅僅是類似淘寶、京東這種大的交易平臺(tái)，還有現(xiàn)在市面上最火的應(yīng)是咸魚交易平臺(tái)，二這個(gè)平臺(tái)之所以這么火，是因?yàn)樗菑膶儆谔詫?，所以它的?yōu)點(diǎn)就是用戶數(shù)量一開始就比較大，但是缺點(diǎn)也因?yàn)槲锲返膮⒉畈积R，沒有第三方的校驗(yàn)，并不能保證其百分百的質(zhì)量。對(duì)

16、于大學(xué)生來說，不能很好的把從學(xué)生中所不需要的一些物品交易給其他有需要的人，從而實(shí)現(xiàn)循環(huán)利用。所以能提供一個(gè)方便交易、面向大學(xué)生的交易平臺(tái)是非常有前瞻性的。1.4課題研究的內(nèi)容本商品共享與交易網(wǎng)站，用戶可以自由地在平臺(tái)中進(jìn)行瀏覽商品，也能夠在注冊(cè)登錄的界面點(diǎn)擊注冊(cè)，并且成為本交易平臺(tái)的用戶，在登錄后成功便可以自由查看、交易商品，也能夠?qū)⑸唐诽砑拥劫?gòu)物車進(jìn)行購(gòu)買。用戶也可以對(duì)自己的個(gè)人信息進(jìn)行管理，比如修改個(gè)人信息等。最主要的還是二手交易這個(gè)主題，用戶自己能夠?qū)ι唐愤M(jìn)行購(gòu)買，也能夠上傳并出售自己想賣的商品。1.5課題的開發(fā)目標(biāo)每個(gè)項(xiàng)目都需要在開發(fā)前制定計(jì)劃，于此本交易平臺(tái)的開發(fā)期望有以下的幾點(diǎn)：(

17、1)能在網(wǎng)站上瀏覽商品。(2)用戶能夠查看個(gè)人信息。(3)用戶能夠修改個(gè)人信息。(4)用戶能將需要購(gòu)買的商品添加到用戶的購(gòu)物車。(5)用戶能夠?qū)⑿枰鍪鄣纳唐飞蟼鞑⒊鍪邸?.系統(tǒng)相關(guān)技術(shù)和開發(fā)環(huán)境2.1前端相關(guān)技術(shù)2.1.1 HTML簡(jiǎn)介HTML在我們的前端代碼中最為基礎(chǔ)的技術(shù)1，就像地基那般，只有將其穩(wěn)穩(wěn)定死，才能經(jīng)歷風(fēng)吹雨打也能毫不動(dòng)搖。在開發(fā)本交易平臺(tái)中，HTML語言也是本交易平臺(tái)開發(fā)的基礎(chǔ)語言，用于搭建網(wǎng)頁的基石。HTML的用法為英文尖括號(hào)包含的元素(標(biāo)簽)，而某種標(biāo)簽有著自己的意義，有的是劃分大小段落、換行、插入圖片、用于超鏈接等等。HTML可以嵌入一些屬性，例如HTML本身固有的屬

18、性，以及CSS層疊樣式表的屬性，或者JavaScript的屬性，它們都會(huì)影響HTML網(wǎng)頁的行為，影響到元素的外觀跟布局。但是大部分情況下則將HTML、CSS、JavaScript分開編寫，看起來更加簡(jiǎn)潔，也方便讀取跟修改。2.1.2 CSS簡(jiǎn)介CSS是在最早的時(shí)候由于網(wǎng)站只有HTML這種來傳遞信息的形式，而網(wǎng)上在閱讀新聞等信息時(shí)只能看到一大串的文字，而后來便為了美化這種枯燥的新聞格式，便衍生出了這種語言，它的存在就是給大樓刷漆、美化的功能。CSS不能單獨(dú)使用6，必須與HTML一起協(xié)同作業(yè)，為HTML基本的框架起著修飾作用。如果說HTML負(fù)責(zé)網(wǎng)頁的內(nèi)容部分，那么CSS則這個(gè)網(wǎng)頁的內(nèi)容是以什么樣的

19、方式來呈現(xiàn)的，也不再是單調(diào)的文字內(nèi)容。CSS也可以用來設(shè)置網(wǎng)頁中內(nèi)容的位置布局，比如：左右的浮動(dòng)、內(nèi)容的定位、文字的居中等等。CSS其中的用法有三類，第一是將屬性代碼直接寫到HTML的標(biāo)簽中，利用style屬性對(duì)內(nèi)容進(jìn)行修飾；第二是在添加一個(gè)style類型的樣式標(biāo)簽之后，在這個(gè)style標(biāo)簽中進(jìn)行CSS的代碼編寫，此時(shí)需要用到一些構(gòu)造器等方法來綁定到HTML的元素，從而修飾HTML的內(nèi)容；第三也是在開發(fā)中所使用的一種，將一個(gè)集成的CSS文件引入到HTML中，在這個(gè)CSS文件中來進(jìn)行代碼編寫，其同樣也能對(duì)HTML內(nèi)容進(jìn)行修飾。有了CSS的引入，對(duì)于網(wǎng)頁來說便是整個(gè)世界有了色彩，網(wǎng)頁中也不僅僅是一

20、堆毫無感情的內(nèi)容，而這些修飾能給網(wǎng)頁的內(nèi)容添加了豐富的描述、這些樣式布局也能給用戶帶來不一樣的感受，使得網(wǎng)頁的瀏覽更加有趣味性。2.1.3 JavaScript簡(jiǎn)介JavaScript是在極短的時(shí)間內(nèi)被開發(fā)出來的編程語言，但是它被運(yùn)用推廣的時(shí)間卻不短，而JavaScript讓一個(gè)網(wǎng)頁不再是毫無生命的內(nèi)容展示，它將網(wǎng)頁與用戶的互動(dòng)提升了一個(gè)等級(jí)，就像大樓的各個(gè)框架，使其更加健碩穩(wěn)固。JavaScript通過外部引入到HTML的標(biāo)簽Script中，在外部文件中，通過綁定DOM的元素來進(jìn)行邏輯的運(yùn)算與編寫。因?yàn)楠?dú)立在一個(gè)文件中，也使得編寫過程能更專注于邏輯的運(yùn)算。而JavaScript的存在，就代表

21、著網(wǎng)頁中所存在的內(nèi)容不僅僅是固定在那里的，HTML+CSS是靜態(tài)的網(wǎng)頁，那么加上JavaScript就是動(dòng)態(tài)的了。它能夠讓網(wǎng)頁跟用戶之間的互動(dòng)更加豐富有趣。2.1.4Vue簡(jiǎn)介Vue是Vue.js的簡(jiǎn)稱，它是一個(gè)漸進(jìn)式的框架，漸進(jìn)式就代表著可以把Vue，作為應(yīng)用的一部分，給予用戶更加豐富的交互感受。而Vue的很多特點(diǎn)和在網(wǎng)頁應(yīng)用的功能3，比如：解耦視圖和數(shù)據(jù)，而Vue在使用的MVVM模式中，其雙向數(shù)據(jù)綁定的特點(diǎn)也使得在開發(fā)時(shí)有更好的開發(fā)性；可復(fù)用的組件，指的是Vue在開發(fā)中，每一個(gè)小功能都可以被劃分為一個(gè)模塊，而一個(gè)模塊中，又將每一個(gè)小功能劃分為組件，而這些組件都能夠獨(dú)立，也能夠被重復(fù)地使用，

22、減少了代碼量工作量；前端路由技術(shù)，指的是通過改變URL，但是網(wǎng)頁不進(jìn)行整體的刷新，即不再去靜態(tài)資源服務(wù)器請(qǐng)求，而是在之前已經(jīng)請(qǐng)求過的資源當(dāng)中，抽取一些屬于這個(gè)URL的代碼，從而渲染到頁面當(dāng)中，這樣就減少了請(qǐng)求資源的次數(shù)，減輕了服務(wù)器的壓力；狀態(tài)管理指的是有一個(gè)狀態(tài)需要在多個(gè)頁面中渲染，而多個(gè)組件共同來享用這個(gè)狀態(tài)，便是狀態(tài)的管理模式；虛擬DOM則是將網(wǎng)頁的運(yùn)行性能提升了一個(gè)檔次，比如在運(yùn)算中，有十次甚至上百次的計(jì)算，而這些計(jì)算會(huì)在虛擬的DOM上面操作，不會(huì)在真實(shí)的DOM中直接計(jì)算，而是計(jì)算完之后將對(duì)象再attch到真實(shí)DOM樹上面，這就大大減少了對(duì)于計(jì)算內(nèi)存的要求，速度也更快。而這些功能是Vu

23、e在前端框架中流行的一部分原因。如果說HTML、CSS、JavaScript是搭建一個(gè)房子，那么Vue的加入就是將這個(gè)房子交給了一個(gè)裝修公司，而將這個(gè)房子修飾得更加漂亮、便捷、完整、便是Vue這個(gè)框架的主要內(nèi)容。2.2 前端開發(fā)環(huán)境2.2.1VScode簡(jiǎn)介VScode是一款由微軟開發(fā)并支持多個(gè)操作系統(tǒng)的開源的編輯器。因?yàn)楸旧韮?nèi)置所支持的git，所以便于代碼的版本管理，除去本身的文本編輯器，它還支持安裝一些插件，因?yàn)樗梢詭椭绦騿T快速地編寫代碼，也有其他很多豐富的功能，因此選擇了VScode編輯器。2.2.2Webpack簡(jiǎn)介相比于grunt跟gulp等非靜態(tài)的打包工具4，它是屬于開發(fā)時(shí)才用

24、到的，在項(xiàng)目打包后就不需要用到了。而在打包過程中，會(huì)將各種代碼和圖片等進(jìn)行壓縮，然后放在一個(gè)js文件中，其內(nèi)部會(huì)對(duì)這些代碼進(jìn)行空間的壓縮、編程語言和其他格式的轉(zhuǎn)換等處理方式。2.2.3Vue-CLI簡(jiǎn)介Vue-CLI又稱為命令行界面，又簡(jiǎn)稱為腳手架。腳手架的具體功能是將本交易平臺(tái)使用Vue開發(fā)時(shí)所需要的的目錄文件等直接創(chuàng)建，使得我們的開發(fā)更加高效、穩(wěn)定。2.2.4API簡(jiǎn)介API是一種用于本交易平臺(tái)在開發(fā)時(shí)的應(yīng)用程序接口，這種接口在本交易平臺(tái)開發(fā)過程中，讓開發(fā)人員能夠獲取到后臺(tái)的具體數(shù)據(jù)，后臺(tái)通過接口將數(shù)據(jù)封裝到一個(gè)對(duì)象中，使得前端的開發(fā)人員能夠?qū)Ψ?wù)器的數(shù)據(jù)進(jìn)行操作和開發(fā)。圖2-1 系統(tǒng)相關(guān)

25、技術(shù)圖3.系統(tǒng)分析3.1 系統(tǒng)可行性分析1、 開發(fā)上的支出支出：由于該系統(tǒng)使用的大部分框架都是開源的，因而在搭建環(huán)境跟軟件都不需要額外的費(fèi)用。而其他的方面就是需要一臺(tái)電腦、網(wǎng)絡(luò)、時(shí)間等，而這對(duì)于開發(fā)者來說，絕對(duì)不是一個(gè)難題。2、 資金上的收益而在本系統(tǒng)獲得一定的瀏覽的數(shù)量之后，能使用接受用戶的打賞、投放一些廣告、還有收取一些支付的小費(fèi)用。由于項(xiàng)目是針對(duì)于校園的大學(xué)生，而在本校運(yùn)行成功的運(yùn)作起來，推廣到其他學(xué)校時(shí)，因?yàn)楸鞠到y(tǒng)的大量代碼是可以復(fù)用的，則受到的收益將成線性增長(zhǎng)，而使用本系統(tǒng)的學(xué)校越是多，則交易的流量就越大，受益就越多。3、 社會(huì)上的可行性而對(duì)于一些二手的物品，大學(xué)生們?nèi)绻茉谛?nèi)進(jìn)行

26、交易的話，相比于咸魚等其他二手交易軟件，會(huì)更加的感興趣。相對(duì)于咸魚、58同城等二手交易平臺(tái)來說，本系統(tǒng)的手續(xù)就比較的簡(jiǎn)便，可以避免過于繁冗的步驟，輕松地進(jìn)行二手商品的交易。對(duì)于大學(xué)生來說，更喜歡選擇一款相對(duì)可靠，相對(duì)簡(jiǎn)便的交易平臺(tái)。另一個(gè)優(yōu)點(diǎn)便是它使得我們的物品能夠二次使用，不是用完不要了便扔，比如一些書籍、數(shù)碼產(chǎn)品等，如果能夠二次使用則是環(huán)保工作中很重要的一環(huán)，我們每一次的交易，都會(huì)使得身邊能源的不必要消耗，也是為我們的環(huán)保做了一點(diǎn)小貢獻(xiàn)。3.2 系統(tǒng)功能需求分析本交易平臺(tái)在開發(fā)前期就要確定我們的具體功能是如何的，而經(jīng)過分析并結(jié)合現(xiàn)在交易平臺(tái)的參考，最終將功能歸納為以下幾點(diǎn)：(1)用戶功能：

27、在本交易平臺(tái)中未登陸只能瀏覽商品，經(jīng)過登陸的用戶在交易平臺(tái)中可以進(jìn)行更多的權(quán)限操作。(2)商品功能：在本交易平臺(tái)中，能對(duì)商品的信息進(jìn)行查看，也能在不同的分類區(qū)查找不同的商品。(3)收藏功能：可以在本交易平臺(tái)中有想要的商品卻不想立刻購(gòu)買，則可以將商品加入收藏、以便下次能夠快速找到這個(gè)商品(4)購(gòu)物車功能：可以在本交易平臺(tái)對(duì)商品進(jìn)行添加到購(gòu)物車、刪除購(gòu)物車、交易等操作。(5)交易查詢功能：可以在本交易平臺(tái)查看已經(jīng)進(jìn)行購(gòu)買過的商品(6)出售商品功能：可以在本交易平臺(tái)上傳封面、填寫商品信息等操作后，出售商品3.3 系統(tǒng)性能需求分析(1)注冊(cè)界面：如果想要擁有購(gòu)買商品的權(quán)利，第一步則是要注冊(cè)成為商城的用

28、戶，根據(jù)注冊(cè)的規(guī)范，賬號(hào)為11位學(xué)號(hào)或者是郵箱，密碼則不為空。(2)登錄界面：根據(jù)注冊(cè)過的賬號(hào)密碼進(jìn)行登錄，如果賬號(hào)密碼、驗(yàn)證碼其中有一項(xiàng)出錯(cuò)，都會(huì)提示錯(cuò)誤登陸失敗。(3)用戶個(gè)人信息界面：該功能僅登錄過的用戶才有權(quán)限使用?？梢孕薷挠脩舻年欠Q，用戶在學(xué)校的學(xué)號(hào)，用戶自己的聯(lián)系方式，住址等等。(4)收藏界面：該功能僅登錄過的用戶才有權(quán)限使用。在瀏覽商品時(shí)，可以將需要但暫時(shí)不需要購(gòu)買的商品進(jìn)行收藏。(5)購(gòu)物車界面：在本平臺(tái)中，與其他交易平臺(tái)的功能類似，將商品放到購(gòu)物車可以一并購(gòu)買。(6)我的交易界面：該功能僅登錄過的用戶才有權(quán)限使用。購(gòu)買過商品之后，能夠查看交易的信息。(7)我的評(píng)論界面：該功能

29、僅登錄過的用戶才有權(quán)限使用。可以對(duì)商品進(jìn)行評(píng)價(jià)，然后在我的評(píng)論界面看到你對(duì)商品的評(píng)價(jià)。(8)上傳商品界面：該功能僅登錄過的用戶才有權(quán)限使用?？梢赃M(jìn)行輸入商品名稱、上傳商品的封面(圖片)、輸入商品出售價(jià)格、選擇出售的商品種類、輸入商品介紹和售后保障等信息，點(diǎn)擊立即創(chuàng)建就可以出售商品。4.系統(tǒng)設(shè)計(jì)4.1 系統(tǒng)總體設(shè)計(jì)本交易平臺(tái)的的模式為B/S，即瀏覽器端跟服務(wù)器端兩方面，從前端獲取到后端的接口，最后將數(shù)據(jù)傳到前端中，由前端人員對(duì)網(wǎng)頁數(shù)據(jù)的插入分布。本交易平臺(tái)的應(yīng)用模式也極為簡(jiǎn)單，基本上依靠用戶本身就能夠進(jìn)行管理，在交易方面實(shí)現(xiàn)一對(duì)一的交接。用戶在交易平臺(tái)中必須經(jīng)過注冊(cè)才能進(jìn)行商品的交易，而未注冊(cè)的

30、用戶僅僅只能瀏覽商品，其總體的功能設(shè)計(jì)如下圖所示：圖4-1 系統(tǒng)流程圖4.2系統(tǒng)模塊設(shè)計(jì)4.2.1用戶注冊(cè)模塊設(shè)計(jì)在開發(fā)時(shí)對(duì)于安全性的考究，注冊(cè)的賬號(hào)為11位學(xué)號(hào)或者是郵箱，密碼則不為空。如果經(jīng)過后臺(tái)對(duì)用戶輸入的賬號(hào)密碼等驗(yàn)證成功之后，則將信息記錄，即注冊(cè)成功。若是違反了注冊(cè)規(guī)則，則系統(tǒng)會(huì)提示錯(cuò)誤，讓用戶重新進(jìn)行注冊(cè)。圖4-2 注冊(cè)流程圖4.2.2用戶登錄模塊設(shè)計(jì)如果用戶輸入的賬號(hào)密碼還有驗(yàn)證碼也均為正確，經(jīng)過后臺(tái)驗(yàn)證成功，則登錄成功進(jìn)入到首頁。如果輸入的賬號(hào)信息不正確，則系統(tǒng)會(huì)提示用戶信息的錯(cuò)誤4-3 登錄流程圖4.2.3用戶收藏模塊設(shè)計(jì)用戶在瀏覽商品時(shí)，可以將需要但暫時(shí)不需要購(gòu)買的商品進(jìn)行

31、收藏。在用戶點(diǎn)擊了收藏的按鈕之后，如果收藏成功則會(huì)提示用戶成功的信息，會(huì)提示錯(cuò)誤的信息。圖4-4 收藏流程圖4.2.4用戶評(píng)論模塊設(shè)計(jì)用戶在查看了商品的信息之后，可以對(duì)商品進(jìn)行評(píng)價(jià)或者留言，然后在我的評(píng)論界面看到你對(duì)這款商品的評(píng)價(jià)，評(píng)價(jià)成功則提示成功信息。圖4-5 評(píng)論流程圖4.2.5用戶上傳商品模塊設(shè)計(jì)在用戶想要出售商品時(shí)可以在個(gè)人信息界面下拉，在上傳商品界面，然后可以進(jìn)行輸入商品名稱、上傳商品的封面(圖片)、輸入商品出售價(jià)格、選擇出售的商品種類、輸入商品介紹和售后保障等信息，點(diǎn)擊立即創(chuàng)建就可以出售商品。如果上傳商品成功的話則提示創(chuàng)建成功，如果上傳的封面圖片大于2M或者圖片格式不為JPG，則

32、會(huì)提示上傳失敗。圖4-6 創(chuàng)建商品流程圖4.2.6用戶注銷模塊設(shè)計(jì)在用戶想要因登錄超時(shí)、切換賬號(hào)等因素需要退出登錄時(shí)，可以點(diǎn)擊退出按鈕。然后在登錄界面重新登錄。圖4-7 注銷流程圖4.3數(shù)據(jù)庫設(shè)計(jì)4.3.1數(shù)據(jù)庫概念結(jié)構(gòu)設(shè)計(jì)(1) 表單表圖4-8 表單E-R圖(2)用戶表圖4-9 用戶E-R圖(3)商品表圖4-10 商品E-R圖4.3.2數(shù)據(jù)庫邏輯結(jié)構(gòu)設(shè)計(jì)每一個(gè)功能都要有數(shù)據(jù)表將其數(shù)據(jù)一一對(duì)應(yīng)，使得數(shù)據(jù)完整性，而本系統(tǒng)開發(fā)所用到的幾個(gè)重要的表單如下：(1)表單表表單表s_base_form，在后臺(tái)中如果創(chuàng)建了一個(gè)表，則會(huì)將這個(gè)表的表單名等信息記錄到這個(gè)表單表中，其的主要信息如下面表中內(nèi)容所示。

33、表4-1 表單表字段id類型字節(jié)長(zhǎng)度是否為主鍵說明idbigint20y表單idtitlevarchar128n表單標(biāo)題collectionvarchar128n表單名(2)用戶表用戶表s_base_user，如果用戶創(chuàng)建了一個(gè)賬號(hào)，那么這個(gè)賬號(hào)信息將會(huì)在這用戶表中記錄下來。其主要的信息如下面表中內(nèi)容所示。表4-2 用戶表字段id類型字節(jié)長(zhǎng)度是否為主鍵說明idbigint20y用戶idavatartext-n頭像accountvarchar128n賬號(hào)passwordvarchar128n密碼user_namevarchar128n名字sexbigint20n性別emailvarchar128

34、n郵箱phonevarchar128n手機(jī)typebigint20n類型school_addressbigint20n住址(3)圖書表圖書表c_business_book_library，該表主要的是記錄商品的標(biāo)題、商品價(jià)格、商品封面等等。其主要的信息如下面表中內(nèi)容所示。表4-3 圖書表字段id類型字節(jié)大小是否為主鍵說明idbigint20Yes商品idtitlevarchar128no商品標(biāo)題covertext-n商品封面pricefloat-n商品價(jià)格starfloat-n商品星級(jí)評(píng)價(jià)comment_numint11n商品評(píng)論人數(shù)user_idbigint20n所屬的用戶authorvar

35、char128n商品的作者publishing_housevarchar128n商品出版社published_timedatetime-n商品出版的時(shí)間formatvarchar128n商品開本papervarchar128n商品紙張enfoldvarchar128n商品包裝suitedbit1n商品是否套裝detailslongtext-n商品詳情back_check_timedatetime-n后臺(tái)審核時(shí)間not_pass_reasontext-n不能通過的理由back_check_statusbigint20n后臺(tái)的審核狀態(tài)deletedbit1n是否已經(jīng)被刪除created_attim

36、estamp-n創(chuàng)建書籍的時(shí)間(4)電器表電器表c_business_electric_appliance，這個(gè)表是用戶上傳的電器所包含的信息。其主要的信息如下面表中內(nèi)容所示。表4-4 電器表字段id類型字節(jié)大小是否為主鍵說明idbigint20y商品的idtitlevarchar128n商品標(biāo)題covertext-n商品封面pricefloat-n商品價(jià)格starfloat-n商品星級(jí)comment_numint11n商品評(píng)論數(shù)user_idbigint20n商品所屬用戶brandvarchar128n商品品牌modelvarchar128n商品型號(hào)powervarchar128n商品功率t

37、ypevarchar128n商品類型detailslongtext-n詳情back_check_timedatetime-n后臺(tái)的審核時(shí)間not_pass_reasontext-n不能通過的理由back_check_statusbigint20n后臺(tái)的審核狀態(tài)(5)運(yùn)動(dòng)商品表運(yùn)動(dòng)商品表c_business_sports_special，這個(gè)表是運(yùn)動(dòng)商品的標(biāo)題、商品價(jià)格、商品的封面等等。其主要的信息如表4-5所示。表4-5 運(yùn)動(dòng)商品表字段id類型字節(jié)大小是否為主鍵說明idbigint20y商品idtitlevarchar128n商品標(biāo)題covertext-n商品封面pricefloat-n商品價(jià)

38、格starfloat-n商品星級(jí)comment_numint11n商品評(píng)論數(shù)user_idbigint20n商品所屬用戶brandvarchar128n商品品牌patternvarchar128n商品型號(hào)detailslongtext-n商品詳情back_check_timedatetime-n后臺(tái)的審核時(shí)間not_pass_reasontext-n不能通過的理由back_check_statusbigint20n后臺(tái)的審核狀態(tài)(6)數(shù)碼產(chǎn)品表數(shù)碼產(chǎn)品表c_business_digital_square，該表主要的是記錄商品的標(biāo)題、商品價(jià)格、商品封面等等。其主要的信息如表4-6所示。表4-6

39、數(shù)碼產(chǎn)品表字段id類型字節(jié)大小是否為主鍵說明idbigint20y商品idtitlevarchar128n商品標(biāo)題covertext-n商品封面pricefloat-n商品價(jià)格starfloat-n商品星級(jí)comment_numint11n商品評(píng)論數(shù)user_idbigint20n所屬用戶brandvarchar128n商品品牌patternvarchar128n商品型號(hào)detailslongtext-n商品詳情back_check_timedatetime-n后臺(tái)審核時(shí)間not_pass_reasontext-n不能通過的理由back_check_statusbigint20n后臺(tái)的審核狀態(tài)

40、5.系統(tǒng)實(shí)現(xiàn)5.1用戶注冊(cè)登錄界面功能該頁面在本交易平臺(tái)中進(jìn)入首頁后，通過點(diǎn)擊網(wǎng)頁的右上角進(jìn)入注冊(cè)頁面，注冊(cè)時(shí)則應(yīng)遵守注冊(cè)規(guī)則，用戶名為學(xué)號(hào)或郵箱、密碼則不為空，確認(rèn)密碼時(shí)兩次的密碼必須相同。注冊(cè)的具體界面如圖5.1.1所示：圖5-1 注冊(cè)界面進(jìn)入到本交易平臺(tái)之后，首先可以看到右上角的登錄字樣，點(diǎn)擊就能進(jìn)入到登錄的界面，然后輸入賬號(hào)密碼，經(jīng)過后臺(tái)驗(yàn)證后成功登錄。登錄的具體界面如圖5.1.2所示：圖5-2 登錄界面5.2首頁界面本交易平臺(tái)即使沒有通過注冊(cè)賬號(hào)進(jìn)行登錄也能進(jìn)入，并且可以看到上面有許多分類，點(diǎn)擊不同的分類能看到不同種類的商品。具體的界面如圖5.2.1、圖5.2.2所示：圖5-3 首頁

41、界面圖5-4 分類界面5.3商品詳細(xì)信息功能在進(jìn)入到本交易平臺(tái)的首頁后，可以點(diǎn)擊商品查看其相關(guān)的信息，而更多的操作，比如以及使用加入購(gòu)物車等功能，則需要通過登錄才能使用。界面如圖5.3.1所示：圖5-5 商品詳細(xì)信息界面5.4個(gè)人信息界面這個(gè)功能本交易平臺(tái)只對(duì)登陸過的用戶進(jìn)行開發(fā)，而沒有進(jìn)行登錄的用于必須進(jìn)行登錄之后才能進(jìn)入到這個(gè)頁面。其界面如下圖所示：圖5-6 個(gè)人信息界面5.5購(gòu)物車功能在本交易平臺(tái)中，使用購(gòu)物車這個(gè)功能，能方便用戶對(duì)多個(gè)商品一起購(gòu)買。其具體的界面如圖5.5.1所示：圖5-7 購(gòu)物車界面5.6評(píng)論功能對(duì)于任何類型的用戶，都可以使用評(píng)價(jià)這個(gè)功能，在商品信息的下方評(píng)論區(qū)進(jìn)行評(píng)價(jià)

42、留言，而評(píng)論的歷史記錄會(huì)被記錄。具體的界面如圖5.6.1所示： 圖5-8 評(píng)論功能界面5.7上傳商品功能本系統(tǒng)的用戶們可以將自己想要出手的商品進(jìn)行上傳出售?？梢暂斎朊Q、上傳封面、輸入商品出售價(jià)、選擇商品種類、輸入商品介紹、售后保障等信息，然后會(huì)對(duì)上傳的商品會(huì)通過驗(yàn)證上架到該平臺(tái)。界面如圖5.7.1所示：圖5-9 上傳商品功能界面6.系統(tǒng)測(cè)試6.1測(cè)試概述在這個(gè)21世紀(jì)中，社會(huì)是一個(gè)信息化時(shí)代，而隨著網(wǎng)絡(luò)不斷的優(yōu)化迭代，對(duì)于網(wǎng)站的安全也是開發(fā)中的重要一環(huán)，而為了讓開發(fā)的網(wǎng)站，能夠持續(xù)地按照預(yù)期的運(yùn)行，就需要定期和持續(xù)的維護(hù)8。具有良好功能的計(jì)算機(jī)軟件，能讓使用人員在使用軟件的同時(shí)，能擁有更好的用戶體驗(yàn)，進(jìn)而能保證軟件的使用人員的操作正確，完成所預(yù)期的功能7。所以，我們做好了軟件測(cè)試就是代碼的維護(hù)中的一個(gè)重要環(huán)節(jié)，可以檢測(cè)到代碼是不是有錯(cuò)誤、是不是能在原代碼上有所更新，對(duì)于我們開發(fā)的效率影響極大。而測(cè)試是開發(fā)的收尾工作，但也是最重要的工作之一，如果在上線后仍檢測(cè)出了問題，那么成本相比開發(fā)時(shí)的費(fèi)用要多得多，這樣就能或多或少的降低我們開發(fā)的成本，避免一些不必要的風(fēng)險(xiǎn)。6.2測(cè)試環(huán)境下面為開發(fā)本交易平臺(tái)所使用的的電腦測(cè)試的環(huán)境：(1) CPU：Intel(R)Core(TM)i7-3630QM CPU 2.40GHz(2) RAM：12G(3) OS：Windo