基于 Vue的購物商城設計與實現(xiàn)

1、基于 Vue的購物商城設計與實現(xiàn)Design and Implementation of Online shopping mallBased on Vue摘要隨著網(wǎng)絡信息化的發(fā)展，網(wǎng)上的交易平臺日趨增多，也給大學生們提供了更多的便利。其中大部分大學生都會使用網(wǎng)上購物，因為這更能夠給他們提供一個購買安全、便捷的一個渠道。而二手的交易平臺也是如此，能夠為大學生們提供物美價廉的交易平臺，也能夠將物品循環(huán)利用，而其核心也是商品的買賣。本購物商城平臺，針對的是大學校內的群體，商城的商品屬于二手交易，前臺交易的實現(xiàn)了用戶能夠進行商品的瀏覽，也能對商品進行選購，更主要還是能夠上傳自己想要出售的商品，讓其他用

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

3、合性低的方向進行，由此開發(fā)出一個基于 Vue的網(wǎng)上購物商城平臺關鍵詞：前后端分離; Vue; 組件化; JavaScrip廣東東軟學院本科畢業(yè)設計（論文）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課題研究的內容51.5課題的開發(fā)目標52.系統(tǒng)相關技術和開發(fā)環(huán)境52.1前端

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

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

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

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

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

15、地將物品送到買家手上，而這種情況更加能推動二手交易的進行。而本平臺意旨在能夠給大學生們提供這樣的一個平臺，讓大學生低價買到想要的商品，讓賣家出售自己不要的，提供一個更加快捷的方式。1.3研究現(xiàn)狀我國的電子商務始于90年代，有了多年的發(fā)展。就目前而言，有90%以上的大學生會選擇網(wǎng)上購買生活中需要的商品，極少數(shù)人會去實體店進行購買，因此推動了很多交易平臺的發(fā)展，不僅僅是類似淘寶、京東這種大的交易平臺，還有現(xiàn)在市面上最火的應是咸魚交易平臺，二這個平臺之所以這么火，是因為它是從屬于淘寶，所以它的優(yōu)點就是用戶數(shù)量一開始就比較大，但是缺點也因為物品的參差不齊，沒有第三方的校驗，并不能保證其百分百的質量。對

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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