基于HTML5的手机移动便利店研究

张 弛

（大连集益物流有限公司，辽宁 大连 116601）

1 关键技术和需求分析

1.1 关键技术

1.1.1 jQuery

jQuery是轻量级的Javascript库，兼容CSS3以及各种浏览器，包括IE，FF，Safari和Opera等。jQuery使得开发者更加便捷地处理HTML，events以及实现动画效果，并且其提供了Ajax的交互功能，方便了网站数据库的操作。jQuery还有一个最大的特点就是文档健全，提供许多开发者熟悉的插件，并且都有很好的交互性。随着jQuery的不断发展，其实现了HTML页面代码与内容的分离，即js文件可以通过调用的形式使用，不用再在代码中嵌套js代码。

jQuery的使用方法很简便，我们可以登录jQuery的官方网页进行浏览和学习。需要引用的js文件可以通过http网址的引用写入代码，也可以将js文件下载到项目的目录下直接使用。

1.1.2 AJAX

AJAX即“Asynchronous Javascript And XML”（异步Javascript和XML），是指一种创建交互式网页应用的网页开发技术。其主要功能是通过后台与服务器进行少量数据沟通，使网页实现异步更新。传统的页面在更新时，是整个页面重新加载，而使用AJAX后，仅是局部的更新。它的这种特性，使得因特网的应用程序，能够更加快捷、友好。

1.1.3 模块Store

APICloud的最大魅力源于其本身所带有的模块调用功能，开发者将所需功能封装成一个个模块共享到平台，其他开发者若想使用该模块功能即可引入该模块，而无需自行敲打代码完成功能的实现。这样不仅提高了效率，缩短开发周期，减少了许多不必要的操作，而且也开动众多开发者的大脑，共同开发出多样的功能模块，不断完善和提高系统的性能。APICloud自身封装了一些模块功能，包括界面布局、导航菜单、系统应用和第三方服务功能等。

1.1.4 数据云的操作

要使用APICloud数据云API主要有3种方法。（1）api.ajax：使用灵活，但也复杂，可以连接其他数据云。（2）mcm模块：简单快捷，但只能连接APICloud的数据云。（3）mcmjs-sdk（APICloud JS SDK）：是参考angular-resource.js类库，基于api.ajax而写成的原生Javascript 类库。它与已经存在的Javascript程序是兼容的，支持对象化操作，简化文件上传、多个文件上传、Relation相关操作，只需要在代码中做出一点点改变。因为是基于api.ajax的参数封装类库，所以可以做到最小的影响性能，最小化配置，让开发者很快地在APICloud上使用Javascript和HTML5。

1.2 需求分析

手机移动便利店系统的需求分析是软件开发生命周期内的重要工作，其作用在于引导整个系统的开发方向，在设计系统时应该着手于4个方面：（1）用户登录以及注册，用户进入系统必须通过注册，然后成功登录，方可获得相应使用权。（2）店铺分类管理，这就涉及数据库的分类管理，这样做的目的是方便买家查询购买。（3）获取数据库信息，完成商品的浏览、选购等工作。这部分是重点，实现了整个系统的核心价值。（4）个人信息和店铺信息的修改，这部分实现了信息的不断更新，真正实现网络的价值。

2 总体设计

2.1 系统架构

根据系统的需求分析，本项目采用MVC框架，即模型（Model）—视图（View）—控制器（Controller）框架进行设计开发。模型（Model）主要针对数据库进行操作，完成基本的检索、查询和删除；视图（View）主要针对系统的界面进行设计，根据用户需求完成具体功能模块的设计，便于交互；控制器（Controller）主要是根据用户发出的请求，调用处理相应功能的模块，作出相对数据库的操作，并将请求结果返还给用户。基于APICloud平台的开发为了调用众多功能模块，其强大之处在于封装了各类功能接口，使得操作和运行都高效有质量。APICloud提供的后台管理，根据各项数据的回馈形成文档，为系统修复和升级提供材料。

2.2 数据库设计

根据需求分析，为了系统的进一步设计，首先设计后台数据库，方便之后的功能实现和数据交互。

2.2.1 用户表（user表）

user表用于存储用户信息，无论用户身份是什么都存储在该表中，用于区别身份的是role列，role列对应role表的用户类型，在此即可区分用户身份。

2.2.2 角色表（role表）

区分用户角色的role表定义了各个用户身份区别。

2.2.3 商品表（goods表）

goods表用于存储商品信息，store表中relation到该表，则体现了商家所属的商品信息。

