春を使用したインターネットショッピングモールの開発
概要
- これは、ヒュンダイIT＆E開発者トレーニングコース中の最初のプロジェクトです。
- ショッピングモールのホームページは、ハンサムが提供する製品データを使用して生産されます。
開発期間/人員
- 2021.09〜2021.10 / 2週
- 4-パーソンプロジェクト
開発環境
役割
Seo Min -Cheol（チームリーダー）
- 全体的なAPIロジック開発
- イベントに参加するときのDBロックアンチロジック開発
- ブランドおよび製品カテゴリ機能の開発
- 各ブランドおよび製品カテゴリの製品リストページの開発
- 製品ごとの詳細なページと機能開発を表示します
- ショッピングバッグ（ショッピングカート）ページと機能開発
- 支払いページと機能開発を注文します
- 「デフォルトの配送先として設定」として開発され、最近の配送先宛先 '機能として設定
Yonghyuk Byun
- 全体的なAPIロジック開発
- イベントリストと読み込み機能の開発
- イベント詳細情報ページ開発
- イベントに参加するときのDBロックアンチロジック開発
- クーポンリストと読み込み機能の開発
- 製品ごとの詳細なページと機能開発を表示します
- ショッピングバッグ（ショッピングカート）ページと機能開発
- 同時ユーザー機能開発
seohoeタイプ
- ブランドおよび製品カテゴリ機能の開発
- スプリングセキュリティ関数リンケージ
- 各当局のアクセス可能なページへのアクセスを設定します
- イベントに参加するときのDBロックアンチロジック開発
- 製品ごとの詳細なページと機能開発を表示します
Lee Soo -Jeong
- イベントリストと読み込み機能の開発
- イベントに参加するときのDBロックアンチロジック開発
- 製品ごとの詳細なページと機能開発を表示します
- ショッピングバッグ（ショッピングカート）ページと機能開発
- 詳細確認ページとフィルター関数開発を注文します
説明
- タスクを解決するためにHanseomページを参照してください。
- 上の写真は、役割ごとにhanseomページを分析および実装するために書かれたワイヤーフレームです。
- ERDは、1つの島から配信されたデータを管理するように設計されています。
- これは、約2週間の開発スケジュールを要約するスケジュールです。
- 3日間初期：DBテーブルの設計と画面の実装
- それらのほとんど：必須関数の実装
- 過去2日間：簡単な便利な機能を追加してバグを変更する
- プロジェクトの全体的な形状管理はGitを使用しました。
- ヘッダーには、ログインボタン、ロゴ、製品リストに移動できるナビゲーションバーが含まれています。
- マウスをアップロードすると、ドロップダウンの形で低い分類が表示されます。
- この時点で、より低いカテゴリ情報は、Ajaxを使用して非同期にするように設計されていました。
- イベントをクリックすると、イベントに参加できる画面が表示されます。
- First -Come、First -Cervedイベントの性質により、多くのユーザーが短時間で同時に接続できるため、DBロックを生成できます。
- このポイントを解決するために、1つのスレッドをスレッドプールに設定し、接続するユーザーのクーポンを発行するように設計されています。
- さらに、ユーザーにクーポンを支払い、DBに保存されている残りのクーポンの量を減らすプロセス全体がトランザクションとして設定されました。
- Spring Securityを使用してログインを実装しました。
- セキュリティによって提供される機能は、後で開発されるプロジェクトを考慮して優れたスケーラビリティと考えられていたため、使用されました。
- 各メンバーはメンバー番号を付与し、メンバーのIDの代わりにメンバー番号を参照することにより、セキュリティの問題を設計しました。
- ナビゲーションバーのメニューをクリックすると、そのカテゴリに対応する製品が表示されます。
- 製品のリストは、Ajaxを使用して非同期に輸入されています。
- ページング機能により、ページごとに最大12個の製品を出力することにより、製品展示時間が短縮されました。
- これは、製品をクリックしたときに表示される詳細情報ページです。
- 製品の色とサイズはボタンとして表示されます。
- ここで色とサイズを選択すると、製品の残りの量が表示されます。
- 画像を見ると、メッセージボックスが表示され、同じ製品を見ている顧客の数が出力されます。
- これはショッピングカートとして機能するショッピングバッグのページです。
- ここでは、製品の量、サイズ、色を変更して削除できます。
- 左側のチェックボックスを使用して、購入するアイテムを選択して支払い画面に移動できます。
- これは注文できる支払いページです。
- 画面上で購入する製品のリストを表示します。
- 輸送先に入るという形式は、以下が提供する郵便番号APIを使用して郵便番号の問い合わせを可能にするように設計されています。
- 輸送テーブルに近づき、ユーザーの基本的な配送または最近の配送先を輸入する機能を開発しました。
- 製品の代金を支払うために、DBで実行された一連のプロセスはトランザクションと結びついていました。
- 支払いが完了すると、アイテムはショッピングバッグリストから削除されます。
- 最後に、これは注文リストページで、注文履歴を確認できます。
- 製品コードまたは製品名で検索できるフィルター機能を追加しました。
問題解決
- チームが開発したWebアプリケーションは、MPAによって作業しています。
- すべてのページにはヘッダーが含まれているため、ページを移動するたびに、毎回DBからブランド/カテゴリ情報を提供する必要があるという問題がありました。
- このパートを解決するために、最初のロード後にセッションで保存および使用するブランドおよびカテゴリ情報を作成しました。
- ただし、ユーザーがサーバーをロードできるという不利な点が増えていました。
- そこで、サーバーの負荷を減らすために、静的変数にブランドとカテゴリを保存する方法を使用しました。
- ブランドの中には、タグ内のエラーを引き起こした特別なシンボルを含むブランド名がありました。
- このパートを解決するために、サーバー構成ファイルのパラメーターとして特別な文字を使用できる設定を追加しました。
