安徽省旅游信息平台设计与实现论文设计

目 录中文摘要1英文摘要21 概述32 平台可行性42.1 平台可行性分析42.1.1 技术的可行性42.1.2 经济可行性42.1.3 操作的可行性53 需求分析63.1 平台开发工具和运行环境63.2 国内旅游网站现状和安徽省旅游信息平台设计的特点63.3 平台的数据流程图73.4 平台的界面需求和功能需求83.5 平台性能93.6 平台设计约束103.6.1. 安全性约束103.6.2. 数据库约束103.6.3. 软件约束104 概要设计和数据库设计114.1 平台系统功能结构图114.2 后台登录验证操作的流程图124.3 平台模块化设计124.4 平台数据库设计124.4.1 数据库概念设计134.4.2 数据库逻辑设计144.4.3 平台数据库的实现155 平台详细设计和功能的实现165.1 平台文件系统结构图165.2 平台首页设计175.2.1 首页图片设计175.2.2 平台轮播图的特效实现195.3 平台首页前台功能模块实现225.3.1景区推荐功能模块的实现225.3.2 用户反馈功能模块的实现235.3.4 景区公告功能模块的实现255.4 平台后台管理中心的功能实现265.4.1 平台用户登录注册模块的实现265.4.2 平台个人中心功能模块实现315.4.3 景区新闻更新上传模块实现336 系 统 测 试367 总结377.1 平台的功能377.2 平台的特点377.3 平台评估与改进方向377.4 开发体会与收获38谢 辞39参 考 文 献40 安徽省旅游信息平台设计与实现摘 要：本设计是运用了wxml、wxss、Javascript、MySql、java等技术实现一个安徽省旅游信息微信小程序的开发。安徽省旅游信息平台的设计和其他的旅游网站不一样，所具有的特点更为突出。利用微信小程序来开发可以给用户带来的更多的体验感和吸引力。关键词：旅游信息平台；微信小程序；wxml；wxss；javascriptDesign and implementation of Anhui Tourism Information Platform Abstract:This design is to use wxml, wxss, JavaScript, mysql, Java and other technologies to realize the development of a tourism information wechat program in Anhui Province. The design of Anhui tourism information platform is different from other tourism websites, which has more prominent characteristics. Using wechat applet to develop can bring more experience and attraction to users.Keywords:Tourism information platform; Wechat applet;wxml；wxss；javascript安徽省旅游信息平台设计与实现1 概 述现如今，计算机行业的发展可以说成是循序渐进了，计算机领域的专业化和智能化让人们的生活更具有信息化和丰富感。随着人们的生活质量提高，越来越多的人选择智能手机以及笔记本电脑。从而使人们只要通过智能手机就可以快速的了解世界各个地方发生的热点新闻及一些相关的资讯，也可以通过智能手机实现网上购物和视频聊天以及生活缴费等其他的功能。随着生活质量的提高，人们对生活追求的幸福感也会得到相应的提高以及人们对生活消费理念也会随之发生改变。当然现代人们在工作上和生活上或多或少也会产生压力，也需要去得到相应的放松和休息。因此，旅游对于人们来说是选择放松的更好方式。现在的旅游信息基本上都是通过网站来展示给用户的，网站的优势在于结构感强，功能庞大，但是不足的是用户的体验感不强，得不到相应的满足。因此，安徽省旅游信息平台的设计主要是针对于安徽省范围内的一些旅游信息以及一些对应的攻略等做了很好的诠释。该设计也是针对用户的体验感和满足感来进行设计的。例如不需要下载相关旅游软件，只需要在微信关注一个小程序就可以浏览旅游信息等相关资讯，微信小程序占用的内存极小，用户不必担心自己的手机内存不够而感到烦恼。极其方便。而且此设计是通过旅游网站进行优化的，对一些用户反馈的缺点进行修改的一个平台设计。用户可以在该平台上浏览一些相关的旅游景点和旅游信息，可以根据其他的用户反馈，及时的了解到当地的旅游信息。 2 平台可行性2.1 平台可行性分析平台可行性分析就是对该设计所具有的功能和对用户的需求所进行的概括总结，以及对该设计包含的所有功能模块进行测试调查工作，让整体设计具有层次感和实用性。因此，平台可行性分析对该设计有着很重要的作用。以下分别从技术和经济以及操作的可行性三个方面来对该设计进行总体分析。2.1.1 技术的可行性技术的可行性就是对该设计包含的功能模块能否得到具体的实现。在调查测试技术的可行性方面，应着手从该设计的运用技术方向去研究探讨，并且需要了解该技术的一些需求，及时的分析需求方面能否得到相对应的满足和实现，之后在实现各个功能模块时遇到的技术难点，能否通过查阅资料等相关渠道得到解决。这是技术可行性的重要部分也是不可缺少的关键点。 安徽省旅游信息平台的设计分为前台和后台两个部分。前台部分主要是页面的设计，后台部分主要是对数据的储存管理以及相关功能的实现。前台部分通过wxml，wxss，js实现页面的设计，搭建出该页面各个功能模块的具体位置，让页面的层次感突出，让设计更加美观的同时增强用户的体验感。后台部分通过Mysql数据库和Java技术实现对页面的管理功能和对数据的管理，保存用户相关的信息以及对相关数据的处理。两者相互结合，让整个设计的技术得到满足。 2.1.2 经济可行性经济可行性就是对该平台设计所投入的成本能否得到有效的支撑，并且在预期成本的范围之内，同时使得该平台设计的创收效益达到最高。控制好预期成本就是控制整个设计开发实现的重要环节。由此可见，经济可行性的重要性。例如，一些旅游网站和平台需要花很多经费去做宣传广告和申请相关的版权等，这些都是包括在预期成本中的，在设计中，应当尽可能地减少开发成本，争取最大的利益。安徽省旅游信息平台的设计主要运用了微信开发工具app、wxss、wxml、js语言、java技术、Apache网络服务器、MySql数据库、修图软件photoshop。这些软件用来设计该平台都是免费的，让开发成本降低了很多。安徽省旅游信息平台设计作为一个微信小程序的项目，本身就让预期的成本比其他网站的预期成本要低很多，通过关注和搜索小程序的方式就可以浏览该旅游平台，不需要去浪费下载软件的资源，有时候只需通过微信扫一扫就可以让关注该设计平台的人越来越多，使用该平台的用户也会增加，好处是整个设计看起来小巧，但是功能却很强大，让该平台的设计更具有经济性。2.1.3 操作的可行性操作的可行性就是在该平台技术可行性得到认可和检测完毕的条件下，前台页面包含的功能模块是否能够正常运行，以及后台对前台一些数据的处理和一些相关功能的实现能否操作及时，并且给出正确的数据信息。 安徽省旅游信息平台设计的操作主要有账号密码登录，功能模块的操作实现等。对于账号密码登录操作，新用户需要先注册，后台会记录相关的用户信息，这时用户输入相对应的账号密码，后台管理员就会从数据库中检测输入的账号密码是否正确，并且给出相对应的回应。经过一系列的测试后，该平台设计没有什么问题。 3 需求分析需求分析就是对于用户来说他们需要什么，所对应的功能就是什么样的。但是每个用户的需求可能会有不同之处，所以一个设计应该满足大部分用户的需求。除此之外，每个设计都会有相对应的功能，总之来说，需求分析要结合用户的需求和该设计所应该具有的功能需求。安徽省旅游信息平台设计的需求分析应从该设计自身和用户需求两个方面来进行的。从该设计自身方面来说，分为前台需求和后台需求两个部分，前台需求主要是页面设计和基本模块的搭建，后台需求主要是对数据的储存管理和信息的及时处理。从用户需求方面来说，根据用户的需要，适当的增添一些功能来满足用户，提高用户的体验感。 3.1 平台开发工具和运行环境安徽省旅游信息平台设计与实现的开发工具主要有微信开发工具、Photoshop、MySql数据库、Java技术。用微信开发工具来对整个设计进行框架布局，用Photoshop对图片进行处理，增强页面的美观设计，用MySQL数据库对数据进行储存管理，以及用Java技术来实现功能模块的实现。平台的页面设计主要是用wxss、wxml、js技术来搭建的。该技术开发的平台不需要通过浏览器来浏览，只需要利用微信上的小程序即可。因此，该设计不需要考虑浏览器的兼容问题，只需要在连接网络的环境下操作。 3.2 国内旅游网站现状和安徽省旅游信息平台设计的特点国内旅游网站从某种程度上来说其规模大、所包含的功能也很多、给用户提供了很多需求。例如，携程旅行网站的首页中，包括了酒店、机票、旅游、火车票、以及跟团游和自行游相关的查询。通过输入旅游的目的地就可以查找当地的景区和相关景区的旅游信息，可以说功能强大，应有尽有。但是缺点是只要是通过携程网来搜索旅游景区时，都会发现其价格都要比实际景区收取的要贵很多，甚至有的景区实际都是免费的。此外，像携程旅行网站的功能太过强大，给用户带来一种功能太多而操作不方便的体验。这样就会降低用户的使用率和体验感。为了解决这样的难题，采用一个微信小程序的平台设计，让该设计只包含旅游相关的信息查询，不需要与旅游无关的其他功能。 在安徽省旅游信息平台设计中，其功能包括用户登录、旅游景区、景区周边、用户反馈以及景区购票等功能。虽然功能比其他的大型网站少很多，但是对于用户来查询相关旅游信息是可以得到满足的。做成一个平台的好处是用户不需要通过下载APP就可以直接查看旅游信息，只需要通过微信扫一扫就可以查看的一个平台设计，相比较网站是很方便的。此外，该平台设计新增了旅游相关的新闻功能，能够及时的提供旅游景区相关的信息，直接利用后台推送给用户，不需要用户去自行查阅，给用户带来了极大的方便。该平台整个设计会给人以简约清新的感觉，并操作起来简单，对旅游相关信息一目了然。 3.3 平台的数据流程图平台的数据流程图就是将整个平台设计的系统后台数据按照数据输入、数据的处理、数据输出、最后用图形的方式展示出来的四个步骤来进行的。以下是安徽省旅游信息平台设计的数据流程图的步骤。 首先需要将整个平台设计作为一个整体，并且找到数据的输入和数据的输出。 需要找到整个平台设计的外部实体。外部实体是用户和后台管理员两者的结合。 根据以上操作，找出平台设计外部实体的数据输入和数据输出。 按照平台设计的功能模块，确定输入数据的方向流。 最后将整个平台设计的内部数据处理作为一个整体，将其中的数据输入、数据的处理、数据输出找出来。 按照以上操作循环执行，找出所有数据之间的关系。数据流程概要图如图3-1所示。图3-1 数据流程概要图3.4 平台的界面需求和功能需求安徽省旅游信息平台是以与旅游相关为主的设计。一个设计给用户带来的舒适感和使用感取决于设计的界面和设计的功能两个部分。该设计要求界面尽量简约，给用户留下一种易操作的良好体验感。并且要求设计的功能模块能够满足用户的实际需求，真正的做到为用户着想，为用户量身打造的一个平台设计。 3.4.1 平台的界面需求平台的界面需求在设计中起着很重要的作用，一个平台设计的界面能够给用户带来最直观的感受。因此，必须对设计中的界面做到既美观又简洁。关于平台设计界面需求的部分，主要包括图片的处理、页面布局、颜色的搭配、字体大小以及颜色样式设置等四个方面。以下就是对这四个需求部分进行说明。 平台设计中的图片首先经过Photoshop软件处理后再使用，增强页面的美观感。图片的格式有很多种，例如：jpg、png、gif、psd等。此设计中的图片大都是png格式的，而且该设计中的大部分图片都是通过先调用后台服务器再请求后台服务器上传的。 平台的页面布局尽量做到排版整齐，虽然此设计页面中的功能模块比较多，但是布局一定要清晰合理，要做到看起来比较简约，可以让用户及时找到自己需要的功能模块。 此平台设计的颜色以白色为主题，这里是为了考虑到用户的体验感以及整个页面的简洁度，会让整个页面看起来不那么的复杂。由此可见，平台的颜色搭配也是一个小窍门，用好它对整个平台设计有很重要的作用。 此平台页面设计中的字体大小为28rpx物理像素，因为在微信小程序开发中，其单位是物理像素，和html语言不同，在html中，像素单位为px。但是在微信小程序中需要适配多种手机，满足用户的体验感，这里字体的设置是根据用户所选择的屏幕大小而自动改变的。 平台页面设计中的字体颜色有很多，但是要保证字体的颜色和页面的主题色要搭配协调，看起来不能有违和感。因此，在该平台设计中，字体的颜色设置为#888。 平台页面设计中的字体同样有很多种，例如：黑体、宋体、微软雅黑、楷体等。大部分网站及平台设计的字体为微软雅黑，这里为了节约开发时间，字体设置为默认，也就是我们所说的微软雅黑。3.4.2 平台的功能需求平台的功能需求分为前台功能需求和后台功能需求两个部分。在该设计中的前台部分中，要涉及到与旅游相关的功能模块，确保这些功能能够正常使用并及时的更新。对于后台部分，要包括对前台功能模块的实现以及对用户数据信息的及时处理。两个部分相互结合，实现前台和后台功能的使用。以下是对这两个部分的功能需求说明。 用户可以通过登录注册模块后进入该平台中。 页面的上部分显示的是一些著名的景区图片，可以根据图片展示的风景去查询相关的旅游景区以及旅游景区的数据信息。 页面的下部分是九个功能模块，分别为景区功能模块、周边功能模块、美食功能模块、用户反馈模块、购票功能模块、公告功能模块、文化功能模块、攻略功能模块以及论坛功能模块。 用户通过新闻列表可以跳转到相关旅游对应的景区新闻，便于用户及时了解景区信息。 用户可以通过我的列表可以跳转到个人中心页面，用户可以直接编辑相关个人信息，也可以修改删除个人信息。 后台管理员通过用户注册登录后，将其用户的个人数据信息保存起来。 对于前台用户反馈的功能模块，后台会将用户反馈的信息放到数据库保存起来。 后台管理个人中心列表中的所有数据信息。 后台管理新闻列表中的信息，并且根据景区的相关情况，及时的上传与该景区相关的新闻。 平台设计中的后台管理可以通过用户输入的账号密码来确认是否是该用户，支持用户修改账号密码等操作。3.5 平台性能安徽省旅游信息平台的设计完成后，根据客户的要求，上传到指定的后台服务器中，用户需要通过登录注册功能后才能进入平台入口。用户只需要第一次注册设置账号密码，以后通过登录就可以浏览该平台设计中的旅游信息。 安徽省旅游信息平台设计的主要功能是为用户提供旅游相关信息的查询，在后台服务器性能正常的条件下，用户可以在任何时间登录该平台，。3.6 平台设计约束3.6.1. 安全性约束安徽省旅游信息平台设计的实现主要涉及到前台、后台和数据库三个方面。用户分为旅游者用户和后台管理员两大类。其中旅游者用户只能访问前台页面和查询旅游相关信息的功能以及编辑修改自己的个人信息，而后台管理员同时拥有旅游者用户的访问资格和后台管理员。后台管理员必须通过管理员权限才能对用户数据信息的修改和保存，并且及时的上传该景点新闻和相关的数据信息。两大类的用户之间互不冲突，旅游者用户不能看到后台相关的数据信息，只能对后台管理员可见。因此，避免一些黑客攻击该平台后台造成用户信息泄露，后台管理员必须要注意维护和运营管理。3.6.2. 数据库约束安徽省旅游信息平台设计中，使用的数据库是MySQL数据库，MySQL数据库是关系数据库，其特点是灵活性强，速度很快。其中数据库中的数据表要求每条记录必须符合三范式。第一范式要求每个用户旅游信息的字段是不可分割的，而且不能有多个值。由于使用的是MySQL数据库，因此默认满足第一范式。第二范式就是在满足第一范式的前提下，每个用户的旅游信息都是唯一确定的，可以通过数据库中的主键来设置。 第三范式就是在满足第二范式的前提下，要求数据库中的数据表不能出现冗余，其中的用户信息和主键要有直接的关系，不能通过间接关系来得到相关的数据信息。 3.6.3. 软件约束 系统客户端安徽省旅游信息平台的设计不需要考虑浏览器的兼容问题，因此对系统的客户端没有要求。用户只要在连接网络的条件下登录注册该设计平台即可浏览该平台并且查询相关信息。 平台开发环境限制安徽省旅游信息平台的设计是运用了微信开发工具app作为主要设计的开发环境，好处是利用微信展示给用户，增强用户的黏性度。此外，该微信开发工具运用了wxss、wxml、js技术实现前台页面的布局效果，结合了数据库和Java技术对前台用户数据信息的处理，完美的将整个旅游平台呈现给用户。该设计平台是在windows7的系统环境下进行开发的，配置要满足该设计正常实现即可。4 概要设计和数据库设计4.1 平台系统功能结构图依据用户对旅游平台的实际需求和整个设计的功能实现，以下是安徽省旅游信息平台设计的功能结构图，如图4-1所示。图4-1 安徽旅游信息平台设计与实现的功能结构图4.2 后台登录验证操作的流程图平台后台管理中心登录验证操作的流程图如图4-2所示。图4-2 后台管理中心登录验证操作的流程图4.3 平台模块化设计安徽省旅游信息平台设计的制作是将整个平台设计细分为几个模块，再逐次对每个模块完成测试实现，结合起来就是一个完整的平台设计。之所以采取模块化的设计，原因是降低平台开发的难度，使平台更完善。以下是安徽省旅游信息平台设计的几个主要模块。 平台首页模块 平台新闻模块 平台个人中心模块 用户登录注册模块 后台管理用户数据信息模块 后台管理更新上传新闻模块4.4 平台数据库设计安徽省旅游信息平台设计与实现的后台数据库采用的是MySQL数据库，MySQL数据库可以通过平台界面提供相关的管理器，同时通过平台界面的视图来创建数据库。 在MySQL中创建数据库，命名为：bbly_db,选择数据库编码类型为utf-8。在MySQL数据库中创建3个表，分别用来保存用户与旅游相关的信息、用户登录信息、旅游分类信息。安徽省旅游信息平台设计的数据库结构如图4-3所示。图4-3 安徽省旅游信息平台设计的数据库结构图4.4.1 数据库概念设计根据安徽省旅游信息平台设计的系统结构图和用户的实际需求分析，该平台设计给出了用户需求之间的实体关系。其中包括的实体主要有两个方面：用户旅游信息实体以及后台管理信息实体。以下是分别介绍这两个实体。用户旅游信息实体主要是储存与用户旅游相关的数据信息。用户旅游信息实体是由旅游信息编号、该旅游景点信息、景区图片展示、景区新闻更新、分类信息编号等五个部分组成的。该平台用户旅游信息实体图如图4-4所示。图4-4 用户旅游信息实体图后台管理员信息实体主要是实现前台数据信息以及对用户数据信息进行的操作。后台管理信息实体是由后台管理员编号、管理员账号以及管理员密码三个部分组成的。后台管理员信息实体图如图4-5所示。图4-5 管理员信息实体图4.4.2 数据库逻辑设计安徽省旅游信息平台设计与实现是利用E-R图来创建其数据库的逻辑结构，以下是对两个表的作用分别进行展开。 1 用户旅游信息表，在MySQL数据库中用下划线的命名方式为用户旅游信息命名为ly_resource_tb,主要是用来储存与用户旅游相关的数据信息。主要是由旅游信息编号、该旅游景点信息、景区图片展示、景区新闻更新、分类信息编号等五个字段组成的。 2 后台管理员表，在MySQL数据库中用下划线的命名方式为后台管理员表命名为admin_tb,主要是用来实现前台数据信息以及对用户数据信息进行的操作。主要是由后台管理员编号、管理员账号以及管理员密码等三个字段组成的。 以下是数据库中两个表的结构：user（用户旅游信息表），结构如表4-1所示。表4-1 用户旅游信息表字段类型额外是否为空备注idint(10)auto_incrementnot null自动编号，主键usernamevarchar(100)not null用户账号passwordvarchar(8)not null用户密码phonevarchar(11) not null用户联系电话emailvarchar(32)null用户邮箱addressvarchar(100)default(1)null用户地址admin(后台管理员表)，结构如表4-2所示。表4-2 后台管理员表字段类型额外是否为空备注idint(10)auto_incrementnot null用户编号，主键usernameVarchar(100)not null用户名，主键passwordVarchar(8)not null密码4.4.3 平台数据库的实现根据以上操作，首先用MySQL数据库创建完相关的字段后，再利用idea基于maven创建一个spring的项目，并且完成相关的创建和数据环境的配置。通过浏览器搜索其数据库对应的网址，输入相关的账号密码才能进入正确的数据库管理界面，在管理界面中，完成其数据表的创建。这样一个平台设计数据库的功能就完成实现了。5 平台详细设计和功能的实现5.1 平台文件系统结构图由于每个平台设计都有属于自己的文件系统结构图，而且正常情况下平台设计中的文件会有很多，因此需要对涉及所有的文件进行分类，避免产生不必要的错误。例如，对平台设计中的整个设置放在pages文件夹中，对前台首页的一系列设置操作放在index文件夹中、登录操作login文件夹、注册操作register文件夹、个人中心操作personcenter文件夹、新闻操作news文件夹等。其中index文件夹中包含index.wxml、index.wxss以及index.js和index.json四个部分，分别为结构设置、样式设置、行为设置、数据交换格式。其他的都是和index文件夹中的一样，都是从结构、样式、行为和数据交换格式四个部分，再依次对每个部分进行相关的设置操作。安徽省旅游信息平台的设计系统结构图都是按照以上操作进行的。平台文件系统结构图如图5-1所示。图5-1 平台文件系统结构图5.2 平台首页设计安徽省旅游信息平台设计的首页设计包括对图片的处理、页面的布局、字体相关的设置三大部分。对于图片的处理，首先在网上搜集相关的景区图片，再实现轮播图的操作。对于页面布局，主要使用wxml和wxss操作来完成布局。对于字体相关的字体，直接用样式属性设置就可以了。5.2.1 首页图片设计首先在网上搜集相关的景区图片，再利用wxml和wxss对图片进行布局处理。以下是首页图片设计的每个部分。 首页头部图片的制作 在网上搜索查询相关安徽地区景区的图片展示，选择安徽地区的特色景区展示图片，并且符合该平台设计所要突出景区的特点。 搜集完图片后请求后台服务器上传图片到平台设计中的管理器中，接着设置图片的样式位置等操作。 设置该图片的宽度为用户可见的100%，高度为180px。平台首页头部图片的制作如图5-2所示。 图5-2 平台首页头部图片的制作 平台功能模块中图片的制作 首先在网上查找符合该功能的小图形，由于这个图片就要代表着此功能，因此在搜集这类图片时需要谨慎，要保证搜集出来的图片要让用户第一眼就能知道时代表着此功能。 该图片需要请求后台服务器调用后才能使用。 设置每个图片的宽度和高度均为70rpx。 按照每个功能模块的区域，设置每个图片的位置。 其他的图片通过复制上一个的，只需要更改图片的路径就可以了。以下是平台功能模块中图片的制作，如图5-3所示。图5-3 平台功能模块中图片的制作 平台首页底部设计平台首页底部设计分为三个部分，即首页、新闻、我的三个部分，而且每个部分都会有对应的跳转功能。点击首页会跳转的首页，点击新闻会跳转到景区新闻模块，点击我的可以跳转到个人中心页面，用户可以自己编辑修改个人信息等操作。平台首页底部图如图5-4所示。图5-4 平台首页底部图5.2.2 平台轮播图的特效实现一个平台设计的具体实现除了完成相关功能模块的实现，还应该具有一些特效功能，这些特效功能能给页面设计带来很多好处，例如，能够抓住用户的眼眸，增强用户的使用感和体验感。采用一些特效功能制作平台，也是很多人都采用的一种方式。在该平台设计中，采用轮播图的方式来展示安徽省内几个特色的景区图片展示，用户可以通过鼠标滑动来浏览其图片的转化，轮播图的制作让页面看起来更为美观。以下是制作轮播图特效实现的详细步骤： 首先在index.wxml中布局好图片对应的结构，建立一个swiper标签，设置类名为sliders。接着建立一个swiper-item标签，里面存放一个swiper数组，存放轮播图中的三张图片。 代码段：<swiper class="sliders" indicator-dots indicator-color autoplay circular> <swiper-item wx:for="swiper" wx:key="id" > <image src="item.url" mode="widthFix"></image> </swiper-item></swiper> 在index.js中实现对轮播图的数据请求。 代码段：Page( data: motto: 'Hello World', userInfo: , hasUserInfo: false, canIUse: wx.canIUse('button.open-type.getUserInfo'), swiper: , menu: , /页面初始化 onLoad: function () /数据初始化 this.initdata(); , initdata: function () /轮播数据请求 console.log("轮播数据请求开始"); wx.showToast( title: '数据请求中.', icon: 'loading' ); fetch('/test/swiper.do').then(res => console.log(res); this.setData( /再set值 swiper: res.data ); /菜单查询 this.queryMenu(); ) 根据以上操作在Java技术中找到了相关图片的路径，将轮播图中使用的图片转化为相应的BASE64码，再送到后台服务器中请求页面。代码段：RequestMapping(value = "/swiper.do", method = RequestMethod.GET)public List<HashMap<String, Object>> swiper(HttpServletResponse response) throws IOException String path = new String "D:/image/a.png", "D:/image/b.png", "D:/image/c.png" ; / 图片路径List<HashMap<String, Object>> swiperList = new ArrayList<HashMap<String, Object>>();/ 轮播图得图片BASE64码HashMap<String, Object> swiper=null;for (String item : path) swiper=new HashMap<String, Object>();File file = new File(item);FileInputStream inputFile = new FileInputStream(file);byte buffer = new byte(int) file.length();inputFile.read(buffer);inputFile.close();swiper.put("id", item);swiper.put("url", "http:/127.0.0.1:9080/ESBP/test/download.do?path="+item);swiperList.add(swiper);logger.info("swiper长度:"+swiper.size();return swiperList; 请求轮播图的图片路径实现。代码段：module.exports = (url,data) => return new Promise(resolve, reject) => wx.request( url: 'http:/localhost:9080/ESBP' + url, header: 'content-type': 'application/json' / 默认值 , data:data, success: resolve, fail: reject ) ) 5.3 平台首页前台功能模块实现安徽省旅游信息平台设计的前台功能主要有景区推荐功能模块、用户反馈功能模块、景区天气功能模块、景区公告功能模块、景区周边功能模块等。用户可以根据页面的各个功能模块来查询相关的旅游信息，以下是各个功能模块的具体实现。5.3.1景区推荐功能模块的实现该平台设计中的首页景区推荐功能模块，主要是为用户提供查询景区的功能，同时也会为用户推荐最近的热点景区。用户只需要点击景区功能模块，就可以进入该功能进行查询操作。以下是实现景区推荐功能的关键步骤：代码段：onLoad: function (options) wx.showToast( title: '加载中.', icon: 'loading' ); fetch.GET('/scenery/query.do').then(res => this.setData( /再set值 scenerys: res.data ); wx.hideLoading(); ) , Click: function (e) var url = e.currentTarget.dataset.url; wx.navigateTo( url: '/pages/out/out?url=' + url) ,5.3.2 用户反馈功能模块的实现 用户反馈功能模块是给已经观赏过该景点用户提供的一个对该景区反馈建议的平台，同时给未观赏的用户一些客观真实的建议和评价等。通过查看反馈的建议和评价，用户可以选择是否去该景区。以下是实现用户反馈功能模块的关键步骤：代码段：suggestBlur: function(e) console.log(e); var type = e.currentTarget.dataset.type; /点击事件的input框类型 var value = e.detail.value; /点击事件的input框值 switch (type) case 'name': this.setData( 'suggest.name': value ); break; case 'age': this.setData( 'suggest.age': value ); break; case 'phone': this.setData( 'suggest.phone': value ); break; case 'email': this.setData( 'suggest.email': value ); break; case 'address': this.setData( 'suggest.address': value ); break; case 'info': this.setData( 'suggest.info': value ); break; default: console.log("未知的类型."); break; console.log("suggest:", this.data.suggest) ,5.3.3 景区天气功能模块的实现用户可以通过该模块功能来查询相关景区的天气情况，为旅游做好充分的准备。以下是实现景区天气功能模块的关键步骤：代码段：weatherQuery:function() wx.showToast( title: '加载中.', icon: 'loading' ); var param = this.data.sendData; var _this = this; wx.request( url: " header: 'content-type': 'application/json' / 默认值 , data: param, success(res) _this.setData( /再set值 weather: res.data, show: true );5.3.4 景区公告功能模块的实现 景区公告模块是为了用户能够更好的策划旅游提供的一个功能，该功能不仅给用户在选择旅游路线时节省了很多时间，也会根据用户的需求去搜集相对应的公告。以下是实现景区公告功能模块的关键步骤：代码段：onLoad: function (options) wx.showToast( title: '加载中.', icon: 'loading' ); fetch.GET('/announcement/query.do').then(res => this.setData( /再set值 announcements: res.data ); wx.hideLoading(); )安徽省旅游信息平台设计所涉及的功能模块有很多，在这里只展示了几个比较主要突出的功能模块，其他的功能模块制作方案和以上功能模块大体上一样。因此，在这里就不做一一说明了。5.4 平台后台管理中心的功能实现安徽省旅游信息平台设计的后台管理主要是为了管理用户的数据信息和更新上传景区的热点新闻。该平台后台管理部分由首页登录中心、用户个人中心以及景区新闻三个模块构成的。5.4.1 平台用户登录注册模块的实现在该平台设计中，用户需要注册登录其账号密码，后台管理中心验证用户输入的账号密码是正确后，才能浏览该平台进行查询等操作。平台用户登录注册界面如图5-5所示。图5-5 用户登录注册界面图平台用户登录注册模块实现的关键步骤如下： 在index文件夹中建立一个login文件夹和register文件夹，将相关登录的操作实现放在login文件夹中，将相关注册的操作实现放在register文件夹中。再把登录注册中的结构设置放在wxml文件中，样式属性设置放在wxss中。在wxml文件中，主要利用view标签来布局。在wxss中，可以设置文字的样式、图片的大小等。 在login中新建一个login.js文件，用来实现相关的操作，下面是login.js的关键代码。 代码段： login:function() console.log('*' + JSON.stringify(this.data.userinfo) var userName = this.data.userinfo.userName; var password = this.data.userinfo.password; if (userName = null | userName='') wx.showToast( title: '请输入用户名!', icon: 'none', duration: 2000 ) return; if (password = null | password = '') wx.showToast( title: '请输入密码!', icon: 'none', duration: 2000 ) return; wx.showToast( title: '登录中.', icon: 'loading' ); var userinfo = this.data.userinfo; /调用登录接口 fetch('/personCenter/login.do',userinfo).then(res => console.log(res); if(res.data.resCode='Y') wx.setStorage( key: "userinfo", data: res.data ); wx.switchTab( url: './index/index', success: function (res) console.log(res), fail: function (res) console.log(res) , complete: function (res) console.log(res) ) else wx.showToast( title: '登录失败', icon: 'none' ); wx.hideLoading(); ) , register:function() wx.navigateTo( url: './register/register', success: function (res) console.log(res) , fail: function (res) console.log(res) , complete: function (res) console.log(res) ) ) 在register文件夹中新建一个register.js文件，用来实现相关的注册功能，下面是其关键代码。代码段： submit: function() if (JSON.stringify(this.data.userinfo.userName) = '') wx.showToast( title: '请输入用户名!', icon: 'none', duration: 2000 ) return; if (JSON.stringify(this.data.userinfo.password) = '') wx.showToast( title: '请输入用户名!', icon: 'none', duration: 2000 ) return; if (JSON.stringify(this.data.userinfo.phone) = '') wx.showToast( title: '请输入手机号!', icon: 'none', duration: 2000 ) return; wx.showToast( title: '注册中.', icon: 'loading' ); console.log("userinfo." + JSON.stringify(this.data.userinfo); var userinfo = this.data.userinfo; console.log("+" + userinfo); wx.request( url: "http:/192.168.1.3:9080/ESBP/personCenter/register.do", method: "POST", data: this.data.userinfo, header: "Content-Type": "application/x-www-form-urlencoded" , success: function(res) if (res.data.resCode = 'Y') wx.redirectTo( url: './login/login?userName='+userinfo.userName+'&password='+userinfo.password ) else wx.showToast( title: res.data.resInfo, icon: 'none' ); wx.hideLoading(); )