Design and implementation of travel agency management system based on SpringBoot+MyBatis

       With the maturity of web applications, more and more developers like to use convenient and fast web application frameworks. In this way, perfect and robust software can be developed, and the requirements for programmers will be very high. If a mature and robust framework is adopted, some basic general tasks, such as transaction processing, security, data flow control, etc., can be handed over to the framework for processing, so the programmer only needs to concentrate on completing the business logic design of the system, which can reduce Difficulty in development. Therefore, when we develop a new system project, we do not need to consider whether to use a framework, but consider what framework to use. In this system, we use the SpringBoot framework.

       Springboot directly saves the process of configuration files. Springboot's code architecture is springMVC three-tier architecture, M (model) model, V (view) view, C (controller) controller, and the back-end code controller layer receives the data from the view view page. The data is processed by the service layer and then written SQL statements to the mapper layer to call the database and other operations. Springboot embeds several pre-developed templates such as thymeleaf, velocity, freemaker, etc. Springboot is usually built with maven because it is more convenient to download jars, and the packaging method of Springboot is very different from the previous web projects. The previous web project was packaged as a war package, and then placed in the tomcat server to run, but Springboot omitted this. Springboot has a built-in Tomcat, of course, you can remove it in the pom file if you don't need it. This allows developers to focus on how to solve actual business logic problems, and the reusable code is greatly increased, software production efficiency and quality have also been improved, and better adapted to the actual needs of users.

       In addition, we have adopted the MyBatis persistence layer framework. Compared with the previous persistence layer framework, it reduces a lot of repetitive code, and the SQL statement is written in the XML file, which reduces the coupling with the program code.

---

demand analysis

• Business requirements for travel agency management system

       As a management system for tourists from all over the country. First of all, we must ensure the robustness and stability of the system, but also ensure the security of the data, and back up the data as regularly as possible. Secondly, our system interface needs to be as friendly as possible to ensure that users can operate the system proficiently without any computer foundation with a little training. Finally, the administrator can manage the relevant information of the travel agency and realize the most basic operations.

• Function analysis of travel agency management system

       According to our previous business requirements. Our system should first manage user rights, so as to ensure that our front and back are separated, the backend only manages users and data, and the frontend can only view some information. In addition, as a travel agency management system. We need to manage and operate information related to travel agencies, such as attractions, features, travel routes, travel schedules, hotels, tour guides, tour groups and other information to add, delete, check, modify, and perform fuzzy queries. Special travel routes also need to be imported and exported. And other functions.

• System use case

Admin User Management Use Case Diagram

 Use case diagram of basic information management for administrator travel agency

The basic information management of travel agencies includes the management of attractions, attractions features, routes, hotels, tour guides, schedules, tour groups and tourist information.

     Travel customer use case diagram 

Database Design

• The influence of database design on the system

 A database design that does not meet requirements will definitely cause many problems. For example, unreasonable design of data tables may cause increase or decrease of fields, unreasonable design of primary and foreign keys, and improper data relationship mapping, which may cause the system to fail to operate normally. . Therefore, a well-designed database is essential to system development.

• Database demand analysis

According to my analysis of the system, under the premise of ensuring complete functions, the database can be divided into the following functional modules: scenic spot information management, characteristic scenic spot management, travel route management, tour guide information management, hotel information management, travel schedule management , Tourist information management, tourist group information management. Each of our functional modules has addition, deletion, modification and query. The travel route management module also adds the functions of export and import. Therefore, we can design corresponding data tables according to our functional modules: scenic spot information table, characteristic scenic spot table, travel itinerary table, tour guide information, hotel information table, travel schedule table, tourist information table and tour group information table, according to the design From the data table and our function analysis, we can get the attributes we need for each data table as follows:

Attraction information table: attraction name, star rating, introduction of attraction, pictures of attraction, surrounding services, local weather.

Featured scenic spots table: feature name, feature scenic spot mark, feature scenic spot introduction.

Travel route table: route name, starting point, ending point, route introduction.

Tour guide information form: tour guide name, gender, age, ID number, address, contact number, tour guide level, recent performance.

Hotel information table: hotel name, city, detailed address, hotel star rating, today's price, appearance picture, room picture, person in charge, position of the person in charge, phone number of the person in charge.

Travel schedule: schedule name, departure time, return time.

Tourist information form: tourist name, gender, age, ID number, address, contact number.

