摘 要

信息化社会内需要与之针对性的信息获取途径，但是途径的扩展基本上为人们所努力的方向，由于站在的角度存在偏差，人们经常能够获得不同类型信息，这也是技术最为难以攻克的课题。针对旅游服务等问题，对旅游服务进行研究分析，然后开发设计出黄冈旅游景点服务网站已解决问题。

黄冈旅游景点服务网站主要功能模块包括景点新闻、新闻分类、购物管理、当地特产、分类列表、订单列表、、景点信息、景点酒店、酒店订单、旅游攻略，采取面对对象的开发模式进行软件的开发和硬体的架设，能很好的满足实际使用的需求，完善了对应的软体架设以及程序编码的工作，采取Mysql作为后台数据的主要存储单元，采用SSM框架、Java技术、Ajax技术进行业务系统的编码及其开发，实现了本系统的全部功能。本次报告，首先分析了研究的背景、作用、意义，为研究工作的合理性打下了基础。针对黄冈旅游景点服务网站的各项需求以及技术问题进行分析，证明了系统的必要性和技术可行性，然后对设计系统需要使用的技术软件以及设计思想做了基本的介绍，最后来实现黄冈旅游景点服务网站和部署运行使用它。

关键词：旅游服务；ssm框架；Mysql数据库

SSM Huanggang Tourist Attraction Service Website

Abstract

Targeted information access is needed in the information society, but the expansion of the access is basically the direction that people strive for. Due to the deviation of the perspective, people can often obtain different types of information, which is also the most difficult topic for technology to overcome. Aiming at the problems of tourism service, this paper studies and analyzes the tourism service, and then develops and designs the Huanggang tourist attraction service website to solve the problems.

The main functional modules of Huanggang Tourist Attraction Service Website include scenic spot news, news classification, shopping management, local specialties, classification list, order list, scenic spot information, scenic spot hotels, hotel orders, and tourism strategies. The object-oriented development model is adopted for software development and hardware erection, which can well meet the needs of actual use, and improve the corresponding software erection and program coding, MySQL is used as the main storage unit of background data, SSM framework, Java technology and Ajax technology are used to code and develop the business system, and all functions of the system are realized. This report first analyzes the background, role and significance of the research, laying a foundation for the rationality of the research work. This paper analyzes the needs and technical problems of Huanggang tourist attraction service website, proves the necessity and technical feasibility of the system, and then introduces the technical software and design ideas that the system needs to use. Finally, it implements the Huanggang tourist attraction service website and deploys and uses it.

Key words: tourism service; Ssm framework; MySQL database

目  录

第1章 绪论

1.1 研究背景与意义

1.2 开发现状

1.3 研究方法

第2章 相关技术介绍

2.1 开发技术说明

2.2 Java语言与JDK开发环境

2.3 B/S体系工作原理

2.4 MVVM模式介绍

2.5 Mysql数据库

第3章 系统分析

3.1 可行性分析

3.2 功能需求分析

3.2.1 前台用户功能

3.2.2 后台管理员功能

3.3 非功能需求分析

3.4 安全性需求分析

3.4.1 系统的安全性

3.4.2 数据的安全性

3.5 数据流程分析

第4章 系统设计

4.1 系统架构设计

4.2 系统总体设计

4.3 系统功能设计

4.4 数据库设计

4.4.1 数据需求分析

4.4.2 数据库概念设计

4.4.3 数据库表设计

第5章 系统实现

5.1 数据库访问层的实现

5.2 注册模块的实现

5.3 登录模块的实现

5.4 用户资料修改模块的实现

5.5 资讯数据管理模块的实现

5.6 预订酒店模块的实现

5.7 景点管理模块的实现

5.8 酒店管理模块的实现

第6章 系统测试

6.1 测试目的

6.2 功能测试

6.3 性能测试

第7章 总结与展望

参考文献

致谢

1. 绪论
   1. 研究背景与意义

1. 1. 开发现状

1. 1. 研究方法

1. 相关技术介绍
   1. 开发技术说明

本系统前端部分基于MVVM模式进行开发，采用B/S模式，后端部分基于Java的ssm框架进行开发。

前端部分：前端框架采用了比较流行的渐进式JavaScript框架Vue.js。使用Vue-Router和Vuex实现动态路由和全局状态管理,Ajax实现前后端通信，Element UI组件库使页面快速成型，项目前端通过栅格布局实现响应式，可适应PC端、平板端、手机端等不同屏幕大小尺寸的完美布局展示。

后端部分：采用ssm作为开发框架，同时集成MyBatis、Redis等相关技术。

