基于JQuery的移动网页设计与实现─以电脑销售购物为例

基于JQuery的移动网页设计与实现─以电脑销售购物为例摘要随着智能手机的发展，仅在电脑上浏览网页已经不足以满足人们的日常需求了。智能手机的品牌如此之多，不同的品牌有不同的系统（如IOS、Android、WindowsPhone以及华为正在研发的鸿蒙系统），也有不同的型号以及尺寸，而为不同尺寸系统都做一个界面是相当麻烦的一件事。为了解决这个问题，jQuery推出了新的函数库jQueryMobile，目的是希望统一当前移动设备的用户界面（UI）。所以基于jQuery的框架、JSP动态网页技术标准以及MySQL关系型数据库管理系统，可以设计出精美、高效的移动网页系统。关键词：jQuery；jQuerymobile；电脑销售购物系统

DesignandimplementationofmobilewebpagebasedonjQuery-TakecomputersalesandshoppingsystemasanexampleAbstractWiththedevelopmentofsmartphones,browsingwebpagesoncomputersaloneisnotenoughtomeetpeople'sdailyneeds.Therearesomanybrandsofsmartphones.Differentbrandshavedifferentsystems(suchasIOS,Android,WindowsPhoneandtheHongmengsystemthatHuaweiisdeveloping),differentmodelsandsizes.It'squiteahassletomakeaninterfacefordifferentsizesofsystems.Tosolvethisproblem,jQueryhaslaunchedanewfunctionlibrary,jQuerymobile,whichaimstounifytheuserinterface(UI)ofcurrentmobiledevices.SobasedonjQueryframework,JSPdynamicwebpagetechnologystandardandMySQLrelationaldatabasemanagementsystem,wecandesignabeautifulandefficientmobilewebpagesystem.Keywords:jQuery；jQuerymobile；Computersalesandshoppingsystem;

