[django+vue] プロジェクトの構築とクロスドメインアクセスの解決

プログラミング 2023-12-17 07:26:13 訪問数: null

自分でまとめた勉強メモですので、間違い等ありましたらご指摘くださいませ〜。

[django+vue] プロジェクトの構築とクロスドメインアクセスの解決

django+vue の紹介

Django と Vue.js は、最新の Web アプリケーションを構築するための非常に強力なテクノロジーのペアです。以下にそれらについて簡単に紹介します。

  1. Django: Django は、MTV (Model-Template-View) 設計パターンに従って Python で書かれた高レベルの Web フレームワークです。 Django は、開発者が安全で信頼性の高い Web アプリケーションを迅速に構築できるようにする多くの組み込み機能とツールを提供します。
    • ORM: Django の ORM (オブジェクト リレーショナル マッピング) レイヤーはデータベースと簡単に対話でき、複数のデータベース バックエンドをサポートします。
    • ルーティング システム: Django のルーティング システムは、URL マッピングとリクエストの配布の管理に役立ちます。
    • フォーム処理: Django は、フォーム検証、データ処理などを含む強力なフォーム処理機能を提供します。
    • ユーザー認証と権限管理: Django は、ユーザー登録、ログイン、権限制御などのニーズを簡単に処理できるユーザー認証と権限管理機能を提供します。
  2. Vue.js: Vue.js は、ユーザー インターフェイスを構築するための人気のある JavaScript フロントエンド フレームワークです。 Vue.js はコンポーネントベースの開発アプローチを採用し、応答性の高いデータ バインディングとコンポーネント システムを提供するため、開発者は高度にインタラクティブで再利用可能な UI コンポーネントを構築できます。
    • 応答性の高いデータ バインディング: Vue.js は双方向バインディングを使用してデータをビューに関連付けるため、データの変更をリアルタイムでビューに反映できます。
    • コンポーネント開発: Vue.js のコンポーネント システムにより、開発者は UI を独立した再利用可能なコンポーネントに分割できるため、コードの保守性と再利用性が向上します。
    • 仮想 DOM: Vue.js は仮想 DOM テクノロジーを使用して、仮想 DOM の違いを比較することで実際の DOM での操作を最小限に抑え、パフォーマンスを向上させます。

Django と Vue.js を使用すると、フロントエンドとバックエンドを分離した開発モデルを実現でき、フロントエンドとバックエンドの開発チームが並行して作業できるようになります。データ ストレージ、ユーザー認証、その他の機能の処理を担当するバックエンド API サーバーとして Django を使用できます。一方、Vue.js はユーザー インターフェイスの構築と、AJAX リクエストを介したバックエンド API との対話を担当します。

vue環境の準備

node -v	# v18.18.2

npm -v	# 9.8.1

vue --version	# @vue/cli 4.5.13

vueフレームワークの構築

1.vueプロジェクトを作成する

vue createfrontend (フロントエンドはプロジェクト名)

2.vueプロジェクトの設定

ここに画像の説明を挿入します
カスタマイズの選択: 機能を手動で選択します

設定項目を選択します。键盘上下键 経由で移動し、空格键 を使用してチェックし、Enter キーを押します

 ( ) Babel                              //  代码编译
 ( ) TypeScript                         //  ts
 ( ) Progressive Web App (PWA) Support  //  支持渐进式网页应用程序
 ( ) Router                             //  vue路由
 ( ) Vuex                               //  状态管理模式
 ( ) CSS Pre-processors                 //  css预处理
 ( ) Linter / Formatter                 //  代码风格、格式校验
 ( ) Unit Testing                       //  单元测试
 ( ) E2E Testing                        //  端对端测试

テンプレートをシンプルにしたい場合は、Linter/Formatter や単体テストを追加する必要はありません。

ここに画像の説明を挿入します
VUE バージョンを選択します: 3.x

サードパーティの構成ファイルの存在方法: 専用の構成ファイル内

この構成をデフォルトのプロジェクト テンプレートとして保存するかどうか: N を選択します

3. プロジェクトディレクトリに移動します

CDフロントエンド

4. プロジェクトを実行する

npm 実行サーブ

5.プロジェクト資料の説明

ここに画像の説明を挿入します

6.Vue拡張ライブラリまたはプラグイン

  • エレメントプラス

Element Plus は、Vue 3.0 に基づくデスクトップ UI コンポーネント ライブラリのセットであり、豊富な UI コンポーネントとインタラクティブなエフェクトを提供し、開発者がさまざまな種類の Web アプリケーションをより簡単に構築できるようにします。 Element Plus は、Element UI のアップグレード バージョンで、機能とパフォーマンスがいくつか改善され、Vue 3.0 をサポートします。

