基于HTML5的定制糕坊系统设计①

钟玲玲， 黄 鹏， 黄 靓， 吴 密

(安徽新华学院，安徽 合肥 230088)

0 引 言

随着互联网应用技术的不断发展，给蛋糕定制行业带来了巨大的变化，从而使得蛋糕定制行业摆脱传统的定制方式，实现客户占主导地位，满足客户的选择性和要求性。随着App的普及，客户根据自己的需要发表需求表，店家根据自己的成本等核算来确定是否接单，更能贴近客户本身的意愿和要求，更加人性化、多样化，是当前蛋糕定制的新亮点。由此提出一种基于HTML5的定制糕坊系统，并对其实现过程进行分析与阐述。

1 前台客户终端App设计与实现

采用Ionic技术，Ionic是一个非常强大的 HTML5混合式应用程序开发框架，Ionic 的样式组件十分丰富，非常适合与应用程序的进行UI 交互，适用于基于混合的开发模式[1]。

1.1 功能设计

App主要分成三个模块，分别是登录模块，发布订单模块，购买模块。登录模块功能是客户注册信息登录此平台，进入平台后使用此平台的相应功能。发布订单模块功能是客户在此平台上发布自己的蛋糕定制需求，商家看到此订单进行接单，给用户制作蛋糕。购买模块功能是用户浏览其它商家产品，如果感觉满意可以直接购买。如图1所示。

图1 前台客户终端功能设计

1.2 数据库设计

数据库是以MySQL为主的关系型数据库，采用Wamp Server合成开发软件与Sublime编辑器。其中Sublime编辑器主要是编写html/css/javascript前端页面代码以及PHP接口代码；Wamp主要是负责搭建后台环境，链接服务器；MySQL数据库进行存储数据[2]。数据库逻辑有四个表格，分别为用户表(User)、商品表(Product)、管理员表(Manage)、订单表(Orderform)。如图2所示。

1.3 前台客户端实现

1.3.1 登录模块

如图3所示是登录界面的页面实现，在这个页面中有输入用户名和密码的输入框，用户可以根据自己注册的账号进入主页。此页面采用的就是栅格布局方式，可以兼容各个类型的屏幕大小。

图2 数据库分析图

图3 登录界面

1.3.2 主页模块

主页模块分为四个模块：首页模块，订单模块，我的模块，更多模块。

订单模块：浏览商家产品和发布订单，如图4(a)所示。 首页模块：进行产品的简单介绍，如图4(b)所示。 我的模块：点击可以查看自己预定的订单，和已发布的订单，如图4(c)所示。

更多模块：是辅助功能，如图4(d)所示。

1.3.3 订单模块功能设计

客户根据自身需求填写需求表，发布订单，如图5所示。

1.3.4 我的模块

模块里面有已定订单和发布订单两个按钮，点击进入，如图6(a)、(b)所示。

(a) 订单模块 (b)首页模块 (c)我的模块(d)更多模块

图5 订单模块

(a) 已定订单 (b) 发布订单

2 后台服务器端设计与实现

2.1 Html页面实现--Bootstrap框架

Bootstrap框架为当下最流行的前端UI框架，其特点是组件简洁大方，代码规范精简，界面自定义性强[3]。后台采用Bootstrap所有实现弹窗、样式、表格列表，添加商品弹出框表格如图7所示。

图7 添加商品弹出框

图8 商品表格图

后台主页采用左右布局，左边是菜单，右边是显示内容。管理员点击右边菜单，左边的内容会跳到相应的内容部分。与后台交互采用Ajax技术，运用Ajax实现局部刷新数据，无跳转页面搜索功能[4]。在页面点击搜索商品栏，会出现搜索商品的组件模块出现，通过商品类别与商品名称，由Ajax传送数据到后台，经过服务器转换成SQL语句进行查找，最后通过Ajax返回查找数据，并根据返回数据动态渲染到Html页面中，商品表格图如图8所示。

2.2 PHP后台服务器

PHP后台服务器是后台服务器向前端文本页面发送固定格式的数据，一般有XML、Json数据类型。因为前端页面不能直接与MySQL数据库连接，所以采用PHP语言来编写数据库语句操作MySQL数据库[5]，如图9所示。

2.3 MySQL图形化界面工具

Wamp工具软件集成了图形化PHPMyAdmin管理页面，可以更加直观，详细，精确的完成MySQL的数据库操作。实现提前设置用户密码，手动创建表单，添加数据信息，表格分析功能与导出的数据表格的功能，完成数据库设置，如图10所示。

图9 PHP操作数据库代码

图10 PHPMyAdmin图形管理

3 结 论

文中在分析蛋糕在线定制需求的基础上，设计并实现了一个蛋糕网上定制系统。系统分为两个模块，分别是用户使用的定制糕坊和定制糕坊后台管理系统。用户使用端主要是提供给用户一个浏览的平台，包括发布订单，下单等功能。定制糕坊后台管理系统主要是对用户的订单进行管理、查看。测试表明，系统性能满足设计要求，运行稳定可靠。但也存在问题，页面没有下载快捷键和信息详细查询功能，稍显得人机交互性差，后期进行改进完善，让用户搜索查询更方便。系统运用Bootstrap响应式开发框架，用其栅格系统和媒体查询完成响应式开发。相对于市场上Web开发的老牌框架，可以实现一份代码即可在手机、平板、PC端上正常运行，从而随时随地的进行系统管理与查阅。该系统方便顾客定制蛋糕，为蛋糕销售提供了一个优秀平台，具有“下单方便，交互直观，销售效率较高”的特点，有良好的经济效益和广泛的推广价值。