目录1前言 前言1.1研究背景购物是人们日常生活中不可或缺的一部分。随着电子信息技术的发展，购物的形式也跟着发生了改变，人们从一开始的在实体店挑选商品再付款变到在线上浏览商品介绍再选购商品，因此就有了精美、高效的网络购物网站。在传统的电脑端网络购物网站上，人们需要有电脑，并且在电脑连接上互联网的情况下，人们才可以登陆上购物网站，而当人们想要购物时，必须要先进行注册，在电脑端上的账号注册，往往需要自己设定用户名和密码，并且绑定邮箱，而对于老年人来说，他们时常会因为记忆不好而忘记账号和密码，他们也不一定会有邮箱，账号和密码的遗忘找回对于用户来说是一件非常麻烦的事情。而电脑又非常容易被病毒入侵，在选购完商品付款的时候是很容易被黑客窃取支付密码，而造成对用户的损失，并且电脑端的钓鱼网站也层出不穷，对于电脑不熟悉的中老年人非常容易被电脑网络上密密麻麻的讯息欺骗而进入错误的购物网站，造成经济上的损失。而智能手机的发展，则又一次改变了人们的购物方式。智能手机的移动端相比于电脑端更为便捷，人们可以随时随地使用手机而不受时间、地点的限制，这一点线上购物上体现得尤为明显。以往人们想线上购物，只有在有电脑并且有网络环境的情况下才能在电脑上进行线上购物，而现在，人们只要有手机并且在运营商的信号范围内，就可以随时随地进行购物，这一点是电脑端无法比拟的。并且用户在移动端的购物网站进行注册的时候，可以使用自己的手机号用来接收短信进行账号注册，而当他们遗忘密码时，也可以通过短信验证的方式找回密码，非常方便，并且手机端尤其是苹果的手机端系统，安全性远远高于电脑端，很少会发生支付密码被盗窃的事，并且手机端的购物网站入口相比于电脑端相对唯一，大部分购物网站都会有自己的移动端app，人们也很难进入到钓鱼网站，这对比与电脑端来说也是一大优点。电商发展越来越快，有的电商为了大量吸引消费者，甚至会强迫卖家在他们的平台上打不合理的折扣，这对于卖家来说也有利益上的损失。曾经就有某电商与某电脑供应商就因为这种折扣协商不过而打官司，因此供应商也需要有自己的移动端购物网站系统。1.2本课题研究的目的、意义1.2.1论文研究的目的 本论文研究的目的可分为三个方面：一是提高用户使用的便捷性；二是减少用户的支付风险；三是为供应商提供自己的销售平台。1.2.2论文研究的意义 首先，作为人们日常生活的重要组成部分，线上购物必须足够高效、便捷。而为了能让人们更高效便捷地进行网络购物，移动端的手机购物网站系统就极为重要。人们的购物行为涉及到用户注册、用户登录、选购商品、放置购物车以及支付并生成订单，卖家的销售行为涉及到添加删除商品、设定商品价格、处理订单，管理员则负责处理订单异常，对商品以及用户主成分信息进行增、删、改、查，这三者之间的关系密不可分，因此要确保这三者各自的功能均能准确进行，并且在交互的时候不出意外。对于用户来说，一个功能齐全，使用起来很舒服的系统是基本要求。试想若一个买家在使用一个新的系统进行购物的时候，系统会有卡顿现象，光是在商品挑选页面就不能很流畅地进行，那还会接着进行购物吗，同理，若对于一个卖家来说，若在对商品信息进行修改时步骤非常繁琐，那肯定也会对系统产生厌烦感而不再使用这个系统。因此可以说，一个简洁、高效并且精美的系统也体现了开发者对使用者的一种尊重。 本论文研究的意义是从买家和销售者的实际需求出发，偏重于实际应用。充分考虑到系统的可用性、使用的技术的先进性、用户体验的可靠性以及系统数据的安全性。能做到使买家和卖家便捷地进行买卖商品。1.3国内外发展概况及存在的问题 国外的移动页面开发已经相当成熟，如亚马逊公司的电商平台就经历过许多变化，最初的亚马逊使用的是两层架构，再后来就变成了分布式、去中心化的服务平台，并且能够给使用者提供许多不同的应用。最开始的亚马逊只有一个应用用来和后端交互，这时是用C++来实现的，而随着亚马逊的发展，亚马逊开始加强对后端数据库的开发，让它的数据库可以容纳更多的数据。 国内也有不少使用基于jQuery的移动网页开发，文献[1]是以教学质量评价系统为主题，基于jQuerymobile的开发框架研发出来的移动终端系统，jQuerymobile是专门用于开发移动页面的前端开发框架，可以用于当今各种不同品牌、型号以及尺寸的智能手机与平板电脑中，jQuerymobile的框架为这个系统的开发提供了很好的屏幕自适应能力，并且同时还提供了丰富的动画特效以及强大的控件库。在与数据库进行交互方面是使用的一种通用开源脚本语言PHP（超文本预处理器），PHP在系统中是处于服务器端运行的程序，不会影响到系统前端的页面设计与实现，只负责与后台的数据库进行连接与数据交换。但在前端设计方面，系统界面过于简洁，并不能达到用户对界面的美感的要求。文献[2]是以教师工作量管理系统为题目，基于jQuerymobile与PHP研发而出，系统的前端设计干练精美，而在后台方面也是使用的PHP脚本语言。然而PHP不能做到多层结构的支持。对于一个较大的系统负荷站点来说，只能采用分布计算，而PHP无法做到这种支持。并且PHP提供的数据库接口也不统一，若要使不同的数据库数据进行统一，是非常麻烦的。而Java是通过JDBC访问数据库，通过不同的数据库厂商提供的数据库驱动可以非常轻松地访问数据库，访问数据库的接口比较统一。因此对于PHP来说，使用Java可以效率更高地开发系统。JSP作为一个服务器端的脚本语言，开发效率非常得高，这也是他的优点之一，JSP是用JavaBeans或EJB（EnterpriseJavaBeans）来对更为复杂的应用程序的需求进行处理，但是这样写出来的架构会因为它的业务规则代码和页面代码混为一团，维护起来不方便，因此不适合用来处理大型系统的要求，而MVC的Web架构就可以很好地解决这个问题。MVC的主要思想是系统分为模型（model）、视图（view）和控制器（controller）。模型是系统的程序数据，视图就是指UI（用户界面），而控制器则是则是进行用户界面和程序数据之间的同步。通过MVC的Web架构，可以弱化各个模块之间的耦合关系，还可以将业务逻辑处理和页面实现与数据相分离，这样做的好处是即使有一个模块需要进行改动，也不会影响别的模块正常进行工作。因此，基于jQuery以及MVC的Web架构是目前国内外大型移动网页设计的趋势。2移动电脑购物销售系统技术选型2.1jQuerymobile框架介绍 jQuerymobile其实是jQuery在移动互联网设备上的扩展，是一个封装好的UI组件库，由jQuery为移动互联网设备的开发者提供的。因为当今手机与平板电脑的品牌不胜繁多，各个品牌的手机与平板电脑又有自己的尺寸设计标准，因此想要为每一个不同尺寸的移动互联网设备设计一个尺寸的移动网页是非常不现实的，而jQuerymobile就提供了一个统一的移动UI框架，这样开发者就可以使用jQuerymobile框架来为所有的移动设备进行移动网页开发。jQuerymobile有以下几个优点：（1）jQuerymobile主要使用的是类似html的标记语言，它的开发曲线较平，并且对JavaScript的要求比较低。（2）jQuerymobile可以兼容iPad、iPhone、Android和Windowsphone等移动设备，因此开发者可以不需要学习针对以上系统平台的编程应用开发，这也降低了开发者的开发成本。（3）jQuerymobile开发出来的移动网页系统不交由应用商店审批，可以直接在自己部署的服务器上进行访问运行。由于应用商店的审批过程麻烦，调试起来也非常不方便，因此jQuerymobile在开发上更具有操作性和灵活性，在升级和维护的时候也不会对用户产生太大影响。2.2JSP介绍 JSP即为HTML+Java，它是使用Java来编写类XML的tags和scriptlets，来封装产生动态网页的处理逻辑。JSP可以把网页的逻辑和网页的设计相分离，并且还支持可重用的基于组件的设计，这也使得Web的应用程序开发变得迅速和容易。JSP有以下几个优点：（1）只要编写一次，就可以到处运行。因为JSP是基于Java的，所以JSP也具有Java的一个优点——平台无关性。因此可以一次编写，随处运行。（2）系统的多平台支持。JSP基本可以在所有平台上的任意环境中开发，在任意环境中进行系统部署，也可以在任意环境中扩展。（3）JSP有多样化并且功能强大的开发工具支持。Java已经有了许多非常优秀的开发工具，而且其中的大部分都是免费开源的，并且可以在多种不同平台之间运行。图2.1JSP原理图2.3MVC模式介绍 MVC模式即为模型（Model）、视图（View）、控制器（Control），它的流程首先是视图对控制器发送请求，控制器接收到请求后再把请求发送给模型，模型就会处理这个请求，然后再将结果发送回给控制器，最后控制器再根据接收到的结果来选择视图。MVC模式的这三层相互关联，却又相互独立，各自的内部即使发生变动也不会相互影响。MVC模式有以下几个优点：（1）低耦合性。因为视图层与业务层是相互分离的，这样在我们如果想需要修改视图层代码的时候就可以不用重新编译模型的控制器的代码。同理，单独修改另外两个的代码时也不会影响其他模块的代码的。（2）高重用性和可适用性。MVC模式可以让开发者使用不同的视图来访问同一个服务器端的代码，并且还包含任何Web（Http）浏览器或无线浏览器。（3）较低的生命周期成本。MVC模式可以降低开发者的开发和维护用户接口的技术含量。（4）快速的部署。使用MVC模式开发可以极大地减少开发时间，这样就可以让开发者更能将精力放在业务逻辑和页面设计上。3系统分析与设计3.1系统需求分析3.1.1系统功能性需求移动电脑购物销售系统是为买家提供购买、为卖家提供销售电脑的一个移动端系统，并且系统地管理员可以的用户资料以及订单数据进行增、删、改、查。对于买家来说，买家需要可以很方便地在移动电脑购物销售系统上进行电脑的选购而买家要想在移动电脑购物销售系统上进行购物时，首先就是要进行买家用户地注册与登录，因为只有买家用户进行了账号的注册与登录，这样该买家地信息才能被保存在系统的数据库中，而只有买家用户的信息被数据库记录之后，买家用户在系统上的行为才能被系统数据库记录下来，以此来与移动电脑购物销售系统进行交互。在用户注册并登录以后用户便可以在移动电脑购物销售系统中进行电脑的选购，而当今电脑品牌众多，每个品牌内又有各式各样价格不同、性能不同的型号的电脑，于是从买家用户的角度出发，一个能够货比三家并且能够暂时保存自己心仪的型号的电脑信息就是必要的，因此移动电脑购物销售系统就需要一个购物车功能。购物车功能便可以满足以上要求，即用户在看到自己心仪的型号的电脑时便可以将该型号的电脑加入购物车中，然后就可以继续去进行电脑选购，当买家用户将各种型号的电脑放进购物车之后，便可以进行价格、性能的比较，最后再进行购买。有的时候，也会有买家需要购买许多台电脑的情况，而对于这类买家用户来说，将需要购买的电脑一个一个地进行购买是非常麻烦的，因此购物车功能还需要有一个对购买的电脑数量进行增减的功能模块。最后在买家用户确定好电脑之后需要一个提交订单功能，提交订单功能将记录买家的电脑选购信息与买家用户填写的地址信息，并将信息保存在数据库，卖家用户与系统管理员便可以看到买家用户的购买订单信息。对于卖家用户来说，卖家需要一个可以发布自己要卖的电脑信息的商品发布功能，当卖家用户有需要销售的电脑时，可以通过商品发布功能将自己的电脑信息展现在移动电脑购物销售系统上供买家选购。卖家用户在收到买家用户的订单信息后还需要对买家用户的订单进行处理，若买家用户满足购买要求，卖家用户可以同意订单要求；若买家用户不满足购买要求，则卖家用户可以拒绝订单要求。因此卖家用户需要一个订单处理功能。对于系统管理员来说，在买家用户购物与卖家用户销售的过程中如果出现问题时，系统管理员需要可以对买家用户与卖家用户的用户信息、商品信息以及订单信息进行增、删、改、查。比如买家用户或卖家用户在进行电脑商品交易时某一方出现不正当的交易行为时，系统管理员在接到举报并查证后可以对该订单进行删除，若有严重者可以将不正当方的用户信息加入黑名单并公示出来，视情节可进行用户信息的删除。综上所述，在功能性需求方面，需要有如下功能：（1）供买家用户和卖家用户使用的注册与登录功能。（2）供买家用户购物时使用的可以对数量进行增减的购物车功能。（3）供买家用户使用的订单提交功能。（4）供卖家用户使用的商品发布功能。3.1.2系统非功能性需求 移动电脑购物销售系统的重点在于“移动”，因为本系统的初衷便是能够让买家用户和卖家用户可以随时随地使用手机进行电脑商品的买卖。所以在非功能性需求方面需要满足以下几个要求： （1）可以支持移动设备：移动电脑购物销售系统需要可以支持不同型号的手机与平板电脑，满足买家用户和卖家用户对于在移动设备上进行电脑买卖的需要。 （2）界面需要简洁美观，操作需要简单易懂：对于买家用户和卖家用户来说，他们都需要一个简洁美观、操作简单的系统界面，这样的界面可以提升用户的使用体验。 （3）数据库中的数据要足够安全：因为移动电脑购物销售系统会涉及到买家的姓名、电话以及电脑收货地址信息和卖家的个人信息、电话、店铺信息，这些信息都涉及到用户的隐私。所以在数据库中对这些敏感数据进行增添、删除、修改、查询的时候需要对数据加密做出合理设计。3.1.3系统建模 （1）系统角色分析 从移动电脑购物销售系统的整体需求进行分析，经过详细的调研与仔细地归类分析，最终确定了这个系统有三个最基本的角色，分别是买家用户、卖家用户和系统管理员。图3.1系统角色划分图 （2）买家用户涉及到的主要用例如下图所示。图3.2买家用户图3.2买家用户用例图（3）卖家用户涉及到的主要用例如下图所示。图3.3卖家用例图图3.4系统管理员图3.3卖家用例图图3.4系统管理员用例图3.2系统功能模块设计 根据以上进行的系统的分析和设计，可以将移动电脑购物销售系统划分为6个主要功能模块：用户注册模块用户登录模块购物车模块订单填写模块订单管理模块系统管理模块系统的主要功能模块的示意图如下图所示：图3.5系统功能模块图3.2.1用户注册模块 对于所有使用移动电脑购物销售系统的用户来说都一定要有一个在数据库登记的对用用户名才可以登录到系统之中，因此本系统的所有符合使用条件的用户都可以使用用户注册的功能模块，并将自己的信息登记到服务器端中。买家用户在本系统进行购物之前需要通过用户注册模块注册属于自己的购物账号；而对于卖家用户来说，为提高卖家用户注册的门槛，卖家用户不能直接通过简单的用户注册模块进行注册，而需要将卖家用户所具有的销售资质等资料交由系统管理员认证，确认通过后将由系统管理员在数据库中直接增加卖家用户的用户信息并将用户信息发给卖家用户。 买家用户：指的是需要购买电脑的那一类用户。 卖家用户：指的是在系统中销售电脑的那一类用户。 系统管理员用户：指的是管理系统数据信息的那一类用户。3.2.2用户登录模块 在系统的使用用户有了合法身份后便需要通过用户登录模块进行登录，登陆后才可以使用到移动电脑购物销售系统的其他功能模块。而对于不同的用户来说，他们需要用到的系统内的功能模块都有所不同，因此进入到系统中接触的UI界面（用户界面）也是不同的，所以用户登录系统需要有能力识别并区分出登录的用户的身份，这样才能够让不同身份的用户进入到不同的UI界面（用户界面）当中去，这就需要用到Cookie/Session机制来区分不同的用户。目前使用较为频繁的跟踪技术是Cookie与Session，其中Cookie可以在客户端记录信息以此来确认使用用户的身份，而Session则是可以在服务器端记录信息以此来确认使用用户的身份。用户登录模块需要满足以下要求：用户名要以明文显示。密码要以密文显示。可以区分出不同用户的身份。账号密码正确才可以登陆系统。3.2.3购物车模块 人们平时去商城购物的时候，看到心仪的商品时就会想先拿在手上，而逛商城久了拿的商品多了手里头就拿不下了，于是就有了购物车，人们在购物的时候就可以推着购物车挑选商品，并将喜欢的商品放进购物车内，最后还有可能根据经济情况，再从购物车内选择最后要买的商品。在互联网上进行购物也是如此，人们在移动电脑购物销售系统中挑选电脑的时候，常常需要货比三家，若是在电脑端的电脑销售购物系统中，即使没有购物车的功能模块，人们也可以通过在浏览器上打开多个不同电脑的标签页，以此来进行电脑性价比的对比，但是这一点在手机上就非常不方便，在移动端的电脑销售购物系统中无法像电脑端那样同时打开多个标签页，因此购物车功能模块在移动电脑购物销售系统中就尤为重要，有了这个系统，买家用户就可以将自己心仪的电脑都放进购物车内，最后再在购物车中进行不同电脑的性价比对比。购物车模块需要满足以下要求：能够增加、删除选购的电脑信息。能够对购物车内选购的电脑的数量进行修改。3.2.4订单填写模块 在买家用户最终确定好了自己想购买的电脑时，则需要将自己的购买需求通过订单填写模块提交到服务器，最后再通过服务器将买家的订单信息发给卖家。在订单填写模块中需要满足以下要求：填写的用户只能是买家用户。可以记录买家的收货人信息。可以记录买家的收货地址。3.2.5订单管理模块 买家在向卖家提交了购物订单后，卖家需要能够对这些订单进行管理。若卖家的电脑库存可以满足某个买家的订单需求，则可以同意那一个买家的订单并进行发货，如果卖家的电脑库存出于特殊原因无法满足某个买家的订单需求，则可以不同意那一个订单需求。而当卖家遇到寻衅滋事的买家时，也可以将恶意订单进行删除。在订单管理模块需要满足以下要求：卖家可以同意并通过订单需求。卖家可以拒绝并取消订单需求。卖家可以删除异常订单。3.2.6系统管理模块 每个系统都需要有一个系统管理员，这样在买家用户与卖家用户进行交易的过程中出现了什么异常，才能够得到解决。例如买家用户当中出现了卖家用户用来进行刷单或对其他卖家用户进行恶意评论时，可以对不合法的买家用户账号进行删除。当有卖家用户在接到订单后一直不向买家用户进行发货的时候，系统管理员也可以删除该无效订单。在系统管理模块需要满足以下要求：系统管理员可以对买家、卖家用户信息进行增、删、改、查。系统管理员可以对违规的订单信息进行增、删、改、查。3.3系统数据库设计 系统的数据库是移动电脑购物销售系统的重要组成部分，数据库的作用是把系统中各个模块的数据都给保存到物理数据库文件里，因此数据库的表的结构设计会对移动电脑购物销售系统的运行速度造成影响，所以为了提高运行速度，要合理地对数据库进行设计。3.3.1数据库的需求分析 对移动电脑购物销售系统进行需求分析，可以归纳出系统有如下实体，实体拥有的属性：买家用户：买家名称、登录名称、登陆密码、收货地址、联系电话。卖家用户：卖家名称、登录名称、登陆密码、店铺名称、店铺地址、联系电话。系统管理员：管理员编号、登录名称、登陆密码。电脑商品：电脑名称、电脑价格、电脑介绍、电脑参数、库存数量。购物车：购物车编号、买家名称、电脑名称、选购商品数量。订单：订单商品名称、订单商品价格、订单收货地址、订单买家名称、订单卖家名称、订单买家电话、订单卖家电话、订单状态。3.3.2数据库概念结构设计 根据移动电脑购物销售系统需求，分析出各个实体之间的关联如下：买家用户与订单：一对多；买家用户与订单：一对多；系统管理员与订单：多对多；买家用户与购物车：一对一。3.3.3数据库表结构设计表3.1系统表的总体说明名称代码注释买家用户Customer数据可从系统导入卖家用户Seller由系统管理员后台输入系统管理员Admin数据可从系统导入电脑商品Computer购物车ShoppingCart订单Order下面是每个表的详细设计：买家用户表：表3.2买家用户表名称代码数据类型注释买家名称CnameVarchar(50)主键登录名称ClnameVarchar(50)登陆密码ClcodeVarchar(50)收货地址CadressVarchar(50)联系电话CnumberInt(20)卖家用户表：表3.3卖家用户表名称代码数据类型注释卖家名称SnameVarchar(50)主键登陆名称SlnameVarchar(50)登陆密码SlcodeVarchar(50)店铺名称SshopVarchar(50)店铺地址SadressVarchar(50)联系电话SnumberInt(20)系统管理员表：表3.4系统管理员表名称代码数据类型注释管理员编号AnoInt(20)主键登录名称AlnameVarchar(50)登陆密码AlcodeVarchar(50)电脑商品表：表3.5电脑商品表名称代码数据类型注释电脑名称PCnameVarchar(50)主键电脑价格PCpriceInt(20)电脑介绍PCintroductionVarchar(100)电脑参数PCparameterVarchar(100)库存数量PCstockInt(20)购物车表：表3.6购物车表名称代码数据类型注释购物车编号SCnoInt(20)主键买家名称CnameVarchar(50)外键电脑名称PCnameVarchar(50)外键电脑数量PChowmuchInt(20)订单表：表3.7订单表名称代码数据类型注释订单编号OnumberInt(20)主键电脑名称PCnameVarchar(50)外键电脑价格PCpriceInt(20)外键收货地址CadressVarchar(50)外键买家名称CnameVarchar(50)外键卖家名称SnameVarchar(50)外键买家电话CnumberVarchar(50)外键卖家电话SnumberVarchar(50)外键订单状态Ostatuschar(1)0:已提交；1:以通过4移动电脑购物销售系统的实现4.1用户注册模块4.1.1功能描述 用户注册模块是新的买家用户在接触到移动电脑购物销售系统时需要接触到的第一个功能，买家用户可以通过用户注册模块注册专属于自己的用户，接着用户就会被数据库分配到买家用户的用户表中，以便系统管理员对买家用户信息进行管理。4.1.2核心代码 用户注册模块的核心代码如下：图4.1用户注册核心代码4.1.3模块界面 用户注册模块的界面如下：图4.2用户注册模块界面4.2用户登录模块4.2.1功能描述 用户登录模块是用户用来登录到移动电脑购物销售系统的必须过程，用户需要在登陆界面输入已经注册好的用户名和密码，在通过系统的验证后方可登陆进系统并使用移动电脑购物销售系统的其他功能。4.2.2核心代码 用户登录模块的核心代码如下：图4.3用户登录核心代码4.2.3模块界面 用户登录模块的界面如下：图4.4用户登录模块界面4.3购物车模块4.3.1功能描述 购物车模块是移动电脑购物销售系统的重要功能之一，它可以很方便地记录下顾客想要购买的电脑型号，包括电脑的名称及其价格数量。首先用户需要在购物界面在心仪的电脑下点击“加入购物车”按钮，然后再点击“购物车”按键，在购物车页面点击刷新购物车，即可看到添加的商品。购物车也有清空购物车和删除商品的功能。4.3.2核心代码 购物车模块的核心代码如下：图4.5购物车模块核心代码4.3.3模块界面 购物车模块的界面如下：图4.6购物车模块界面4.4订单填写模块4.4.1功能描述 买家在确定要购买的电脑后需要填写有关收货人信息的订单信息表，其中需要买家输入收货人姓名，收货地址以及收货人电话，最后点击提交，即可将订单信息发送给卖家，由卖家决定是否同意订单。4.4.2核心代码 订单填写模块的核心代码如下：图4.7订单填写模块核心代码4.4.3模块界面 订单填写模块的界面如下：图4.8订单填写模块界面5移动电脑购物销售系统测试 软件测试是一个系统的开发过程中必须的过程，开发者可以通过软件测试及时找出系统中可能出现的各种错误，并测试系统能否正常运行。软件测试对于软件可靠性的保障起到了极其重要的作用。大多数开发者都希望可以以有限的人力和物力来进行更高效率的开发，因此如果没有进行充分的软件测试，那么开发出来的软件就有可能会带着潜在的错误而投入运行，而当使用者在使用的过程中出现错误后，将对用户体验造成巨大伤害，并且对于开发者来说，后续的寻找错误与维护会给开发者带来更大的开发成本。因此，软件测试就尤为重要。5.1移动电脑购物销售系统测试内容 本测试将验证移动电脑购物销售系统能否正确地完成各模块所负责的功能。5.2移动电脑购物销售系统测试方法 本测试主要以系统的各个功能模块的功能需求来设计适合的测试用例以进行测试。5.3移动电脑购物销售系统测试表5.1测试用例及结果序号测试目的操作过程以及预期结果测试结果1用户注册模块中的注册功能是否正确步骤1.点击注册按钮。步骤2.输入需要注册的名称及密码。步骤3.点击提交，将数据保存到数据库。通过2用户登录模块中的登录功能是否正确步骤1.选择登陆身份。步骤2.输入用户登录名与密码。步骤3.点击登录。步骤4.根据选择的登陆身份进入相应的界面。通过3购物车模块能否正确增加删除商品。步骤1.点击商品的购物车按钮。步骤2.进入购物车点击数量的“+”按钮。步骤3.在购物车内点击商品旁的“删除”按钮。步骤4.数据状态将保存到数据库中。通过4订单填写模块中的数据能否正确保存到数据库中。步骤1.在购物车中点击“填写订单”按钮。步骤2.输入买家用户的信息。步骤3.点击提交。步骤4.数据状态将保存到数据库中。通过5订单管理系统中的状态修改功能是否正确。步骤1.登录管理员身份并进入订单管理页面。步骤2.选择需要修改的订单状态。步骤3.数据状态将保存到数据库中。通过6系统管理模块步骤1.登陆管理员身份并进入系统管理页面。步骤2.对用户信息进行修改。步骤3.对订单信息进行修改。步骤4.数据状态将保存到数据库中。通过

