Python笔记_66_json简介_ajax简介_同源策略_默认组件_vue-cli_单文件组件_传递数据

最新推荐文章于 2020-12-22 04:39:43 发布
最新推荐文章于 2020-12-22 04:39:43 发布
阅读量378 收藏 1
点赞数
分类专栏： python笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangjunwen1017/article/details/97810731
版权

文章目录

通过axios实现数据请求

json简介

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式。

  • json的作用 ：在不同的系统平台，或不同编程语言之间传递数据。
json数据的语法

json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。

// 原生的js的json对象
var obj = {
  age:10,
  sex: '女',
  work:function(){
    return "好好学习",
  }
}


// json数据的对象格式,json数据格式,是没有方法的,只有属性：
{
    "name":"tom",
    "age":18
}

// json数据的数组格式：
["tom",18,"programmer"]


// 复杂的json格式数据可以包含对象和数组的写法。
{
  "name":"小明",
  "age":200,
  "is_delete": false,
  "fav":["code","eat","swim","read"],
  "son":{
    "name":"小小明",
    "age":100,
    "lve":["code","eat"]
  }
}

// 数组结构也可以作为json传输数据。
  • json文件的后缀是.json
  • json文件一般保存一个单一的json数据
  • json数据的属性不能是方法或者undefined，属性值只能：数值[整数,小数,布尔值]、字符串、json和数组
  • json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。
js中提供的json数据转换方法

javascript提供了一个JSON对象来操作json数据的数据转换.

方法参数返回值描述
stringifyjson对象字符串json对象转成字符串
parse字符串json对象字符串格式的json数据转成json对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    // json语法
    let emp = {
        "username":"xiaohui",
        "password":"1234567",
        "age":20
    };

    console.log(emp);
    console.log(typeof emp);

    // JSON对象提供对json格式数据的转换功能
    // stringify(json对象)  # 用于把json转换成字符串
    let result = JSON.stringify(emp);
    console.log(result);
    console.log(typeof result);

    // parse(字符串类型的json数据)  # 用于把字符串转成json对象
    let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
    console.log(json_str);
    console.log(typeof json_str);

    let json_obj = JSON.parse(json_str);
    console.log(json_obj);
    console.log(typeof json_obj);

    console.log(json_obj.age)
</script>
</body>
</html>
ajax简介

ajax，一般中文称之为：“阿贾克斯”，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。

ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。

ajax的使用

天气接口 ：http://wthrcdn.etouch.cn/weather_mini?city=城市名称
vue.js默认没有提供ajax功能的。所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。
注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。
　　
　　axios的下载地址：
https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供发送请求的常用方法有两个：axios.get() 和 axios.post()。

  • 发送get请求
    • 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com?id=200
    • 参数2：可选，json对象，要提供给数据接口的参数
    • 参数3：可选，json对象，请求头信息
 axios.get('服务器的资源地址',{ 			// http://www.baidu.com
        params:{
            参数名:'参数值', 				// id: 200,
        }
    
    }).then(function (response) { 		// 请求成功以后的回调函数
            console.log("请求成功");
            console.log(response.data); // 获取服务端提供的数据
    
    }).catch(function (error) {   		// 请求失败以后的回调函数
            console.log("请求失败");
            console.log(error.response);  // 获取错误信息
    });
  • 发送post请求
    • 参数1: 必填，字符串，请求的数据接口的url地址
    • 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
    • 参数3：可选，json对象，请求头信息
axios.post('服务器的资源地址',{
        username: 'xiaoming',
        password: '123456'
    },{
        responseData:"json",
    })
    .then(function (response) { 	// 请求成功以后的回调函数
      console.log(response);
    })
    .catch(function (error) {  		// 请求失败以后的回调函数
      console.log(error);
    });

Vue版本获取天气信息：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <button id="btn" @click="get_weather">点击获取天气</button>
    <p>{{weather_info}}</p>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            weather_info: {},
        },
        methods: {
            get_weather(){
                // 获取天气接口
                // axios.get("http://wthrcdn.etouch.cn/weather_mini?city=深圳"
                axios.get("http://wthrcdn.etouch.cn/weather_mini", {
                    // get请求的附带参数
                    params: {
                        "city": "深圳",
                    }
                }).then(response=>{
                    console.log(response.data);  // 获取接口数据
                    this.weather_info = response.data;
                }).catch(error=>{
                    console.log(error.response);  // 获取错误信息
                })
            }
        }
    })
