“游淮安”App的设计与实现

郑丽萍

摘要：“游淮安”App是结合了MUI的布局方式，利用Vue.js框架的编写方法与技巧，实现了系统的各项功能，宣传我国的红色教育、大好河山和历史文化。充分考虑其稳定、可靠、便攜性等方面的要求，系统采用前端主流技术实现了远程数据的访问。“游淮安”App可以作为前端开发类课程的综合实训项目，既体现思政教育又能培养学生的前端开发能力。

关键词：思政;JavaScript;MUI;Vue.js

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2021）21-0091-02

开放科学（资源服务）标识码（OSID）：

1 背景

淮安历史文化底蕴深厚，是淮扬菜的发源地，红色旅游景区丰富且经典，如：周恩来纪念馆及故里景区、刘老庄八十二烈士陵园、黄花塘新四军军部纪念馆、苏皖边区政府旧址纪念馆等。淮安五湖镶嵌、四水穿城，金湖水上森林公园等多处的生态旅游景区为游客提供享受并了解自然。淮安名人辈出，有西汉军事家韩信，汉赋的开创者之一枚乘，南宋著名抗金女将梁红玉，南宋画家、诗人龚开，中国古典四大名著之一《西游记》的作者吴承恩，清朝虎门销烟的爱国名将、民族英雄关天培，清末四大谴责小说《老残游记》的作者刘鹗，中华人民共和国开国总理周恩来、中国第五位女性外交部发言人华春莹等等。

为了更好地推广淮安的特色风景，特色菜，特色文化，名人名士，我们着手研究休闲经济时代下淮安特色休闲旅游产品开发，开发“游淮安”App，搭建旅游信息服务平台[1]，促进信息共享，提供旅游宾馆及饭店、交通运输、餐饮娱乐、旅游购物、社会服务等信息，构建无障碍旅游环境。推出若干精品旅游线路，主推红色旅游。该项目可以作为Web前端移动开发实训项目，培养学生爱国情怀，锻炼学生综合开发能力。

为了更好地推广淮安的特色风景、特色菜、特色文化，我们着手研究休闲经济时代下淮安特色休闲旅游产品开发，开发“游淮安”App，满足游客和市场对信息化的需求。提供旅游宾馆及饭店、交通运输、餐饮娱乐、旅游购物、社会服务等信息，以游客的安全和便利为目标，构建无障碍旅游环境。

2 系统软件的开发语言

本系统采用HBuilder开发平台，使用HTML语言、CSS样式、JavaScript语言、PHP语言等设计一套有效的平台，减轻管理员的工作负担。

HTML（全称是HyperText Markup Language超文本标记语言）描述了网页的内容，即页面结构，HTML 5是最新的HTML版本;CSS（Cascading Style Sheet层叠样式表）描述了网页布局的样式，定义了其中元素的显示方式。CSS 3是最新的CSS标准;JavaScript控制网页的行为，即通过JavaScript改变网页的内容和样式，实际上就是通过调用JavaScript函数改变文档中各个元素对象的属性值，或使用文档对象的方法，响应用户的操作。JavaScript（简称“JS”） 是一种基于对象的，解释型的编程语言。JavaScript已经广泛的用语Web应用开发中，可用来在数据被送往服务器前对表单输入的数据进行验证，对浏览器事件做出响应，读写HTML元素，动态改变元素样式等，实现如执行计算、检查表单、编写游戏、添加特殊效果等，所有这些功能都有助于增强页面的动态效果和交互性，为用户提供更流畅美观的浏览效果，随着移动应用的兴起，JavaScript在移动端的应用也越来越流行，JavaScript实现了基于HTML5的移动应用交互逻辑，JavaScript已成为手机App[2-4]开发风潮的关键。JavaScript不但能处理跨浏览器兼容问题，而且非常容易完成混合开发的移动应用。系统使用MUI框架开发前端页面，MUI框架就是基于HTML、CSS、JavaScript的。

3 MUI前端框架

“游淮安”App采用MUI移动框架实现系统页面的整体布局，MUI移动端框架是最接近原生App体验的高性能前端框架，由DCloud公司研发而成，提供大量HTML5和JavaScript语言组成的组件。HBuilder内置HTML5+ App开发环境，通过HBuilder，可以快速搭建基于MUI的项目和开发WebApp页面。MUI框架体量小加载快，页面绘出快，预加载，转场快，窗口立即转过来，下拉刷新，区域滚动，贴近原生，告别元素抖动，MUI框架提供了足够多的控件，JavaScript API 和上百种的样式，HBuilder出厂设置的时候就将MUI框架进行了内置，提供一套完整的移动应用开发解决方案，可以进行HTML 5、CSS 3、JavaScript及相关框架的快捷操作，边看边改，也可以用模拟器调试和真机同步联调。MUI的使用方式非常简便，在常规的移动端页面架构中，只需要引入MUI框架中相应的封装好的样式文件CSS和功能JS文件，既可以使用MUI框架的页面样式布局和逻辑操作，还可以根据需求使用JavaScript实现更多的逻辑功能。比如给景区列表项绑定事件，可以使用.on（）方法实现批量元素的事件绑定，单击景区列表，获取当前列表项的id，并将该id传给景区详情页面，然后打开景区详情页面。

4 Vue.js实现系统软件的数据显示

4.1 Vue.js

Vue.js是一个轻巧、高性能、可组件化的MVVM（全称是Model-ViewModel-View）的渐进式框架[5]。Model对应的是数据，JavaScript对象;View对应的是视图，也就是DOM;ViewModel是连接View和Model的中间件，在MVVM下，View和Model是不能直接通讯的，当数据变化或者用户操作视图，ViewModel都能监听到变化，实现了双向绑定。一旦创建了绑定，DOM将与数据保持同步。每当修改了数据，DOM便相应地更新，这样的代码更容易编写、理解与维护。由于Vue.js采取DOM与数据绑定的方法，且这种绑定为双向绑定，使得数据与DOM同步更新。不同于原先的jQuery，需先遍历DOM。这提高了网页的响应速度，得到了较好的网页浏览体验。