シンプルなショッピングプラットフォームをゼロから構築する（1）

私は暇なときにこのプロジェクトを書きました。モールのアプリインターフェースは主にスナックベンダーの小さなプログラムを模倣して書かれ、残りは自分で書いています。

プロジェクトのソースコード（継続的な更新）：https：//gitee.com/DieHunter/myCode/tree/master/shopping

使用した技術：

バックエンド：node + express + MongoDB

管理インターフェース：react + antd

モールインターフェース（モバイル端末）：Vue + Mint UI

開発ツール： npm

パッケージングツール：webpack

コード管理：git

テクノロジースタック：

（（Express、mongoose、cors、body-parser、multer、jsonwebtoken、crypto-js、bcryptjs、nodemailer）
管理界面（react、antd、axios、crypto-js、less、less-loader、react-router-dom、events、redux）
ショップインターフェース（vue、vue-router、vuex、axios、jquery、less、less-loader、mint-ui、swiper）

準備オーケー：

ツール構成

ノードのインストール： nvmをダウンロードしてインストールするか、nodejsのインストールを直接ダウンロードします。nvmを使用する場合は、
```
nvm install [email protected]
nvm use 12.16.1
```
ノードをインストールしたら、環境変数を確認します（[マイコンピューター] => [プロパティ] => [システムの詳細設定] => [環境変数]を右クリックします）。そうでない場合は、ノードディレクトリを環境変数に追加します。

npm構成：

npm config set registry https://registry.npm.taobao.org    //将默认下载地址设置为淘宝镜像
npm config set prefix "D:\soft\nodejs\module_global"     //设置全局模块安装默认路径（后面直接将路径放到环境变量，可以直接使用）
npm config set cache "D:\soft\nodejs\module_cache"//设置全局模块缓存路径

mongoDBのインストール：MongoDBをダウンロードしてインストールし、ノードなどの環境変数を構成し、cmdにmongoと入力します。このようなものが表示された場合は、インストールと構成が成功したことを意味します。
webpack： npmを使用してwebpack-cliとwebpackをグローバルにインストールします

npm i webpack webpack-cli -g

バックエンド構造

新しいプロジェクトフォルダを作成します。ここでバックエンドフォルダを作成した直後にserver.js（エントリファイル）を作成するので、npminit時にプロジェクト名を入力する必要はありません。
npm init -yを使用して、バックエンドプロジェクトを初期化し、ファイル構造を作成します（以下を参照）。
express、mongoose、cors（フロントエンドのクロスドメインを処理）、body-parser（リクエストの種類を変更できる、つまり、投稿リクエストをサポート）、multer（ファイルのアップロードをサポートできるようにする）、jsonwebtoken（一方向トークンのバックエンド生成、送信）をインストールします。検証ステータスのフロントエンド）、crypto-js（データ送信暗号化の要求）、bcryptjs（パスワード暗号化）、nodemailer（電子メールの送信、検証コード）およびその他のモジュール

これまでのところ、基本的なサーバーが構築されています

サーバー管理システムのインターフェース構築

npm install create-react-app -gを使用して、create-react-appスキャフォールディングツールをグローバルにインストールし、新しいプロジェクトディレクトリを作成します
プロジェクトディレクトリでスキャフォールディングツールcreate-react-appmyapp（プロジェクト名）を実行します
webpackの構成：ここでは使用量を減らす必要があります。reactscaffoldによって提供されるデフォルトの前処理言語はsassであるため、reactプロジェクトの構成を公開する必要があります。
プロジェクトの下のpackage.jsonファイルでイジェクトを公開する前に、npm run exit（を実行します。注：この操作は元に戻せません。必要がない場合は公開しないことをお勧めします。Webpackパッケージの原則は、プロジェクトの依存関係から静的リソースを生成することです。つまり、パッケージが使用されていない場合、影響はありません）。
antd（ui）、axios（データ要求）、crypto-js（要求データ送信暗号化）、react-router-dom（ルートジャンプ）、redux（グローバル状態）をインストールします
下ダウンロードless和less-loader、
npm install less-loader less --save
構成なし：イジェクトを実行すると、package.jsonのイジェクトアイテムが消えます。このとき、プロジェクトにはwebpackの構成ファイルである追加のconfigフォルダーがあります。webpack.config.jsファイルを開き、検索してデフォルトの構成を見つけます。ひょうたんの図によると、sassのsass構成アイテムは、lessを構成し、同様にless-loaderを構成します（以下を参照）。
次に、srcフォルダーにプロジェクト構造を構築します

これまでに、基本的なサーバー管理フロントエンドプロジェクトが完了しました

店舗インターフェースの構築

npm install -g vue-cliを使用して、vue-cliスキャフォールディングツールをグローバルにインストールします
vue init webpack +プロジェクト名でプロジェクトを初期化します
プロジェクトディレクトリを構築する
vue-router（ルーティング）、vuex（グローバル状態）、axios（フロントエンド要求）、jquery、less、less-loader、mint-ui（モバイルuiコンポーネント）、swiper（カルーセルプラグイン）をインストールします

モールインターフェースが構築されています

総括する：

オブジェクト指向プログラミングの本質は、実際には抽象的なアイデアに対する自分自身の理解と認識をテストすることです。いくつかのことを説明することはできませんが、それらは存在します。何があるかではなく、何があるかを考えてください。