</script>
</body>
</html>

在这里插入图片描述

同源策略

同源策略，是浏览器为了保护用户信息安全的一种安全机制。

所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，协议、域名(IP)和端口是否相同。

不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。
同源策略针对ajax的拦截，代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
<div id="app">
    <button id="btn" @click="get_music">搜索音乐</button>
</div>
<script>
    var vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            get_music(){
                axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=叶问宗师"
                ).then(response=>{
                    console.log(response.data);
                }).catch(error=>{
                    alert("出错了！");
                    console.log(error.response);
                })
            }
        }
    })
</script>
</body>
</html>

上面代码运行错误如下：

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E5%8F%B6%E9%97%AE%E5%AE%97%E5%B8%88' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面错误，关键词：Access-Control-Allow-Origin

只要出现这个关键词，就是访问受限。出现同源策略的拦截问题。

ajax跨域（跨源）方案之CORS

ajax跨域(跨源)方案：后端授权[CORS]，jsonp，服务端代理

CORS是一个W3C标准，全称是"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。

实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。

# django的视图

def post(request):

​    response = Response()

​    response .set_header("Access-Control-Allow-Origin","http://localhost:63342")

​    return response

// 在响应行信息里面设置以下内容：
Access-Control-Allow-Origin: ajax所在的域名地址

Access-Control-Allow-Origin: www.oldboy.cn  # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问

// * 表示任意源，表示允许任意源下的客户端的ajax都可以访问当前服务端信息
Access-Control-Allow-Origin: *

在这里插入图片描述
jsonp:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <p>严格来说：jsonp不是ajax技术，采用了script标签的加载跨域脚本的方式避开了同源策略</p>
    <p>jsonp技术的实现，是依靠服务端和浏览器端双方配合的</p>
    <p>api地址：https://suggest.taobao.com/sug?code=utf-8&q=商品名称&callback=cb</p>
    <button id="btn">点击搜索</button>

    <script>
        function hello(data) {
            console.log(data);
            alert(data.result);
        }

        let btn = document.getElementById("btn");
        btn.onclick = function () {
            // 1. 创建一个script标签
            script = document.createElement("script");
            // 2. 把script的src属性，设置为后端api的接口地址，而且后端接口返回的数据必须是js代码，
            // 这个代码中，必须调用一个客户端已经提前声明的函数。
            script.src = "https://suggest.taobao.com/sug?code=utf-8&q=咏春&callback=hello";
            document.head.appendChild(script);
        }
    </script>
</body>
</html>

总结：

  • 同源策略：浏览器的一种保护用户数据的一种安全机制。
    浏览器会限制ajax不能跨源访问其他源的数据地址。
    同源：判断两个通信的地址之间，是否协议，域名[IP]，端口一致。

    ajax： http://127.0.0.1/index.html
    api数据接口： http://localhost/index

    这两个是同源么？不是同源的。是否同源的判断依据不会根据电脑来判断，而是通过协议、域名、端口的字符串是否来判断。

  • ajax默认情况下会受到同源策略的影响，一旦受到影响会报错误如下：
    No 'Access-Control-Allow-Origin' header is present on the requested resource

  • 解决ajax只能同源访问数据接口的方式：

    1. CORS，跨域资源共享，在服务端的响应行中设置：
      Access-Control-Allow-Origin: 允许访问的域名地址
    2. jsonp
    3. 是否服务端代理
      思路：通过python来请求对应的服务器接口，获取到数据以后

组件化开发

组件（Component）是自定义封装的功能。在前端开发过程中，经常出现多个网页的功能是重复的，而且很多不同的页面之间，也存在同样的功能。
　　vue的组件有两种：默认组件[全局组件] 和 单文件组件

