ヴュー - 倉庫、axiosの前面と背面の相互作用とクロスドメインの問題

Vuex倉庫

コンセプト

vuex倉庫VUEグローバルデータウェアハウス、このデータウェアハウス、クロスコンポーネント間の完全な情報交換を共有する任意のアセンブリ。$ストア内これによりシングルトン、など。一時的な倉庫の同等は、ブラウザの更新後にリセットされます

使用

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        // 设置任何组件都能访问的共享数据
        course_page:''
    },
    mutations: {
        // 通过外界的新值来修改仓库中的共享数据的值
        UpdateCoursePage(state,new_page){
            // 只能接收两个参数
            state.course_page=new_page
        }
    },
    actions: {}
})

// 仓库共享数据的获取与修改：在任何组件的逻辑中
// 获取
let cour_page = this.$store.state.course_page

// 直接修改
this.$store.state.course_page = '新值'

// 方法修改
this.$store.commit('UpdateCoursePage','新值')

対話axios前後の台湾

インストール：ターミナルプロジェクトディレクトリのフロントエンドで

npm install axios --save

構成：main.js

// 配置axios，完成ajax请求
import axios from 'axios'
Vue.prototype.$axios = axious;

使用：論理的な方法をアセンブリ

created(){  // 组件创建成功的钩子函数
    // 拿到要访问课程详情的课程id
    let id = this.$route.params.pk || this.$route.query.pk||1
    this.$axios({
        url:`http://127.0.0.1:8000/course/detail/${id}`,  // 后台接口
        method:'POST',  // 请求方式
    }).then(response => {  // 请求成功
        console.log('请求成功')
        console.log(response)
        this.course_ctx = response.data;  // 将后台数据赋值给前台变量完成页面渲染
    }).catch(error =>{  // 请求失败
        console.log('请求失败')
        console.log(error)
    })
}

クロスドメインの問題

原則

デフォルトでは、バックグラウンドサーバは、データを取得するために、独自のプログラムのためかもしれないクロスドメインの問題を他のプログラムをデータを提供します

含むサービスの手続き上の実行、：契約、IP、ポート、そのクロスドメインの問題のメンバーと同じではありません。クロスドメインの問題が発生すると、ブラウザがエラーCORSをスローします

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

1）プラグイン

pip install django-cors-headers

2）設定ファイルのsettings.py

# 注册app
INSTALLED_APPS = [
    'corsheaders'
]
# 添加中间件
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware'
]
# 允许跨域源，True表示允许所有跨域源
CORS_ORIGIN_ALLOW_ALL = False  

# 设置白名单，允许跨域的白名单
CORS_ORIGN_WHITELIST = [
    # 本机建议就配置127.0.0.1，127.0.0.1不等于localhost
    'http://127.0.0.1:8080',
    'http://localhost:8080',
]