将前端 Vue 项目和后端 Django 框架联系起来，让他们之间可以通过AXIOS进行通信并且传输数据，在 前端Vue项目中写一个请求函数，这个函数会请求/hello 接口, Vue 项目收到后端返回过来的json格式数据 {"hello": "world"} 。

第一步：前端VUE准备

1.在相应目录下进入命令行，然后输入命令新建项目：

vue create projectname（项目名字）

2.执行运行命令（前端依赖于node环境）：

npm run serve

3.控制台会输出本地网页的地址，默认是localhost 8080端口，用浏览器打开就是vue界面：

App running at:

  - Local:   http://localhost:8080/

  - Network: http://192.168.255.10:8080/

  Note that the development build is not optimized.

  To create a production build, run npm run build.

 

第二步：安装axios库

安装命令：npm install --save axios vue-axios

第三步：前端请求配置

在前端vue项目 src/main.js中引入axios库和请求前缀（即url）

import Vue from 'vue'

import App from './App.vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://XXXXXXXX // axios 发起请求的前缀

然后在前端编写vue代码： HelloWorld.vue 界面初始化的时候，会调用我们的 test 方法，test 向后端/hello/的路由发送一个 Post 请求。并将后端返回的内容打印到控制台。

<script>

export default {

  name: 'HelloWorld',

  props: {

    msg: String

  },

  mounted () {

    this.test()

  },

  methods: {

    test: function () {

      this.axios({

        url: '/hello/',

        method: 'post',

        responseType: 'json' // 默认的

      }).then(res => {

        var jsondata = JSON.parse(JSON.stringify(res.data))

        console.log(jsondata)

      })

    }

  }

}

</script>

第四步：后端配置，通过中间件解决前后端跨域问题

1.在/config/default.py 文件中添加如下配置：

# 将corsheaders添加为我们的django app

INSTALLED_APPS += (  # noqa

    'home_application',

    'mako_application',

    'corsheaders',

)



# 添加自定义中间件

MIDDLEWARE += (  # noqa

    'corsheaders.middleware.CorsMiddleware',

)

2.在config/stag.py 文件中追加如下配置：

# 白名单, 域名请按照前段实际配置修改

CORS_ORIGIN_WHITELIST = [

    'http://localhost:8080',

]

# 允许跨域使用 cookie

CORS_ALLOW_CREDENTIALS = True

在项目根目录下 setting.py 文件中添加我们的跨域配置：

#在本地开发环境下开启跨域允许

if ENVIRONMENT == 'dev':

    # 跨域增加忽略

    CORS_ALLOW_CREDENTIALS = True

    CORS_ORIGIN_ALLOW_ALL = True

    CORS_ORIGIN_WHITELIST = [

        'http://localhost:8080',

    ]



    CORS_ALLOW_METHODS = (

        'DELETE',

        'GET',

        'OPTIONS',

        'PATCH',

        'POST',

        'PUT',

        'VIEW',

    )



    CORS_ALLOW_HEADERS = (

        'accept',

        'accept-encoding',

        'authorization',

        'content-type',

        'dnt',

        'origin',

        'user-agent',

        'x-csrftoken',

        'x-requested-with',

)

第五步：CSRF token配置

在 Vue 项目中/src/main.js中添加相关的配置，然后前端就可以获取后端的json数据啦，啦啦啦！

import Vue from 'vue'

import App from './App.vue'

import axios from 'axios'

import VueAxios from 'vue-axios'

Vue.config.productionTip = false

Vue.use(VueAxios,axios);

// 这里是添加的部分

function getCsrftokenByCookie () {

    const cookie = document.cookie.split(';')

    // 获取csrftoken

    let csrftoken = ''

    for (const i in cookie) {

        if (cookie[i].indexOf('csrftoken') !== -1) {

            csrftoken = cookie[i].split('=')[1]

        }

    }

    return csrftoken

}

// 每次请求头都带上我们的X-CSRFToken 信息

axios.defaults.headers.common['X-CSRFToken'] = getCsrftokenByCookie();

axios.defaults.withCredentials = true;

Vue.config.productionTip = false

axios.defaults.baseURL = 'http://dev.paas-class.bktencent.com:8000/'



new Vue({

  render: h => h(App),

}).$mount('#app')