校园闲置商品交易平台的设计与实现

王金滔

摘要：跟随时代与互联网的脚步，“网购”已经进入到每一个家庭中了，而大学的跳蚤市场依然存在着，那么搭建一个平台已然是趋势所致。对系统进行整体架构的搭建、数据库、功能模块以及ASP.NET MVC设计，运用C#语言、ORM技术（EF实体框架）以及IOC（控制反转）思想，结合ElementUI和Vue.Js前端框架，实现了系统的商品分类浏覽、商品发布、商品搜索、商品详情页浏览以及商品的交易等功能。经测试后，该系统十分稳定可靠，使用这一系列技术构成的框架使得系统性能高、安全性高、用户体验强，能够很好地满足大学生闲置物品的交易需求。

关键词：校园闲置商品;ASP.NET MVC;ORM技术;Vue.Js;IOC

中图分类号：TP393文献标识码：A      文章编号：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 背景

大学里的跳蚤市场就是解决学生们的闲置物品，而跳蚤市场的时间地点由学校决定，因此有些同学不能及时参加或者是其他因素而直接放弃该次跳蚤市场。还有的是在不举行跳蚤市场的时候，有些同学又想将手中的闲置物品交易却找不到渠道出售，往往大多数同学会将其中的一些物品当作废弃品而扔进了垃圾桶里，白白浪费了资源。虽然有闲鱼、二手交易市场等网站，但那些都是所有群体的，有些小件的商品估计邮费都比不上，根本解决不了大学的闲置物品交易的需求，所以就需要一个便于校园闲置商品交易的平台。

2 相关技术介绍

2.1 ASP.NET MVC

ASP.NET是微软.NET框架的一部分，是一个统一的 Web开发模型，是建立、部署及执行 Web 应用程序的平台。MVC 架构的核心思想是将程序分成相对独立，而又能协同工作的3个部分：模型、视图、控制器。降低模块之间的耦合，为大型可扩展的 Web 应用开发提供了一个结构化的模型[1]。ASP.NET加上MVC架构使得整个系统各个模块的职责更加的清晰，使得系统大大降低代码出错率，提高工作效率。

2.2 ORM技术

Microsoft Entity Framework是一个对象关系映射（ORM）工具，它能将关系型数据转换成.net数据对象，也可以将.net数据对象转换成关系型数据。采用Entity Framework开发技术，可分为三种不同的开发模式，分别是数据库优先开发模式（database first）、模型优先开发模式（model first）、代码优先开发模式（code first）[2]，而该文采用的正是其中的model first模式进行数据库操作，并且ORM是仅仅修改配置就能切换数据库的，非常简单方便。

2.3 IOC

IOC的中文翻译为控制反转。对于框架而言就是由容器控制程序之间的关系，而非传统实现中，由程序代码直接操控。这就是“控制反转”的概念的本意，即控制权由应用代码中转到了外部容器， 控制权转移[3]。只有用到某个对象时才new一个对象，这种机制明显降低了对内存的浪费，合理有效的利用少资源做大事情。

2.4 ElementUI和Vue.Js

Vue.Js是一个渐进式的框架，它只关注于前端的视图与数据的传输，并实现了双向数据绑定的功能，真正地让前后端分离。而ElementUI是一个符合人类逻辑的专门为Vue而生的前端框架，ElementUI配合Vue的是一个轻量级的、性能高的、安全性高的前端框架。

3 系统设计

3.1 总体架构设计

考虑到系统整体的性能、稳定性以及可维护性，底层代码使用了MVC的开发模式，分层的思想可以降低模块间的耦合度，从而提高模块的工作质量。1）数据访问层：数据库使用的是SQL Server，而连接和操作数据库用的是EF实体框架，它是Visual Studio自带的ORM框架，不仅契合度高，它的命令式编程还使得写代码的效率提高。2）业务逻辑层：即处理操作以及数据的一个层次，能够有效地隔离前端与后台的联系，相当于一个餐馆的服务员一般，处理相对应的业务。3）应用层：就是系统前台，采用ElementUI、Vue、HTML和CSS来实现页面的布局和数据的绑定。

MVC的主要思想体现在，前端View使用Vue的axios发送异步请求传递到Controller，Controller去Model中读取或者写入数据，Model通过EF操作数据库，Controller将逻辑处理后的结果以JSON的格式传输给前端。经过该一系列操作后还能得知系统的前后端数据是如何进行傳输的。

3.2 功能模块设计

该系统主要实现用户模块和商品模块两大功能模块：

