校园资讯系统客户端智能化研究与实现

来源：核心期刊咨询网时间：2020-12-24 10:2412

摘要：摘 要： 介绍了依托APICloud平台开发的校园资讯系统。该系统包含校园地图和校内信息模块。利用720云平台搭建以天津商业大学为例的校内全景地图，3D MAX制作校园建筑物的3D模型，调用高德地图2D地图SDK展示学校2D地图。用户还可查看关于学校的讲座信息、食堂

　　摘 要： 介绍了依托APICloud平台开发的校园资讯系统。该系统包含校园地图和校内信息模块。利用720云平台搭建以天津商业大学为例的校内全景地图，3D MAX制作校园建筑物的3D模型，调用高德地图2D地图SDK展示学校2D地图。用户还可查看关于学校的讲座信息、食堂信息、学院简介、校内新闻等校园资讯。对于高校的宣传也具有积极意义。

　　关键词： APICloud; 全景; 地图; 校园

　　0 引言

　　随着高校占地面积的扩大，各类建筑设施分布复杂。很多校内外人员不了解学校的具体建筑物信息，从而导致一系列不必要的麻烦。本课题利用移动智能终端，展示校园全景、3D建筑模型与2D平面地图，可以有效地弥补上述不足。还增加了校内信息模块，方便师生和校外来访人员结合地图快速、直观地了解校园地理环境和相关服务信息。

　　1 系统设计

　　1.1 客户端功能设计

　　本系统的功能分为三个大模块：地图模块，校内信息模块，个人中心模块。系统功能模块图见图1。

　　⑴ 地图展示模块

　　系统分成三种地图向用户全方位展示校园地理信息：2D平面地图、校园3D模型、校内全景漫游地图。①2D平面地图。通过调用高德地图API，给用户展示校园2D地图。②校园3D模型。用户可查看校内建筑物的3D模型。③校内全景漫游地图。用户可根据校园全景地图的热点指引，在云端漫游校园。

　　⑵ 校园信息模块

　　系统向用户展示各类校内资讯，包括：食堂热门饭菜信息、校内讲座信息、学校新闻、学院简介等。①食堂热门饭菜信息。高校的食堂数量众多，用户可查看学校各个食堂的热门饭菜信息。②校内讲座信息。高校会经常举办各类讲座。系统把近期将要举办的讲座的主题、举办时间、举办地点、主讲人、讲座简介等信息展示给用户，方便用户查看自己感兴趣的讲座。③学校新闻。用户可查看校内近期新闻，了解学校发展动态。④学院简介。用户可查看学校各个学院的简介，所设本科专业、研究生专业等内容。系统主页如图2所示。

　　⑶ 个人中心模块

　　个人中心是每个系统的必备内容。本课题系统的个人中心模块包括：用户注册、登录，用户头像上传，修改个人资料，收藏信息，团队介绍。效果图展示如图3所示。

　　1.2 服務器端设计

　　服务器端提供数据、图片及用户信息。客户端可随时调用后台数据呈现给用户。地图和3D模型的创建、修改、删除也在后台进行。

　　2 系统实现

　　2.1 开发平台

　　本课题移动端采用APIcloud第3方跨平台引擎构建，是一种Hybrid APP。[1]系统整体采用C/S架构，依托开发工具APICloud Studio 2，使用HTML+CSS+ JavaScript + APICloud扩展API，利用APICloud的混合布局渲染机制完成界面和功能开发。

　　在界面展示上，Layout实现界面布局，Window和Frame实现页面设计，UIModule实现界面视图的展示，还有部分界面效果需要借助轻量级前端框架AUI组件与APICloud所封装的模块进行实现，可以尽量减少代码冗余和复杂度，实现APP高速运行。平台前端框架如图4所示。

　　在功能实现上，APICloud引擎加载解析APIReady事件和所封装的APICloud API函数。使用APICloud平台自带的API函数进行参数调试，使用JS完成对页面事件的监听、窗口操作、网络请求、设备访问等功能。

　　模块化开发也是APICloud的一大亮点，除了官方的模块，APICLoud平台也有大量开发者提供的模块。例如本系统中主页使用的轮播图，就是引入了UIScrollPicture模块。

　　2.2 AUI组件

　　AUI是一个针对APICloud的CSS前端框架，目前已经更新到2.0版本。框架使用弹性响应式布局，采用“容器+布局结构+控件”的嵌套形式，方便了开发者快速开发UI界面。在插入控件前，需要加载AUI组件库，并在当前HTML文件中添加一段代码：

　　href="../../css/aui.2.0.css" />

　　2.3 数据的存储与获取

　　在开发过程中，前端和后端的交互是APP实现的一大关键技术要点[2]。本系统运用APICLoud平台自带的数据云进行数据存储。数据库中共存放5张关系表：用户信息表、学院信息表、食堂信息表、讲座信息表、校内新闻信息表。

　　本系统采用APICLoud平台的MCM模块从数据库中调取数据。例如在APP中获取学院简介信息，在代码中要引入MCM模块进行数据调用：

　　var model=api.require("model");

　　model.findById({

　　class： "collegeintroduction"，

　　id： "1"

　　推荐阅读：校园文化建设类论文能发表公开出版的期刊吗

转载请注明来自：http://www.qikan2017.com/lunwen/wyi/17967.html