基于移动端APP的商场管理系统研发

软件开发与应用

信息与电脑

China Computer & Communication

2019年第17期

基于移动端APP的商场管理系统研发

岳文波

（四川大学锦城学院，四川 成都　611731）

摘　要：

随着智能手机的出现，以前在电脑上能够实现的软件、网页、系统，现在一般都能做成一款手机APP，由于

手机便于携带，很多手机APP深受欢迎。笔者首先分析了移动端APP的开发技术和主要功能，进而分析了环境的搭建与配置，

最后分析了功能的具体实现，希望能够为相关研究提供借鉴。

关键词：

移动端；商场管理系统；MUI

中图分类

号：TP311.52　　文献标识码：A　　文章编号：1003-9767（2019）17-062-03

Research and Development of Market Management System Based on

Mobile APP

Yue Wenbo

Abstract:

With the advent of smart phones, software, web pages and systems previously implemented on computers can now

(Jincheng College of Sichuan University, Chengdu Sichuan 611731, China)

generally be made into a mobile app. Because mobile phones are portable, many mobile apps are very popular. Firstly, the author

analyzed the development technology and main functions of mobile APP, then analyzed the construction and configuration of the

environment, and finally analyzed the specific realization of the functions, hoping to provide reference for related research.

Key words:

mobile terminal; store management system; MUI

０　引言

1.2　Mui框架的概念和大致使用

近年来，随着通信技术的快速发展，手机在生活中给人

Mui框架是HBuilder里自带的框架，里面包含了很多组

们带来了很多便利，很多APP软件也应运而生。例如，一些

件，可以直接拿来使用，只需要引入一些css、js文件就可以

大企业就可以开发一款用来管理员工的APP软件，管理人员

使用了。这些组件相当于是一个模板，用于封装一些网页框

通过手机就能查看、修改员工信息。

架、表格等。同时，Mui框架还封装了常用的Ajax函数，支

１　移动端ＡＰＰ的开发技术

持GET、POST请求方式，通过Ajax请求将数据从网页前端

1.1　主流开发技术

通过jsons字符串发送到想要发送的地方。

现在由于软件的多样化，开发软件的技术也有很多选

２　主要功能描述

择，但主流的方式大致有3种：Native APP及原生APP开

管理员可以通过手机端实现商场管理系统的登录与注

发，现在已经很少有人用到这种技术；Web APP，是一种

册，如果忘记密码，还可以通过邮箱查询找回面码。登陆成

网页APP开发，主要基于HBuilder里面自带的Mui框架；

功后进入商场管理主界面，主界面主要显示商场管理的图片

Hybird APP，是利用混合型APP软件技术开发APP，一方面

及其动态信息，大部分是静态数据、图片等。店铺界面主要

开发简单，另一方面可以形成一种开发的标准。企业封装大

显示店铺的所有信息，比如id、出租时间、负责人等。该界

量的原生插件供Java调用，如支付功能插件，并且可以在以

面还提供了查询、删除、更改店铺的功能，查询通过店铺ID

后的项目中尽可能地复用，从而大幅降低开发时间和成本

[1]

。

查询，然后返回查到店铺的所有信息，更改店铺信息就是通

目前，大部分高校主要介绍受欢迎的网页开发APP，主要用

过输入ID然后修改店铺的所有信息，除了店铺的ID。员工

HTML、css、js这些语言开发的APP软件。

界面大致与店铺界面差不多，实现的功能也几乎一样，可以

作者简介：

岳文波(1998—)，男，四川成都人，本科。研究方向：移动端互联。

—　　　６２　　　—

信息与电脑

2019年第17期

China Computer & Communication

软件开发与应用

保存当前登陆人员的用户名，还提供了手机端的一些第三方

reqKey: "InsertUsers",

功能，比如可以使用手机扫描二维码，可以打开腾讯与百度

input: {

地图等，还可以在设置界面注销，也可以通过手机返回键直

name:mentById("account").value,

接退出当前APP

。

password:mentById("password").value,

３　环境的搭建与配置

email:mentById("email").value}}

首先安装wampserver服务器，第一次使用wampserver

var str = "jsons=" + ify(strTemp);

可能会出现很多问题，比如要解决网页跨域问题，就需要修

sendToServer(str,function(data){

改配置文件，但大部分问题还是可以解决的。然后在数据库

= ""})

中创建所需要的表，并为其创建所需要的存储过程，比如查

}

