フロントエンドコードとバックエンドコードを使用した、WeChat アプレットに基づく Java ベースの自習室システムの設計と実装

ブロガーの紹介: ✌プログラマーの Xu 兄弟。大規模な工場でプログラマーとして 7 年の経験があります。ネットワーク全体に 30 人以上のファン、CSDN ブログの専門家、Nuggets/Huawei Cloud/Ali Cloud/InfoQ およびその他のプラットフォームに関する質の高い著者であり、Java テクノロジー分野と卒業プロジェクトの実践に重点を置いています✌

1 はじめに

WeChatアプレットをベースにしたJava自習室予約システム

本論文で開発したWeChatアプレットに基づく新郷大学の自習室予約システムは、大学の具体的な現実を組み合わせ、プログラミング基盤とデータベースを使用して教務の情報管理を実現する。キャンパスの既存リソースを最大限に活用し、現在の後方管理ステータスを情報管理モードにアップグレードし、自習室の管理負荷を軽減し、教育業務の標準化に役立ちます。WeChatミニプログラムに基づいた新郷大学の自習室予約システムは、教師が自習室の情報を効果的に管理するのに役立ち、学生はシステムを通じて自習室の利用状況や変化を把握することができます。自習室までの移動時間を削減し、状況確認や各種お知らせ、教示情報をシステムで閲覧できます。コミュニケーション モジュールでは、オンラインで他の生徒や教師とコミュニケーションをとることもできます。キャンパスライフにおける課題と解決策を導き出し、授業時間の有効活用と学習効率の向上を実現します。

2 テクノロジースタック

説明する テクノロジースタック 述べる
バックステージ ジャワ
フロントエンド アプレット
データベース MYSql
建築 B/S構造

3 需要分析

3.1 ユーザーニーズ分析

新郷大学の WeChat アプレットをベースとした自習室予約システムのユーザーは、システムの最も基本的なユーザーであり、ニーズに応じて、システムには学生と管理者の 2 種類のユーザーが含まれています。システム上のこれら 2 種類のユーザーの要件は簡単に次のとおりです。

3.1.1 学生ユーザー

学生ユーザーがフロント情報の閲覧を認識している限り、ホームページを開き、Webサイトの紹介、自習室情報、オンラインメッセージ、カルーセルマップ情報のお知らせ等を閲覧し、該当する機能ページのメニューにジャンプします。ホームページのメニューをクリックすると、ホームページ、自習室情報、登録とログイン、パーソナルセンター、バックグラウンドログインが表示されます。

学生ユーザーはアカウント番号でログインし、ログイン後のすべての操作権限を持ちます。ログインしないとオンライン予約ができません。学生ユーザーがシステムからログアウトすると、個人のログイン情報もログアウトされます。

3.1.3 管理者ユーザー

管理者は、バックグラウンドでログイン ページからログインするための管理者権限を選択します。管理者の権限には、カルーセル発表管理、教師と生徒の情報管理、情報監査管理が含まれます。管理者が管理した後、[終了] をクリックしてログインをログアウトします。情報。

管理者ユーザーは、オンラインコミュニケーションの管理、自習室情報管理、自習室予約管理を行います。

オンラインコミュニケーションは、フロント利用者のメッセージ内容の管理、メッセージの削除、メッセージの確認を行います。自習室タイプ管理、特定の自習室タイプ情報を追加します。大学の自習室管理、ユーザーは大学の自習室の名前、最大収容人数、大学の自習室の場所、大学の自習状況などの大学の自習室情報を追加します。部屋と、該当する大学の自習室の写真を案内しています。操作後はシステムを終了してください。

4 データベース設計

4.4.1 ER図の設計

WeChat アプレットをベースにした新郷大学の自習室予約システムは実体が明確であるため、ここではシステム全体の ER 図のみを描画し、その他については E-R 図の描画を省略しています。

(1) 管理者情報エンティティの ER 図:

画像

図 4.3 管理者 ER の図

(2) アナウンス情報実体ER図

画像

図 4.4 アナウンス情報エンティティ ER 図

(3) 型情報実体 ER 図

画像

図4.5 自習室タイプ情報のER図

(4) 学生情報エンティティ ER 図

画像

図 4.6 学生情報エンティティの ER 図

(5) 大学自習室情報のER図

画像