2.2.4 订单表（order表）

order表，存放订单信息，包括消费者、商家和商品的关联信息。

2.2.5 店铺表（store表）

store表，商家信息除了个人信息在user表中，关于店铺的信息存放在store表中。

3 模块的划分与功能设计

通过对系统的需求进行分析，本次开发将系统功能模块分为：用户注册、用户登录、商品查询、商品选购、订单查询、店铺商品更新、个人信息修改七大模块，系统的功能架构如图1所示。

图1 系统功能架构

3.1 用户注册模块

用户进入系统，首先要注册个人账号，其中包含的个人信息有用户手机号、密码、用户名、用户地址、用户邮箱、用户身份。基于手机号的唯一性，使得它成为标记用户的Id，也就是说同一个手机号只能注册一次；用户名和地址方便店家与消费者进行联系；用户邮箱用于用户找回账号密码；而用户身份则是用于区分卖家还是消费者。

3.2 用户登录模块

无论是消费者还是卖家，他们的登录方式是相同的，通过将用户输入的手机号与密码到数据库进行匹配，判断用户是否资格使用该账号登录，并执行该账号下所属的权利。

3.3 商品查询模块

用户登录成功后进入系统主界面，根据所需在店家分类的界面下进行商品的查询。查询过程中，用户不仅可以查看到琳琅满目的商品信息，还可以浏览店铺的商家信息，根据商家与商品的综合信息，进行接下来的商品选购。

3.4 商品选购模块

用户查找到心仪商品就可以进行购买。在“商品选购”界面下输入所需商品需求，包括取货方式、产品种类、数量和价钱。完成这些信息后，就可以提交订单，完成商品的选购功能。

3.5 订单查询模块

在这个模块下，无论是卖家还是消费者，都能查到与自己相关的购物订单，方便用户的个人消费管理，以及查询个人的消费记录。

3.6 店铺商品更新模块

卖家的个人中心有一个“我的店铺”模块，在这个模块下卖家可以通过修改、删除和添加商品信息的方式，更新店铺信息。

3.7 个人信息修改模块

这个模块顾名思义就是修改用户在注册时候填写的个人信息，根据个人信息的修改，及时返还数据库进行更新，方便日后的购物功能。

4 详细设计与实现

4.1 用户注册功能的设计与实现

4.1.1 功能概述

新用户进入系统需要进行登录才能享受系统相关服务，对于初次使用的用户则需要账号的注册。账号注册需要用户提供手机号、密码作为必要信息，下次用户就可以通过手机号直接登录。在注册表中填写邮箱，是为了重置账号密码时使用的，并且需要登录邮箱进行验证才能重置密码。

4.1.2 功能详细设计

（1）用户注册。在设计用户注册时，首先注意的是用户表的建立。本系统的数据库采用APICloud的数据云技术，该技术由APICloud开发，并根据常用数据库使用方式封装了许多接口，方便操作和运用。在数据云中每个项目有默认的5个表：accessToken， fi le，role，roleMapping，user，其中在注册功能上运用了user和role表，accessToken表是与user表相关联的用户登录记录表，user表对accessToken表是一对多的关系，即统计用户登入登出状态的关联表，在注册时无需使用。

（2）邮箱注册。用户成功注册后，若是在注册时填写了正确的邮箱，则成功注册的同时会向邮箱发送验证信息，为了下次方便用户修改密码，则用户需要到邮箱中激活账号，当邮箱激活成功后，user表中的emailVerified就会由false转变为true，意味着该账号已经通过邮箱激活完毕，激活成功。

4.1.3 界面设计

在界面设计时为了保证界面的友好性和美观性，需要引入CSS样式文件，CSS文件的引入方式同JQuery库的引入，可以通过网络地址直接引入，也可以下载引入，由于使用网络地址的方式引入，会使得系统在无网络状态下出现界面混乱的结果，所以，本项目开发中用到的CSS和JQuery文件都是下载到项目列表下引入到项目中，直接在项目包中，这样在无网络状态下依然保持顺畅的界面。

4.2 用户登录功能的设计与实现

4.2.1 功能概述

用户进入系统后，若是已有注册账号则可以通过登录系统享受服务权利。用户在登录界面输入手机号和密码，若与数据库存储的密码和手机号相匹配则登录成功，若不相匹配，则用户可以通过激活的邮箱重置密码，重置后用户就可以根据新密码重新登录系统。

4.2.2 功能详细设计

