IT大视野
数码世界 P.76基于MUI的汽车租赁系统移动应用的设计与实现张文孝  白俊鸽*  四川大学锦城学院 计算机与软件学院
摘要：目前手机行业迅速发展，也带动了移动应用技术的发展。一方面，开发者寻求一种低成本且高效率的移动应用开发方案；另一方面，开发者又想给用户带来高品质的应用体验。本文以汽车租赁系统移动应用为例，介绍如何利用MUI框架设计和实现一个功能完整的移动APP。通过基于 HTML5 的跨平台移动开发技术，利用MUI框架开发跨平台移动应用就能实现这两方面的需求。使用MUI框架不仅能缩短开发周期，而且能够使用户拥有最接近原生的体验效果。
关键词：移动应用MUI框架移动开发技术跨平台
1 引言
近年来随着手机行业的迅速发展，手机变得越来越智能化。日常生活中，人们也愈加依赖手机，这都归功于手机便携和易操作的特点。通过移动设备不仅可以进行娱乐也可以办理一些简单的服务。作为交通运输服务业的汽车租赁业正慢慢收到企业和个人的青睐，因为通过汽车租赁，个人或者企业就可以享受到和拥有个人车辆或者公司车辆一样的便捷。而相较于买车，租车又有不用办理保险、无需年检维修、可随意更换车辆等优点。
2 移动开发技术的选择
在选择使用何种移动开发技术时，首先考虑的是原生APP开发。基于Native APP框架，不同手机操作系统采用不同语言和框架进行开发，由云服务器数据和APP 客户端构成，可有最佳用户体验，可节省带宽成本，访问本地资源，但需不同平台分别开发且周期时间。但是目前手机系统主要分为安卓和ios两大阵营，如果使用原生APP 开发就需要使用不同的编程语言进行开发，以满足安卓和ios用户。因此使用原生APP开发的成本较高，而且后期的维护成本也较高。
另一种选择是基于 HTML5 的跨平台移动开发技术。其中的MUI框架直接采用原生JS编写，性能高于大多数框架。MUI框架还有一个最大的优势就是跨平台，不需要像原生APP开发那样对于不同的操作系统需要使用不同的编程语言。跨平台开发技术简单说就是能够让一种程序代码在不同移动终端上应用，可以大大降低开发技术损耗的精力和时间。
mui框架常用组件有哪些3 主要功能描述
由于是移动端的应用，面向的是需要租赁汽车的用户，因此移动端应用本身不需要涉及到后台的数据操作等管理员需要的功能。对于实际的用户需求可以设计出三部分主要的功能，包括登录注册功能、车辆信息展示功能和数据统计功能。
用户可以通过登录账号查看个人信息，包括当前正在租用的汽车信息和计时计费信息。考虑到租赁汽车手续比较繁杂，因此没有设计直接在移动应用上租赁汽车的功能。车辆展示功能主要展示当前可租用车辆的车辆信息，方便用户考虑租用哪种车辆。数据统计功能可以展示当前总的汽车租赁情况，可直观地看到哪种车辆最受用户喜爱，也能给用户选择车辆时作参考。
4 界面设计
4.1应用首页
应用的首页主要展示的是当前可以租赁的汽车的信息，包括价格、车辆编号、车辆类型信息。
页面顶端显示该页标题，在标题下方使用的是区域滚动组件中的横向滚动，将汽车根据汽车的类型进行分类显示。中间部分为内容显示部分，这一部分展示车辆的价格及编号等信息，用户可以通过点击上方按钮选择不同的车辆类型，内容部分就会显示对应类型的车辆信息。最后，页面底部为导航栏，通过点击可跳转至其他两个页面。
4.2数据统计页面
数据统计页面主要展示近期车辆的租赁情况以及车辆性能比较，为用户在选择车辆时作参考。通过引入Echarts图表可以将数据可视化，让数据直观地展示给用户。Echarts提供了丰富的API接口以及文档,
通过合理设置并结合后台传送的json数据, 即可展示所需的数据主题。
4.3个人页面
个人页面可以展示当前用户的用户名、正在租用的车辆信息以及该车辆的计时和累计费用等信息。此外为了能方便用户切换账号和新用户注册，设计了登录、注册和注销功能。
第一部分显示用户的基本信息，包括用户名和用户ID，第二部分展示租车信息和计时信息，右上角的菜单包含了登录和注册两个子页面以及注销功能。
在用户未登录时，将不显示个人信息。登录成功后从登录页面跳转至个人页面，此时将显示正在租用车辆的信息，包括车辆类型和开始租用该车的时间，以及显示该车的租用时长和累计的费用。
5 功能实现
5.1应用首页
在首页的车辆信息展示界面将汽车分为了五类，这里仅以“A类车”为例。因为汽车的信息是从后台获取的，所以需要首先需要实现与后台之间的发送和接受数据，然后将接收到的数据用卡片视图的形式展现出来。
首先定义了一个findAllCars的函数，将前台与后台的交互和信息显示这两个功能在该函数中实现。
首先是前台与后台交互这个功能，想要获取后台数据首先需要向后台发送数据。这里使用了JSON数据格式，首先定义了一个strTemp的对象，然后将" find_AllCars"这个字符串赋值给对象中的reqKey这个变量。" find_AllCars"字符串与数据库中的find_ AllCars这个存储过程相对应，告诉后台要执行查所有车辆信息这个操作。最后将strTemp这个对象转换成JSON字符串，把这个JSON字符串作为sendToServer函数的第一个参数发送给后台。
sendToServer函数就承担了数据的发送和接收的工作。在该函数中，变量url的值是一个字符串，这个字符串表示Apache Web服务器的doserver.php这个文件的地址。接下来就是使用ajax发送请求和服务器响应成功后执行funcName(jsonVar)函数。
代码示例：
function sendToServer(tStr,funcName)
信息展示这个功能是在成功接收到后台数据后执行的，因此可以将实现这一部分的代码写在sendToServer函数的第二个参数的function(data)函数中。函数function(data)将从后台接收来的数据通过解析提取有用的数据，后台返回的数据是一个对象，我们只需要对象中data这个二维数组的数据。
最后通过判断语句筛选出“A类车”的数据，在绘制div盒子时将对应的数据添加进去就实现了车辆信息的动态显示。其他页面的不同类型车辆信息的展示原理是类似的，只需要将function(data)函数中判断语句的条件进行修改即可。
5.2统计页面
以柱状图为例，和获取车辆信息的方法类似，首先定义了一个findAllRecord函数用于获取汽车租赁记录。在函数中定义一个strTemp的对象，对象中有一个叫reqKey的变量，给其赋值为"find_AllRecord"，对应于数据库中查所有汽车租赁记录的存储过程。同样地，将这个对象转换成JSON字符串，作为sendToServer 函数的第一个参数。而sendToServer函数的第二个参数是个函数，在该函数体中，将从后台接收来的数据中表示车辆类型的字符串与事先定义好的type对象数组的name成员进行对比，如果一样则将对象中的sum成员加一，以此来计算不同类型车辆的数目。然后将统计好的车辆数目的数据存在localStorage缓存中，方便接下来使用。
接下来是实现柱状图数据的显示，通过getItem函数将缓存中的数据取出来放在一个数组中，然后将这个数组中的成员依次放入

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。