jddaojia
導入
Jddaojiaは、 JD.comを模倣して構築されたWebモバイル電子メールです。この倉庫は、フロントエンドプロジェクトです。バックエンドAPIインターフェイスパーツについては、jddaojia-backapiを参照してください。
このプロジェクトは、ログイン登録、ストア製品ディスプレイ、ショッピングカート、注文配置、履歴注文クエリ、保存および編集アドレスなど、e-mallユーザー側の基本操作を実装し、JD.comの一意のUIスタイルを復元しようとします。
デモビデオ：bilibiliビデオを参照してください。
使用される技術
- vue3 + vuex + vue-router + vue-cli
- axios
- eslint
- webpack
- SCSS
- ES6
基本的なコマンドライン操作：
プロジェクトプロジェクトのセットアップをインストールします
開発用のコンパイルとホットレロード
生産のためにコンパイルして模倣します
糸くずと修正ファイル
構成をカスタマイズします
参照してください：
構成参照。
正常に実行します
プロセスがスムーズに進み、プロジェクトが開発環境で正常に実行される場合、コマンドラインは次のようなプロンプトを表示します。
そこに与えられたURLを使用して、ページにアクセスします。ただし、最初にプロジェクトのバックエンドインターフェイスサーバーを実行し、デフォルトでポート3000を使用する必要があります。
ヒント
- 登録プロセスをバイパスするために、ユーザー名：adminおよびpassword：admin：admin：admin：adminを介してモールに直接ログインできます。さらに、モールにはモバイルSMSログイン機能がないようになりました。ユーザー名とパスワードを使用してログインしてください。
- このプロジェクトは、REMスキームを使用して適応レイアウトを実現します。
- このプロジェクトは、FirefoxおよびEdgeブラウザでのみテストされています。 ChromeおよびSafariブラウザは、レイアウトバグに遭遇する可能性があります。見つけた場合は、変更するには私に連絡してください。
- レイアウトはFlexを最大限に活用し、CSSコードを簡素化します。
- ショッピングカート機能は、主にVuexとSessionStorageを使用してクライアント側のデータを管理しています。これは、ローカライズされた情報管理機能を実践する私の目標です。他の関数は、主にバックエンドでデータを処理します。
- ログイン情報はSessionStorageに保存されます。
改善の方向
- キャッシュの使用、レイアウトジッターの削減など、パフォーマンスとプレゼンテーションのページの読み込みの改善の余地がまだあります。
- ブラウザの特定の設定では、ページが閉じていてもSessionStorageはクリアされません。ページを一定期間操作しなかった後、自動的にログアウトしてセッションストレージをクリアすることができます。
- HTTP要求を使用する多くの部品は、より具体的なエラー処理方法を採用できます。