図 4.7 大学の自習室の情報エンティティの ER 図

(6) メッセージ交換情報ER図

画像

図 4.8 メッセージ交換情報エンティティ ER 図

4.4.2 データベーステーブルの設計

WeChat アプレットに基づく新郷大学の自習室予約システムには複数のデータベース テーブルが含まれています。以下はデータ テーブルの詳細な紹介です。各データベース テーブルには、名前、タイプが段階的であるかどうか、空であるかどうかが含まれています分野。

フォーム:自習室情報フォーム

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_追加時間 タイムスタンプ(8) いいえ いいえ 作成時間
No3 C_ビアンハオ nvarchar(400) いいえ ヌル シリアルナンバー
No.4 C_ジファンハオ nvarchar(400) いいえ ヌル 自習室タイプ
No.5 C_tupian nvarchar(400) いいえ ヌル 写真
No.6 C_リキ nvarchar(400) いいえ ヌル 日付
No7 C_シドゥアン nvarchar(400) いいえ ヌル 期間
No8 C_kongxianzuowei テキスト(16) いいえ ヌル 建物
No9 C_xiangqing テキスト(16) いいえ ヌル 詳細
No10 C_zhuangtai nvarchar(400) いいえ ヌル

表: 構成情報テーブル

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_name nvarchar(200) いいえ いいえ 設定パラメータ名
No3 C_値 nvarchar(200) いいえ ヌル 構成パラメータの値

フォーム: quxiaoyuyue 情報フォーム

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_追加時間 タイムスタンプ(8) いいえ いいえ 作成時間
No3 C_ビアンハオ nvarchar(400) いいえ ヌル シリアルナンバー
No.4 C_ジファンハオ nvarchar(400) いいえ ヌル 自習室タイプ
No.5 C_リキ nvarchar(400) いいえ ヌル 日付
No.6 C_シドゥアン nvarchar(400) いいえ ヌル 期間
No7 C_ズオウェイハオ nvarchar(400) いいえ ヌル 座席番号
No8 C_quxiaoliyou テキスト(16) いいえ ヌル キャンセル理由
No9 C_xuehao nvarchar(400) いいえ ヌル 学生証
No10 C_xingming nvarchar(400) いいえ ヌル 名前
No11 C_深峰正 nvarchar(400) いいえ ヌル IDカード
No12 C_sfsh nvarchar(400) いいえ ヌル 見直すかどうか
No13 C_shhf テキスト(16) いいえ ヌル レビュー返信

表: ユーザー情報テーブル

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_ユーザー名 nvarchar(200) いいえ いいえ ユーザー名
No3 C_パスワード nvarchar(200) いいえ いいえ パスワード
No.4 C_役割 nvarchar(200) いいえ ヌル 役割
No.5 C_追加時間 タイムスタンプ(8) いいえ いいえ 時間を追加する

フォーム: shenqingyuyue 情報フォーム

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_追加時間 タイムスタンプ(8) いいえ いいえ 作成時間
No3 C_ビアンハオ nvarchar(400) いいえ ヌル シリアルナンバー
No.4 C_ジファンハオ nvarchar(400) いいえ ヌル 自習室タイプ
No.5 C_リキ 日時(8) いいえ ヌル 日付
No.6 C_シドゥアン nvarchar(400) いいえ ヌル 期間
No7 C_ズオウェイハオ nvarchar(400) いいえ ヌル 座席番号
No8 C_シェンチンネイロン nvarchar(400) いいえ ヌル 申請内容
No9 C_xuehao nvarchar(400) いいえ ヌル 学生証
No10 C_xingming nvarchar(400) いいえ ヌル 名前
No11 C_深峰正 nvarchar(400) いいえ ヌル IDカード
No12 C_sfsh nvarchar(400) いいえ ヌル 見直すかどうか
No13 C_shhf テキスト(16) いいえ ヌル レビュー返信

フォーム: フォーラム情報フォーム

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_追加時間 タイムスタンプ(8) いいえ いいえ 作成時間
No3 C_タイトル nvarchar(400) いいえ ヌル 記事のタイトル
No.4 C_コンテンツ テキスト(16) いいえ ヌル 投稿内容
No.5 C_parentid bigint(8) いいえ ヌル 親ノードID
No.6 C_ユーザーID bigint(8) いいえ いいえ ユーザーID
No7 C_ユーザー名 nvarchar(400) いいえ ヌル ユーザー名
No8 C_完了 nvarchar(400) いいえ ヌル