参考文献[1]杨寅.JqueryMobile框架在教学质量评价系统中的研究应用［J］.太原学院学报,2018，36（3）：59-64.[2]易扬扬.基于JqueryMobile的教师工作量管理系统的设计与实现［Ｄ］.吉林：吉林大学，2015[3][美]JonDuckett.HTML&CSS设计与构建网站［Ｍ］.清华大学出版社,2013-1.[4][美]AdamFreeman.HTML5权威指南［Ｍ］.人民邮电出版社,2014-1.[5][美]达克特(Duckett,J.).JavaScript&jQuery交互式Web前端开发［Ｍ］.清华大学出版社,2015-6-9.[6][美]NicholasC.Zakas.深入理解ES6［Ｍ］.电子工业出版社,2017-7-1.[7][美]比尔德.完美网页设计艺术［Ｍ］.人民邮电出版社,2008.[8]阮一峰.ECMAScript6入门［Ｍ］.电子工业出版社,2014-8.[9][英]AndyBudd/[英]SimonCollison/[英]CameronMoll.精通CSS（第2版）-高级Web标准解决方案［Ｍ］.人民邮电出版社,2010-5.[10][英]PeterGasston.移动网页设计与开发［Ｍ］.人民邮电出版社,2014-4.[11]布鲁林克.jQueryMobile快速入门［Ｍ］.人民邮电出版社,2012-5.[12]陶国荣.jQueryMobile权威指南［Ｍ］.机械工业出版社,2012-8.[13]李兆锋.张得生.JavaWeb项目开发案例精粹［Ｍ］.电子工业出版社,2010.[14]汪赵强.网页制作与JSP技术［Ｍ］.机械工业出版社,2010.[15]孙卫琴.Tomcat与JavaWeb开发技术详解［Ｍ］.电子工业出版社,2009.[16]钱雪忠.MySQL数据库技术与实验指导［Ｍ］.清华大学出版社,2012.[17]姜承尧.MySQL技术内幕［Ｍ］.机械工业出版社,2011.[18](美)戴尔李红军(译).MySQL核心技术手册第2版［Ｍ］.机械工业出版社,2009.致谢 在这数个月的学习中，非常感谢冯力威教授对我在专业上和项目上给予的悉心教导。尤其在这特殊的疫情期间，不论我在项目的实践中有什么设计上的问题，冯力威教授都会耐心地指导我，并且给出许多意见和建议，让我对系统设计有了更深的认识，提高了我的专业和学术水平。在此再次表达我的谢意！ 最后，对各位评委对我论文提出的宝贵意见表示深深的感谢。