npm install element-plus --save

エラーを報告するには、次を使用します: npm install element-plus --save -legacy-peer-deps

npm list element-plus バージョンの表示

要素プラス@2.4.2

ここに画像の説明を挿入します

  • vue-ルーター@4

vue-router は Vue.js の公式ルーティング マネージャーであり、Vue.js と深く統合されており、シングルページ アプリケーションの構築に使用されます。 vue-router を通じて、ページ間の切り替え、ナビゲーション、ルーティング パラメーターの転送などの機能を実装できます。

npm install vue-router@4

npm list vue-router バージョンの表示

vue-ルーター@4

  • アクシオス

axios は、ブラウザーおよび Node.js 環境で使用できる Promise ベースの HTTP クライアントで、ネットワーク リクエストを送信するために Vue.js で一般的に使用されるツールです。

npm インストール axios

npm list axios バージョンの表示

[email protected]

Django環境の準備

pip install django== 2.0 -i https://pypi.tuna.tsinghua.edu.cn/simple
pip install django-cors-headers== 2.5.3 - i https://pypi.tuna.tsinghua.edu.cn/simple
pip install mysqlclient== 2.2.0 -i https://pypi.tuna.tsinghua.edu.cn/simple 

python --version	# Python 3.9.18
django	# 2.0
django-cors-headers		#2.5.3
mysqlclient		#2.2.0

Django フレームワークの構築

1.conda仮想環境pydjangoを使用する

pydjangoをアクティブ化する

2. ジャンゴプロジェクトを作成する

django-admin startproject バックエンド

3. アプリケーションを作成します。

cd バックエンド
python manage.py startapp myapp

4. Python インタープリターの構成

conda仮想環境pydjango

ここに画像の説明を挿入します

5. プロジェクトを開始する

python manage.py 実行サーバー

vue、django のクロスドメイン問題を解決する

1.コルス

CORS は Cross-Origin Resource Sharing (Cross-Origin Resource Sharing) の略称で、Web アプリケーションでクロスオリジン リクエストを処理するための標準メカニズムです。 Web ページが JavaScript を介して別のドメイン (ドメイン名、ポート、またはプロトコル) 内のサーバー リソースに対するリクエストを開始すると、クロスドメイン リクエストが発生します。

Vue.js フロントエンド アプリケーションが Django バックエンドへのアクセスをリクエストするとき、2 つが異なるドメイン名またはポート上にある場合、クロスドメイン リクエストがトリガーされ、ブラウザーによって傍受される可能性があります。

2.django-cors-headers

  1. Django プロジェクトにインストールしますdjango-cors-headersライブラリ:

    activate pydjango	#django-cors-headers安装在哪个python环境下
pip install django-cors-headers -i https://pypi.tuna.tsinghua.edu.cn/simple

  2. Django プロジェクト (settings.py) の設定ファイルの に corsheaders を追加します。INSTALLED_APPS

    INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

  3. MIDDLEWARE設定ファイルのリストにCorsMiddlewareします。追加

    MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',  # 添加这一行
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

  4. は、許可されるソース ドメインのリスト、許可される HTTP メソッドなどのニーズに応じて構成できます。以下は、すべてのオリジン (*) からのクロスオリジン リクエストを許可する設定例です。

    CORS_ALLOW_ALL_ORIGINS = True
# 增加跨域忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True
# 允许所有方法
CORS_ALLOW_METHODS = ('*')
# 允许所有请求头
CORS_ALLOW_HEADERS = ('*')

    あるいは、許可されるオリジンドメインの特定のリストを設定することもできます: (私はこれを使用します)

    CORS_ALLOWED_ORIGINS = [
    'http://localhost:8080',  # Vue.js前端应用的地址
    'http://example.com',     # 其他允许的域名
]

上記の構成では、django-cors-headers が Django バックエンドでクロスドメイン リクエストを処理し、Vue.js フロントエンド アプリケーションと Django バックエンド間のクロスドメイン通信が可能になります。このようにして、Vue.js アプリで axios または他の HTTP クライアント ライブラリを使用して、Django バックエンドにリクエストを送信し、応答データを正常に取得できます。

3.ジャンゴコード

# setting.py

INSTALLED_APPS = [
	...
    'corsheaders',  #跨域add
    'myapp.apps.MyappConfig'    #注册app
]

# urls.py

from django.urls import path
from myapp import views

urlpatterns = [
    # path('admin/', admin.site.urls),
    path("index/", views.index),
]

# views.py

