Webアプリケーションの成熟に伴い、便利で高速なWebアプリケーションフレームワークを使用する開発者が増えています。このようにして、完璧で堅牢なソフトウェアを開発することができ、プログラマーの要件は非常に高くなります。成熟した堅牢なフレームワークが採用されている場合、トランザクション処理、セキュリティ、データフロー制御などのいくつかの基本的な一般的なタスクをフレームワークに渡して処理できるため、プログラマーはビジネスロジックの完成に集中するだけで済みます。開発の難しさを減らすことができるシステムの設計。したがって、新しいシステムプロジェクトを開発するときは、フレームワークを使用するかどうかを検討する必要はありませんが、使用するフレームワークを検討する必要があります。このシステムでは、SpringBootフレームワークを使用します。

Springbootは、構成ファイルのプロセスを直接保存します。Springbootのコードアーキテクチャは、springMVC 3層アーキテクチャ、M（モデル）モデル、V（ビュー）ビュー、C（コントローラー）コントローラーであり、バックエンドコードコントローラーレイヤーは、ビュービューページ。データはサービス層によって処理され、SQLステートメントがマッパー層に書き込まれてデータベースやその他の操作が呼び出されます。Springbootには、thymeleaf、velocity、freemakerなどのいくつかの事前開発されたテンプレートが組み込まれています。Springbootは、jarのダウンロードがより便利であり、Springbootのパッケージ化方法が以前のWebプロジェクトとは大きく異なるため、通常はMavenで構築されます。以前のWebプロジェクトはwarパッケージとしてパッケージ化され、Tomcatサーバーに配置されて実行されましたが、Springbootはこれを省略しました。SpringbootにはTomcatが組み込まれていますが、必要がなければpomファイルから削除できます。これにより、開発者は実際のビジネスロジックの問題を解決する方法に集中でき、再利用可能なコードが大幅に向上し、ソフトウェアの生産効率と品質も向上し、ユーザーの実際のニーズによりよく適合します。

さらに、MyBatis永続層フレームワークを採用しています。以前の永続層フレームワークと比較して、反復コードの多くが削減され、SQLステートメントがXMLファイルに書き込まれるため、プログラムコードとの結合が削減されます。

需要分析

旅行代理店管理システムのビジネス要件

全国からの観光客の管理システムとして。まず、システムの堅牢性と安定性を確保するだけでなく、データのセキュリティも確保し、可能な限り定期的にデータをバックアップする必要があります。第二に、私たちのシステムインターフェースは、ユーザーが少しのトレーニングでコンピューターの基礎がなくてもシステムを上手に操作できるように、できるだけフレンドリーである必要があります。最後に、管理者は旅行代理店の関連情報を管理し、最も基本的な操作を実現できます。

旅行代理店管理システムの機能分析

以前のビジネス要件によると。システムは最初にユーザー権限を管理して、フロントとバックが分離され、バックエンドがユーザーとデータのみを管理し、フロントエンドが一部の情報のみを表示できるようにする必要があります。また、旅行代理店の管理システムとして。アトラクション、機能、旅行ルート、旅行スケジュール、ホテル、ツアーガイド、ツアーグループなど、旅行代理店に関連する情報を管理および運用して、ファジークエリを追加、削除、確認、変更、および実行する必要があります。特別な旅行ルートもインポートおよびエクスポートする必要があります。その他の機能。

システムのユースケース

管理者ユーザー管理のユースケース図

管理者旅行代理店の基本的な情報管理のユースケース図

旅行代理店の基本的な情報管理には、アトラクション、アトラクション機能、ルート、ホテル、ツアーガイド、スケジュール、ツアーグループ、および観光情報の管理が含まれます。

旅行の顧客のユースケース図

データベース設計

システムに対するデータベース設計の影響

要件を満たさないデータベース設計は、間違いなく多くの問題を引き起こします。たとえば、データテーブルの不合理な設計は、フィールドの増減、主キーと外部キーの不合理な設計、および不適切なデータ関係マッピングを引き起こし、システムが正常に動作しない。したがって、適切に設計されたデータベースはシステム開発に不可欠です。

データベース需要分析

私のシステム分析によると、完全な機能を確保することを前提に、データベースは、景勝地情報管理、特徴的な景勝地管理、旅行ルート管理、ツアーガイド情報管理、ホテル情報管理、旅行スケジュール管理、観光情報管理、観光グループ情報管理。各機能モジュールには、追加、削除、変更、およびクエリがあります。旅行ルート管理モジュールは、エクスポートとインポートの機能も追加します。したがって、機能モジュールに従って、対応するデータテーブルを設計できます：景勝地情報テーブル、特徴的な景勝地テーブル、旅行日程表、ツアーガイド情報、ホテル情報テーブル、旅行スケジュールテーブル、観光情報テーブル、ツアーグループ情報テーブル。設計へデータテーブルと関数分析から、次のように各データテーブルに必要な属性を取得できます。