HYPERLINK电脑文件整理懒招从来都是不会经常整理文件的，不过时间一长，众多的文档分布在硬盘的各个角落，用目录进行整理保存，工作量大、查看起来也不方便且还会浪费不少的磁盘空闻；用压缩工具打包，尽管可以节约空间但是却无法直接编辑修改或查看压缩包中的文件。这些招，懒人怎么会用，他们自有妙招!再多再乱的文件也能整理得井井有条，关键是不费力哦!

懒招1，自动提取乱中取胜

小张起初将照片、Office文档、电影、音乐等文件一股脑地存放在某一个磁盘分区，刚开始文件少使用起来倒也方便，但随着时间的推移，文件数量剧增，每次找所需的文件都要瞪大眼睛，不过有了MY文档管理器(下载地址：)就不用担心了。

第一步，下载MY文档管理器，解压到任意目录，直接双击其中的可执行性文件即可使用。依次单击“节点操作→添加节点”，分别添加多个节点，如“办公文档”、“电影”等分类，这样做的目的是方便归类。

第二步，在小张的F盘中的TEST目录下有众多的RM、MP3、JPG、DOC、TXT格式的文件，现在他要把JPG格式的文件提取到“照片”类别中。依次单击“系统配置→文件过滤”选项，打开Dialog对话框，输入“*.doc”，单击“添加”按钮，意思是过滤掉所有类型为“.DOC”的文件。然后按照同样的方法，将“*.txt”、“*.rm”、“*.MP3”一一添加进来。

