基于移动端APP的信息发布平台研发

郭震星 白俊鸽 四川大学 锦城学院

引言

伴随着4G、5G的到来，移动端应用在快步发展，手机已和人们的生活密不可分，而且手机也不仅仅局限于打电话发消息，解开这些局限的正是手机上各式各样的APP软件。信息发布平台就是让手机以时间流的形式记录分享周围的事，看见的事。本文主要介绍了信息发布平台手机APP的制作过程，需要webserver，C++服务器，数据库及所需环境。介绍了在项目中需要把前后端分离开来，在项目前期需要定义好统一的接口，前端负责APP的界面和一些简单的可以由JS处理的工作，减小后端服务器的压力，数据通过Ajax传输给后端，后端只需对数据处理不用考虑前端页面的分布情况，只需处理完后返回事先定义好的值就可以。本文通过设计和研发了一款基于MUI的信息发布平台，描述了信息发布平台APP的具体实现步骤，功能特点，以及数据交互的实现方法。

1 选择合适的移动端APP开发技术

1.1 主流开发技术简介

按照开发技术分类的话，目前主流的三大移动端APP开发技术是：Native App 即 原生App开发，这种一般分发成本高、维护成本高、更新缓慢；Web App 即 网页App开发，涉及到JS、CSS、和HTML，其实质是做成了手机APP相仿样式的网站；Hybrid App 即 混合型App开发，就是Native结合Web混合开发[1]。信息发布平台主要使用到的是网页App开发技术，熟悉HTML、CSS、JS网页编程语言，学会调用MUI框架对手机APP进行设计和实现。在选择我们要用到的技术时，不要为了跟上主流而去选择主流，这样会导致你出现一些问题，比如对技术的不熟悉，出现报错后不知道怎么解决。在面对技术的选择时，最好根据自身的实际情况来考虑，有系统学习过的技术就尽量用系统学习过的技术去实现你的开发。如果基础扎实的话，尝试学习新的技术并去使用也是可以的，但会遇到很多的问题。在这里建议大家先从简单的技术开始学习使用，主要是学习一个项目是如何从零开始建立起来的，对于技术的学习研究可以以后花多的时间去学习。

1.2 MUI框架的概念及使用

在MUI框架中包含了很多很多组件可以直接调用，像UI组件如折叠面板、操作表、数字角标、复选框、消息框、进度条等等，事件取消、事件触发、手势事件等等，我们在引入了CSS、JS后就可以直接使用了，这些组件就好比一个个模板，我们只需在里面添加自己所想要的内容即可。用Ajax请求，我们就可以将数据通过jsons字符串从网页前端发送到后端去。MUI框架的使用方便简单，对于从未使用过MUI框架的开发人员来说进入MUI官网可以直接查看它的在线学习手册。有技术基础的在自学过后很容易上手，花个一两天时间学习MUI框架，对于简单的项目就可以上手使用了。比如要实现一个折叠面板，就可以引入它的CSS文件：＜link href="css/mui.min.css" rel="stylesheet"/＞，然后用下面代码实现：

＜ul class="mui-table-view"＞

＜li class="mui-table-view-cell mui-collapse"＞

＜a class="mui-navigate-right" href="#"＞ 面 板 1＜/a＞

＜div class="mui-collapse-content"＞

＜p＞面板1子内容＜/p＞＜/div＞＜/li＞＜/ul＞

2 主要功能描述

打开信息发布平台APP首先进入未登录时的主界面，主界面分为四部分：第一部分为右上角的登录入口，第二部分为APP类别选择按钮，第三部分为APP搜索框，第四部分为消息预览框。未登录时消息预览框显示默认类别的信息，不可点击查看详细内容，若点击则进入登录界面。没有登录时种别选择键、查询功能都可以工作，可以根据类别、账号、标题找寻信息。点击登录键跳入登录注册界面，新用户在里面可以申请，忘记密码能用密保问题找回密码。登录后的主界面会多一个显示button，显示自己的账号名称，点击此button可以进入个人信息界面。APP可以更换密码和个人信息。登录后的右上角button会变成消息发布button，通过发布button，自动获取sessionstorage中存储的用户数据，连同用户数据和表单内容一起发送给后台服务器进行数据处理，发送方式为Ajax请求。信息会带有发布者的名称、发布time，对于他人发布的消息只能进行评论。

3 搭建环境

安装wampserver服务器，搭建C++服务器配置环境，安装SQL sever数据库并创建所需的表，创建存储过程如数据的增加、删除、修改、查询等等。对于wampserver服务器需要注意的是它网页跨域的问题，一般都是修改它的配置文件，在百度上可以搜索出具体的解决方法。配置好环境，在此项目中数据库的存储过程就用C++数据库去触发。在使用之前进行测试，把所有的数据库存储过程用三方工具JSON Tools测试，查看数据是否能写入数据库，若不能找出原因，通过百度或咨询导师的方式解决。成功测试后把JSON Tools换成页面发送数据，创建一个js文件，通过Ajax请求发送到C++服务器处理。最后在电脑上建立服务器，把手机APP的通信地址连接到这个服务器上。