1. 1. Java语言与JDK开发环境 

Java是美国sun公司所推出的一款程序设计语言，其能够在多个平台内应用，具有良好兼容性，进而其凭借自身优势在数据中心、个人PC与科技超级计算机等平台内广泛应用，具有目前最为庞大的开发者专业社群[3]。

JDK为美国sun公司为java开发员所推出的一款全新产品，要是没有JDK的情况下，所安装的java程序也就无法运行[4]。

1. 1. B/S体系工作原理

B/S架构采取浏览器请求，服务器响应的工作模式。

用户可以通过浏览器去访问Internet上由Web服务器产生的文本、数据、图片、动画、视频点播和声音等信息；

而每一个Web服务器又可以通过各种方式与数据库服务器连接，大量的数据实际存放在数据库服务器中；

从Web服务器上下载程序到本地来执行，在下载过程中若遇到与数据库有关的指令，由Web服务器交给数据库服务器来解释执行，并返回给Web服务器，Web服务器又返回给用户。在这种结构中，将许许多多的网连接到一块，形成一个巨大的网，即全球网。而各个企业可以在此结构的基础上建立自己的Internet。

在 B/S 模式中，用户是通过浏览器针对许多分布于网络上的服务器进行请求访问的，浏览器的请求通过服务器进行处理，并将处理结果以及相应的信息返回给浏览器，其他的数据加工、请求全部都是由Web Server完成的。通过该框架结构以及植入于操作系统内部的浏览器，该结构已经成为了当今软件应用的主流结构模式。

1. 1. MVVM模式介绍

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了，它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。微软的WPF带来了新的技术体验，如Silverlight、音频、视频、3D、动画……，这导致了软件UI层更加细节化、可定制化。同时，在技术层面，WPF也带来了 诸如Binding、Dependency Property、Routed Events、Command、DataTemplate、ControlTemplate等新特性。MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。

1. 1. Mysql数据库

Mysql 经过多次的更新，功能层面已经非常的丰富和完善了，从Mysql4版本到5版本进行了比较大的更新，在商业的实际使用中取得了很好的实际应用效果。最新版本的Mysql支持对信息的压缩，同时还能进行加密能更好的满足对信息安全性的需求。同时经过系统的多次更新，数据库自身的镜像功能也得到了很大的增强，运行的流畅度和易用性方面有了不小的进步，驱动的使用和创建也更加的高效快捷。最大的变动还是进行了空间信息的显示优化，能更加方便的在应用地图上进行坐标的标注和运算。强大的备份功能也保证了用户使用的过程会更加安心，同时支持的Office特性还支持用户的自行安装和使用。在信息的显示形式上也进行了不小的更新，增加了两个非常使用的显示区，一个是信息区，对表格和文字进行了分类处理，界面的显示更加清爽和具体。第二是仪表的信息控件，能在仪表信息区进行信息的显示，同时还能进行多个信息的比对，为用户的实际使用带来了很大的便捷[7][8]。

针对本文中设计的新闻管理系统在实际的实现过程中，最终选择Mysql数据库的主要原因在于在企业的应用系统应用及开发的过程中会存在大量的数据库比较频繁的操作，而且数据的安全性要求也是非常的高。综合这些因素，最终选择安全性系数比较高的Mysql来对新闻管理系统后台数据进行存储操作[9][10]。

1. 系统分析
   1. 可行性分析

1. 1. 功能需求分析

黄冈旅游景点服务网站的功能主要分为前台用户根据自己的需求进行注册登录，浏览酒店信息并对选中的酒店进行预定操作。管理员主要对注册用户，资讯数据，景点详细信息，酒店详细信息，酒店订单进行处理。

系统用例图如下所示。

图3-1 系统用例图

1. 1. 1. 前台用户功能

1. 1. 1. 后台管理员功能

1. 1. 非功能需求分析

1. 1. 安全性需求分析
      1. 系统的安全性

1. 1. 1. 数据的安全性

1. 1. 数据流程分析

对系统的数据流进行分析，系统的使用者分为二类，一般用户，管理员。系统主要对界面信息传送，登录信息的验证，注册信息的接收，用户各种操作的响应做处理。

系统顶层数据流图如下图所示。

图3-2 顶层数据流图

要判断用户是是什么身份，是根据登录的数据来判断后，跳转到对应的功能界面。在系统的内部用户就可以对数据进行操作，数据库中心就可以接收到系统传输的有效数据流来对数据sql语句进行对应操作。

系统底层数据流图如下图所示。

 图3-3 底层数据流图