表: メッセージ情報テーブル

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_追加時間 タイムスタンプ(8) いいえ いいえ 作成時間
No3 C_ユーザーID bigint(8) いいえ いいえ メッセージID
No.4 C_ユーザー名 nvarchar(400) いいえ ヌル ユーザー名
No.5 C_コンテンツ テキスト(16) いいえ ヌル メッセージ内容
No.6 C_返信 テキスト(16) いいえ ヌル 返信内容

フォーム:雪生情報フォーム

シリアルナンバー データフィールド名 対応タイプ 主キー 空を許可する フィールドの備考
No1 C_id bigint(8) PK いいえ 主キー
No2 C_追加時間 タイムスタンプ(8) いいえ いいえ 作成時間
No3 C_xuehao nvarchar(400) いいえ いいえ 学生証
No.4 C_mima nvarchar(400) いいえ いいえ パスワード
No.5 C_xingming nvarchar(400) いいえ いいえ 名前
No.6 C_xingbie nvarchar(400) いいえ ヌル 性別
No7 C_touxiang nvarchar(400) いいえ ヌル アバター
No8 C_zhuanye nvarchar(400) いいえ ヌル 選考科目
No9 C_ショージハオ nvarchar(400) いいえ ヌル 電話番号
No10 C_深峰正 nvarchar(400) いいえ ヌル IDカード

第5章 システムの導入

5.1 ミニプログラム機能の実現

5.1.1 学生登録インターフェース

ナビゲーション メニューの [登録] をクリックして、登録ページを開きます。登録ページは、テキスト ボックス、選択ボックス、および登録ボタンで構成されています。テキスト ボックスに入力する基本的な登録情報を入力し、[登録] をクリックして登録を送信します。情報。

以下に示すように:

画像

図 5-1 学生登録インターフェース

まず、入力された情報が空かどうかを検証します。検証に合格した場合は、情報を挿入ステートメントとして構築し、データベース保存操作を呼び出し、情報をデータベースに挿入し、正常に保存された情報をインターフェイスに返し、ログインするか、ホームページに戻ります。

5.1.2 ホームページのインターフェース

WeChat ミニプログラム環境をセットアップした後、システムのホームページに入ります。ホームページには、先頭にロゴ、ナビゲーション バー、中央に記事のお知らせ情報が含まれています。

アプレットのホームページを次の図に示します。

画像

図 5-2 ホームページ

首页是在index页面中,该页面包括头部文件header、文章公告读取数据库中最新的信息,显示图片和对应的链接。在首页中先引入相关的JS和CSS样式。在对应模块中调用数据库操作方法,把读取的结果赋赋给RS数据集合对象,通过循环显示信息。

5.1.3 自习室列表界面

用户打开本系统后,可以查看自习室列表信息。如下图所示:

画像

图5-4自习室界面

点击自习室,先打开自习室的列表界面,在列表界面读取信息,详细表达所有相关自习室信息,通过JAVA的数据库操作,把列表绑定到result数据集合中,使用while循环,把所有的信息显示到自习室界面。点击自习室,通过该条信息的ID值传递到自习室的详情页面,在详情页面根据当前的ID值查询对应的具体信息。包括标题名称和内容。

5.1.4 高校自习室预约界面

用户打开本系统后,可以查看高校自习室信息,并进行预约。如下图所示:

画像

图5-5高校自习室预约界面

输入预约信息后,添加预约记录到数据库中,在个人中心可以查看预约记录,管理员对预约记录进行审核。

5.1.5 在线交流界面

用户登录本系统后,可以发表在线交流信息。如下图所示:

画像

图5-6在线交流界面

在线交流包括评论信息的提交和查询显示,在线交流前需要先进行登录,如果没有登。录界面提示登录后才能进行评论,登陆后的信息是通过session进行判断。如果session存在登录信息,就说明已经登录,在评论中输入评论的内容,点击提交,把评论信息保存到数据库中,评论结束之后进行查询。查询通过当前信息的ID进行条件查询,查询的结果保存在数据集合中,对数据集合进行循环显示。

5.2管理员模块的实现

5.2.1 留言管理

在系统主界面中的导航菜单中,有留言按钮,点击按钮,就可以在留言界面进行信息添加和管理。