1） 用户模块：用户模块分为用户注册、用户登录、修改密码、修改个人信息等模块。用户注册时后台使用MD5的加密算法对密码进行加密处理，保证用户的账号安全;用户登录后会跳转至你之前点击登录的页面;修改密码就是匹配你之前的密码是否一致，还匹配你如今输入的两个新密码是否一致;修改个人信息就是可以修改你的信息成为独特的Style。

2） 商品模块：商品模块分为商品发布、商品分类浏览、商品详情页浏览、购物车等模块。商品发布可以让用户输入名称、价格、新旧程度、描述以及上传不大于2M的5张以内图片;商品分类浏览是在首页，以男装、女装、数码等类别分别展示给用户;商品详情页浏览是让用户能够清晰地看到该商品的更加全面的信息;购物车是用户存储着的商品，以备用户随时进行购买或取消操作。

3.3 数据库设计

1） 用户表：姓名、年龄、QQ、密码、个性签名、是否被删除。

2） 商品表：名称、图片地址、描述、价格、使用年限。

3） 类别表：名称、所属父级类别。

4） 订单表：出售者、购买者、订单编号、是否交易成功。

4 系统实现

4.1 关键技术的实现

4.1.1 ORM技术的实现

在该系统操作数据库的时候，采用的是Visual Studio自带的EF实体框架，操作数据库的增删改查方法，以一个用户表的查询为例：public List<UserInfo>GetAllUserInfo（）{return content.UserInfo.ToList（）;}。EF的操作全部封装到了content当中，相对于传统的SqlHelper工具类，将操作数据库的Sql语句全部做了封装，仅仅需要一行代码就足以将数据查询出来，真正地体现了高效率，还有一点不同的是EF跨数据库，你仅需在配置文件中做简单修改替换即可实现跨数据库的复杂功能，十分便利。

4.1.2 ASP.NET MVC的实现

我在传统的ASP.NET开发基础之上，引进了MVC思想，Controller就相当于餐馆的服务员和厨师，Model相对于后厨中的各种菜，View相当于顾客，当顾客决定吃什么时，Controller从Model取出数据进行一系列操作完成顾客的要求后传给View。从而实现了分层的思想。该系统以用户注册为例：前台点击注册按钮后，经过请求到Controller下的Regist（）方法，方法中将数据封装到Model中，通过Model存储到数据库，Controller得到反馈将成功信息传送给View，页面跳转至商品首页，期间Model不知道数据是干什么的，也不关心怎么得到的，而Controller就是处理传递数据的，前端仅仅是展示数据的，他们分工明确，一旦出错也能快速找到“负责人”从而解决问题。

4.2 功能模块的实现

商品分类浏览、商品发布、商品搜索、商品详情页浏览以及商品的交易等这些主要功能都已基本完整实现。

1） 商品分类浏览、商品搜索功能实现如图1，左边的分类栏可供用户选择不同类型的商品，右边则为商品的展示，同时还有个分页的实现。在商品的展示上面就是商品搜索功能，用户可以直入主题，过滤掉不喜欢的，寻找自己想要的闲置物品。

2） 商品详情页浏览功能实现如图2，用户可以清楚地看到商品的详细信息，有价格、新旧程度、发布时间、浏览次数、获赞（踩）次数以及商品主人名字和主人联系方式等，如此便能够全面地帮助你考虑这件商品的下一步操作。

3） 商品的交易功能如图3，在图1图2中都有加入购物车的功能，而在图3你可以点击购买，或者是清除购物车等操作。

4） 商品发布的功能可以让用户发布自己的闲置商品，填写名称、使用年限、商品描述、商品价格以及上传图片等一系列操作后，发布商品供其他用户选择，在填写商品参数时，名称有长度要求，价格只能是数字，而上传图片时，每张图片大小不超过2M，并且一次的上传数量不能超过5张。

5 结束语

该文阐述了在ASP.NET MVC的基础上设计开发校园闲置商品交易平台的开发思路以及大概的实现过程。该系统通过ASP.NET MVC、数据库的设计以及整体架构的设计，运用C#语言、ORM技术（EF实体框架）以及Spring.NET的IOC思想，结合ElementUI和Vue.Js使得商品发布、商品分类浏览、商品搜索、商品详情页浏览以及商品的交易等预期功能都几乎完整地实现了。最后该系统还需要在实际的使用中反复进行测试，并且不断地调整优化。

参考文献：

[1] 李园， 陈世平. MVC设计模式在ASP.NET平台中的应用[J]. 计算机工程与设计， 2009（13）：146-150.

[2] 龚兰兰. 基于ASP.netMVC的智能名片后台系统的设计与实现[J]. 苏州市职业大学学报， 2017， 28（1）：5-9.

[3] 魏学松， 张育平. IOC框架的研究与设计[J]. 计算机技术与发展， 2006（3）：219-222.

[通联编辑：谢媛媛]