系统可以分为前台和后台两部分，每一种操作后系统都返回操作结果。前台和后台的数据连接主要通过数据库，既分别对数据库做不同的操作。

1. 系统设计
   1. 系统架构设计

本黄冈旅游景点服务网站的架构设计主要分为可以3层，主要有Web层，业务层，Model层。其中web层还包括View层和Controller层，Model层包括元数据扩展层和数据访问层。

系统架构如下图所示。

图4-1 系统架构

1. 1. 系统总体设计

黄冈旅游景点服务网站总体分为前台用户模块和后台管理员模块。

两个模块表现上是分别独立存在，但是访问的数据库是一样的。每一个模块的功能都是根据先前完成的需求分析，并查阅相关资料后整理制作的。

综上所述，系统功能结构图如下图所示。

图4-2 系统功能结构图

1. 1. 系统功能设计

1. 1. 数据库设计
      1. 数据需求分析

1. 1. 1. 数据库概念设计

根据前面的数据流程图，结合系统的功能模块设计，设计出符合系统的各信息实体。

系统ER图如下图所示。

图4-3 系统ER图

1. 1. 1. 数据库表设计

1. 系统实现
   1. 数据库访问层的实现

1. 1. 注册模块的实现

用户在填写数据的时候必须与注册页面上的验证相匹配否则会注册失败，注册页面的表单验证是通过JavaScript进行验证的，用户名的长度必须在6到18之间，邮箱必须带有@符号，密码和密码确认必须相同，你输入的密码，系统会根据你输入密码的强度给出指定的值，电话号码和身份证号码必须要求输入格式与生活相符合，当你前台验证通过的时候你点击注册，表单会将你输入的值通过name值传递给后台并保存到数据库中。

用户注册流程图如下图所示。

图5-1用户注册流程图

用户注册界面如下图所示。

图5-2用户注册界面

用户注册的关键代码如下。

   /**

     * 注册

     * @return

     */

    @PostMapping("register")

    public Map<String, Object> signUp(HttpServletRequest request) throws IOException {

        // 查询用户

        Map<String, String> query = new HashMap<>();

        Map<String,Object> map = service.readBody(request.getReader());

        query.put("username",String.valueOf(map.get("username")));

        List list = service.selectBaseList(service.select(query, new HashMap<>()));

        if (list.size()>0){

            return error(30000, "用户已存在");

        }

        map.put("password",service.encryption(String.valueOf(map.get("password"))));

        service.insert(map);

        return success(1);

}

    public Map<String,Object> readBody(BufferedReader reader){

        BufferedReader br = null;

        StringBuilder sb = new StringBuilder("");

        try{

            br = reader;

            String str;

            while ((str = br.readLine()) != null){

                sb.append(str);

            }

            br.close();

            String json = sb.toString();

            return JSONObject.parseObject(json, Map.class);

        }catch (IOException e){

            e.printStackTrace();

        }finally{

            if (null != br){

                try{

                    br.close();

                }catch (IOException e){

                    e.printStackTrace();

                }

            }

        }

        return null;

    }

    public void insert(Map<String,Object> body){

        E entity = JSON.parseObject(JSON.toJSONString(body),eClass);

        baseMapper.insert(entity);

        log.info("[{}] - 插入操作：{}",entity);

}

1. 1. 登录模块的实现

主要由两部分组成，登录前的登录界面以及登录后的用户功能界面。登录界面，要求用户输入用户名和密码，当用户名和密码其中一个输入为空时，给出提示“用户名，密码不能为空”。获取用户名和密码后到数据库中查找，如果用户名存在，以及对应的密码正确，则登录成功，否则登录失败。登录失败后给出提示，并把焦点停在文本框中。登录成功后将该次会话的全局变量username设置为用户名。登录成功后进入会员的功能模块，主要有会员基本信息修改，已经发布景点信息管理，发布信息，和退出功能。退出功能是清除全局变量username的值，并跳回到首页。

登录流程图如下图所示。

图5-4登录流程图

用户登录界面如下图所示。

图5-5用户登录界面

