バックエンドデータとVUEの様々な構成と相互作用

アロー機能

ES5でのみ機能で

追加された機能とES6の矢印オブジェクトメソッド

function f1(){
    console.log('f1 run')
}
f1()

この通常の関数呼び出し、関数が呼び出され、呼び出し側ではないです、呼び出し側がメソッドを呼び出しました

あなたは、戻り値のリターンに書き込みをしていない場合は、彼が未定義のうちデフォルトの空、印刷物に戻ります。

もう一つの方法

let r1 = function(){
    return 10;
}

等号の右側が匿名R1にこの機能を割り当てて、匿名関数に相当し、この関数はまた、矢印の関数として書くことができます。

let r1 = () => {
    return 10;
}

戻り値は、省略することができた場合、矢印機能の内容は場合にのみ、

let r1 = () => '返回值'

矢印のみ機能は、パラメータは、（）を省略することができるときとき

let r1 = a => a*10

グローバルCSSやJSの設定

設定JS：

URLを設定するには、例として取ります

export default {
    base_url: 'http://localhost:8001',
}

あなたはこの世界のJSを呼び出すことができるようにしたい場合は、main.js内のファイルを設定する必要があります

import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

（Vueが他は.jsファイルなしので、ここで、設定を接尾辞を推奨されていない、CSSファイルは、ファイルの拡張子を追加することをお勧めします）

ここで私が説明したいと思いプロトタイプを：Vue.prototypeは、このプロパティを取得するために、なぜ我々はデフォルトである、$を増やす必要があり、このプロパティを呼び出すことができますので、すべてのVueインスタンス化されたオブジェクトのうち、このクラスのクラスを追加プロパティのVueに相当します同じのVUEメンバ変数を取るために好きではないのですか？だから、$を追加します。

設定CSS：

そして、CSSのフォルダフォルダ資産に建てられたように、JSは、その上にCSSファイルを作成します。

店舗・ウェアハウス・アプリケーション

VUEプロジェクトはindex.jsファイルフォルダ、店のものに使用倉庫があり、フォルダストアがあります。しかし、彼は、ある特徴的な、持っているページを更新し、初期値にリセットされます。この倉庫に構成何かが、また、いずれかのコンポーネントの論理で任意のテンプレート・コンポーネントにアクセスまたは変更することができます。

state: {
        car:{
            name:"待定",
            price:"0"
        }
    },

使用します。

在任何一个组件逻辑中：this.$store.state.car 访问或是修改
在任何一个组件模板中：$store.state.car 访问或是修改

アプリはそれを更新していないので、そのために彼の特性のため、倉庫は、モバイルAPPの開発に適しています

構築された環境要素をVUE

要素は、それはコンポーネントが使用するVUEに専念しているか、開発飢えています。

インストール

プロジェクトディレクトリの実装に

cnpm install element-ui

地球環境の設定

レーン設定main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);//这个是配置全局环境，不需要用，就已经存在了，就是直接可以用，不要调用什么东西了。

このについて

この機能

オブジェクト指向機能：これは、発信者であります

プロセス指向およびオブジェクト指向：これは、呼び出し元であってもよいです

プロセスのために：いないこの（矢印機能）

通常の書き込み

        created(){
            //这个this是vue对象，调用ele的组件，所以在ele组件内是拿不到vue对象的
            this.$message({
                message:'这个ele的弹出框',
                type:'success',
                duration:'1000',
                onClose(){
                    //这里没有拿到ele对象，为undefind，这个方法既属于面向过程也属于面向对象所以this异常
                    alert(this)
                }
            })
        }

それでは、どのようLELコンポーネントの内部に、VUEのオブジェクトを取得するには？

あなたは、まず、これを保持する変数を使用することができます。

created(){
            let _this=this
            this.$message({
                message:'这个ele的弹出框',
                type:'success',
                duration:'1000',
                onClose(){
                    alert(_this)//这里的_this就是vue对象了。
                }
            })
        }

別の、通常はこれがあります

アロー機能

created(){
            this.$message({
                message:'这个ele的弹出框',
                type:'success',
                duration:'1000',
                onClose:()=>{
                    alert(this)//函数内部没有this，就会往上一级找
                }
            })
        }

VUEビルドJSとJQ環境

インストールのjqueryの

cnpm install jquery

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

cnpm install bootstrap@3

設定環境

// 加载bs的逻辑
import "bootstrap"  
//配置bs的样式
import "bootstrap/dist/css/bootstrap.css"

設定jqueryの

