Vue——实现与后端交互
展现方式:点击按钮向后端发起请求,获取数据并展示到前端
呈现效果:
实现方式如下:
第一步:使用Django框架书写后端代码,返回数据(用户名与年龄)
视图类:
from rest_framework.views import APIView from rest_framework.response import Response class UserInfo(APIView): def get(self, request): res = Response({'username': 'zeng', 'age': 18}) # 解决跨域问题 res.headers = {'Access-Control-Allow-Origin': '*'} return res
——解决跨域问题方法:在响应头中书写:{'Access-Control-Allow-Origin': '*'}
路由配置:
urlpatterns = [ ... path('userinfo/', views.UserInfo.as_view()), ]
第二步:前端书写代码,接收后端传入数据(用户名,年龄)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="./js/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.min.js"></script> </head> <body> <div id="app"> <h1>与后端交互</h1> <button @click="handleLoad">加载用户信息</button> <p>用户名:{{username}}</p> <p>年龄:{{age}}</p> </div> </body> <script> var vm = new Vue({ el: '#app', data: { username: '', age: '' }, methods: { handleLoad() { // 后端发送请求,拿到数据,赋值给 username和age 页面就有了 // 1 axios发送请求 axios.get('http://127.0.0.1:8000/userinfo/') .then(res => { // console.log(res.data); //真正的响应体的数据在res.data this.username = res.data.username this.age = res.data.age }) // 错误信息显示 .catch(error => { console.log(error); }); } } }) </script> </html>