（1）用户登录。在系统界面用户在input控件中输入手机号和密码，并由“$api.byId(id).value”获得输入框中的值，再通过Ajax传递到后台数据库进行数据匹配，若匹配成功则返回ret对应数据库用户信息。为接下来界面都能传递登录用户信息，则通过$api.setStorage(key,value)存储登录用户信息，其中key（string）为键名，value（任意类型）为值。

（2）密码重置。当用户登录系统忘记密码，或是想更换密码提高安全性能时可以在登录界面，或是修改个人信息中重置密码。请求密码重置URL：/mcm/api/user/resetRequest，HTTP：POST，请求时需要发送一个POST请求到/resetRequest。当然，用户密码重置的前提就是激活了邮箱。

发送成功后，返回的ret是一个JSON对象{“msg”:“请到邮箱查收邮件”}。当用户在登录时重置密码，此时LocalStorage的token对象没有值，则用户需要输入用户注册时的手机号和邮箱方可进行重置。

而在登录后重置密码，则通过$api.getStorage(‘token’);来获得登录后LocalStorage里的token，该参数代表登录后用户在数据表中的真实Id，可以利用这个Id得到重置密码的权利，并执行密码重置功能。

4.2.3 界面设计

用户登录界面主要获得用户输入的手机号和密码，当用户忘记密码时则提供密码重置的功能，因而在登录界面的设计上注重的主要是简洁大方，让操作者使用起来很容易，当用户填写信息与数据库不符，则发出提示信息。

4.3 商品查询功能的设计与实现

4.3.1 功能概述

这部分主要完成的功能是用户通过浏览商家查询自己心仪的商品，为下一步选购做准备。用户进入系统后首先在主界面会看到商家的分类，商家的分类方便了用户筛选自己心仪的商品所归属的店铺。用户根据自身喜好选择商家，则可进入该商家的商品列表，在商品列表中消费者则可以浏览全部商品信息，并可以根据关键字在搜索表中搜索所需商品，快捷准确地找到自己所需产品。

4.3.2 功能详细设计

在商家和商品列表这部分的实现中，除了前端的处理，也涉及后台数据库的连接。数据表设计包括3张：用户表、店铺表和商品表。用户表顾名思义就是店家自己的信息，如果用户身份为卖家，则pointer到店铺表，即一个卖家对应一个店铺表的行信息。店铺表相当于一个桥梁，它存储店家的备注信息，同时relation到商品表，关联着卖家的商品信息。

4.4 订单查询功能的设计与实现

4.4.1 功能概述

用户登录成功后即可在个人中心查找到自己选购成功的商品，商品列表详细记录了用户的订购需求和交易双方的信息，方便售后的各项服务。

4.4.2 功能详细设计

这部分的功能实现主要是表查询功能。即根据$api.getStorage(‘token’)获得的用户ID，查找到关联的order表信息，并逐一显示到界面。

5 结语

随着计算机网络的高速发展，各种商业都与网络息息相关，因而网站开发成了现今IT领域的热门技术，但是多平台移植造成了网站开发的难点。HTML5网站开发正是解决了这些问题带来的困扰，HTML5的网站主要有：兼容性好、跨平台（包括：windows，Mac，Linux，iOS等系统）、跨终端（包括：手机、电脑、iPad等设备）、安全性更高、扩展性更强、功能更加丰富、开发效率更高等特性。

网络信息的时代，我们在大企业大数据发展的同时，也应当多多关注身边小企业小发展的动态，关注这些，不仅有助于产业链的持续发展，更能细致入微到我们生活的点点滴滴中，方便我们的生活，提高生活质量。

[参考文献]

[1]刘天寅.HTML5与未来的WEB应用平台[J].阴山学刊（自然科学版），2010（2）：86-90.

[2]邢晓鹏.HTML5核心技术的研究与价值分析[J].价值工程，2011（22）：157-158.

[3]龙奇.新一代网络技术标准HTML5的研究[J].科技信息，2011（10）：245.

[4]顾旻霞.构建更加开放的移动互联网[J].信息通信技术，2011（4）：54-57.

[5]顾春莲.HTML5中的音频及视频元素对互联网的影响[J].河北省科学院学报，2011（3）：106-108.

[6]史君.支持HTML5技术的嵌入式移动浏览器研究与开发[D].大连：大连海事大学，2012.

[7]王雯洁.基于UML及HTML5网站的开发和测试[D].呼和浩特：内蒙古大学，2012.