プロジェクトはとても自分の手を構築するために、自動的にコンフィギュレーションファイルvue.config.jsファイルを生成するお手伝いをするつもりはない、名前はこれをする必要があります！

// 修改该文件内容后，只有重启，才能同步配置
const webpack = require("webpack");

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

設定を有効にするには、プロジェクトを再起動するために行われなければならない後に覚えておいてください。

独立したフロントとデータの相互作用の後端

我々は、データ、前と使用後に目的を達成するためにジャンゴ前端と後端が分離されていない、フロントエンドのテンプレートの構文は、書き込みに使用することができ、そしてそれらは分離の場合に関係しているように、今私たちは、書き込みにフロントエンドVUEを使用していた前に、どのように対話します。

彼は、DOM操作が収まらない特徴があるので、まず、私たちは、AJAXを使用することはお勧めしません。

用axios

インストール

cnpm install axios

main.js設定

import Axios from 'axios'
Vue.prototype.$axios = Axios;

その後、VUEでコンポーネントを使用することができます

created(){
            this.$axios({
                //拿取全局的js文件 
                url: this.$settings.base_url + '/cars/',
                method: 'get',
                params: {
                },
                data: {
                },
                //当请求发送成功的时候就会调用then，失败的时候就会调用catch
            }).then((response) => {
                this.cars_data = response.data;
                }).catch(error =>{
                    console.log(error)
            })
        }

get要求データが使用されていない場合は、唯一のパラメータの受け渡しに使用のparams、スプライシングされたデータのURLを使用します

2は、ポストの要求に使用されている場合は、データはデータを運ぶための要求します

VUEプロジェクト開始がポートを占有する必要があり、8000を言い、また、8001などのポートを取る必要が開始ジャンゴさて問題は、データのVUEは、どのように行うジャンゴに送信されますか？これは、クロスドメインの問題を伴います

ジャンゴクロスドメインの問題

まず、プラグインをインストールしてください

pip intstall django-cors-headers

次に、設定ファイルの設定を構成する必要があります

#注册app
INSTALLED_APPS= [
    'corsheaders'
]

#添加中间件
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware'
]

#允许跨域源
CORS_ORIGIN_ALLOW_ALL = True

ここでは、問題は、クロスサイトリクエストフォージェリの問題を解決するために使用されたCSRFを伴う開発側の周りではない、別のプロジェクトを行い、一つの問題である、彼の原則は、フォーム、フォームの前に自動的に達成することです隠された入力ボックスを生成し、このフォームが私を許可されていない形成を識別するために、彼にランダムに生成された文字列を与えました。

このCSRF文字列を受信する方法にVUE、フロントを分離後縁の場合はそう？答えは、我々は古い方法を使用できるように、何の受信、受信するための方法はありません、はい、3つのコメントCSRFチェックミドルウェアの理由があります。

フロントエンドCSRFに合格していません
このように比較的低いセキュリティチェックCSRF
それを交換するためのより良い方法があります。

どのような種類については、後で話します。

だから我々は唯一うまくコメントアウト。

それでは、どの前と終了後のデータの相互作用を達成するには？

url: this.$settings.base_url + '/cars/',

これは、バックエンド・アクセスURLであり、そして、対応する層をルーティングDjangoのURL（URLの）内部の構成します

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^cars/', views.cars),
    url(r'^login/', views.login),
    url(r'^register/', views.register),
]

そして、うまく対応するビュー機能を呼び出します。

要求は、ピック方法の後端実施形態の遠位端上の2種類のデータを運びます

def login(request):
    if request.method == 'POST':
        print(request.body)#如果是 post请求的话，前端data中带的数据都在这里面
        
    if request.method == 'GET':
        print(request.GET)#如果是 get请求的话，前端params中带的数据都在这里面
        
    return JsonResponse(back_dic)

そして、返すデータは、フロントエンドで受信され、その後axios

then(response => {
                    this.$message({
                        //接受的数据就在 response.data中
                        message: response.data.msg,
                        type: 'warning'
                    });

VUE用途クッキー

インストール

cnpm install vue-cookies

環境設定

import Cookies from 'vue-cookies'
Vue.prototype.$cookies = Cookies;

クッキーの使用

 // 有响应的登录认证码，存储在cookie中
                    // 设置：set(key, val, exp)
                    // 取值：get(key)
                    // 删除：remove(key)
                    let token =  1000;
                    if (token) {
                        //设置cookies，第一个参数是键，第二个是值，第三个是过期时间。
                         this.$cookies.set('token', token, '2d');

                        //拿取cookies
                         console.log(this.$cookies.get('token'));
                        
                        //删除cookies
                         this.$cookies.remove('token');