王金滔

摘要：跟隨時(shí)代與互聯(lián)網(wǎng)的腳步，“網(wǎng)購”已經(jīng)進(jìn)入到每一個(gè)家庭中了，而大學(xué)的跳蚤市場依然存在著，那么搭建一個(gè)平臺(tái)已然是趨勢(shì)所致。對(duì)系統(tǒng)進(jìn)行整體架構(gòu)的搭建、數(shù)據(jù)庫、功能模塊以及ASP.NET MVC設(shè)計(jì)，運(yùn)用C#語言、ORM技術(shù)（EF實(shí)體框架）以及IOC（控制反轉(zhuǎn)）思想，結(jié)合ElementUI和Vue.Js前端框架，實(shí)現(xiàn)了系統(tǒng)的商品分類瀏覽、商品發(fā)布、商品搜索、商品詳情頁瀏覽以及商品的交易等功能。經(jīng)測試后，該系統(tǒng)十分穩(wěn)定可靠，使用這一系列技術(shù)構(gòu)成的框架使得系統(tǒng)性能高、安全性高、用戶體驗(yàn)強(qiáng)，能夠很好地滿足大學(xué)生閑置物品的交易需求。

關(guān)鍵詞：校園閑置商品;ASP.NET MVC;ORM技術(shù);Vue.Js;IOC

中圖分類號(hào)：TP393文獻(xiàn)標(biāo)識(shí)碼：A? ? ? 文章編號(hào)：1009-3044（2018）36-0074-03

Abstract：Following the times and the Internet， "online shopping" has entered every family， and the university's flea market still exists， so building a platform is already a trend. The overall architecture of the system， database， functional modules and ASP.NET MVC design， using C# language， ORM technology （EF entity framework） and IOC （control reversal） ideas， combined with ElementUI and Vue.Js front-end framework， realized The system's product category browsing， product distribution， product search， product detail page browsing， and product transactions. After testing， the system is very stable and reliable. The framework of this series of technologies makes the system performance high， high security， strong user experience， and can well meet the trading needs of college students' idle items.

Key words： campus idle commodity; ASP.NET MVC; O/R mapping; Vue.Js; IOC

1 背景

大學(xué)里的跳蚤市場就是解決學(xué)生們的閑置物品，而跳蚤市場的時(shí)間地點(diǎn)由學(xué)校決定，因此有些同學(xué)不能及時(shí)參加或者是其他因素而直接放棄該次跳蚤市場。還有的是在不舉行跳蚤市場的時(shí)候，有些同學(xué)又想將手中的閑置物品交易卻找不到渠道出售，往往大多數(shù)同學(xué)會(huì)將其中的一些物品當(dāng)作廢棄品而扔進(jìn)了垃圾桶里，白白浪費(fèi)了資源。雖然有閑魚、二手交易市場等網(wǎng)站，但那些都是所有群體的，有些小件的商品估計(jì)郵費(fèi)都比不上，根本解決不了大學(xué)的閑置物品交易的需求，所以就需要一個(gè)便于校園閑置商品交易的平臺(tái)。

2 相關(guān)技術(shù)介紹

2.1 ASP.NET MVC

ASP.NET是微軟.NET框架的一部分，是一個(gè)統(tǒng)一的 Web開發(fā)模型，是建立、部署及執(zhí)行 Web 應(yīng)用程序的平臺(tái)。MVC 架構(gòu)的核心思想是將程序分成相對(duì)獨(dú)立，而又能協(xié)同工作的3個(gè)部分：模型、視圖、控制器。降低模塊之間的耦合，為大型可擴(kuò)展的 Web 應(yīng)用開發(fā)提供了一個(gè)結(jié)構(gòu)化的模型[1]。ASP.NET加上MVC架構(gòu)使得整個(gè)系統(tǒng)各個(gè)模塊的職責(zé)更加的清晰，使得系統(tǒng)大大降低代碼出錯(cuò)率，提高工作效率。

2.2 ORM技術(shù)

Microsoft Entity Framework是一個(gè)對(duì)象關(guān)系映射（ORM）工具，它能將關(guān)系型數(shù)據(jù)轉(zhuǎn)換成.net數(shù)據(jù)對(duì)象，也可以將.net數(shù)據(jù)對(duì)象轉(zhuǎn)換成關(guān)系型數(shù)據(jù)。采用Entity Framework開發(fā)技術(shù)，可分為三種不同的開發(fā)模式，分別是數(shù)據(jù)庫優(yōu)先開發(fā)模式（database first）、模型優(yōu)先開發(fā)模式（model first）、代碼優(yōu)先開發(fā)模式（code first）[2]，而該文采用的正是其中的model first模式進(jìn)行數(shù)據(jù)庫操作，并且ORM是僅僅修改配置就能切換數(shù)據(jù)庫的，非常簡單方便。

2.3 IOC