[3]

询、删除、更新、添加等功能，然后搭建好C++服务器的各

可以看出，注册成功后就进入登录界面。登录时输入账

种配置环境。C++服务器主要用来触发数据库中的存储过程，

号、密码进行登录，按照输入的账号去查询数据库，然后与

然后在C++服务器中的文件里写入要调用数据库中

密码对照是否一致，如果不一致则提示密码错误，如果没有

的存储过程，接下来先用第三方工具JSON Tools

测试所有的

查到数据库，则提示该用户还没有注册，该过程主要通过调

存储过程是否能够正常运行，查看数据库中是否有数据，如

用sendToServer()

函数然后触发SelectUsersUID这个存储过

果没有的话就继续测试。测试成功后就是将JSON Tools

工具

程。登录成功则进入主界面。

换成网页发送数据，这里需要一个js文件，在

js文件里通过

4.3　店铺界面

ajax请求发送数据到C++服务器，实现的效果应该与

JSON

进入店铺界面后就可以查看所有商场店铺的详细信息，

Tools操作的结果一样。接下来还要实现不用电脑通过手机

包括ID

、商铺名称、商铺负责人和入驻商铺时间等。其核

就能完成的一些功能，需要购买一个阿里云服务器，可以将

心代码主要通过后端查询所有店铺信息存储过程，将返回

阿里云上的Windows

服务器当成主机电脑，将C++服务器、

的信息显示出来，为了美观，选择引入jQuery下面自带的

wampserver服务器搭建在阿里云服务器上，然后访问地址将

dataTables。这样在APP界面上就可以完整地看到每一条数

由原来的127.0.0.1改为服务器地址。

据，并且dataTables

还自己提供了搜索相关数据的功能。其

４　功能的具体实现

主要代码如下：

var strTemp = {

4.1　Ajax发送数据请求

reqKey: "SelectPavementsAll"};

由于后面很多操作都要用到数据发送功能，所以将Ajax

var str = "jsons=" + ify(strTemp);

请求写在了一个js文件里，然后每一次要使用就直接代用

js

sendToServer(str,function(data){

里的这个函数。主要代码如下：

$(document).ready(function() {

var xmlhttp

$('#shop-table').DataTable({

if(pRequest) {

data: a,

xmlhttp = new XMLHttpRequest();} else {

columns: [

xmlhttp = new ActiveXObject("P")}

{ data: 'PID' },

("POST", url, true)

{ data: 'Shopname' },

uestHeader("Content-type","application/

{ data: 'Shopkeeper' },

x-www-form-urlencoded)

{ data: 'Entertime' },

(str)

[2]

{ data:'Renttime'}

这里的url为阿里云服务器地址。

] }); });})}

4.2　注册登录界面

在店铺界面里面增加了3个功能，

即添加店铺、删除店铺、

修改店铺信息。添加店铺主要是InsertPavements这一存储过

输入账号、密码和邮箱，用getElementById("").value获

程将输入框输入的店铺详细信息添加到数据库中，强调输入

取每一个属性的值，判断账号密码、邮箱是否为空，如果为

的店铺ID不能与之前数据库中的

ID一样，如果一样就会覆

空则提示用户输入不能为空，比较密码与确认密码是否一样，

盖以前的店铺数据。删除店铺就很简单了，就是通过管理员

不一样则提示用户两次密码不一样请重新输入。如果都正确

输入店铺的ID删除数据。修改店铺信息主要通过先输入店

就将数据通过ajax请求发送数据。大致的代码如下：

铺的ID

，也就是要修改哪一家店铺的信息，然后查询是否有

