Vue——实现与后端交互-526互联

展现方式：点击按钮向后端发起请求，获取数据并展示到前端

呈现效果：

实现方式如下：

第一步：使用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>