第三步，双击左侧窗格中的“照片”节点，然后依次单击“记录操作→导入记录树”命令，在打开的对话框中单击浏览按钮，打开“F:\test”目录，单击“确定”按钮之后就可以将格式为JPG的文件提取出来并添加到“照片”节点中了。

懒招2，不同的电脑统一的管理

小张是电爱的Fans，工作之余常常为杂志写稿，他写完的和正在处理的稿件一般都存在一个稿件文件夹里。不过时间一长，家里的电脑(PC1)和单位的电脑(PC2)上都有这个文件夹。时常需要通过移动硬盘(U盘)在两台电脑之间传递，使用和管理都很不方便。不过他现在用优盘就可以统一管理了。

第一步，将上文提到的那个MY文档管理器解压后直接拷贝到优盘上。把优盘插到PC1上，并运行软件，依次单击“记录操作→导入记录树”命令，在随后弹出的对话框中设置好“稿件”文件夹的根目录，将“导入深度”设置为“5”，单击“确定”后，稍等片刻，软件就把PC1上的“稿件”导入到MY文档管理器中。

小提示：通过这种方式导入到程序中的仅仅是文件的路径、文件名等属性信息，并不是文件本身。

第二步，把优盘插到PC2上，按照同样的方法导入PC2上的“稿件”文件。以后要编辑“稿件”里的文件，你自己根本不用记住哪台电脑的哪个路径，只要把优盘插入到电脑，运行MY文档管理器，就可以直接编辑了。