其中,留言管理界面为5.7所示:

画像

图5.7:留言管理页面

5.2.2 学生信息管理

在系统主界面中的导航菜单中,有学生信息按钮,点击按钮,就可以在学生信息界面进行信息添加和管理。

其中,学生信息管理界面为5.8所示:

画像

图5.8:学生信息管理页面

在学生页面加载学生的信息列表,当执行该页面初始化的时候,调用业务逻辑层的学生查询方法。该方法先定义学生实体类,然后调用数据库中的学生查询方法,把查询结果绑定在list集合中。循环集合,把数据逐条绑定在学生实体对象,最终返回到界面。将得到的学生集合循环绑定到界面控件,根据字段名和数据结果进行映射,最终显示。

5.2.3 公告管理

管理员查看公告信息。其中,公告信息管理界面为5.9所示:

画像

图5.9:公告页面

在公告页面加载公告的信息列表,当执行该页面初始化的时候,调用业务逻辑层的公告查询方法。该方法先定义公告实体类,然后调用数据库中的公告查询方法,把查询结果绑定在list集合中。循环集合,把数据逐条绑定在公告实体对象,最终返回到界面。将得到的公告集合循环绑定到界面控件,根据字段名和数据结果进行映射,最终显示。

5.2.4 高校自习室信息管理

在系统主界面中的导航菜单中,有高校自习室管理按钮,点击按钮,就可以在高校自习室管理界面进行高校自习室信息添加和管理。其中高校自习室添加的界面如下:

画像

图5.6:高校自习室添加页面

首先对高校自习室页面进行布局,完成界面设计。在高校自习室页,输入高校自习室的内容,点击保存,执行保存事件,在该事件中进行数据保存操作。该事件方法先获取用户输入的高校自习室内容,把这些数据绑定到高校自习室实体方法中,对高校自习室的信息进行验证,包括是否为空,是否符合规范数据格式等。通过验证后,调用高校自习室的业务逻辑方法,业务逻辑层先执行高校自习室的唯一性验证,通过验证后,调用数据库操作方法。将在线保修的数据使用插入语句,提交到数据库中。数据库操作方法返回操作成功的信息到业务逻辑层,业务逻辑层再把结果返回到在线保修页面,完成插入操作。

5.2.5 自习室预约审核管理

在系统主界面中的导航菜单中,有自习室预约管理按钮,点击按钮,就可以在自习室预约管理界面进行信息审核和管理。

其中,自习室预约管理界面为5.7所示:

画像

图5.7:自习室预约管理页面

自習室予約ページの自習室予約情報リストを読み込み、ページの初期化時にビジネスロジック層の自習室予約クエリメソッドを呼び出します。このメソッドは、まず自習室予約エンティティ クラスを定義し、データベース内の自習室予約クエリ メソッドを呼び出し、クエリ結果をリスト コレクションにバインドします。コレクションをループし、データを 1 つずつ学習室の予約エンティティ オブジェクトにバインドし、最後にインターフェイスに戻ります。取得した自習室予約コレクションをループ内でインターフェイスコントロールにバインドし、フィールド名とデータ結果に従ってマッピングし、最後に表示します。

[自習室予約情報の確認] をクリックし、[自習室予約情報] ページで、まず ID 値を使用して該当する自習室予約情報をクエリし、自習室予約情報を一時オブジェクトに保存します。ページ上の自習室予約情報欄に変数の値をバインドしてページを読み込み、確認が必要な情報を編集して保存をクリックするとデータの検証が行われ、検証に合格すると検証操作が完了します。検証が失敗した場合、特定の通知で誤った情報が求められます。監査文を実行し、監査のビジネスロジックメソッドを呼び出し、監査メソッドで自習室の予約の有無を判定し、自習室の予約がない場合は、データベース操作層を呼び出して監査操作を実行し、監査が成功したら戻ります。

クリックすると自習室の予約情報が削除され、自習室の予約情報に外部キーの関連付けがあるかどうかをID値で確認します。まず外部キーに関連付けられたデータを削除してから、削除されたデータベースメソッドを呼び出します。削除が成功すると自習室予約情報一覧画面に戻ります。

6 ソースコードのダウンロード

おすすめ

転載: blog.csdn.net/JasonXu94/article/details/132472741