var strTemp = {

该店铺的信息，如果有的话就在原有信息上修改，如果没有

（下转第66页）

—　　　６３　　　—

软件开发与应用

信息与电脑

China Computer & Communication

2019年第17期

以二进制帧格式而不是文本格式传输，突破了请求并发数的

案是：DES和RSA一起使用，

DESKey和关键字段（用户

限制，能够实现完全的多路复用，使页面的传输效率和建连

ID等）使用

RSA公钥加密，并传输到服务器。服务器使用

复用效益最大化。在常用页面上计划使用HTTP/2传输，在

RSA私钥解密，获取

DESKey和用户ID，并根据ID搜索用

3G/4G/WiFi网络下均有好的性能表现。

（2）静态资源预加载。

户请求信息，用DES加密后返回给客户端，从而既能保障安

把前端页面动静分离，把一些页面会使用到的静态资源预先全，又能确保传输效率。

下载到客户端，然后拦截容器的资源请求，将本地已经下好

的文件内容返回进行展示，这样就省去即时网络通信时间，

３　结　语

提升了页面的加载性能。（3）关键处理函数的算法追求最

目前，新一代移动警务建设正在持续完善和进行中，能

优。因信息采集采用多线程FTP方式上传，那么对于服务器

更好地延伸公安业务应用系统，快速为每一位民警提供及时

文件系统的遍历操作将会非常多，也非常耗时，拟采用改进

的信息支持，帮助他们随时随地查询所需的信息内容，从根

的stat实现算法，提升遍历文件的速度，从而将极大提升上

本上解除时间、空间和设备的限制。面对越来越多的移动业

传速度和信息处理速度。（4）信息数据互联快速共享的问

务需求，例如移动执法个案、现场处理业务和远程办公工作，

题。该应用服务端一侧对外提供标准的webservice接口，传

需要在公安移动网络应用规范下，基于“警察通信+移动应

输json报文，达到对接通用数据的目的。

用”的思想，充分利用现有公安信息资源，运用计算机技术、

2.3　现场信息采集app关键技术的研究

无线网络技术、通信技术、GPS定位导航技术和GIS地理信

息等技术，依托无线移动通信网络，建设符合技术规范的移

2.3.1　核心算法优化

动警务应用，完善安全措施。一线民警通过移动终端的公安

因该应用信息多采用多线程FTP方式上传，那么对于服

民警服务，开展人员核查、信息收集、巡逻核查、现场执法

务器文件系统的遍历操作将会非常多，也非常耗时，一般较

指挥调度等公安业务，能够提高一线民警的工作效率，满足

常见的遍历算法基于stat实现。但是，基于

stat的算法受到

实际业务要求。

属性性能的限制。在一些极端的情况下（例如，当目录中有

数以千计的文件时，stat的性能会逐渐恶化），因此遍历所

参考文献

需的时间较长。在这种情况下，这种算法是不合适的，拟采

[1]朱应丽,崔彦军,解建军.基于Android平台的信息采

用改进的stat算法，

考虑到遍历，如果不注意文件的其他属性，

集传输系统设计[J].电脑与信息技术,2014,22(2):4-7.

则不能使用stat系统调用，只需要确定它是否为目录。

[2]卢煜,浮欣.新一代移动警务终端技术要求及发展趋势

2.3.2　安全设计的关键实施-客户端加密算法

[J].警察技术,2018(2):65-71.

客户端采用何种加密算法进行敏感信息加密是非常关键

[3]黎桐辛,韩心慧,简容,等.支持加壳应用的Android非

的技术。通过对比AES

、DES、3DES、RSA等目前主流的

侵入式重打包方法研究[J].北京大学学报:自然科学版,2018,

加密算法，DES的效率最高，加密算法不够强。拟采用的方

54(6):1147-1158.

（上接第63页）

就重新添加信息数据。

５　结　语

4.4　人员界面

本文主要介绍了浏览器搭建、webserver和阿里云服务器

主要实现的功能与店铺界面一致，都是做了一些数据库

配置，以及使用Mui框架开发商场管理系统APP

，介绍了如

的增删改查，界面显示效果也差不多，值得一提的是在人员

何使用Mui框架一步步搭建一个比较原生的

APP，以及如何

信息中提供了头像信息，涉及图片上传、显示等功能。首先

引用现阶段比较流行的一些jQuery

、bootstrap等框架。

是如何上传图片。对于手机端的APP来说，上传头像时有两

参考文献

种方式选择头像，一个是拍照，另一个是从手机相册中选择，

[1]唐帅.基于移动Web的“认我测”质检服务平台的设

因此必须为这两种选择分别绑定一个按钮事件。然后就是将

计与实现[D].南京:东南大学,2017:67.

获取的头像数据上传到后端服务器，将本地的图片路径放入

[2]符晓东.基于WEB的交通法规过关答题系统设计及应

数据库中，因为数据库的容量问题，不能存储图片的64编码，

用研究[D].成都:电子科技大学,2009:23.

所以在数据库中只能存储路径。同样，如果想将图片显示在

[3]崔金鹏,支丽平.基于ASP的动态网站的设计与实现[J].

界面上只需要访问路径就可以了。

中国科技信息,2007(22):87-89.

—　　　６６　　　—