Tour group information table: tour group name and introduction.

• Database ER diagram

ER diagrams are often used in database design to depict the structure of the database. The ER diagram allows us to intuitively know the relationship between database entities and entities, as well as which attribute combinations each entity is characterized by, which is very important for us to design a database.

The following picture is the ER diagram of the system

•  Data dictionary introduction

It is necessary to intuitively let us know which attributes each entity has, and the value of these attributes can be changed, at this time we can consider using data fields. The data dictionary designed by this system is shown in the following table:

---

system design:

• System module diagram

According to the previous need analysis and the design of the data, our travel agency management system can be divided into two major modules: user information management and tour group basic information management modules. Each module can be divided into each individual small module, the overall system module diagram is as follows

 

 

• System flow chart

1) Operation flow chart of system administrator

System administrator operation process. First, the administrator logs in to see if the login is successful. After the login is successful, the basic information of the travel agency can be operated.

2) Operation flow chart for travel customers

• System project construction process

Environment used in this project:

Development tools: Intellij IDEA 2017.3.6

JDK: 1.8.0_05

(1) The first step is to create a SpringBoot project

(2) The  second step, create the file structure of the project and the version of jdk

 

(3) The third step, select the dependencies that need to be added in the project

(4) Click Next and then click Finish , the project directory diagram 

 

At this point, the project based on SpringBoot and MyBatis framework has been built.

---

System implementation

• Realization of Backstage Function of Travel Agency Management System

(1) Realization of login and registration module function

The login and registration function, as an indispensable functional module of any management system, is enough to show its importance. The process implemented in our system is: first, the user fills in the corresponding information, clicks the login button, will initiate an Ajax request to the backend, and send the data to the backend for verification. After the request is successful, it will return the status to the frontend to see if the login or registration is successful.

 JS code to realize the login operation function