IOC的中文翻譯為控制反轉(zhuǎn)。對(duì)于框架而言就是由容器控制程序之間的關(guān)系，而非傳統(tǒng)實(shí)現(xiàn)中，由程序代碼直接操控。這就是“控制反轉(zhuǎn)”的概念的本意，即控制權(quán)由應(yīng)用代碼中轉(zhuǎn)到了外部容器， 控制權(quán)轉(zhuǎn)移[3]。只有用到某個(gè)對(duì)象時(shí)才new一個(gè)對(duì)象，這種機(jī)制明顯降低了對(duì)內(nèi)存的浪費(fèi)，合理有效的利用少資源做大事情。

2.4 ElementUI和Vue.Js

Vue.Js是一個(gè)漸進(jìn)式的框架，它只關(guān)注于前端的視圖與數(shù)據(jù)的傳輸，并實(shí)現(xiàn)了雙向數(shù)據(jù)綁定的功能，真正地讓前后端分離。而ElementUI是一個(gè)符合人類邏輯的專門為Vue而生的前端框架，ElementUI配合Vue的是一個(gè)輕量級(jí)的、性能高的、安全性高的前端框架。

3 系統(tǒng)設(shè)計(jì)

3.1 總體架構(gòu)設(shè)計(jì)

考慮到系統(tǒng)整體的性能、穩(wěn)定性以及可維護(hù)性，底層代碼使用了MVC的開發(fā)模式，分層的思想可以降低模塊間的耦合度，從而提高模塊的工作質(zhì)量。1）數(shù)據(jù)訪問層：數(shù)據(jù)庫使用的是SQL Server，而連接和操作數(shù)據(jù)庫用的是EF實(shí)體框架，它是Visual Studio自帶的ORM框架，不僅契合度高，它的命令式編程還使得寫代碼的效率提高。2）業(yè)務(wù)邏輯層：即處理操作以及數(shù)據(jù)的一個(gè)層次，能夠有效地隔離前端與后臺(tái)的聯(lián)系，相當(dāng)于一個(gè)餐館的服務(wù)員一般，處理相對(duì)應(yīng)的業(yè)務(wù)。3）應(yīng)用層：就是系統(tǒng)前臺(tái)，采用ElementUI、Vue、HTML和CSS來實(shí)現(xiàn)頁面的布局和數(shù)據(jù)的綁定。

MVC的主要思想體現(xiàn)在，前端View使用Vue的axios發(fā)送異步請(qǐng)求傳遞到Controller，Controller去Model中讀取或者寫入數(shù)據(jù)，Model通過EF操作數(shù)據(jù)庫，Controller將邏輯處理后的結(jié)果以JSON的格式傳輸給前端。經(jīng)過該一系列操作后還能得知系統(tǒng)的前后端數(shù)據(jù)是如何進(jìn)行傳輸?shù)摹?/p>

3.2 功能模塊設(shè)計(jì)

該系統(tǒng)主要實(shí)現(xiàn)用戶模塊和商品模塊兩大功能模塊：

1） 用戶模塊：用戶模塊分為用戶注冊(cè)、用戶登錄、修改密碼、修改個(gè)人信息等模塊。用戶注冊(cè)時(shí)后臺(tái)使用MD5的加密算法對(duì)密碼進(jìn)行加密處理，保證用戶的賬號(hào)安全;用戶登錄后會(huì)跳轉(zhuǎn)至你之前點(diǎn)擊登錄的頁面;修改密碼就是匹配你之前的密碼是否一致，還匹配你如今輸入的兩個(gè)新密碼是否一致;修改個(gè)人信息就是可以修改你的信息成為獨(dú)特的Style。

2） 商品模塊：商品模塊分為商品發(fā)布、商品分類瀏覽、商品詳情頁瀏覽、購物車等模塊。商品發(fā)布可以讓用戶輸入名稱、價(jià)格、新舊程度、描述以及上傳不大于2M的5張以內(nèi)圖片;商品分類瀏覽是在首頁，以男裝、女裝、數(shù)碼等類別分別展示給用戶;商品詳情頁瀏覽是讓用戶能夠清晰地看到該商品的更加全面的信息;購物車是用戶存儲(chǔ)著的商品，以備用戶隨時(shí)進(jìn)行購買或取消操作。

3.3 數(shù)據(jù)庫設(shè)計(jì)

1） 用戶表：姓名、年齡、QQ、密碼、個(gè)性簽名、是否被刪除。

2） 商品表：名稱、圖片地址、描述、價(jià)格、使用年限。

3） 類別表：名稱、所屬父級(jí)類別。

4） 訂單表：出售者、購買者、訂單編號(hào)、是否交易成功。

4 系統(tǒng)實(shí)現(xiàn)

4.1 關(guān)鍵技術(shù)的實(shí)現(xiàn)

4.1.1 ORM技術(shù)的實(shí)現(xiàn)

在該系統(tǒng)操作數(shù)據(jù)庫的時(shí)候，采用的是Visual Studio自帶的EF實(shí)體框架，操作數(shù)據(jù)庫的增刪改查方法，以一個(gè)用戶表的查詢?yōu)槔簆ublic List<UserInfo>GetAllUserInfo（）{return content.UserInfo.ToList（）;}。EF的操作全部封裝到了content當(dāng)中，相對(duì)于傳統(tǒng)的SqlHelper工具類，將操作數(shù)據(jù)庫的Sql語句全部做了封裝，僅僅需要一行代碼就足以將數(shù)據(jù)查詢出來，真正地體現(xiàn)了高效率，還有一點(diǎn)不同的是EF跨數(shù)據(jù)庫，你僅需在配置文件中做簡單修改替換即可實(shí)現(xiàn)跨數(shù)據(jù)庫的復(fù)雜功能，十分便利。