默认组件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/vue.js"></script>
    <style>
        .title{
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <myheader></myheader>
</div>
<script>

    // 1. 声明默认组件 Vue.component
    /*
    * 组件名称：不要大写，也不要和原生的HTML标签同名，更不要任意使用特殊的符号
    * Vue.component("组件名称", {
    *     template: "html代码",  // 组件的HTML结构代码
    *     data(){
    *         return {}
    *     },
    *     methods: {  // 组件的相关的js方法
    *         方法名(){
    *             // 逻辑代码
    *         }
    *     }
    * }
    * */
    // `` 是js的多行字符串
    // 组件里面的data的值，必须是一个匿名函数，函数的返回值必须是一个json对象
    Vue.component('myheader', {
        template: `<div>头部组件的HTML代码<h2 @click="demo" :class="className">{{message}}</h2></div>`,
        data(){
            return {
                "message": "hello, 我是组件里面的data数据",
                "className": "title"
            }
        },
        methods: {
            demo(){
                alert('你好！')
            }
        }
    });

    var vm = new Vue({
        el: "#app",
        data: {

        }
    })
</script>
</body>
</html>

在这里插入图片描述

Vue自动化工具（Vue-cli）

前面学习了普通组件以后，接下来我们继续学习单文件组件则需要提前先安装准备一些组件开发工具。否则无法使用和学习单文件组件。

一般情况下，单文件组件，我们运行在 自动化工具vue-CLI中，可以帮我们编译单文件组件。所以我们需要在系统中先搭建vue-CLI工具，

官网：https://cli.vuejs.org/zh/

  • 安装node.js
    Node.js是一个新的后端(后台)语言，它的语法和JavaScript类似，所以可以说它是属于前端的后端语言，后端语言和前端语言的区别：

    • 运行环境：后端语言一般运行在服务器端，前端语言运行在客户端的浏览器上

    • 功能：后端语言可以操作文件，可以读写数据库，前端语言不能操作文件，不能读写数据库。

    下载地址：https://nodejs.org/en/download/
    Node.js如果安装成功，可以查看Node.js的版本,在终端输入如下命令：
    node -v

  • npm
    在安装node.js完成后，在node.js中会同时帮我们安装一个npm包管理器npm。我们可以借助npm命令来安装node.js的包。这个工具相当于python的pip管理器。

npm install -g 包名              # 安装模块   -g表示全局安装，如果没有-g，则表示在当前项目安装
npm list                        # 查看当前目录下已安装的node包
npm view 包名 engines            # 查看包所依赖的Node的版本 
npm outdated                    # 检查包是否已经过时，命令会列出所有已过时的包
npm update 包名                  # 更新node包
npm uninstall 包名               # 卸载node包
npm 命令 -h                      # 查看指定命令的帮助文档

  • 安装Vue-cli
    sudo npm install -g @vue/cli

  • 使用Vue-cli初始化创建前端项目
    　生成一个基于 webpack 模板的新项目：
    vue init webpack 项目目录名
    例如：vue init webpack com

    然后启动vue项目
    cd com # 切换到项目目录下
    npm run dev # 启动node提供的测试http服务器

    浏览器访问：http://localhost:8080
    在这里插入图片描述

  • 项目目录结构

    • src：主开发目录，要开发的单文件组件全部在这个目录下的components目录下
    • static：静态资源目录，所有的css，js文件放在这个文件夹
    • dist：项目打包发布文件夹，最后要上线单文件项目文件都在这个文件夹中[后面打包项目,让项目中的vue组件经过编译变成js 代码以后,dist就出现了]
    • node_modules：是node的包目录
    • config：是配置目录
    • build：是项目打包时依赖的目录
    • src/router：路由,后面需要我们在使用Router路由的时候,自己声明.

  • 项目执行流程图
    在这里插入图片描述

单文件组件的使用

组件有两种：普通组件、单文件组件

普通组件的缺点：
html代码是作为js的字符串进行编写，所以组装和开发的时候不易理解，而且没有高亮效果。
普通组件用在小项目中非常合适，但是复杂的大项目中，如果把更多的组件放在html文件中，那么维护成本就会变得非常昂贵。
普通组件只是整合了js和html，但是css代码被剥离出去了。使用的时候的时候不好处理。
创建组件

在src目录下的components目录下新建一个Home.vue文件。
在这里插入图片描述
　　Home.vue文件主要包含三大块内容
　　在这里插入图片描述Home.vue文件：

<template>
    <div id="Home">
      <span @click="num--">-</span>
      <input type="text" size="1" v-model="num">
      <span @click="num++">+</span>
    </div>
</template>

<script>
  // 暴露对象
  export default {
    name: "Home",  // 组件名称
    data(){
      return {
        num: 0,
      }
    },
    components: {
    }
  }
</script>

<style>
  span{
    font-size: 30px
  }
</style>

在App.vue组件中调用上面的组件

<template>
  <div id="app">
    <Home></Home>
  </div>
</template>

<script>
import Home from './components/Home'

export default {
  name: 'App',
  components: {  // 子组件集合
    Home
  }
}
</script>

<style>
  span{
    border: 2px solid red;
  }
</style>

在开发vue项目之前，需要手动把 App.vue的HelloWorld组件代码以及默认的css样式清除。
　　上面的代码效果:
　　在这里插入图片描述

组件的嵌套

有时候开发vue项目时,页面也可以算是一个大组件,同时页面也可以分成多个子组件.因为,产生了父组件调用子组件的情况.
　　
　　例如,我们可以声明一个组件,作为父组件
　　在components/创建一个保存子组件的目录common，并创建一个Header.vue文件。
在这里插入图片描述Header.vue文件：

// 组件中代码必须写在同一个标签中
<template>
    <div>
      公共头部
      <p>{{message}}</p>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data(){
          return {
            message: "头部组件的data数据"
          }
        }
    }
