精华内容
下载资源
问答
  • 本篇文章主要介绍了vue 配合vue-resource调用接口获取数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • vue 调用接口渲染数据

    千次阅读 2019-05-18 18:19:16
    首先我们用的是axios 进行调用接口的。 根据项目根目录进行安装 npm install axios -S 还有他的相关配置 1.在config/index.js中 如下 proxyTable: { '/api': { // '/api': 匹配项 target: ...

    首先我们用的是axios 进行调用接口的。

    根据项目根目录进行安装

    npm install axios -S

    还有他的相关配置

    1.在config/index.js中  如下

    proxyTable: {
           '/api': {                                       // '/api': 匹配项
                target: "http://gohome.c.soonboom.com",   // 接口的域名
                changeOrigin: true,     // 如果接口跨域,需要进行这个参数配置
                secure: false,          // 如果是https接口,需要配置这个参数
                pathRewrite: {          // 如果接口本身没有 /api 需要通过pathRewrite来重写了地址, 如果有则不需要页面重写
                    "^/api": "/api"         // 把匹配到的  api 替换成相应的值
                }
            }
        },

    2.在src/mian.js中修改如下

    import axios from 'axios'
    Vue.prototype.$axios = axios

    我们在调用接口的时候可以用GET和POST可以进行带参数。

    POST:

    GET:

    这个一个点击事件的方法

     

    展开全文
  • vue 请求接口获取数据

    千次阅读 2020-12-01 16:52:02
    vue 请求接口获取数据 1.链接:https://www.cnblogs.com/kymming/p/6484626.html <!doctype html> <html> <head> <meta charset="UTF-8"> <title>获取图片列表</title> <...

    vue 请求接口获取数据

    1.链接:https://www.cnblogs.com/kymming/p/6484626.html

    <!doctype html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title>获取图片列表</title>
            <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />       
        </head>
        <body>
            <div id="app">
                <ul>
                    <li>
                        <img v-for="imgItem in imgList" v-bind:src="imgItem.img" alt="" width="100%" height="100%"/>
                    </li>
                </ul>
            </div>       
        </body>
        <script src="//cdn.bootcss.com/vue/2.1.0/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="//cdn.bootcss.com/vue-resource/1.0.3/vue-resource.js" type="text/javascript" charset="utf-8"></script>
        <script>
            var demo=new Vue({
                el:'#app',
                data: {
                    imgList:[],
                    getImgUrl: ''    //存数据接口               
                },
                created: function(){
                    this.getImg()              //定义方法
                },
                methods: {
                    getImg: function(){
                        var that = this;      
                        that.$http({           //调用接口
                            method:'GET',
                            url:this.getImgUrl  //this指data
                        }).then(function(response){  //接口返回数据
                            this.imgList=response.data;                        
                        },function(error){
                        })
                    }
                }
            })
        </script>
    </html>
    
    展开全文
  • VUE调用接口返回数据库数据

    千次阅读 2020-10-30 14:39:05
    一.jsonp原理: 略:动态创建script标签... ②调用。通过<scriptsrc=“http://127.0.0.1/getscript”></script> 二.数据库请求的接口和返回值的格式这种感jio: 接口地址: http://xxx/xx/getAl...

    一.jsonp原理:

          略:动态创建script标签,实现跨域。。。

          略:结合node手写jsonp服务器。。。

                 ①nser快速创建一个node服务器,判断请求路径后返回脚本字符串

                 ②调用。通过<script src=“http://127.0.0.1/getscript”></script>

    二.数据库请求的接口和返回值的格式这种感jio:

    接口地址:http://xxx/xx/getAllList
    作用:获取数据库列表
    请求方式:get
    传入参数:木有
    返回数据格式:

    {

        status:0 //成功返回0

        -message:[

              {

                   xx1:xxxx

                   xx2:xxxx

              },

              ...

         ]

    }

    实现:(没接口没测,大体就是这样的suo~~~JSONP的没做)

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>Document</title>

        <script src="https://unpkg.com/vue/dist/vue.min.js"></script>

    </head>

    <body>

        <div id="app">

            <input type="text" name="name">

            <input type="text" name="age">

            <input type="button" @click="add">

            <div v-for="(item, index) in list" :key="item.id"></div>

            <table>

                <thead>

                <tr>

                    <th>ID</th>

                    <th>NAME</th>

                    <th>AGE</th>

                </tr>

                </thead>

                <tbody>

                <tr  v-for="(item, index) in list" :key="item.id">

                    <td>{{item.id}}</td>

                    <td>{{item.name}}</td>

                    <td>{{item.age}}</td>

                </tr>

                </tbody>

                

                </table>

        </div>

     

        <script>

     

            var vm=new Vue({

                el:'#app',

                data:{

                    list:[

                        {name:xx1,age:12},

                        {name:xx2,age:23}

                    ]

                },

                created:function (){

                    this.getAllList//刷新页面

                },

                methods:{

                    getAllList(){

                        this.$http.get('http://xxx/xx/getAllList').then((result)=>{

                            var result = result.body

                            if(result.status===0){

                                this.list=result.message

                            }else{

                                alert("shibai")

                            }

                        })

                    },

                    add(){

                        this.$http.post('http://xxx/xx/addProduct',{name:this.name},{emulateJSON:true}).then((result)=>{//emulateJSON可以定义为全局启用

                            var result = result.body

                            if(result.status===0){

                                this.getAllList

                            }else{

                                alert("shibai")

                            }

                        })

                    },

                    del(id){

                        this.$http.get('http://xxx/xx/delProduct'+id).then((result)=>{

                            var result = result.body

                            if(result.status===0){

                                this.getAllList

                            }else{

                                alert("shibai")

                            }

                        })

                    }

            })

        </script>

     

    </body>

    </html>

     

     

     

    展开全文
  • 一、通过api接口获取数据 在vuejs中请求接口,大体分为两种方式:vue-source和axios。它们都是经过良好封装的http请求插件。 下文将简单介绍一下使用方法。 1. vue-source 略讲,详情见这篇博客。 安装 首先,...

    前言

    本文基于vue-cli3

    一、通过api接口获取数据

    vuejs中请求接口,大体分为两种方式:vue-sourceaxios。它们都是经过良好封装的http请求插件。

    下文将简单介绍一下使用方法。

    1. vue-source

    略讲,详情见这篇博客

    安装

    首先,安装该插件:

     

    npm install vue-source --save
    

    然后,在项目src/main.js中,通过全局方法Vue.use()使用该插件:

     

    import VueSource from 'vue-source'
    
    Vue.use(VueSource)
    

    使用

    在data中定义好接口和接收的数据类型,然后,调用this.$http.get()函数进行get请求即可,代码如下:

     

    data () {
      return {
        apiUrl: 'https://xxxxx',
        users: []
      }
    },
    methods: {
    },
    created () {
      this.$http.get(this.apiUrl).then((response) => {
        console.log(response)
      }, (error) => {
        console.log('error:', error)
      })
    }
    

    代码解释:$http.get().then()是get函数请求返回后才调用的函数。then()函数的中两个参数是匿名函数。上述代码使用了ES6新增了箭头函数(即参数指向函数),也可以写成以下形式:

     

    this.$http.get(this.apiUrl).then(function (response) {
      console.log(response)
    }, function (error) {
      console.log('error:', error)
    })
    

    2. axios

    安装

     

    npm install axios
    

    使用

    axios库的主要请求函数有:

     

    axios.request(config)
    axios.get(url[, config])  // 表示 axios.get(url, config) 和 axios.get(url) 都被允许
    axios.delete(url[, config])
    axios.head(url[, config])
    axios.post(url[, data[, config]])
    axios.put(url[, data[, config]])
    axios.patch(url[, data[, config]])
    

    config对象的详细属性、请求的后续then()/catch()操作、配置的默认值/defaults等等,见 Axios 中文说明

    (以下纯属个人观点

    为了更好地进行模块间的解耦,在vue-cli3构建的项目的src\目录下,创建api\目录,将项目所有需要进行的请求的配置封装到该目录下。

    此处示例只封装到一个api.js文件,如下:

     

    // src/api/api.js
    import axios from 'axios'
    
    // 允许跨域携带cookie
    // axios.defaults.withCredentials = true;
    
    export const uploadelf = () => {
        return axios.request({
            method: 'post',
            url: 'http://xxxxx.xxx/api/uploadelf'
        })
    }
    
    export const start = () => {
        return axios.request({
            method: 'get',
            url: 'http://xxxxx.xxx/api/start'
        })
    }
    
    export const getDisassemble = (funName = 'main') => {
        return axios.request({
            method: 'post',
            url: 'http://xxxxx.xxx/api/disassemble',
            data: {
                funName
            }
        })
    }
    

    其中,每个函数返回一个调用请求后的对象,相当于设计模式中的工厂方法

    如此封装的好处是,用户使用时,并不需要知道某个请求的请求url和请求方式

    当你需要在其它模块中进行相应的请求时,只需要import导入api.js中相应的函数变量并调用即可,如:

     

    // src/view/main.vue
    
    ...
    
    <script>
    // 导入相应的请求函数
    import {uploadelf, start, getDisassemble} from '../api/api'
    
    export default {
      data() {
        return {
          assemb: []
        }
      },
      methods: {
        click_uploadelf() {
          // 调用该工厂方法进行请求返回一个对象,再通过对象的then(), catch()方法进行后续操作
          uploadelf().then(resp => {
            console.log('uploadelf --->', resp.data);
          }).catch(error => {
            console.log(error);
          });
        },
        click_start() {
          start().then(resp => {
            console.log('start --->', resp.data);
          }).catch(error => {
            console.log(error);
          });
        },
        click_getDisassemble() {
          getDisassemble('main').then(resp => {
            console.log('getDisassemble --->', resp.data);
            this.assemb = resp.data.message;
          }).catch(error => {
            console.log(error);
          });
        }
      }
    }
    </script>
    

    补充

    js的请求属于异步操作(不需要等请求完成,函数直接执行结束)。所以,需要通过回调函数来实现请求完成的后续操作。

    axios主要利用ES6 Promise来实现异步请求的后续操作。

    同时,异步请求会导致请求并行的情况。多个请求之前不能太接近。

    二、跨域问题

    1.问题

    如果是本机localhost:8000测试,可能会出现跨域问题,打开浏览器会看到如下报错:

    跨域问题.png

    2.补充

    • 当两个域具有相同的协议(如http), 相同的端口(如80),相同的域名如www.baidu.com,那么我们就可以认为它们是在相同的域中(协议,域名,端口都必须相同)。

    • 跨域,就是指协议、域名、端口其中一个或多个不一致的情况下,从当前域去访问另一个域。

    • 出于安全考虑(防止跨域攻击 XSS、CSRF),浏览器会禁止跨域的请求访问。其实,同源策略是一种约定,它也是浏览器最核心也最基本的安全功能。

    3.解决

    跨域问题解决有很多方式,以下主要讲两种。

    CROS(跨域资源共享)

    前端Vue,设置axios允许跨域带cookie(默认不带cookie),如下:

     

    // axios全局配置,允许跨域带cookie
    axios.defaults.withCredentials = true;
    

    后端:

    跨域请求后的响应头中需要设置:

    • Access-Control-Allow-Origin为发起请求的主机地址。

    • Access-Control-Allow-Credentials,当它被设置为true时,允许跨域带cookie,但此时Access-Control-Allow-Origin不能为通配符*

    • Access-Control-Allow-Headers,设置跨域请求允许的请求头。

    • Access-Control-Allow-Methods,设置跨域请求允许的请求方式。

    Vue代理

    vue-cli自带代理功能,由node服务器实现。

    在项目根目录下新增vue.config.js项目配置文件,然后配置代理:

     

    // 修改配置后一定要 重新npm run serve !!!
    module.exports = {
        devServer: {
            // vue项目启动时的ip地址和端口
            host: 'localhost',
            port: 8000,
            proxy: {
                // 匹配所有以 /api 开头的url
                '/api': {
                    // 请求的目标主机
                    target: 'http://dev3.airdb.io:8080',
                    changeOrigin: true,
                    ws: true
                    // 这样重写会把路径中 /api 消去
                    // pathRewrite: {
                    //   '^/api': '/api'
                    // }
                }
            }
        }
    }
    

    设置代理后,本地nodejs服务器会将目标主机的url代理到vue项目的url

    如:

    访问http://dev3.airdb.io:8080,会转变成访问http://localhost:8080,再由http://localhost:8080转发请求到http://dev3.airdb.io:8080

    这样,就成了同域请求,浏览器不会进行限制。但实际上,还是请求了目标主机,只是欺骗了浏览器。

    由于Vue代理需要利用node服务器,所以只适用于本地npm run serve调试时。

    当项目部署到服务器时,可以使用CROS方式、nginx反向代理等方式。

    nginx反向代理

    只需要在nginx.conf配置文件的vue项目对应的server中,添加:

     

    # 匹配vue项目中所有以/api开头的请求url
    location /api {
        include  uwsgi_params;
        proxy_pass   http://0.0.0.0:8081; # 要代理访问的后端url
    }
    

    完整示例如下:

     

    server {
        listen       8000;
        listen       80;
        server_name  _;
        root         /pathto/vue_project/;
    
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
    
        location / {
            index index.html;
        }
    
        error_page 404 /404.html;
            location = /40x.html {
        }
    
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    
        location /api {
            include  uwsgi_params;
            proxy_pass   http://0.0.0.0:8081;
        }
    }



    作者:dounine
    链接:https://www.jianshu.com/p/e935a8f81971
    来源:简书
    著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

    展开全文
  • Vue通过接口获取数据在列表展示

    千次阅读 2020-04-23 10:42:25
    1、引入JS <!--bootstrap--> ... if(json.status===0){ this.list = json.message } else{ alert('获取数据失败') } }) } } })
  • 今天晚上代码上线,已测试通过,抽时间整理一下。 点击页面有loading特效,axios设置超时时间请求头。 一:页面展示 使用element组件 ...el-tabs :tab-position="tabPosition" style="height: 100%;...
  • 经常需要判断当前获取数据是否为空,为空时引用el-empty显示空状态效果,但常常接口数据会慢一步查询到数据,往往页面出现的效果是先显示空状态效果,等接口数据获取到赋值后再刷出数据页面效果,解决此类问题方法:...
  • 问题描述: ...思路:使用Promise,将调用接口的函数转变为一个Promise对象,定义全局变量数组,在循环中将Promise对象push到数组中,然 后用Promise.all()执行接口调用,在调用成功后执行绘图操...
  • vue调用接口同步实现

    千次阅读 2021-02-25 11:40:37
    实现字典项数据后端获取,始终无法同步返回结果,在网上找了好多vue同步接口的方法,都是说在方法前加async,在接口名前加await,自己试了好长时间也不好使,最终只能选择用回调函数的方法来达到方法的同步调用,回...
  • 今天小编就为大家分享一篇使用Vue实现调用接口加载页面初始数据,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 给项目安装依赖三、在vue中调用接口获取数据总结 前言 在vue中如何使用NeteaseCloudMusicApi 今天我们要实现的就是调用NeteaseCloudMusicApi接口并获取我们所需要的数据 这里我们获取的是banner(轮播图数据),...
  • 我在做项目的时候遇到这个问题,调用后台接口获取数据赋值给数组列表并且重新渲染DOM元素内容 其实是想通过js给DOM元素...我觉得应该是调用接口获取数据是异步操作,所以此时获取不到元素,我就在获取子元素的外边套了
  • ``` axios.get(url).then(function (res) { if (res.status=='200'){ console.log(res.data.data.name); this.movie = res.data.data;...```已经对data赋值了,但是页面的数据还是没更新,还需要操作dom吗
  • Vue调用接口请求头增加参数

    千次阅读 2020-10-11 16:22:46
    告诉用户 if (res.status === -404) { console.warn(res.msg) } return res } // 共用方法获取签名 function getSecret() { let nonce = getNonce() let timestamp = getTimestamp() let secret = sha1(api_secret +...
  • <p style="text-align:center"><img alt="" height="257" src="https://img-ask.csdnimg.cn/upload/1605080107836.png" width="588" /></p> <p style="text-align:center"><img alt="" height="162... ... ... <p> </p>
  • Vue接口调用

    万次阅读 2019-03-04 21:13:41
    Vue中接口的调用 1.main.js中代码 // 调接口相当于ajax import axios from 'axios' Vue.prototype.$axios = axios 2.webpack.config.js文件中...target中的对应路径改为自己需要调用接口地址,到端口号之前 3.logi...
  • vue如何去调用后台的接口然后传回前台赋值给变量 后台接口为:getDeptType 通过前台的deptLevel处理
  • 循环中调用异步接口获取数据

    千次阅读 2020-07-17 10:07:33
    遇到这样一个需求:调用接口,返回一个新闻列表,再循环这个新闻列表,用每个新闻的id异步请求这个新闻的视频地址,这就需要在循环里调用接口。如果用for循环,接口还没请求完成,for循环就已经执行完了。所以改成...
  • 主要介绍了vue beforeRouteEnter 异步获取数据给实例问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vue 接口调用返回的数据未渲染问题

    千次阅读 2020-02-25 12:35:38
    如果在实例创建之后添加新的属性到实例上,他不会触发视图更新。 官方说明: ... 下面这段是官方的一段 当你把一个普通的 JavaScript 对象传入 Vue 实例作为d...
  • vue 使用axios获取接口数据

    千次阅读 2020-06-12 16:25:13
    示例代码 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head>...--引入最新的vue稳定版本--> <script type="text/javascript" src="https://unp.
  • Vue调用百度接口做百度搜索

    千次阅读 2018-09-06 01:18:00
    这两天由于学习需要,需要用vue来调用api接口,但是以前没怎么接触过用vue调用接口,不会没关系,发挥我们强大的学习能力,都不是事,学习了半天基本也就可以初级上手了,写篇随笔记录下来,方便以后回顾。...
  • <!... <... <head>...Vue 测试实例 - 菜鸟教程</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <script src="https://cdn.staticfi
  • 我是一个刚用vue的小菜鸟,使用axios请求接口,想将获取数据封装到页面上的dataList属性里,可是页面报错了 import MD5 from '../assets/js/MD5Util.js'; export default { name: 'awardVue', data () { ...
  • 一个页面刷新后会调用一次模糊查询的接口(查询条件为默认添加),后端可以接到模糊查询的查询条件,但是查询出的数据为空,同一页面调用同样的方法,输入同样的模糊查询条件又可以查到数据并...
  • 由于获取到后台数据是个对象,所以我在data里面定义数据...由于给videoObj赋了null这个初值,所以在调用接口前初始渲染读取的是null,即div的里面的videoObj初始读取的是null,所以会报 TyperError:Cannot read proper

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 28,939
精华内容 11,575
关键字:

vue调用接口获取数据

vue 订阅