前端vue+后端Django通信实例，传递json数据

将前端 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 appINSTALLED_APPS += (  # noqa'home_application','mako_application','corsheaders',)# 添加自定义中间件MIDDLEWARE += (  # noqa'corsheaders.middleware.CorsMiddleware',)

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

# 白名单, 域名请按照前段实际配置修改CORS_ORIGIN_WHITELIST = ['http://localhost:8080',]# 允许跨域使用 cookieCORS_ALLOW_CREDENTIALS = True

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

#在本地开发环境下开启跨域允许if ENVIRONMENT == 'dev':# 跨域增加忽略CORS_ALLOW_CREDENTIALS = TrueCORS_ORIGIN_ALLOW_ALL = TrueCORS_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 = falseVue.use(VueAxios,axios);// 这里是添加的部分function getCsrftokenByCookie () {const cookie = document.cookie.split(';')// 获取csrftokenlet 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 = falseaxios.defaults.baseURL = 'http://dev.paas-class.bktencent.com:8000/'new Vue({render: h => h(App),}).$mount('#app')

前端vue+后端Django通信实例，传递json数据相关推荐

前端Vue+后端Django项目创建以及自动部署流程
所有的环境都安装完了之后,接下来就要创建项目了,完整的项目开发流程是由开发的同学先写完代码,然后交付给运维的同学部署到测试和生产环境.DevOps可以让整个流程自动化,开发的同学只需要稍微会一些工具就 ...
android post json格式,Android中post请求传递json数据给服务端的实例
在最近的项目中有个需求是这样的: 入参封装成JSON,EXAMPLE: { "uuid": "iamauuid","clientType": ...
android json传输数据到服务器,Android中post请求传递json数据给服务端的实例
在最近的项目中有个需求是这样的: 入参封装成JSON,EXAMPLE: { "uuid": "iamauuid", "clientType" ...
【前端Vue+后端Node.js+MySql】部署到服务器
[前端Vue+后端Node.js+MySql]部署到服务器文章目录 [前端Vue+后端Node.js+MySql]部署到服务器 1.买服务器 2.服务器操作 2.1.修改服务器密码,xshell登录 ...
手把手教你在局域网部署前端vue+后端php的网站服务
教你在局域网部署前端vue+后端php的网站服务 1.阅读对象本篇教程适合新手阅读,老手直接略过 2.教程难度初级本人水平有限,文章内容难免会出现问题,如果有问题欢迎指出,谢谢正文如今网站建 ...
MVC中利用ViewBag传递Json数据时的前端处理方法
** MVC中利用ViewBag传递Json数据时的前端处理方法 ** 用viewBag传递Json字符串到前端时,json字符串中的"会被转义为& quot,前端处理方法为@Htm ...
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术，前端使用vue2.6.0，后端使用.netcore3.1，支持跨平台、多租户
基于前端Vue后端.NetCore Web后台管理系统通用开本框架采用前后端分离技术,前端使用vue2.6.0,后端使用.netcore3.1,支持跨平台.多租户.支持MySQL/SQLServer/ ...
axios向springboot后台传递json数据
小白遇坑刚开始我是用get方法来传递json数据,但是总是报错:Required request body is missing,我人傻了,对着这个错误百度了半天,才发现,原来axios get请求 ...
SpringMVC绑定ajax传递json数据到pojo对象错误（400 Bad Request）
问题如标题所述,ajax向SpringMVC Controller传递JSON数据,遇到了错误"Failed to load resource: the server responded w ...

前端vue+后端Django通信实例，传递json数据

前端vue+后端Django通信实例，传递json数据相关推荐

最新文章

热门文章