1220クラスの概要

A、VueのプラグインAJAX：axios

1. プラグインをインストールします。

   >: cnpm install axios // 一定要在项目目录下执行该命令

2. 設定main.jsで

   import axios from 'axios'
   Vue.prototype.$axios = axios;  // JS原型、全局访问axios插件

3. 使用axios

   this.$axios({
       url:'http://127.0.0.1:8000/cars',  // 后端url
       methods:'get',  // 请求方式，相当于ajax中的type
   }).then(respons=>{  // then,回调函数，相当于ajax中的success，必须用箭头函数，this可以指代axios
       this.cars = response.data
   }).catch(error=>{  // 捕捉错误、网路状态码为4xx、5xx
       console.log(error)
   })

ジャンゴで二、CORSクロスドメインの問題

（A）同一生成元ポリシー

1. 相同：HTTP同じプロトコル、同じサーバのIPアドレス、アプリケーションポートに同じアプリ
2. クロスドメイン：プロトコル、IPアドレスが、別のポートを使用して、ある、クロスドメイン
3. Djangoのデフォルトの同一生成元ポリシー、クロスドメインの問題

• Vueのプロジェクト

  1. ブラウザの要求は、ドメイン名とポートプロジェクトであるVUE
  2. Vueのプロジェクト、バックエンドDjangoのリクエストドメインポートにアクセスしてください
  3. 対応するデータバックの後端

  彼らは、クロスドメインの問題を生成します

（B）溶液（CORSモジュール）

1. モジュールCORSをダウンロードしてインストールします

   >: pip install django-cors-headers

2. 登録CORSモジュール（settings.pyファイル）

   # settings.py
   INSTALLED_APPS = [
        'corsheaders'
   ]

3. コンフィギュレーション・ミドルウェア（settings.pyファイル）

   # settings.py
   MIDDLEWARE = [
       'corsheaders.middleware.CorsMiddleware'
   ]

4. クロス（settings.pyファイル）を可能にするために開きます

   # settings.py
   CORS_ORIGIN_ALLOW_ALL = True

三、Vue配置ElementUI

ElementUIは、ブートストラップに似たコンポーネントライブラリVue2.0迅速なビルドのウェブサイトのUIフレームワークに基づいています

1. プラグインをインストールするには、コマンドを実行します（これは、プロジェクトディレクトリの下に実行する必要があります）

   >: cnpm install element-ui 

2. main.js設定ファイル

   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);

3. ElementUIドキュメントの公式サイトでは、使用してコピー＆ペースト

四、Vueの設定jQueryとBootstarp

（A）の構成のjQuery

1. インストールのjQuery

   >: cnpm install jquery

2. vue.config.js設定ファイル（なしマニュアル新）

   const webpack = require("webpack");
   
   module.exports = {
       configureWebpack: {
           plugins: [
               new webpack.ProvidePlugin({
                   $: "jquery",
                   jQuery: "jquery",
                   "window.jQuery": "jquery",
                   Popper: ["popper.js", "default"]
               })
           ]
            }
   };

（B）の構成のブートストラップ

1. インストールのブートストラップ

   >: cnpm install bootstrap@3  // @3表示版本号，在终端中给python解释器安装则是 pip install bootstrap==3 ，3默认是3点几版本中最稳定的那个版本

2. main.js設定ファイル

   import "bootstrap"
   import "bootstrap/dist/css/bootstrap.css"