アトラクション情報表：アトラクション名、星評価、アトラクションの紹介、アトラクションの写真、周辺サービス、地元の天気。

注目の景勝地表：フィーチャー名、フィーチャー景勝地マーク、フィーチャー景勝地紹介。

旅行ルートテーブル：ルート名、始点、終点、ルート紹介。

ツアーガイド情報フォーム：ツアーガイド名、性別、年齢、ID番号、住所、連絡先番号、ツアーガイドレベル、最近のパフォーマンス。

ホテル情報表：ホテル名、都市、詳細住所、ホテルの星評価、本日の料金、外観写真、部屋の写真、担当者、担当者の位置、担当者の電話番号。

旅行スケジュール：スケジュール名、出発時間、帰り時間。

観光情報フォーム：観光客の名前、性別、年齢、ID番号、住所、連絡先番号。

ツアーグループ情報表：ツアーグループ名と紹介。

データベースER図

ERダイアグラムは、データベースの構造を表すためにデータベース設計でよく使用されます。ERダイアグラムを使用すると、データベースエンティティとエンティティの関係、および各エンティティの特徴である属性の組み合わせを直感的に知ることができます。これは、データベースを設計する上で非常に重要です。

次の図は、システムのER図です。

データディクショナリの紹介

各エンティティがどの属性を持っているかを直感的に知る必要があり、これらの属性の値は変更できます。現時点では、データフィールドの使用を検討できます。このシステムによって設計されたデータディクショナリを次の表に示します。

システム設計：

システムモジュール図

以前のニーズ分析とデータの設計によると、私たちの旅行代理店管理システムは、ユーザー情報管理とツアーグループの基本情報管理モジュールの2つの主要なモジュールに分けることができます。各モジュールは、個々の小さなモジュールに分割できます。システム全体のモジュール図は次のとおりです。

システムフローチャート

1）システム管理者の運用フローチャート

システム管理者の操作プロセスまず、管理者がログインしてログインに成功したかどうかを確認します。ログインに成功すると、旅行代理店の基本情報を操作できます。

2）旅行客向けの運用フローチャート

システムプロジェクトの構築プロセス

このプロジェクトで使用される環境：

開発ツール：Intellij IDEA 2017.3.6

JDK：1.8.0_05

（1）最初のステップは、SpringBootプロジェクトを作成することです

（2） 2番目のステップでは、プロジェクトのファイル構造とjdkのバージョンを作成します

（3）3番目のステップでは、プロジェクトに追加する必要のある依存関係を選択します

（4）[次へ]をクリックし、プロジェクトディレクトリ図である[完了]をクリックします。

この時点で、SpringBootおよびMyBatisフレームワークに基づくプロジェクトが構築されています。

システムの実装

旅行代理店マネジメントシステムの舞台裏機能の実現

（1）ログインおよび登録モジュール機能の実現

ログインと登録機能は、あらゆる管理システムに不可欠な機能モジュールとして、その重要性を示すのに十分です。私たちのシステムに実装されているプロセスは次のとおりです。まず、ユーザーは対応する情報を入力し、ログインボタンをクリックして、バックエンドにAjaxリクエストを開始し、検証のためにデータをバックエンドに送信します。リクエストが成功すると、ステータスをフロントエンドに戻し、ログインまたは登録が成功したかどうかを確認します。

ログイン操作機能を実現するJSコード

$("#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);
            }
        }
   })
}

ログイン時、コントロールレイヤーのコード

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

登録機能は上記のコードと似ているので、ここでは繰り返しません。

（2）システム背景のホームページの実現

旅行代理店管理システム管理者端末のホームページには、よく使うアイコンページ、システムメニュー一覧、個人情報操作用のドロップダウン効果があります。

実装コード：ログインに成功すると、管理者はインデックスパスにアクセスし、最後にユーザーのメニューをフォアグラウンドページに渡して処理します。コードは次のとおりです。

@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）景勝地管理機能モジュールの実現

この汎用モジュールには、追加、変更、削除、景勝地情報の一覧表示、景勝地名に基づくファジークエリ、およびページング操作が含まれています。

景勝地のすべての情報を照会するためのインターフェースを図に示します。

コアコードは次のとおりです。

