Vue-与后端交互的三种方式、箭头函数-526互联

与后端交互的三种方式

前后端需要打通 -----》从前端发送ajax-----》ajax的核心：使用js发送http请求，接收返回

　　- 原生js，可以开启ajax，但是原生js开启，比较麻烦，需要做浏览器兼容，有坑（基本不写）

　　- jq，写了个兼容所有浏览器的 $.ajax()，不仅仅有ajax，还封装了很多dom操作

　　　　-如果vue中使用它，不合适

　　- axios：第三方的ajax包（我们使用这个）

　　- fetch：原生js发送ajax请求，有的浏览器也不兼容

1. 使用jquery发送ajax请求：

会出现的问题：

解决跨域问题，在请求头中：

views：

index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <button class="btn btn-success" @click="handleLoad">点我添加数据</button>
    <hr>
    姓名：{{ name }} 年龄：{{ age }}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleLoad() {
                 // 请求发送成功，后端执行了，但是被浏览器拦截了，因为有跨域问题
                 // 当前地址，如果向非浏览器地址栏中得地址发送请求，就会出现跨域
                // 定义一个新的变量来接受this，防止在内部函数调用的时候，出现指向错乱的问题
                var _this=this
                // ajax请求方式，jquery的ajax
                $.ajax({
                    // 请求的地址
                    url: 'http://127.0.0.1:8000/user/',
                    // 请求的方式
                    type: 'get',
                    success: function (res) {
                        // res是object类型
                        console.log(typeof res)
                        // 拿到后端的数据
                        _this.name = res.name
                        _this.age = res.age
                    }
                })
            }
        }
    })
</script>
</html>

结果：

2. 使用fetch

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
</head>
<body>
<div id="app">
    <button class="btn btn-success" @click="handleLoad">点我添加数据</button>
    <hr>
    姓名：{{ name }} 年龄：{{ age }}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            // 使用js的原生fetch(目前也不用）
            handleLoad() {
                var _this=this
                fetch('http://127.0.0.1:8000/user/').then(function (response) {
                // 将数据转为json类型
                return response.json();
                }).then(function (res) {
                 console.log(res); // 对象类型
                _this.name=res.name
                _this.age=res.age
                })

                // 箭头函数
                // var _this = this
                // fetch('http://127.0.0.1:8000/user/').then(response => response.json()).then(res => _this.name= res.name)
            }
        }
    })
</script>
</html>

结果：

3. 使用axios

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="/js/vue.js"></script>
     <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
    <button class="btn btn-success" @click="handleLoad">点我添加数据</button>
    <hr>
    姓名：{{ name }} 年龄：{{ age }}
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            name: '',
            age: '',
        },
        methods: {
            handleLoad() {
                //var _this=this
                //axios.get('http://127.0.0.1:8000/user/').then(function (res) {
                    // 数据在data中
                   // console.log(res.data)
                   // _this.name=res.data.name
                    //_this.age=res.data.age
                //})

                // 使用箭头函数
                axios.get('http://127.0.0.1:8000/user/').then(res =>{
                    console.log(res.data)
                    this.name=res.data.name
                    this.age=res.data.age
                })
            }
        }
    })
</script>
</html>