第三步，为方便在异地使用，小张决定为当前正在处理的稿件增加一个副本。在需要异地处理的稿件上右键单击，选择“复制文件到(自动添加副本)”命令，在弹出的对话框中将保存目录设置为优盘上的某个目录即可。这样，就可以在优盘上编辑PC1或PC2的稿件了。

小提示：对于PC1、PC2上的同名文件，MY文档管理器以不同的磁盘号+文件路径来标识文件记录，因此，对于不同电脑上的同名文件，甚至是路径和文件名完全相同的文件，程序也可以准确识别哪个是哪个。

懒招3多种文件批量移动

要将文件管理得井然有序，就免不了要进行复制、删除、移动等等操作，如果一个个进行操作，工作量是非常巨大的。这时我们就需要借助于BelvedereAutomated(下载地址：.com/assets/resources/2008/03/Belvedere%200.3.exe)进行批量操作了。例如我们想把“F:\test”目录中的所有照片移动到F盘中的“北京游照片”目录中，可以按以下方法进行。

第一步，建立“F:\test”目录后在“rule”一栏中，单击“+”按钮，建立一个规则。在“Descriptior”文本框中为当前规则起一个名字如“批量整理移动”。单击第一个下拉列表，在这里可以选择Name(文件名)、Extension(扩展名)、Size(大小)等进行操作，这里选择扩展名“Extension”。单击第二个下拉列表，在这里设置的是操作条件，有is(是)、isnot(不是)、contains(包含)等操作可供选择，这里选择的是“is”。接下来，在最后的文本框中输入图片文件的扩展名，示例中是“JPG”。定义的规则合起来的意思就是“扩展名是JPG”。

