vue store
1.0.0
2020年の冬休みは、新型コロナウイルス肺炎の流行により学校がまだ始まっていないため、特に特別だ。先学期、空いた時間を使ってVue.jsとNode.js学習したことを思い出しました。練習するために完全なプロジェクトを作成したいと常に思っていましたが、以前は学校でそれほど多くの時間がありませんでした。時間ができたので、これまで学んだことを統合するプロジェクトをやりたいと思っています。
悩んだ末、最終的にXiaomi Mallを模倣したeコマースプロジェクトを作ることにしました。久しぶりなので、以前学んだこともほとんど忘れてしまいましたが、このプロジェクトをやるにあたっては、基本的には公式ドキュメントに従い、少しずつ進めていきました。国内で様々な事情があり、プロジェクトの進行が遅れることは避けられません。これでほぼ完成しました。初心者向けに共有しましょう。間違いがある場合は、アドバイスをお願いします。
このプロジェクトはフロントエンドとバックエンドが分かれていますが、Xiaomi Mall を参照して実装されています。ただし、購入する必要がある場合はまったく関係ありません。 Xiaomi製品はXiaomi公式モールにアクセスしてください。
これはこのプロジェクトのフロントエンドです。バックエンドのストアサーバーに移動してください。
フロントエンドは Alibaba Cloud にデプロイされています。 http://101.132.181.9/ にアクセスしてください (モバイル デバイスと互換性がないため、コンピューターを使用してアクセスしてください)。
バックエンドも Alibaba Cloud にデプロイされており、インターフェース アドレスはオンライン アドレスに変更されており、ローカルで実行されているフロントエンドもバックエンドに通常どおりアクセスできます。
私は学部 3 年生で、この夏からインターンシップを開始する予定です。将来的にはそれほど自由ではないかもしれませんが、プロジェクトを随時更新し、改善していきます。質問があれば質問してください。問題で直接。
このプロジェクトが良いと思われた場合は、右上隅の
Starクリックしてサポートしてください。 ^_^
このプロジェクトはフロントエンドとバックエンドが分離されており、フロントエンドはVue + Vue-router + Vuex + Element-ui + Axiosをベースにしており、Xiaomi Mall を参照して実装されています。バックエンドはNode.js(Koa框架) + Mysqlに基づいて実装されています。
フロントエンドには、ホームページ、ログイン、登録、すべての製品、製品詳細ページ、会社概要、私のコレクション、ショッピング カート、注文決済ページ、注文とエラー処理ページの 11 ページが含まれています。
商品表示、商品分類照会、商品キーワード検索、商品詳細情報表示、ログイン、登録、ユーザーショッピングカート、注文決済、ユーザー注文、ユーザーお気に入りリスト、エラー処理機能を実装します。
バックエンドは MVC モデルを採用し、フロントエンドが必要とするデータ モジュールに応じて、対応するインターフェイス、制御層、データ永続層が設計されます。バックエンド配信アドレス ストアサーバー。
フロントエンド: Vue + Vue-router + Vuex + Element-ui + Axios
バックエンド: Node.js 、 Koa框架
データベース: Mysql
このページは element-ui のDialog使用して、マスク ダイアログ ボックスをポップアップする効果を実現します。登录ボタンは App.vue ルート コンポーネントで設定され、ログイン ボックスが表示されるかどうかはvuexのshowLogin状態によって制御されます。
この設計は、ユーザーがページ上のボタンをクリックしてログインできるようにするか、ユーザーがログイン検証を必要とするページにアクセスした後、またはバックエンドがログイン検証を必要とするプロンプトを返した後にログイン ボックスが自動的にポップアップするようにして、ページ ジャンプを減らすためのものです。ユーザーの操作を簡素化します。
ユーザーが入力したデータは信頼性が低いことが多いため、このプロジェクトのフロントエンドとバックエンドの両方でログイン情報が検証されます。フロントエンドは element-ui のフォーム検証メソッドに基づいており、検証用にカスタマイズされた検証ルールがあります。
このページでは、element-ui のDialog使用して、マスク ダイアログ ボックスをポップアップする効果を実現しています。注册ボタンは App.vue ルート コンポーネントに設定されており、親子コンポーネントを介して渡される値によって、登録ボックスが表示されるかどうかが制御されます。 。
ユーザーが入力したデータは信頼できないことが多いため、このプロジェクトのフロントエンドとバックエンドでも登録情報が検証されます。フロントエンドは element-ui のフォーム検証メソッドに基づいており、検証用にカスタマイズされた検証ルールが用意されています。
ホームページは主に商品の表示を目的としており、カルーセルでおすすめ商品や人気商品をカテゴリーごとに表示しています。
全商品ページでは、全商品表示、商品分類クエリ、キーワードによる商品検索結果表示が統合されています。
商品詳細ページには主に特定の商品の詳細情報が表示され、ユーザーはここでお気に入りの商品をショッピングカートやお気に入りリストに追加できます。
ショッピング カートは vuex を使用して実装されており、ページ効果は Xiaomi Mall のショッピング カートを参照します。
詳細な実装プロセスについては、「Vuex に基づく Xiaomi Mall ショッピング カートの実装」を参照してください。
ユーザーがショッピングカートで購入する商品を選択し、「チェックアウトに進む」ボタンをクリックすると、このページが表示されます。 ここでユーザーは配送先住所を選択し、注文に関する関連情報を確認して、購入を確認します。
ユーザーは、製品詳細ページの「いいね！」ボタンをクリックして、お気に入りの製品をお気に入りリストに追加できます。
ユーザーが行ったすべての注文を表示します。
知らせ：
1. Clone project
git clone https://github.com/hai-27/vue-store.git
2. Project setup
cd vue-store
npm install
3. Compiles and hot-reloads for development
npm run serve
4. Compiles and minifies for production
npm run build
フロントページ
すべての製品
ショッピングカート
私のコレクション
私の注文
ログイン
登録する
著者hai-27
2020年3月8日
