前端-vue框架

jiuyue_77

已于 2022-08-21 16:42:07 修改

阅读量215

点赞数 1

分类专栏：前端文章标签： vue 前端

于 2022-08-21 16:42:06 首次发布

本文链接：https://blog.csdn.net/jiuyue_77/article/details/126444634

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

前端-vue框架

文章目录

前端-vue框架
一、数据请求
二、axios框架
三、跨域访问

一、数据请求

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>

    // 1.AJAX即 “Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

    // 2.第三方数据接口
    // 在我们学习AJAX之前，我们首先得有一个服务器为我们提供数据。但是，我们还没有学到服务器端编程，所以现在暂时不能开发服务器端应用程序。
    // 我们可以使用一些其他公司，在网络上给我们提供的一些数据API（数据接口），作为服务器端，为我们提供数据。


    // 3.AJAX实例
    // XMLHttpRequest是 Ajax 应用程序的核心，它是一个 JavaScript 对象 。
    // 当客户端发出请求时，请求数据发送给XMLHttpRequest而不是直接发送给服务器。而且请求是异步发送的。
    // 并且，服务器不在将数据直接返回给客户端浏览器，而是返回给XMLHttpRequest对象。
    // 也就是说：XMLHttpRequest可以实现客户端与服务器只进行数据层面的交互，而不是视图层面的交互。

    //创建XMLHttpRequest核心对象
    let xhr = new XMLHttpRequest();
    //open()方法来完成Http请求（get方式）
    xhr.open("get", "http://api.tianapi.com/txapi/ncovcity/index?key=自己的key");
    //向服务器发送请求
    xhr.send(null);
    //使用onreadystatechange事件监听XMLHttpRequest对象状态。
    xhr.onreadystatechange = function () {
        //readyState属性代表了 XMLHttpRequest对象的五种状态。4状态为响应内容接收并解析完成
        if (xhr.readyState == 4) {
            //http请求会返回一个状态码。200为请求成功。
            if (xhr.status == 200) {
                //xhr.responseText就是服务器端返回的数据
                console.log(xhr.responseText);
            }
        }
    };

    




</script>


</html>

二、axios框架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

</body>

<script>

    // 在实际开发中，我们都使用一些封装好的ajax框架。 优秀的ajax框架很多，这里我们选用axios框架。
    // 原因是：Vue官方推荐使用的就是axios框架。 axios框架中文官网：http://www.axios-js.com/


    // 1.在学习axios之前，首先要知道：http请求方式有两种：get方式、post方式
    // get方式：显式提交。 将表单内容经过编码之后 ，通过URL发送， 即将提交参数写在URL地址的后面。
    // 使用get方式发送时有字符长度的限制（因为get方式请求的参数是放在请求头中的），不安全。

    // post方式：隐式提交。 将表单的内容通过http发送，即不将提交参数写在URL地址的后面，而是封装在请求体中。
    // post没有字符长度的限制，安全。（因为post方式请求的参数是放在请求体中的）

    //get方式请求，请求参数直接写在url的后面
    axios.get('http://api.tianapi.com/txapi/ncovcity/index?key=自己的key')
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });


    // axios的post方式请求
    //将json数据转成URI编码，并解析为xxx=xxx&xxx=xxx形式
    function transformRequest(data) {
        let ret = '';
        for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
        }
        return ret;
    }
    //post方式请求，请求参数不写在url的后面（需要将json对象参数转码，服务器端才能识别）
    axios.post('http://api.tianapi.com/txapi/ncovcity/index', transformRequest({
        key: '自己的key'
    }))
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });


    // 2.axios响应数据结构
    // axios响应的数据结构是一个json对象，此json对象结构如下：
    // {
    //     // `data` 由服务器提供的响应
    //     data: { },
    //     // `status` 来自服务器响应的 HTTP 状态码
    //     status: 200,
    //     // `statusText` 来自服务器响应的 HTTP 状态信息
    //     statusText: 'OK',
    //     // `headers` 服务器响应的头
    //     headers: { },
    //     // `config` 是为请求提供的配置信息
    //     config: { },
    //     // 'request' 请求信息
    //     request: { }
    // }

    // 3.在Vue-cli中使用axios
    // 添加axios模块：
    // npm install axios --save     //添加axios模块
    // npm install qs --save       //添加qs模块（用于处理post请求的参数解析）
    // 添加成功后，在package.json文件中就可以看到版本号
    // 在main.js文件中导入这些模块，但在实际应用中，配置语句还会再增加
    /*
        import axios from 'axios'
        import qs from 'qs'
        //设置axios的基础url部分
        axios.defaults.baseURL = 'http://api.tianapi.com/';
        //将axios挂载到vue实例上，使用时就可以 this.$axios 这样使用了
        Vue.prototype.$axios = axios;
        //将qs挂载到vue实例上，使用时就可以 this.$qs 这样使用了
        Vue.prototype.$qs = qs;
    */


</script>


</html>

三、跨域访问

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>

</body>

<script>

    // 1.同源策略，是由Netscape提出的一个著名的安全策略。它是浏览器最核心也最基本的安全策略。
    // 网络协议、服务器的IP地址、端口都相同，即为同源。否则，上面三个中有一个不同，即为不同源。不同源就会产生跨域问题


    // 2.跨域访问：当一个客户端访问服务器端时，如果客户端的协议、IP、端口三者之间的任一个，与服务器端的协议、IP、端口不同时，即为跨域访问。
    // 为了安全，AJAX默认不允许跨域访问

    // 运行此段代码即可在控制台看到跨域问题的报错
    axios.get('http://v.juhe.cn/toutiao/index?type=top&key=自己的key')
        .then(function (response) {
            console.log(response);
        })
        .catch(function (error) {
            console.log(error);
        });


    // 3.解决跨域问题
    // 服务器端设置允许跨域访问； 比如：CORS（跨域资源共享）代理方式
    // 前端通过代理进行跨域访问；比如：Vue-cli自带的跨域代理方式

    // 在Vue-cli配置文件中书写代理跨域配置（vue.config.js）
    // module.exports = {
    //     devServer: {
    //         port: 8080,
    //         proxy: {
    //             '/juheNews': {
    //                 target: 'http://v.juhe.cn/toutiao/index',    //需要跨域的url
    //                 ws: true,                                    //代理webSocket
    //                 changeOrigin: true,                          //允许跨域
    //                 pathRewrite: {
    //                     '^/juheNews': ''     //重写路径，所有接口的相同部分，在进行数据请求时只请求路径不同的部分
    //                 }
    //             }
    //         }
    //     }
    // }





</script>


</html>