第二步，在“Dothefollowing”区域设置操作动作，单击第一个下拉列表进行操作动作的选择，有“Movefile(移动)、Renamefile(重命名)、Deletefile(删除)”等动作可供选择，我们要批量移动，那就选择重命名“Movefile(移动文件)”。接下来，单击后面的按钮选择“F:\北京游照片”目录。

第三步，规则设置完毕，单击“Test”按钮应用规则，程序即可一次性地将所有扩展名为“JPG”的图片文件移动到“F:\北京游照片”目录中了。

懒招4提纲挈领一点即得

在前面几大懒招的帮助下，你电脑里的文件应该已经有点类别了吧。如果从此想告别懒人的生活，那就要养成管理文件的好习惯了。

第一步，在你保存资料的电脑分区中，要接类别建立多个文件夹，可以按用途分为：学习、娱乐、暂存、工作、下载，在娱乐下又可以建立二级目录：电影、歌曲、动画等。也可以按照常见的文件性质进行分类，例如分为：图片、电影、电子书、安装文件等，当然也可以按照你的需要再建立二级目录，以后每有文件需要保存就按这个类别保存到相应的目录。

第二步，虽然现在已经把文件分门别类存放了，但时间长了，目录太深，一层一层查找也很麻烦的，在EXCEL里建一个目录就可以统一管理了。运行EXCEL后，新建一个表格，然后按照我们的分类方式隔行输入：图片、电影、电子书，在图片分类下再建立二级目录名，例如明星、汽车、壁纸等。