用户登录的关键代码如下。

  /**

     * 登录

     * @param data

     * @param httpServletRequest

     * @return

     */

    @PostMapping("login")

    public Map<String, Object> login(@RequestBody Map<String, String> data, HttpServletRequest httpServletRequest) {

        log.info("[执行登录接口]");

        String username = data.get("username");

        String email = data.get("email");

        String phone = data.get("phone");

        String password = data.get("password");

        List resultList = null;

        QueryWrapper wrapper = new QueryWrapper<User>();

        Map<String, String> map = new HashMap<>();

        if(username != null && "".equals(username) == false){

            map.put("username", username);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }

        else if(email != null && "".equals(email) == false){

            map.put("email", email);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }

        else if(phone != null && "".equals(phone) == false){

            map.put("phone", phone);

            resultList = service.selectBaseList(service.select(map, new HashMap<>()));

        }else{

            return error(30000, "账号或密码不能为空");

        }

        if (resultList == null || password == null) {

            return error(30000, "账号或密码不能为空");

        }

        //判断是否有这个用户

        if (resultList.size()<=0){

            return error(30000,"用户不存在");

        }

        User byUsername = (User) resultList.get(0);

        Map<String, String> groupMap = new HashMap<>();

        groupMap.put("name",byUsername.getUserGroup());

        List groupList = userGroupService.selectBaseList(userGroupService.select(groupMap, new HashMap<>()));

        if (groupList.size()<1){

            return error(30000,"用户组不存在");

        }

        UserGroup userGroup = (UserGroup) groupList.get(0);

        //查询用户审核状态

        if (!StringUtils.isEmpty(userGroup.getSourceTable())){

            String res = service.selectExamineState(userGroup.getSourceTable(),byUsername.getUserId());

            if (res==null){

                return error(30000,"用户不存在");

            }

            if (!res.equals("已通过")){

                return error(30000,"该用户审核未通过");

            }

        }

        //查询用户状态

        if (byUsername.getState()!=1){

            return error(30000,"用户非可用状态，不能登录");

        }

        String md5password = service.encryption(password);

        if (byUsername.getPassword().equals(md5password)) {

            // 存储Token到数据库

            AccessToken accessToken = new AccessToken();

            accessToken.setToken(UUID.randomUUID().toString().replaceAll("-", ""));

            accessToken.setUser_id(byUsername.getUserId());

            tokenService.save(accessToken);

            // 返回用户信息

            JSONObject user = JSONObject.parseObject(JSONObject.toJSONString(byUsername));

            user.put("token", accessToken.getToken());

            JSONObject ret = new JSONObject();

            ret.put("obj",user);

            return success(ret);

        } else {

            return error(30000, "账号或密码不正确");

        }

}

    public String select(Map<String,String> query,Map<String,String> config){

        StringBuffer sql = new StringBuffer("select ");

        sql.append(config.get(FindConfig.FIELD) == null || "".equals(config.get(FindConfig.FIELD)) ? "*" : config.get(FindConfig.FIELD)).append(" ");

        sql.append("from ").append("`").append(table).append("`").append(toWhereSql(query, "0".equals(config.get(FindConfig.LIKE))));

        if (config.get(FindConfig.GROUP_BY) != null && !"".equals(config.get(FindConfig.GROUP_BY))){

            sql.append("group by ").append(config.get(FindConfig.GROUP_BY)).append(" ");

        }

        if (config.get(FindConfig.ORDER_BY) != null && !"".equals(config.get(FindConfig.ORDER_BY))){

            sql.append("order by ").append(config.get(FindConfig.ORDER_BY)).append(" ");

        }

        if (config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE))){

            int page = config.get(FindConfig.PAGE) != null && !"".equals(config.get(FindConfig.PAGE)) ? Integer.parseInt(config.get(FindConfig.PAGE)) : 1;

            int limit = config.get(FindConfig.SIZE) != null && !"".equals(config.get(FindConfig.SIZE)) ? Integer.parseInt(config.get(FindConfig.SIZE)) : 10;

            sql.append(" limit ").append( (page-1)*limit ).append(" , ").append(limit);

        }

        log.info("[{}] - 查询操作，sql: {}",table,sql);

        return sql.toString();

}

    public List selectBaseList(String select) {

        List<Map<String,Object>> mapList = baseMapper.selectBaseList(select);

        List<E> list = new ArrayList<>();

        for (Map<String,Object> map:mapList) {

            list.add(JSON.parseObject(JSON.toJSONString(map),eClass));

        }

        return list;

}

1. 1. 用户资料修改模块的实现

用户登录/注册成功之后可以修改自己的基本信息。修改页面的表单中每一个input的name值都要与实体类中的参数相匹配，在用户点击修改页面的时候，如果改后用户名与数据库里面重复了，页面会提示该用户名已经存在了，否则通过Id来查询用户，并将用户的信息修改为表单提交的数据。

1. 1. 资讯数据管理模块的实现