@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);
}

図のように景勝地情報運用インターフェースを追加

画像をアップロードするためのフロントエンド処理コードは、主に画像のBase64コードを取得し、それをバックエンドに渡して処理することです。コアコードは次のとおりです。

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);
        }
    }
}

図のように景勝地情報運用インターフェースを変更する

景勝地情報のコアコードを変更するには、最初に主キーIDに従って変更する必要のあるデータを取得し、次に変更したデータをAjaxを介してバックグラウンドに送信して処理する必要があります。

@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();
}

景勝地情報を削除するための操作インターフェースは図のようになります。

削除するには、Ajaxを開始するときに削除するタイプに注意する必要があります。ページ内のレコードを削除するには、このページに転送する必要があります。データが正常に削除されたかどうかを確認できます。コードは次のとおりです。

$(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）走行経路情報管理機能モジュールの実現

ライン管理は、このシステムの機能モジュールの1つであり、ラインリストの表示、追加、削除、変更、インポート、エクスポート、およびライン名に基づくファジークエリが含まれます。さらに、回線情報ビューでページング操作を実行しました。各ページには5つのレコードしか表示されません。前のページ、次のページ、最初のページ、最後のページに対応するボタンについても、対応する判断が行われます。対応するページ番号がない場合、対応するボタンは無効になります。さらに、ルート上の対応する景勝地情報とルートのスケジュールを表示するルートも作成しました。

すべての回線情報を照会するためのインターフェースを図に示します。

すべての行情報をクエリしてコアコードを実現します。Ajaxを介してリクエストを開始すると、バックグラウンドがデータを取得してJsonデータ（この関数の結果）にカプセル化しますが、フロントエンドでは、 Jsonデータをページに表示します。：

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");
    });
}

輸出ライン情報運用インターフェースは図のようになります。

情報をエクスポートするためのコアコードの実装：まず、サードパーティライブラリのexportExcelメソッドを使用します。

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);
}

インポートされた回線情報のスクリーンショットを図に示します。

コードの実装：最初に、サードパーティライブラリのimportExcelメソッドを採用しました。

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();
}

旅行代理店マネジメントシステムのフロント機能の実現

旅行代理店管理システムの正常な動作とデータベース設計に問題がないかどうかをテストするために、旅行ウェブサイトのフロントエンドページを作成しました。ホームページの上部には、グループツアー、景勝地の閲覧、ウェルカムメッセージ、ログアウトなど、旅行のお客様向けの機能メニューボタンがあります。クライアントのホームページを次の図に示します。

Webサイトのフロントページのコアコード：観光ユーザーが正常にログインすると、ホームパスにアクセスし、バックグラウンドで正常なログインやユーザー名などの情報が返されます。

@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";
}

ホームページの上部にある機能メニューボタンとウェルカムメッセージおよびログアウトボタンのHTMLコード：

<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>

ウェブサイトのホームページには、すべてのツアーグループの基本情報も含まれています。クリックして詳細を表示すると、ツアーグループが滞在するホテルの手配、フライト情報、フライト情報など、ツアーグループの詳細情報に移動できます。ツアーガイド情報、および観光名所の手配。、フロントエンドツアーグループ情報インターフェイスを図に示します。

[ツアーに参加したい]ボタンをクリックすると、観光情報を追加するボックスがポップアップ表示されます。ツアーグループに参加する前に、関連情報を入力してください。ツアーグループの情報入力インターフェイスを図に示します。

参加ツアーグループのコアコード：このコードは主にツアーグループのステータスを判断するために使用されます。ステータスが出発する準備ができている場合にのみ、レポートに参加できます。それ以外の場合は失敗し、理由が示されます。

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

これまでのところ、データベースのロジックとシステムのビジネスロジックに従って、機能前の予算とデータベースの需要分析に従って、旅行代理店管理システムのすべての機能を基本的に完了しています。

以下のQRコードをスキャンして、WeChatの公式アカウントをフォローし、一緒に学び、コミュニケーションを図ってください。

SpringBoot + MyBatisに基づく旅行代理店管理システムの設計と実装

需要分析

旅行代理店管理システムのビジネス要件

旅行代理店管理システムの機能分析

システムのユースケース

データベース設計

システムに対するデータベース設計の影響

データベース需要分析

データベースER図

データディクショナリの紹介

システム設計：

システムモジュール図

システムフローチャート

システムプロジェクトの構築プロセス

システムの実装

旅行代理店マネジメントシステムの舞台裏機能の実現

旅行代理店マネジメントシステムのフロント機能の実現

おすすめ