热门标签:代写本科论文 写作发表 工程师论文 代写一篇论文多少钱
当前位置: 代写一篇论文多少钱 > 计算机论文 > H5手机便利店网站的设计与开发

H5手机便利店网站的设计与开发

时间:2018-05-08 21:48作者:依依
本文导读:这是一篇关于H5手机便利店网站的设计与开发的文章,文章主要介绍基于HTML5的手机移动便利店的开发与设计, 提供用户社区定位、商家分类管理、商家店铺管理、商品查询、买家购物以及用户信息管理等服务。

  摘要:随着计算机网络的高速发展, 各种商业都与网络息息相关, 因而网站开发成了现今IT领域的热门技术, 特别是手机APP的开发。文章主要介绍基于HTML5的手机移动便利店的开发与设计, 提供用户社区定位、商家分类管理、商家店铺管理、商品查询、买家购物以及用户信息管理等服务。

  关键词:HTML5; CSS3; APICloud平台; jQuery; Javascript

  1 关键技术和需求分析。

  1.1 关键技术。

  1.1.1 j Query。

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

  j Quer y的使用方法很简便, 我们可以登录j Quer y的官方网页进行浏览和学习。需要引用的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个表:access Token, file, role, role Mapping, user, 其中在注册功能上运用了user和role表, access Token表是与user表相关联的用户登录记录表, user表对access Token表是一对多的关系, 即统计用户登入登出状态的关联表, 在注册时无需使用。

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

  4.1.3 界面设计。

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

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

  4.2.1 功能概述。

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

  4.2.2 功能详细设计。

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

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

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

  而在登录后重置密码, 则通过$api.get Storage (‘token’) ;来获得登录后Local Storage里的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.get Storage (‘token’) 获得的用户ID, 查找到关联的order表信息, 并逐一显示到界面。

  5 结语。

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

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

  参考文献
  [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.

相关文章
联系我们
  • 写作QQ:78307562
  • 发表QQ:78303642
  • 服务电话:18930620780
  • 售后电话:18930493766
  • 邮箱:lunwen021@163.com
范文范例
网站地图 | 网站介绍 | 联系我们 | 服务承诺| 服务报价| 论文要求 | 期刊发表 | 服务流程