4.1.2 ASP.NET MVC的實(shí)現(xiàn)

我在傳統(tǒng)的ASP.NET開發(fā)基礎(chǔ)之上，引進(jìn)了MVC思想，Controller就相當(dāng)于餐館的服務(wù)員和廚師，Model相對(duì)于后廚中的各種菜，View相當(dāng)于顧客，當(dāng)顧客決定吃什么時(shí)，Controller從Model取出數(shù)據(jù)進(jìn)行一系列操作完成顧客的要求后傳給View。從而實(shí)現(xiàn)了分層的思想。該系統(tǒng)以用戶注冊(cè)為例：前臺(tái)點(diǎn)擊注冊(cè)按鈕后，經(jīng)過請(qǐng)求到Controller下的Regist（）方法，方法中將數(shù)據(jù)封裝到Model中，通過Model存儲(chǔ)到數(shù)據(jù)庫，Controller得到反饋將成功信息傳送給View，頁面跳轉(zhuǎn)至商品首頁，期間Model不知道數(shù)據(jù)是干什么的，也不關(guān)心怎么得到的，而Controller就是處理傳遞數(shù)據(jù)的，前端僅僅是展示數(shù)據(jù)的，他們分工明確，一旦出錯(cuò)也能快速找到“負(fù)責(zé)人”從而解決問題。

4.2 功能模塊的實(shí)現(xiàn)

商品分類瀏覽、商品發(fā)布、商品搜索、商品詳情頁瀏覽以及商品的交易等這些主要功能都已基本完整實(shí)現(xiàn)。

1） 商品分類瀏覽、商品搜索功能實(shí)現(xiàn)如圖1，左邊的分類欄可供用戶選擇不同類型的商品，右邊則為商品的展示，同時(shí)還有個(gè)分頁的實(shí)現(xiàn)。在商品的展示上面就是商品搜索功能，用戶可以直入主題，過濾掉不喜歡的，尋找自己想要的閑置物品。

2） 商品詳情頁瀏覽功能實(shí)現(xiàn)如圖2，用戶可以清楚地看到商品的詳細(xì)信息，有價(jià)格、新舊程度、發(fā)布時(shí)間、瀏覽次數(shù)、獲贊（踩）次數(shù)以及商品主人名字和主人聯(lián)系方式等，如此便能夠全面地幫助你考慮這件商品的下一步操作。

3） 商品的交易功能如圖3，在圖1圖2中都有加入購物車的功能，而在圖3你可以點(diǎn)擊購買，或者是清除購物車等操作。

4） 商品發(fā)布的功能可以讓用戶發(fā)布自己的閑置商品，填寫名稱、使用年限、商品描述、商品價(jià)格以及上傳圖片等一系列操作后，發(fā)布商品供其他用戶選擇，在填寫商品參數(shù)時(shí)，名稱有長度要求，價(jià)格只能是數(shù)字，而上傳圖片時(shí)，每張圖片大小不超過2M，并且一次的上傳數(shù)量不能超過5張。

5 結(jié)束語

該文闡述了在ASP.NET MVC的基礎(chǔ)上設(shè)計(jì)開發(fā)校園閑置商品交易平臺(tái)的開發(fā)思路以及大概的實(shí)現(xiàn)過程。該系統(tǒng)通過ASP.NET MVC、數(shù)據(jù)庫的設(shè)計(jì)以及整體架構(gòu)的設(shè)計(jì)，運(yùn)用C#語言、ORM技術(shù)（EF實(shí)體框架）以及Spring.NET的IOC思想，結(jié)合ElementUI和Vue.Js使得商品發(fā)布、商品分類瀏覽、商品搜索、商品詳情頁瀏覽以及商品的交易等預(yù)期功能都幾乎完整地實(shí)現(xiàn)了。最后該系統(tǒng)還需要在實(shí)際的使用中反復(fù)進(jìn)行測試，并且不斷地調(diào)整優(yōu)化。

參考文獻(xiàn)：

[1] 李園， 陳世平. MVC設(shè)計(jì)模式在ASP.NET平臺(tái)中的應(yīng)用[J]. 計(jì)算機(jī)工程與設(shè)計(jì)， 2009（13）：146-150.

[2] 龔蘭蘭. 基于ASP.netMVC的智能名片后臺(tái)系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]. 蘇州市職業(yè)大學(xué)學(xué)報(bào)， 2017， 28（1）：5-9.

[3] 魏學(xué)松， 張育平. IOC框架的研究與設(shè)計(jì)[J]. 計(jì)算機(jī)技術(shù)與發(fā)展， 2006（3）：219-222.

[通聯(lián)編輯：謝媛媛]