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

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。