第三步，右键单击“图片文字”，选择“超链接”，在弹出的对话框中选择电脑里图片目录文件夹，单击“确定”后EXCEL里的“图片”文字就变成彩色。用同样的方法为一级目录的“电影、电子书”和二级目录的“明星、汽车、壁纸”等添加超链接。然后将这个EXCEL文件命名为文件目录，保存到桌面上，以后打开这个文档，直接单击相应的文字，比如单击“壁纸”，就可以切换到壁纸文件夹了。

小提示：如果要更改某个超链接，直接右键单击该文字，选择“编辑超链接”就可以了。本人的电脑分类原则简述如下。

硬盘的第一层(请在自己的件夹中右键“按组排列”查看)

第一位字母表示A生活娱乐B教学C工作D安装程序

第二位字母表示只是流水号

AA影视

AB音乐

AC阅读

AD图片

AE相册

生活娱乐

BA计算机

BB英语

BC运动

BD游戏攻略

BE衣食住行

BF文艺

教学

CA管理制度

CB流程图

CC程序文件

工作

DA娱乐

DB其它

安装程序

硬盘的第二层(进入“AA影视”的文件夹举例)

第一位字母表示只是流水号

第二位字母表示只是流水号

AA电影

BA电视剧

CAMTV

硬盘的第三级(进入“AA电影”的文件夹举例)

第一位字母表示A动作片B剧情片C动画片

第二位字母表示A未看过B已看过

AA导火线

AB尖峰时刻

动作片

BA独自等待

剧情片

CB机器猫

CB狮子王

动画片

利用“字母排序”和“按组排列查看”可以使文件查看和存放简洁明了，结合自己资料的特点和实际需求，给自己定一个分类原则并严格执行。个人电脑资料的资源会得到高效而充分的利用。电脑文件管理八条小技巧

在电脑的内部，在电脑的桌面上，在“资源管理器”中，充斥着无序与混乱,这种虚拟的混乱极大地影响了电脑的性能和我们办公的效率，当大家面临这个问题时，通常认为硬盘空间又不够了，电脑性能又不跟不上了，需要再换一台新的电脑了。事实上，我们真正需要的是坐下来，好好花时间将电脑里的文件真正管理起来，会为自己日后省下更多的时间。

文件管理的真谛在于方便保存和迅速提取，所有的文件将通过文件夹分类被很好地组织起来，放在你最能方便找到的地方。解决这个问题目前最理想的方法就是分类管理，从硬盘分区开始到每一个文件夹的建立，我们都要按照自己的工作和生活需要，分为大大小小、多个层级的文件夹，建立合理的文件保存架构。此外所有的文件、文件夹，都要规范化地命名，并放入最合适的文件夹中。这样，当我们需要什么文件时，就知道到哪里去寻找。

这种方法，对于相当数量的人来说，并不是一件轻松的事，因为他们习惯了随手存放文件和辛苦、茫无头绪地查找文件。

下面，我们将帮你制订一套分类管理的原则，并敦促您养成好的文件管理习惯。以下是我们总结出的一些基本技巧，这些技巧并不是教条，可能并不适合你，但无论如何你必须要有自己的规则，并坚持下来，形成习惯。

一、发挥我的文档的作用

有很多理由让我们好好地利用“我的文档”，它能方便地在桌面上、开始菜单、资源管理器、保存/打开窗口中找到，有利于我们方便而快捷地打开、保存文件。我们可以利用“我的文档”中已有的目录，也可以创建自己的目录，将经常需要访问的文件存储在这里。至于“我的文档”存储在C盘，在重装系统时可能会误删除的问题，可以在非系统盘建立一个目录，然后右击桌面上的“我的文档”，选择“属性”。在弹出的“我的文档属性”窗口中，单击目标文件夹下的“移动”按钮，然后在新的窗口中指定我们刚创建的文件夹。重装系统后再次执行以上操作，再重新指向此文件夹即可，即安全又便捷。

小提示：如果你使用Windows2000/XP，则移动“我的文档”文件夹时，其下的所有文件会自动移过去，但如果你使用Windows9x，则需要手工将C:MyDocuments下的所有文件手工移到新指定的文件夹中，否则可能会丢失数据。

二、建立最适合自己的文件夹结构