将前端 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')