4 功能的具体实现

4.1 Ajax发送数据请求

由于很多的功能实现需要把数据信息发送到后台C++服务器进行处理，故可以将Ajax请求写入一个JS文件中，通过Ajax请求把数据发送给后台C++服务器，使用时直接调用JS里的函数即可。

4.2 登录界面

所有属性的值用getElementById("")[4].value来获取，数据的判空在前端实现即空数据不会传到后端服务器在前端直接判断后提示，数据的处理即登录验证在后端实现如密码错误的显示其实是后端数据处理后返回的0值，前端根据收到的0返回值显示对应的错误信息。之后解锁主界面更多功能。

4.3 注册界面

注册必须提供头像、昵称、账号、密码、确认密码、邮箱、身份证、姓名。数据值用getElementById("")[4].value来获取。前端页面需要对所有数据进行判空用JS实现，密码和确认密码的一致性也在前端实现，邮箱和身份证的字数和格式在前端进行判定。发送Ajax请求。后端服务器需要对昵称、账号、邮箱、身份证判断是否与数据库中的数据重复。后端数据处理后需要提供返回值，在这儿我用返回值2表示昵称重复、3表示账号重复、4表示邮箱重复、5表示身份证重复。当返回值为1时，执行前端JS函数即注册成功函数。实现：

4.4 主界面

主界面分为四部分：第一部分为右上角的登录入口，第二部分为APP类别选择按钮，第三部分为APP搜索框，第四部分为消息预览框。未登录时的主界面，只能查看到消息的简短信息不能点击查看详细信息和评论。登录之后，账号username通过sessionstorage存储下来，详细查看信息功能解锁，可以查看消息详细信息，并可以发表评论。所有的操作会从sessionstorage中提取账号信息。登录之后主页面会多几个功能button，注销button注销后回到登录界面，消息发布button点击后进入消息发布界面。

4.5 消息发布界面

必须包括题目、类别、消息内容。通过发布按钮，自动获取sessionstorage中存储的用户数据，连同用户数据和表单内容一起发送给后台服务器进行数据处理，发送方式为Ajax请求。

4.6 详细信息界面

其中涉及到一个卡片视图，让显示的消息美观，可以加载出图片，发布人，时间，内容，在消息下方有评论区，对于自己的消息进行删除、修改和回复操作都可以，对于别人的消息只能评论。实现：

＜div class="mui-card"＞

＜div class="mui-card-header"＞发布者信息＜/div＞

＜div class="mui-card-content"＞消息内容＜/div＞

＜div class="mui-card-footer"＞消息评论区＜/div＞

＜/div＞

在消息的品论区会有一个下拉加载的功能，评论消息一次只能加载十条，每下拉一次动态加载十条。

4.7 修改账户信息界面

主界面左上角有账号名称button，点击此button可以进入个人信息界面，进入个人信息界面会通过Ajax请求主动向后台服务器发送通知，返回自己的个人信息，前端接受到信息后只会对其头像、昵称、邮箱信息进行显示。在个人信息界面有两个功能按钮，一个是实现修改信息，一个是实现修改密码。

修改信息按钮进入信息修改界面，需要填写头像、账号、昵称、邮箱，信息在前端不会进行判空，空信息默认不修改。用getElementById(" ")[4].value来获取数据值，通过Ajax请求发送到后台服务器进行处理，若数据库没有重复的账号、昵称、邮箱信息则返回1修改成功，返回跳至主界面，若出现返回值2表示昵称重复、3表示账号重复、4表示邮箱重复，需要重新填写。

修改密码按钮进入密码修改界面，需要输入账号、旧密码、新密码，所有数据都会在前端判空，并且前端会判定新旧密码是否一致，若一致则提示重新填写。用getElementById(" ")[4].value来获取数据值，通过Ajax请求发送到后台服务器进行处理，查表账号和旧密码对应的话，则删除旧密码保存新密码，修改成功后跳转到主界面。

5 结语

本文主要介绍了一个简单手机APP的制作过程，需要webserver，C++服务器，数据库及所需环境。介绍了在项目中需要把前后端分离开来，在项目前期需要定义好统一的接口，前端负责APP的界面和一些简单的可以由JS处理的工作，减小后端服务器的压力，数据通过Ajax传输给后端，后端只需对数据处理不用考虑前端页面的分布情况，只需处理完后返回事先定义好的值就可以。介绍了MUI框架在项目中的使用过程，如何制作一个原生APP和bootstrap，jQuery等较风行框架的调用。