ミドバックグラウンドマネジメント
Djangoフレームワークはすでに管理管理バックエンドを提供していますが、変更可能な管理者自身のページのページレイアウト効果は比較的小さく、会社のカスタマイズされたページ要件を満たすことができません。現時点では、バックを独自に開発する必要があります。会社のバックエンドデータ管理を満たすためのエンド管理システム。
プロジェクト構造
開発モード：フロントエンドとバックエンドの分離
フロントエンドフレームワーク：VUE
バックエンドフレームワーク：DjangoRESTフレームワーク
機能部分：管理者ログイン、データ統計、ユーザー管理、商品管理、注文管理、権限管理
主なテクノロジー：JWTユーザー認証、CORSクロスドメイン
プロジェクト環境構築
1.フロントエンドコードの実行
meiduo_mall_adminファイルディレクトリに入り、次のコマンドを実行します
npm run dev
次の図に示すように、これは操作が成功したことを意味します。
2.バックエンドコードの実行
1.仮想環境ファイルをインポートします
pip install -r requeriments.txt
2.データベースを入力して、meiduoデータベースを作成します
mysql -uroot -p
create database meiduo charset=utf8;
3.データをインポートします
mysql -uroot -p meiduo < dump.sql
4.実行
python manage.py runserverログインする
バックグラウンド管理では、最初にログイン機能を完了する必要があり、Meiduoフォームのログインを書き換えることで対応する機能を完了することができます。
バックグラウンドログインでは、フロントエンドサービスとバックエンドサービスのドメイン名が異なるため、最初にクロスドメインの問題を解決します。
ログイン後、jwtを使い続けます
ブラウザの同一生成元ポリシー
1995年に、同一生成元ポリシーがNetscapeによってブラウザに導入されました。現在、すべてのブラウザがこのポリシーを実装しています。
同一生成元ポリシーはブラウザのセキュリティ機能です。異なるソースからのクライアント側スクリプト（jsファイル）は、明示的な承認なしに相手のリソースを読み書きすることはできません。同じソースからのスクリプトのみに、dom、Cookieの読み取りと書き込み、セッション、ajaxなどの操作に対するアクセス許可が付与されます。
URLは、プロトコル、ドメイン名、ポート、パスで構成されます。2つのURLのプロトコル、ドメイン名、ポートが同じ場合、2つのURLは同じ発信元になります。
たとえば、http://www.example.com/dir/page.htmlこのURLの場合、プロトコルはhttp://、ドメイン名はwww.example.com、ポートはです80（デフォルトのポートは省略できます）。その相同性は以下の通りです。
| url | 同じかどうか | 理由 |
|---|---|---|
| http://www.example.com/dir2/other.html | はい | 同じプロトコル、ポート、ホスト |
| https://example.com/dir/other.html | 番号 | 異なるプロトコル（https） |
| http://www.example.com:81 | 番号 | 異なるポート（81） |
| http://news.example.com/ | 番号 | 異なるドメイン名 |
同一生成元ポリシーの目的は、ユーザー情報の安全性を確保し、悪意のあるWebサイトがデータを盗むのを防ぐことです。
このような状況を想像してみてください。Webサイトは銀行であり、ユーザーがログインした後、他のWebサイトにアクセスします。他のWebサイトがWebサイトAのCookieを読み取ることができる場合はどうなりますか？
明らかに、Cookieにプライバシー（預金総額など）が含まれている場合、この情報は漏洩します。さらに恐ろしいのは、ユーザーのログインステータスを保存するためにCookieがよく使用されることです。ユーザーがログアウトしない場合、他のWebサイトがユーザーになりすまして、好きなことを行うことができます。ブラウザは、フォームの送信が同一生成元ポリシーによって制限されないことも規定しているためです。
「同一生成元ポリシー」が必要であることがわかります。そうしないと、Cookieが共有され、インターネットが安全でなくなります。
クロスドメインCORS
フロントエンドとバックエンドは2つの異なるポートです
| ポジション | ドメイン名 |
|---|---|
| フロントエンドサービス | 127.0.0.1:8080 |
| バックエンドサービス | 127.0.0.1:8000 |
現在、フロントエンドとバックエンドは異なるポートであり、データへのクロスドメインアクセスが含まれます。これは、ブラウザの同一生成元ポリシーがデフォルトで2つの異なるドメイン名間のデータへの相互アクセスをサポートしていないためです。ドメイン名間でデータを転送するには、バックエンドへのクロスドメインアクセスのサポートを追加する必要があります。
django-cors-headersを使用して、クロスドメインアクセスのバックエンドサポートを解決します。
django-cors-headers拡張機能を使用する
リファレンスドキュメントhttps://github.com/ottoyiu/django-cors-headers/
インストール
pip install django-cors-headers
アプリを追加
INSTALLED_APPS = (
...
'corsheaders',
...
)
中間層の設定
MIDDLEWARE = [
'corsheaders.middleware.CorsMiddleware',
...
]
ホワイトリストを追加
# CORS
CORS_ORIGIN_WHITELIST = (
'127.0.0.1:8080',
'localhost:8080',
'www.meiduo.site:8080',
'api.meiduo.site:8000'
)
CORS_ALLOW_CREDENTIALS = True # 允许携带cookie
- ホワイトリスト内の任意のドメイン名がバックエンドインターフェイスにアクセスできます
- CORS_ALLOW_CREDENTIALSは、バックエンドがクロスドメインアクセスでのCookieの操作をサポートするかどうかを示します。
クロスドメイン実装プロセスは
1.初めて、ブラウザはクロスドメインが許可されているかどうかをバックエンドに尋ねるオプションリクエストを送信し、バックエンドはこれら2つのドメイン名がホワイトリストに含まれているかどうかを照会します
2.ドメイン名がホワイトリストに含まれている場合は、応答結果でブラウザに通知して、クロスドメインを許可します
3.ブラウザは2回目のPOSTリクエストを送信し、ユーザーのログインデータをバックエンドに送信して、ログイン確認操作を完了します。
オプションリクエスト
ポストリクエスト