</script>

<style>
  p{
    color: red;
  }
</style>

然后，在父组件中调用上面声明的子组件

<template>
    <div id="Home">
      <!--使用子组件-->
      <HeaderCommon></HeaderCommon>
      我是Home组件的template内容
      <span @click="num--">-</span>
      <input type="text" size="1" v-model="num">
      <span @click="num++">+</span>
    </div>
</template>

<script>
  // 导入子组件
  import HeaderCommon from './common/Header'
  // 暴露对象
  export default {
    name: "Home",  // 组件名称
    data(){
      return {
        num: 0,
      }
    },
    components: {  // 注册子组件
      HeaderCommon,
    }
  }
</script>

<style>
  span{
    font-size: 30px
  }

</style>

在这里插入图片描述

传递数据
父组件的数据传递给子组件

可以通过props属性来进行数据传递.
父传子传递数据三个步骤：

  • 在父组件中，调用子组件的组名处，使用属性值的方式往下传递数据

    <HeaderCommon :fnum="num" title="Home里面写的数据"></HeaderCommon>

    上面表示在父组件调用Menu子组件的时候传递了2个数据：
    如果要传递变量[变量可以各种类型的数据]，属性名左边必须加上冒号:，同时，属性名是自定义的，会在子组件中使用。
    如果要传递普通字符串数据，则不需要加上冒号:

  • 在子组件中接受上面父组件传递的数据，需要在vm组件对象中，使用props属性类接受。

<script>
    export default {
        name: "Header",
        data(){
          return {
            message: "头部组件的data数据"
          }
        },
      props: [
        "fnum",
        'title'
      ]
    }
</script>
  • 在子组件中的template中使用父组件传递过来的数据.
<template>
    <div>
      公共头部
      <p>{{message}}</p>
      <p>父组件传过来的fnum：{{fnum}}</p>
      <p>父组件传过来的title：{{title}}</p>
    </div>
</template>

效果：
在这里插入图片描述
步骤流程图：
在这里插入图片描述使用父组件传递数据给子组件时, 注意一下几点:

  • 传递数据是变量,则需要在属性左边添加冒号.

  • 传递数据是变量,这种数据称之为"动态数据传递"

  • 传递数据不是变量,这种数据称之为"静态数据传递"

  • 父组件中修改了数据,在子组件中会被同步修改,但是,子组件中的数据修改了,是不会影响到父组件中的数据.
    这种情况,在开发时,也被称为"单向数据流"

子组件传递数据给父组件

子传父传递数据步骤：

  • 在子组件中，通过 this.$emit()来调用父组件中定义的事件
<script>
    export default {
        name: "Header",
        data(){
          return {
            message: "头部组件的data数据"
          }
        },
        props: [
          "fnum",
          'title'
        ],
        watch: {
          fnum(){
            console.log(this.fnum);
            // this.$emit("父元素的自定义事件","要传递的数据");  // 通过this.$emit()方法，子组件可以把数据传递给父组件
            this.$emit("PostParentData", this.fnum);
          }
        }
    }
