Vue - 仓库、axios前后台交互及跨域问题

Vuex仓库

概念

vuex仓库是vue全局的数据仓库，好比一个单例，在任何组件中通过this.$store来共享这个仓库中的数据，完成跨组件间的信息交互。相当于一个临时的仓库，会在浏览器刷新后重置

使用

// 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 错误

django解决跨域问题

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',
]