from django.http import HttpResponse
from django.shortcuts import render

# Create your views here.
def index(request):
    return HttpResponse("欢迎使用！")

テストのためにプロジェクトを開始します。
ここに画像の説明を挿入します

4.Vue がクロスドメインリクエストを行う

アクシオス

axios は、ブラウザーおよび Node.js 環境で使用できる Promise ベースの HTTP クライアントで、ネットワーク リクエストを送信するために Vue.js で一般的に使用されるツールです。

npm インストール axios

npm list axios バージョンの表示

[email protected]

5.vue代码

main.jsこれは Vue.js プロジェクトのメイン エントリ ファイルであり、Vue アプリケーション インスタンスの作成、グローバル構成の設定、およびページの特定の要素へのアプリケーションのマウントを担当します。また、他の必要なモジュールやライブラリをインポートして構成するためにも使用されます。

//main.js

import {
    
     createApp } from 'vue'
import App from './App.vue'
// 导入router
import router from './router.js';
// 导入axios
import axios from 'axios';

// 设置 axios 的全局配置
axios.defaults.baseURL = 'http://127.0.0.1:8000'; // 设置基础 URL
axios.defaults.headers.common['Authorization'] = 'Bearer token'; // 设置公共请求头

// createApp(App).mount('#app')
const app = createApp(App)

app.use(router)

// 将 axios 实例挂载到全局属性中
app.config.globalProperties.$http = axios;
app.mount('#app')

router.js は Vue Router の構成ファイルで、アプリケーションのルーティング情報を定義および構成するために使用されます。 vue-router モジュールをインポートし、ルーティング構成配列 routes を定義してから、 createRouter を通じてルーティング インスタンスを作成し、最後にインスタンスをエクスポートしました。他の場所で使用されています。 

//router.js

// 导入vue-router
import {
    
     createRouter, createWebHistory } from 'vue-router';
// 导入你的组件
import HelloWorld from './components/HelloWorld.vue';

const routes = [
  {
    
    
    path: '/',
    component: HelloWorld
  },
  {
    
    
    path: '/hello',
    component: HelloWorld
  }
  // 其他路由...
];

const router = createRouter({
    
    
  history: createWebHistory(),
  routes
});

export default router;

ルート コンポーネント App.vue。これは、アプリケーション全体のコンテンツをホストし、他のコンポーネントの親コンポーネントとして機能するコンテナ コンポーネントです。

<router-view> を使用すると、さまざまな URL パスに従って、さまざまなコンポーネントのコンテンツを App.vue に動的にロードできます。シングルページアプリケーションのマルチページ切り替え効果を実現できます。 

<!-- </App.vue> -->

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

Vue 自体は、組み込みの HTTP クライアント機能を提供しません。通常、このコードは、Axios などの $http というプラグインまたはライブラリに依存する必要があります。ここで Axios が使用されている場合、this.$http.get('/index') は Axios を通じて GET リクエストを開始し、リクエストされた URL は「/index」になります。このリクエストは Promise オブジェクトを返します。このオブジェクトは、 .then() メソッドを通じて成功したリクエストの結果を処理したり、 .catch() メソッドを通じてリクエストの失敗を処理したりできます。 

<!-- </HelloWorld.vue> -->
<template>
  <el-row class="mb-4">
    <el-button @click="test">测试</el-button>
  </el-row>
</template>

<script>
export default {
  created() {
    this.test();  // 组件挂载时
  },
  methods: {
    test () {
      this.$http.get('/index')
        .then(response => {
          // 请求成功，处理响应数据
          console.log(response.data);
        })
        .catch(error => {
          // 请求失败，处理错误信息
          console.error(error);
        });
    },
  }
}
</script>
  
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

フロントエンドの起動: クロスドメイン アクセス テストを実施する
ここに画像の説明を挿入します

おすすめ

転載: blog.csdn.net/weixin_44319595/article/details/134478293
おすすめ
ランキング
OpenCV.Scharr梯度
Baiduのウェブサイトの共有プラグインを追加します。
マスターキーの顧客の過去の使用状況を確認
Python データ分析 - pandas ライブラリを使ってみる
需求分析 序章
Linuxの一般的なコマンドのレコード番号
VARの違い、3つのconstをしましょう
ワイドアイスIオフ
ゼロ計数期間にXOR（クロス）
matlab/python を使用して二重閾値法のエンドポイント検出を実行する
アーカイブ
もっと
2024-05-05(0)
2024-05-04(18)
2024-05-03(8)
2024-05-02(0)
2024-05-01(4)
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)

コードワールド

© 2018 codetd.com