$("#submit").click(function(){
   if(checkLogin()){
   $.ajax({
      type:"POST",
        url:_ctx+"/login",
        data:{username:$("input[name='username']").val(), password:$("input[name='password']").val(),time:new Date().getTime()},
        dataType:"json",
        cache:false,
        success: function(data){
            if("success" == data.status){
                if(data.data[0].roleName == "普通用户"){
                       window.location.href=_ctx+"/home";
                       return;
                   }else{
                       window.location.href=_ctx+"/index";
                       return;
                   }
            }else{
               $("#error-msg").html(data.msg);
            }
        }
   })
}

 When logging in, the code of the control layer

@RequestMapping(value={"/login"},method=RequestMethod.POST)
@ResponseBody
public Object login(){
   return userService.login(this.getParameterMap(), this.getSession());
}

The registration function is similar to the above code, so I won’t repeat it here.

(2) Realization of the home page of the system background

The home page of the travel agency management system administrator terminal includes a commonly used icon page, system menu list, and drop-down effects for personal information operations.

Implementation code: After successful login, the administrator will visit the index path, and finally pass the user's menu to the foreground page for processing. The code is as follows.

@RequestMapping("/index")
public String index(Model model){
   try {
      List<Menu> allMenu = (List<Menu>) this.getSession().getAttribute(Const.SESSION_ALL_MENU);
      if(allMenu != null){
         model.addAttribute("menus", allMenu);
      }
      model.addAttribute("adminName", adminName);
      model.addAttribute("userName", ((User)this.getSession().getAttribute(Const.SESSION_USER)).getNickName());
      model.addAttribute("userPath", ((User)this.getSession().getAttribute(Const.SESSION_USER)).getPicPath());
      model.addAttribute("userStatus", "在线");
   } catch (Exception e) {
      e.printStackTrace();
   }
   return "index";
}

(3) Realization of scenic spots management function module 

This function module includes the addition, modification, deletion, list view of scenic spot information, fuzzy query based on scenic spot name, and paging operation.

The interface for querying all the information of scenic spots is shown in the figure

 The core code is as follows:

@RequestMapping("/list")
@ResponseBody
public Msg getScenicSpotFeatureJson(@RequestParam(value = "pn", defaultValue = "1") Integer pn) {
    PageHelper.startPage(pn, 5);
    List<ScenicSpot> features = scenicSpotService.getAllByQuery();
    PageInfo page = new PageInfo(features, 5);
    return Msg.success().add("pageInfo", page);
}

 Add scenic spot information operation interface as shown in the figure

The front-end processing code for uploading pictures is mainly to get the Base64 code of the picture, and then pass it to the back-end for processing. The core code is as follows: 

function chooseImg(imgId, imgBaseShowTag, showImgTag) {
    var input = document.getElementById(imgId);
    if (typeof (FileReader) === 'undefined') {
        result.innerHTML = "操作失败，请换个浏览器重试";
        input.setAttribute('disabled', 'disabled');
    } else {
        input.addEventListener('change', readFile, false);
    }
    function readFile() {
        var file = this.files[0];
        //判断是否是图片类型
        if (!/image\/\w+/.test(file.type)) {
            alert("只能选择图片");
            return false;
        }
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {
            base64Code = this.result;
            $(imgBaseShowTag).val(this.result);
            $(showImgTag).attr("src", this.result);
        }
    }
}

Modify the scenic spot information operation interface as shown in the figure 

To modify the core code of scenic spot information, we should first obtain the data we need to modify according to the primary key id, and then send the modified data to the background through Ajax for processing: 

@RequestMapping(value = "/{id}", method = RequestMethod.GET)
@ResponseBody
public Msg getSpot(@PathVariable("id") Long id) {

    ScenicSpot scenicSpot = scenicSpotService.getSpot(id);
    return Msg.success().add("spot", scenicSpot);
}

@RequestMapping(value = "/update", method = RequestMethod.POST)
@ResponseBody
public Msg updateSs() {
    scenicSpotService.update(this.getParameterMap());
    return Msg.success();
}

 The operation interface for deleting scenic spot information is as shown in the figure

To delete, you must pay attention to the type to be delete when initiating Ajax, to delete the record in a page, you must transfer to this page, we can see whether the data is deleted successfully, the code is as follows:

$(document).on("click", ".delete_btn", function () {
    var scenicSpotName = $(this).parents("tr").find("td:eq(3)").text();
    var scenicSpotId = $(this).attr("del-id");
    if (confirm("确认删除[" + scenicSpotName + "]吗?")) {
        $.ajax({
            url: "/scenic/spot/delete/" + scenicSpotId,
            type: "DELETE",
            success: function (result) {
                alert(result.msg);
                to_page(currentPage);
            }
        });
    }
});

 (4) Realization of travel route information management function module

Line management is one of the functional modules of this system, which includes line list viewing, adding, deleting, modifying, importing, exporting and fuzzy query based on line name. In addition, we have performed a paging operation on the line information view, and each page only displays 5 records. Corresponding judgments are also made on the buttons corresponding to the previous page, the next page, the first page, and the last page. If there is no corresponding page number, the corresponding button will be disabled. Moreover, I also made a route to view the corresponding scenic spot information on the route and which schedules the route has.

The interface for querying all line information is shown in the figure:

Query all line information to realize the core code: After we initiate a request through Ajax, the background will obtain the data and encapsulate it into Json data (the result of this function), while at the front end, we only need to parse the Json data and display it on the page. :

function build_lines_table(result) {
    debugger;
    //清空table表格
    $("#lines_table tbody").empty();
    var lines = result.extend.pageInfo.list;
    $.each(lines, function (index, item) {
        var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
        var lineId = $("<td></td>").append(item.lineId);
        var lineName = $("<td></td>").append(item.lineName);
        var lineStar = $("<td></td>").append(item.lineStar);
        var lineEnd = $("<td></td>").append(item.lineEnd);
        var lineSpendDay = $("<td></td>").append(item.lineSpendDay);
        var lineViewIntroduce = $("<td></td>").addClass("autocut").append(item.lineViewIntroduce);
        var showShiftTd = $("<td></td>").append(showShiftBtn);
        var btnTd = $("<td></td>").append(editBtn).append(" ").append(
            delBtn);
        //append方法执行完成以后还是返回原来的元素
$("<tr></tr>").append(checkBoxTd).append(lineId).append(lineName).append(
            lineStar).append(lineEnd).append(lineSpendDay).append(
lineViewIntroduce).append(showSpotTd).append(showShiftTd).append(btnTd).appendTo("#lines_table tbody");
    });
}

The export line information operation interface is as shown in the figure

 Implementation of the core code for exporting information: First of all, we use the exportExcel method of a third-party library:

public static void exportExcel(List<?> list, String title, String sheetName, Class<?> pojoClass,String fileName, HttpServletResponse response){
    defaultExport(list, pojoClass, fileName, response, new ExportParams(title, sheetName));
}

@RequestMapping("export")
public void export(HttpServletResponse response){
    List<TouristLine> features = touristLineService.getAll();
    //导出操作
    FileUtil.exportExcel(features,"线路信息","线路",TouristLine.class,"线路信息.xls",response);
}

 The screenshot of the imported line information is shown in the figure

 

Code implementation: First, we adopted the importExcel method of a third-party library:

public static <T> List<T> importExcel(String filePath,Integer titleRows,Integer headerRows, Class<T> pojoClass){
    if (StringUtils.isBlank(filePath)){
        return null;
    }
    ImportParams params = new ImportParams();
    params.setTitleRows(titleRows);
    params.setHeadRows(headerRows);
    List<T> list = null;
    try {
        list = ExcelImportUtil.importExcel(new File(filePath), pojoClass, params);
    }catch (NoSuchElementException e){
        e.getMessage();
    } catch (Exception e) {
        e.printStackTrace();
        e.getMessage();
    }
    return list;
}

 

@RequestMapping("import")
@ResponseBody
public Msg importExcel(){
    String filePath = "D:\\线路信息.xls";
    //解析excel，
    List<TouristLine> touristLines = FileUtil.importExcel(filePath,1,1,TouristLine.class);
    System.out.println("导入数据一共【"+touristLines.size()+"】行");
    for(TouristLine line:touristLines){
        touristLineService.add(line);
    }
    return Msg.success();
}

•  Realization of Front Desk Function of Travel Agency Management System

In order to test the normal operation of the travel agency management system and whether there is any problem with the database design, I wrote the front-end page of the travel website. The top of the homepage is the function menu button for travel customers, including group tour, scenic spot viewing, welcome message and logout. The client homepage is shown in the figure:

The core code of the front page of the website: When the tourist user logs in successfully, he will visit the home path, and then the background will return to us the information such as the successful login and user name: 

@RequestMapping(value={"/home"},method= RequestMethod.GET)
public String toGroupPage(Model model){
   model.addAttribute("userName", ((User)this.getSession().getAttribute(Const.SESSION_USER)).getNickName());
   model.addAttribute("userId", ((User)this.getSession().getAttribute(Const.SESSION_USER)).getUserId());
   return "page/visitorPage/showTouristGroup";
}

 The HTML code of the function menu button and welcome message and logout button at the top of the homepage:

<ul>
    <li class="active"><a th:href="@{/home}">首页</a></li>
    <li style="margin-left: 40px"><a th:href="@{/home}">跟团游</a></li>
    <li style="margin-left: 40px"><a th:href="@{/spot}">风景区</a></li>
    <li style="margin-left: 40px"><a href="#">关于</a></li>
    <li style="margin-left: 40px"><a href="#">联系我们</a></li>
</ul>
<ul>
    <li><a href="#">欢迎您：<span class="hidden-xs" th:text="${userName}">管理员</span></a></li>
    <li>|</li>
    <li><a th:href="@{/logout}">退出登录</a></li>
</ul>

The homepage of the website also contains the basic information of all the tour groups. When you click to view the details, you can go to the detailed information of the tour group, including the hotel arrangement where the tour group stays, the flight information, tour guide information, and tourist attraction arrangements. , The front-end tour group information interface is shown in the figure: 

When you click the I want to join the tour button, a box for adding tourist information will pop up. Fill in the relevant information before you can join the tour group. The information filling interface for the tour group is shown in the figure:

 Core code of participating tour group: This code is mainly used to judge the status of the tour group. Only when the status is ready to depart, can it participate in the report, otherwise it is unsuccessful and the reason is given:

$("#join_group").click(function () {
    var status = document.getElementById("touristGroupsStatus");
    debugger;
    if(status.innerHTML == "待出发"){
        reloadModelData("信息填写", "确认", "/visitor/info/save", "", "18", "", "","");
        $("#visitorModal").modal("show");
    }else{
        alert("该旅行团处于已出发或取消状态！");
    }
});

---

So far, we have basically completed all the functions of our travel agency management system in accordance with our pre-function budget and database demand analysis, according to the logic of the database and the business logic of our system.

 

Welcome to scan the QR code below to follow my WeChat official account and learn and communicate together.