</script>
  • 父组件中声明一个和子组件 this.$emit("自定义事件名称")对应的事件属性。
<template>
    <div id="Home">
      <!--使用子组件-->
      <HeaderCommon @PostParentData="GetSonData" :fnum="num" title="Home里面写的数据"></HeaderCommon>
      我是Home组件的template内容
      <span @click="num--">-</span>
      <input type="text" size="1" v-model="num">
      <span @click="num++">+</span>
    </div>
</template>
  • 父组件中，声明的自定义方法，在事件被调用时执行。
<script>
  // 导入子组件
  import HeaderCommon from './common/Header'
  // 暴露对象
  export default {
    name: "Home",  // 组件名称
    data(){
      return {
        num: 0,
      }
    },
    components: {  // 注册子组件
      HeaderCommon,
    },
    methods: {
      GetSonData(message){
        console.log(message);
        this.num = message;
      }
    }
  }
</script>

效果：
在这里插入图片描述
　步骤流程图：
在这里插入图片描述

豆浆多放点糖
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-cli基本框架elementUi+axios+mock.zip_axios_vue_vue elementui_vue-
09-21
Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建 Vue 项目的基础架构。它简化了项目的初始化工作，提供了一套标准的构建配置，使得开发者能够更专注于编写应用代码而不是配置环境。Vue CLI 包含了许多实用的...
解决http://wthrcdn.etouch.cn/weather_mini?city=接口获取天气的返回字符串是乱码
Sugar_tea的专栏
04-23 3万+
最近在做一个类似天气预报的demo,数据是从http://wthrcdn.etouch.cn/weather_mini?city=获取，但是解析出来的字符串是乱码，通常更换编码类型就可以了，但是并不见效。所以最后才发现问题所在，这个接口的数据传给客户端的时候把数据压缩了，所以当我们在客户端获取到数据后要给他解压缩gzip即可，问题就解决了，现在把代码贴出来。 // 获取天气预报 public
"阿贾克斯"的作用
ljc7878的博客
08-20 6036
首先我们得先知道什么是“阿贾克斯”，“阿贾克斯”是ajax的国内翻译。Web应用的交互如Flickr,Backpack和Google在这方面已经有质的飞跃。这个术语源自描述从基于Web的应用到基于数据的应用的转换。在基于数据的应用中，用户需求的数据如联系人列表，可以从独立于实际网页的服务端取得并且可以被动态地写入网页中，给缓慢的Web应用体验着色使之像桌面应用一样。 实列讲解 我们创建
ajax（“阿贾克斯”）
yitouyouzi的博客
10-18 2310
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。 Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。 Ajax 是一种用于创建快速动态网页的技术。 Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。 通过在后台与服务器进行少量数据交...
做完阿贾克斯跳转到上一页面
lkg_vvk的专栏
08-05 731
window.location.href=document.referrer;
Python学习笔记——天气查询代码
HRWF1234的博客
07-26 751
天气查询代码1 # 此程序无法运行，因为中国天气网的api接口被关闭了 import urllib.request import json import pickle #建立城市字典 pickle_file = open(r'F:\codes\python\python\fishc\file\city_date.pkl', 'rb') city = pickle.load(pickl...
VueThink-master.zip_ThinkMaster_VueThink-master_coppermzg_json m
09-21
VueThink-master.zip_ThinkMaster_VueThink-master_coppermzg_json m是一个包含前端和后端源代码的压缩包，其核心是实现了一个基于Vue.js的前端应用与PHP+MySQL后端服务的交互。这个项目名为"VueThink"，可能是一个...
SpringBoot-vue-master.zip_spring_spring vue_springboot vue_vue
09-24
总的来说，"SpringBoot-vue-master"项目展示了如何利用SpringBoot和Vue.js构建一个完整的微服务全栈应用。这种组合不仅能够充分利用两者的优势，还能够快速迭代开发，提高开发效率。通过学习和实践这样的项目，...
vue2-elm-master.zip_DEMO_ELM_batqtq_elm vue框架_vue
09-23
1. **src** 目录：这是Vue项目的主要源代码目录，通常包括组件（components）、路由（routes）、store（状态管理）和其他辅助文件。 - **components**：这里包含了可复用的Vue组件，它们是构成应用程序的基本单元。...
卸载vue2.0并升级vue_cli3.0的实例讲解
10-15
npm uninstall vue-cli -g # 或者，如果你使用的是 Yarn yarn global remove vue-cli ``` 然后，检查 Vue 的版本以确认是否已成功卸载： ```bash vue -V # 或者 vue -version ``` **安装 Vue 3.0** 接下来，我们将...
JavaScript 阿贾克斯
m0_50266751的博客
10-06 1363
Ajax技术的核心是XMLHttpRequest对象 用于在后台与服务器交换数据 ajax 异步请求 主要用来请求数据 远程地址或者本地地址 传统的web交互是用户触发一个http请求服务器 然后服务器收到之后 做出响应到用户 哪怕是一个很小的交互 都会返回一个完整的HTML页面 而且用户每次都要浪费时间和带宽去重新读取整个页面 ajax是一种用于创建快速动态网页的技术 通过在后天与服务器进行少量数据交换 使页面实现异步更新 这意味着可以在不重新加载整个页面的情况下 对网页的某部分进行更新 同步请求 是等待
分享中国天气网的接口
lsyAndroid的专栏--解决实际开发中自己遇到的问题
05-30 3083
http://m.weather.com.cn/atad/101010100.html
带你10天精通vue框架（六）之通过axios实现数据请求
浮游的博客
06-18 290
4. 通过axios实现数据请求 vue.js默认没有提供ajax功能的。 所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。 注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。 插件： http://www.axios-js.com/ 下载地址： <script src="https://unpkg.com/axios/dist/axios.min.js"></script> axios提供发送请求的常用方法
vue中axios实现数据交互与跨域问题
☆╮123☆
11-26 876
1. 通过axios实现数据请求 vue.js默认没有提供ajax功能的。 所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。 注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。 下载地址： https://unpkg.com/axios@0.18.0/dist/axios.jshttps://unpkg.com/axios@0.18.0/dist/axios.min.js axios提供发送请求的常用方法有两个：axi
十月五周 总结笔记
Wolf_pfD的博客
12-05 408
十月五周 总结笔记 一、日程安排 星期 事务 周日 1、学习Vue.js中ajax部分(vue-resource、axios); 2、复习UML; 3、拆机ThinkPad E550c 周一 1、深入了解(vue-resoure、axios、jquery(ajax)); 2、解决跨域请求问题; 3、学习UML; 4、构思入党志愿书 周二 1、了解XSS跨站攻击; 2、学习...
Qt通过api获取天气信息
xuin的博客
05-11 4203
通过调用http://wthrcdn.etouch.cn/weather_mini?city=梅州获取json七天天气信息void MainWindow::on_weatherButton_clicked() { manage = new QNetworkAccessManager(this); QNetworkRequest network_request; /*设置发送数
几种常见的nodejs跨域解决方案
Pentoncos的博客
02-23 2453
在我们使用ajax进行前后端数据交互的时候，经常会遇到一个跨域的报错信息： Access to XMLHttpRequest at 'http://localhost:3000/cors' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on...
vue根据url获取内容axios_Vue之通过axios来实现数据请求
weixin_39621774的博客
12-22 823
Vue之通过axios来实现数据请求Vue.js是默认没有提供ajax功能的，所以一般我们会采用axios.js插件来实现ajax请求，完成与后端的数据交互。Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。简单来说就是前端最火最简单的一个http请求解决方案。需要注意的是，axios本质是javascript的ajax的封装，因此会受到同源策略的限制...
ajax请求报错 php开启跨域请求
热门推荐
xioxi
07-23 6万+
在被请求的php文件中加入请求头部 header('Access-Control-Allow-Origin: *');
SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve
最新发布
09-27
您的问题是如何在运行 Vue CLI 时设置环境变量 `NODE_OPTIONS` 为 `--openssl-legacy-provider`？您可以通过以下步骤来实现： 1. 打开终端或命令提示符窗口。 2. 进入您的 Vue 项目所在的目录。 3. 运行以下命令来设置环境变量并启动服务： ```bash SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve ``` 如果您使用的是 Linux 或 macOS 系统，请使用 `export` 命令： ```bash export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve ``` 这样，`NODE_OPTIONS` 环境变量就会被设置为 `--openssl-legacy-provider` 并且 Vue CLI 服务会启动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值