如果资讯数据的信息需要修改，管理员可以通过查询资讯数据的基本信息来查询资讯数据，查询资讯数据是通过ajax技术来进行查询的，需要传递资讯数据的标题、编号等参数然后在返回到该页面中,可以选中要修改或删除的那条信息，如果选中了超过一条数据，页面会挑一个窗口提醒只能选择一条数，如果没有选中数据会挑一个窗口题型必须选择一条数据。当选择确认修改的时候，后台会根据传过来的id到数据库查询，并将结果返回到修改页面中，可以在修改页面中修改刚刚选中的信息当点击确认的时候from表单会将修改的数据提交到后台并保存到数据库中，就是说如果提交的数据数据库中存在就修改，否则就保存。

资讯数据展示界面如下图所示。

图5-6资讯数据展示界面

资讯数据管理界面如下图所示。

图5-7资讯数据管理界面

资讯数据发布的关键代码如下。

     Map<String, Object> map = new HashMap<>();

        map.put("error", new HashMap<String, Object>(4) {{

            put("code", code);

            put("message", message);

        }});

        return map;

}

1. 1. 预订酒店模块的实现

预订酒店功能整体流程：用户浏览酒店信息时，同时会显示酒店的状态，系统会在其显示详细信息的页面时便会判断酒店的状态，若酒店状态为可预订，则会显示预订的链接按钮。在用户点击预订按钮时，会先通过拦截器判断用户是否登录，若未登录，会跳转至登录页面，提示用户先登录，若为登录用户就会跳转至填写预订信息的页面，填写好预订信息之后，点击提交按钮，预订成功之后返回提示信息，告知用户预订成功。

预订酒店流程图如下图所示。

图5-8预订酒店流程图

预订酒店界面如下图所示。

图5-8预订酒店界面

预订管理界面如下图所示。

图5-9预订管理界面

预订添加关键代码如下。

  @RequestMapping("/get_obj")

    public Map<String, Object> obj(HttpServletRequest request) {

        List resultList = service.selectBaseList(service.select(service.readQuery(request), service.readConfig(request)));

        if (resultList.size() > 0) {

            JSONObject jsonObject = new JSONObject();

            jsonObject.put("obj",resultList.get(0));

            return success(jsonObject);

        } else {

            return success(null);

        }

}

1. 1. 景点管理模块的实现

此页面的关键是编写景点信息，包括景点编号，名称，详情等。单击提交按钮以完成信息的添加。如果未写入完整的景点信息，例如，如果未写入景点编号，系统将给出相应的错误提示，并且无法成功输入。数据以概念的形式以onsubmit =“return checkForm（）”的形式写入以进行检查，checkForm（）函数是一种用于写入数据的不同类型的校对方法，是不是为空也是经过form表单中的οnsubmit=”return checkForm()来检查。

管理员点击左侧菜单“景点信息管理”，页面跳转到景点信息管理外观，调用后台景点查询所有景点信息。并将信息密封到数据集合List，绑定到请求对象，然后页面跳转到相应的jsp，显示出景点信息，单击删除按钮完成景点信息的删除。

景点管理流程图如下图所示。

图5-10景点管理流程图

景点添加界面如下图所示。

图5-11景点添加界面

景点管理界面如下图所示。

图5-12景点管理界面

景点发布的关键代码如下。

 @PostMapping("/add")

    @Transactional

    public Map<String, Object> add(HttpServletRequest request) throws IOException {

        service.insert(service.readBody(request.getReader()));

        return success(1);

    }

    @Transactional

    public Map<String, Object> addMap(Map<String,Object> map){

        service.insert(map);

        return success(1);

}

%>

1. 1. 酒店管理模块的实现

根据需求，需要对酒店进行添加、删除或修改详情信息。删除或修改酒店时，系统根据酒店的状态判定为可删除状态下，才会给出删除和修改链接，点击删除链接按钮时，请求到达后台，还会先查询酒店状态再次做出判定能否删除。点击修改链接按钮时，会跳转到修改信息的页面，重新填写好数据后，数据提交到后台会对数据库中相应的记录做出修改。

添加酒店时，会给出数据填写的页面，该页面根据填写好的酒店编号同样会事先发送Ajax请求查询编号是否已存在，数据填写好之后提交到后台，会调用相关服务在数据库中插入记录。

酒店管理流程图如下图所示。

图5-13酒店管理流程图

酒店添加页面设计效果如下图所示。

图5-14酒店添加界面

酒店管理页面效果如下图所示。

图5-15酒店管理界面

酒店发布的关键代码如下。

  @RequestMapping(value = "/del")

1. 系统测试
   1. 测试目的

1. 1. 功能测试

1. 1. 性能测试

1. 总结与展望

参考文献