基于MVC的校园电子商城的设计与实现
作者：赵贝贝 梅一垚
来源：《电子技术与软件工程》2015年第01期
本文介绍了用MVC思想构建一个校园电子商城系统的过程，分析了搭建校园电子商城系统所需要的开发和应用环境、整体架构、相关网页及数据库的设计和制作，并提出了一系列独特的设计思路。目前项目已上线近半年，系统运行良好，校内外师生反响优异。
【关键词】电子商城 系统设计 MVC模型 Web安全
1 引言
目前，互联网的飞速发展改变了人们的生产和生活方式。基于web2.0的电子商务，顺应了时代的潮流，受到了世界的瞩目。淘宝网，京东商城，ebay等电子商务网站为首的网上商城已经成为电子商务成功的典型案例。但淘宝网，当当网等网站大多专注于全新商品的出售，商品交换往往需要经过几天甚至十几天的快递，而且快递过程中商品的安全性也无法保证。现如
今，在大学校园内，二手交易的发展如火如荼。通过“校园淘宝”来购买便宜可靠的二手商品，交易过程方便且省去了快递费用。
本文的研究目标是在校园范围内利用学校的计算机网络、计算机硬件、软件和电子通讯手段搭建一个基于校园网的属于南航师生自己的电子商城，能将当前学校各相关的信息进行有效集成，用来满足校园内各单位、各企业或个人进行商务、工作、学习和生活等方面活动。
2 系统分析与设计
通常电子商城都是基于购物车模式来设计的，但基于校园网的电子商城商品分布零散，且不具有在线支付的功能，所以去掉了购物车功能，并用收藏功能来代替。用户可方便的往收藏夹中添加商品，以及进行删除等操作。
2.1 需求分析
对在校学生来讲，一些常见的需求：
（1）二手商品出售/求购，比如说旧书，旧衣服等。
（2）校内自主创业，在校内开店，类似于淘宝店铺。
（3）租赁，比如说自行车，烧烤架等。
2.2 系统框架设计
校园电子商城系统作为面向Internet的Web应用，需要采用B/S（Browser/Server）架构。系统整体采用MVC思想进行设计。MVC是一个框架模式，它强制性的使应用程序的输入、处理和输出分开。使用MVC应用程序被分成三个核心部件：模型（Model）、视图（View）、控制器（Controller）。具体功能如图1所示。
为了实现MVC的设计模式，系统采用了国内流行的ThinkPHP框架。在ThinkPHP中，系统封装了一系列的curl函数，可以方便的操作数据库。我们在开发过程中也根据实际需求对函数进行了更细化的封装。对于数据在服务器端和客户端交互时频繁出现的访问控制问题，我们在开发过程中将这一部分独立成公共控制器，控制层在接收数据的时候首先访问公共控制器，判断当前用户是否有权限访问相应的数据。如果没有权限访问，则跳转到登录页面或者404页面。
2.3 系统整体架构
针对在校大学生的消费需求，我们为校园电子商城设计了如下模块：二手交易，商铺，换客，后台管理和个人中心共五个模块。
考虑到校园二手交易的即时性以及不确定性，用户在二手交易模块发布新商品并不需要复杂的申请流程，所有注册用户随时都可以上传商品照片并发布新商品。同时系统也提供店铺模式，长期稳定出售商品的用户可申请店铺，并为自己的店铺发布商品。换客模块设计的核心是以物换物，为没有特定需求的用户提供娱乐功能。用户的出售/求购记录以及收藏记录等都在个人中心模块统一展示。整体架构如图2所示。
2.4系统核心类设计
系统的整体架构为PHP+MySQL+ Apache。
系统较大，涉及的类较多，系统类图如图3所示。类的详细设计由于篇幅限制，此处仅列举系统核心类——商品信息类的设计，如表2所示。
3 系统实现
限于篇幅，本文只对几个重要的实现功能进行介绍。
3.1 页面实现与交互
在页面中为了能够减轻服务器端的压力，减小带宽消耗，同时优化用户体验，减少用户心理和实际的等待时间，避免白屏现象，采用了AJAX技术。
AJAX全称为“Asynchronous JavaScript and XML”是由杰西·詹姆斯·加勒特首先提出的，其核心是利用 AJAX 的异步交互模式，减轻服务器负担，提高应用操作的执行效率。
与传统的Web应用不同，AJAX采用异步交互过程。AJAX在用户与服务器之间引入一个中间媒介，从而消除了网络交互过程中的处理一等待一处理一等待缺点。当用户触发DOM元素绑定的事件后，浏览器在不刷新页面的情况下向服务器请求数据，然后将服务器返回的数据通过更改DOM元素来体现在页面中，从而实现无刷新式响应。
mvc的三层架构 最初我们采用了JavaScript来实现Ajax。JavaScript的XMLHttpRequest对象提供了几个常用的接口来实现Ajax，但在实际开发过程中，我们发现IE并不支持XMLHttpRequest对象。为了兼容IE必须许多冗余代码。为了解决兼容性问题，我们引入了jQuery。
Jquery是继prototype之后又一个优秀的Javascript框架。它是轻量级的js库 ，它兼容CSS3，还兼容各种浏览器（IE 6.0+， FF 1.5+， Safari 2.0+， Opera 9.0+）。jQuery使用户能更方便地处理HTML、events、实现动画效果，并且方便地为网站提供AJAX交互。
如下的例子为用户在进行删除商品操作时触发的事件代码。用户点击了对应的按钮之后，JavaScript通过dom操作获取商品ID，通过post函数传递给服务器，服务器返回信息之后，对页面进行响应的处理。
3.2 MVC架构
MVC全名是Model View Controller，是模型（model）-视图（view）-控制器（controller）的缩写。MVC用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC 分层有助于管理复杂的应用程序，同时也简化了分组开发。不同的开发人员可同时开发视图、控制器逻辑和业务逻辑。
在开发过程中，我们选用了基于MVC架构的ThinkPHP框架。
模型层的主要工作是对控制层提供的数据对数据库进行对应的操作，并按照一定的逻辑返回给控制层。模型与数据格式无关，这样一个模型能为多个视图提供数据。ThinkPHP框架对常用的curl操作进行了封装，但用起来仍较为繁琐。为了提高代码的利用率，我们针对商城的系统对系统提供的curl操作进行了进一步封装。截取部分代码如下所示：
控制层的作用是接受用户的输入并调用模型和视图去完成用户的需求。在ThinkPHP框架中，控制层对应的实现是控制器。ThinkPHP框架有一套独特的语法，将URL与其对应的控制器绑定在一起。在普通的URL模式中，通过对URL中GET参数的设置即可完成操作。如下例：
http：//localhost/？m=home&c=user&a=login
在ThinkPHP框架中，访问上述的网址，相当于执行了一次home模块中user控制器对应的login操作。同时ThinkPHP还提供了多种语法来实现上述过程。
在控制器中实现的关键操作，是实现用户权限控制。有些页面需要用户具有某些权限才能访问，这就需要在控制器头部进行判断。在最初的实现中，每一个需要权限的页面，都要
增加一段判断代码，如果用户不具有对应的权限，则跳转到其他页面。这就导致代码严重冗余，为了解决这个问题，我们将判断用户权限的代码独立成父类控制器，系统中所有的控制器都必须是该控制器的子类。关键代码如下：
3.3 系统安全
基于B/S架构的Web应用，往往由HTML，CSS，Javascript，PHP等等各种语言组成，虽然有分工明确，便于开发等等优点，但由于它结构松散，多种标签嵌套使用，多种技术相互关联却基于完全不同的架构，造成了诸多潜在问题。Web世界的编码概念，可以类比于C/C++里的转义。
浏览器在解析一个页面的时候，首先调用HTML解析器顺序解析文本内容，遇到
由于浏览器解析页面的流程取决于语句所处的位置，而在浏览器安全原则中，“所有的用户输入都是有害的”，所以对于输出在不同位置的内容，要进行不同的编码。编码的顺序应该和浏览器解码的顺序相反。
当输出在HTML标签中时，需要对数据输出进行HTMLEncode，即将输出的特殊字符转
化为HTML实体字符。HtmlEncode并不对应具体的函数，而是对应一种函数实现。在PHP中，使用htmlspecialchars（）可以完成转换。在JavaScript中可以用正则替换完成相应的功能，函数如下：
4 结束语
本文介绍了基于ThinkPHP框架的校园电子商城的系统核心架构和整体架构，同时介绍了在开发过程中用到了核心技术，如MVC思想，jQuery，AJAX等。利用ThinkPHP搭建项目，在大大降低了系统开发的费用，缩短了开发周期的同时，也使系统的通用性和可扩展性大大增强。
参考文献
[1]Lennart J.Nederstigt，Steven S.Aanen， Damir Vandic et al..FLOPPIES：A Framework for Large-Scale Ontology Population of Product Information from Tabular Data in E-commerce Stores[J].Decision Support Systems， 2014.
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论