vue数据请求_vue数据请求封装 - CSDN
精华内容
参与话题
  • vue中用axios进行数据请求

    千次阅读 2019-04-01 13:55:34
    2. 在组件中引入,可以在单个组件中引入,只请求该组件所需要的数据,也可以在父组件中引入,请求该父组件下所有子组件需要的数据 在mounted周期函数中执行方法A,方法A是在methods对象中定义的,该方法的功能是...

    一、vue-cli 2.0

    1. 安装axios插件

    npm指令:npm install axios --save

    yarn指令:yarn add axios

    2. 在组件中引入,可以在单个组件中引入,只请求该组件所需要的数据,也可以在父组件中引入,请求该父组件下所有子组件需要的数据

    在mounted周期函数中执行方法A,方法A是在methods对象中定义的,该方法的功能是:让axios对象调用get()方法和then()方法,get方法是获取数据的地址url,then方法是对获取的数据进行处理,通过自定义方法B进行数据处理

    3. 关于mock的假数据:

    放在static文件夹下,因为src文件可以访问同级的static文件。

    同时,开发环境下的url地址应该和线上环境下的url地址一样,我们要保证线上的代码是完全正确的,决不能再修改已经提交到master上的代码,那么我们需要做一个url的设置,当时开发环境的时候,加载本地模拟的数据,当时线上环境时,加载的就是服务器中的数据,且要保证url是线上地址。

    4. 数据结构:

    {
      "ret": true,
      "data": {
        "medicine": [
          {
            "id": "0001",
            "spell": "nanxin wanfeile",
            "name": "男性 万斐乐"
          },{
            "id": "0002",
            "spell": "nanxin jinge",
            "name": "男性 金戈"
          },{
            "id": "0003",
            "spell": "nanxin hexin",
            "name": "男性 和欣"
          },{
            "id": "0004",
            "spell": "nanxin wanaike",
            "name": "男性 万艾可"
          },{
            "id": "0005",
            "spell": "nanxin guilingji",
            "name": "男性 龟龄集30粒"
          },{
            "id": "0006",
            "spell": "nanxin suoyangbushenjiaonang",
            "name": "男性 锁阳补肾胶囊"
          },{
            "id": "0007",
            "spell": "nanxin nanbaojiaonang",
            "name": "男性 男宝胶囊30粒"
          },{
            "id": "0008",
            "spell": "nanxin yubiaobushenwan",
            "name": "男性 鱼鳔补肾丸"
          },{
            "id": "0009",
            "spell": "nanxin jinsuogujingwan",
            "name": "男性 金锁固精丸"
          },{
            "id": "00010",
            "spell": "nanxin shengjingpian",
            "name": "男性 生精片"
          }
        ]
      }
    }

     二、vue-cli3.0

    1. 新建文件:vue.config.js,该文件与package.json同级。vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。

    2. vue.config.js中的代码:

    (1)通过required寻找数据路径,并将其引入。

    (2)在devServe对象中设置端口port

    (3)在DevServe对象中的before函数,参数为app,这是个对象,app调用get方法,意思是:当请求“/api/search”路径的时候,得到的是mockData的数据

    const mockData = require("./mock/search.json");
    
    module.exports = {
      //...  
      devServer: {
        port: 8080,
        before(app) {
          app.get("/api/search", (req, res) => {
            res.json(mockData);
          });
        }
      }
    };

    3. 组件中进行数据请求:

      created () {
        axios.get('/api/search').then(ref => {
          console.log(ref);
        })
      }

    结果:

    展开全文
  • vue 请求后台数据

    万次阅读 多人点赞 2017-04-03 17:49:00
    需要引用vue-resource安装请参考https://github.com/pagekit/vue-resource官方文档在入口函数中加入import VueResource from 'vue-resource' Vue.use(VueResource);在package.json文件中加入 "dependencies": { ...

    需要引用vue-resource

    安装请参考https://github.com/pagekit/vue-resource官方文档

    在入口函数中加入

    import VueResource from 'vue-resource'
    Vue.use(VueResource);

    在package.json文件中加入

     "dependencies": {
        "vue": "^2.2.6",
        "vue-resource":"^1.2.1"
      },

    请求如下

    mounted: function () {
            // GET /someUrl
            this.$http.get('http://localhost:8088/test').then(response => {
                 console.log(response.data);
                // get body data
                // this.someData = response.body;
    
            }, response => {
                console.log("error");
            });
        },

    注意

    1.在请求接口数据时,涉及到跨域请求
    出现下面错误:
    XMLHttpRequest cannot load http://localhost:8088/test. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access.

    解决办法:在接口中设置

    response.setHeader("Access-Control-Allow-Origin", "*");

    2.使用jsonp请求
    但是出现如下错误
    Uncaught SyntaxError: Unexpected token
    查看请求,数据已返回,未解决.

    提交表单

      <div id="app-7">
            <form @submit.prevent="submit">
                <div class="field">
                    姓名:
                    <input type="text"
                           v-model="user.username">
                </div>
    
    
                <div class="field">
                    密码:
                    <input type="text"
                           v-model="user.password">
                </div>
    
    
                <input type="submit"
                       value="提交">
                </form>
        </div>
    
    methods: {
            submit: function() {
              var formData = JSON.stringify(this.user); // 这里才是你的表单数据
    
              this.$http.post('http://localhost:8088/post', formData).then((response) => {
                  // success callback
                  console.log(response.data);
              }, (response) => {
                   console.log("error");
                  // error callback
              });
            }
        },

    提交restful接口出现跨域请求的问题
    查阅资料得知,
    当contentType设置为三个常用的格式以外的格式,如“application/json”时,会先发送一个试探的OPTIONS类型的请求给服务端。在这时,单纯的在业务接口response添加Access-Control-Allow-Origin 由于还没有走到所以不会起作用。

    解决方案:
    在服务端增加一个拦截器
    用于处理所有请求并加上允许跨域的头

    public class CommonInterceptor implements HandlerInterceptor {
    
        private List<String> excludedUrls;
    
        public List<String> getExcludedUrls() {
            return excludedUrls;
        }
    
        public void setExcludedUrls(List<String> excludedUrls) {
            this.excludedUrls = excludedUrls;
        }
    
        /**
         *
         * 在业务处理器处理请求之前被调用 如果返回false
         * 从当前的拦截器往回执行所有拦截器的afterCompletion(),
         * 再退出拦截器链, 如果返回true 执行下一个拦截器,
         * 直到所有的拦截器都执行完毕 再执行被拦截的Controller
         * 然后进入拦截器链,
         * 从最后一个拦截器往回执行所有的postHandle()
         * 接着再从最后一个拦截器往回执行所有的afterCompletion()
         *
         * @param  request
         *
         * @param  response
         */
        public boolean preHandle(HttpServletRequest request, HttpServletResponse response,
                                 Object handler) throws Exception {
            response.setHeader("Access-Control-Allow-Origin", "*");
            response.setHeader("Access-Control-Allow-Methods", "*");
            response.setHeader("Access-Control-Max-Age", "3600");
            response.setHeader("Access-Control-Allow-Headers",
                    "Origin, X-Requested-With, Content-Type, Accept");
            return true;
        }
    
        // 在业务处理器处理请求执行完成后,生成视图之前执行的动作
        public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                               ModelAndView modelAndView) throws Exception {
    
        }
    
        /**
         *
         * 在DispatcherServlet完全处理完请求后被调用
         * 当有拦截器抛出异常时,
         * 会从当前拦截器往回执行所有的拦截器的afterCompletion()
         *
         * @param request
         *
         * @param response
         *
         * @param handler
         *
         */
        public void afterCompletion(HttpServletRequest request, HttpServletResponse response,
                                    Object handler, Exception ex) throws Exception {
    
        }
    }

    spring resultful无法像在jsp提交表单一样处理数据必须加上@RequestBody,可以直接json转换object,但是对与没有bean的表单数据,建议转换为map对象,类似@RequestBody Map

    展开全文
  • vue 数据请求

    2019-01-10 00:56:06
    axios import axios from 'axios'; axios.get('/users/addressList').then((response)=&gt;{ var res = response.data;... this.addressList = res.result;... this.addressList.forEach((...

    axios

    import axios from 'axios';
    
    	axios.get('/users/addressList').then((response)=>{
    	        var res = response.data;
    	        this.addressList = res.result;
    	        this.addressList.forEach((item,index)=>{
    	           if(item.isDefault){
    	             this.currentIndex = index;
    	             this.selectedAddressId = item.addressId;
    	           }
    	        })
    	      })
    
    	
    跨域
    	跨域post实例,用到了qs组件来避开ajax信使请求,并兼容Android。
    	import axios from 'axios';
    	import qs from 'qs';
    
    	axios.post('http://www.xyz.com/request', qs.stringify(params))
    	.then(response => {
    	  console.log(response);
    	})
    	.catch(err => {
    	  console.log(err);
    	});

    vue-resource 

    this.$http.get...post...

    展开全文
  • Vue数据请求方式

    2020-03-26 21:55:07
    vue-resource请求vue的2.0开始,作者说:vue-resource不再维护了 resource—get请求 HTML: <div id="app"> <ul> <li v-for="book in books">{{book.title}}</li> </ul>...

    vue-resource请求

    从vue的2.0开始,作者说:vue-resource不再维护了

    resource—get请求
    HTML:

    	<div id="app">
            <ul>
                <li v-for="book in books">{{book.title}}</li>
            </ul>
            <button @click='get'>发送http请求</button>
        </div>
    

    JavaScript:

    	<script src="./base/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
        <script>
            //引入Vue-resourse之后,可以在Vue实例或者组件上绑定一个$http的一个属性
            new Vue({
                el: "#app",
                data: {
                    books:[]
                },
                methods:{
                    get(){
                        this.$http.get("./json/temp.json").then(res=>{
                            this.books = res.data.books
                        })
                    }
                }
            })
        </script>
    

    resource—jsonp请求
    HTML:

    	<div id="app">
            <input type="text" v-model="good" @keyup.enter='jsonp'>
            <button @click='jsonp'>请求jsonp数据</button>
            <ul>
                <li v-for='item in result'>{{item[0]}}</li>
            </ul>
        </div>
    

    JavaScript:

    	<script src="./base/vue.js"></script>
        <script src="https://cdn.bootcss.com/vue-resource/1.3.4/vue-resource.min.js"></script>
        <script>
            new Vue({
                el: '#app',
                data:{
                    result:[],
                    good:''
                },
                methods:{
                    jsonp(){
                        this.$http.jsonp('http://suggest.taobao.com/sug?code=utf-8',{
                            params:{
                                q:this.good
                            }
                        }).then(res =>{
                            console.log(res)
                            this.result  = res.data.result
                            this.good = ''
                        })
                    }
                }
            })
        </script>
    

    fetch请求(规范)

    why: XMLHttpRequest 是一个设计粗糙的 API,配置和调用方式非常混乱, 而且基于事件的异步模型写起来不友好。

    查看兼容性: https://caniuse.com/#search=fetch

    兼容性不好 polyfill: https://github.com/camsong/fetch-ie8

    fetch—get请求

    HTML:

    	<div id="app">
            <p><button @click="handleClick">fetch请求</button></p>
        </div>
    

    JavaScript:

    new Vue({
                el:"#app",
                methods:{
                    handleClick(){
                        fetch("./json/temp.json").then(res=>{
                            return res.json()   //需要让其返回json格式的数据
                        }).then(res=>{
                            console.log(res)
                        })
                    }
                }
            })
    

    fetch—post请求

    HTML:

    	<div id="app">
            <p><button @click="handleClick">fetch请求</button></p>
        </div>
    

    JavaScript:

    new Vue({
                el:"#app",
                methods:{
                    handleClick(){
                        fetch("./json/temp.json",{
                            method:"post",
                            headers:{
                            	//帮助我们解决utf-8进行编码的数据了
                                "Content-Type":"application/x-www-form-urlencoded" 
                            },
                            body:"name=zhangsan&age=10"
                        }).then(res=>res.json()).then(res=>console.log(res))
                    }
                }
            })
    

    fetch—json请求

    HTML:

    	<div id="app">
            <p><button @click="handleClick">fetch请求</button></p>
        </div>
    

    JavaScript:

    new Vue({
                el:"#app",
                methods:{
                    handleClick(){
                       fetch("./json/temp.json",{
                            method:"post",
                            headers:{
                                "Content-Type":"application/json" 
                            },
                            body:JSON.stringify({
                                name:"张三",
                                age:20
                            })
                        }).then(res=>res.json()).then(res=>console.log(res))
                    }
                }
            })
    

    ** Fetch 请求默认是不带 cookie 的,需要设置 fetch(url, {credentials: ‘include’})*

    axios请求

    axios—get请求

    HTML:

    	<div id="app">
            <p><button @click="handleClick">fetch请求</button></p>
        </div>
    

    JavaScript:

    new Vue({
                el:"#app",
                methods:{
                    handleClick(){
                       axios.get("json/test.json?name=zhangsan&age=10").then(res=>{
    					    // res.data 才是真正的后端数据
    					    console.log(res.data.data.films)
    					    this.datalist = res.data.data.films
    					})
                    }
                }
            })
    

    axios—post请求

    HTML:

    	<div id="app">
            <p><button @click="handleClick">fetch请求</button></p>
        </div>
    

    JavaScript:

    new Vue({
                el:"#app",
                methods:{
                    handleClick(){
                       axios.post("json/test.json","name=zhangsan&age=10").then(res=>						{
    						console.log(res.data)
    					})
                    }
                }
            })
    

    axios—json请求

    HTML:

    	<div id="app">
            <p><button @click="handleClick">fetch请求</button></p>
        </div>
    

    JavaScript:

    new Vue({
                el:"#app",
                methods:{
                    handleClick(){
                       axios.post("json/test.json",{
    					    name:"zhangsan",
    					    age:100
    					}).then(res=>{
    					    console.log(res.data)
    					})
                    }
                }
            })
    
    展开全文
  • vue请求数据

    2018-05-31 19:47:12
    vue封装了类似ajax的请求方法简单易用请求方式放在methods中。其中有用到了es6的箭头函数,箭头函数的好处是代码简单,对于箭头函数内部的this不用在重新定义,这里的this指向vue的实例,这里使用es5的函数就需要在...
  • Vue中的数据请求

    2019-05-25 17:08:37
    数据请求 数据请求在前端开发中的使用有两种形式 使用原生javascript提供的数据请求 ajax( 一般需要我们结合Promise去封装,使用不是很便利,但是效率很高 ) fetch( 本身结合了Promise,并且已经做好了封装,可以...
  • Vue数据请求方式

    千次阅读 2019-05-25 16:47:46
    前言 前端的数据请求方式及类型: 原生: ajax(四部曲,需要结合Promise封装,不太便利,效率很高) fetch(本身结合了Promise,且已封装,可直接使用...vue常用的数据请求方式 Vue 的2.X版本最常用的有 axios 和 fetc...
  • vue中两种数据请求方式

    千次阅读 2019-04-19 20:14:37
    axios: axios属于第三方插件,需要引入。...get方式的请求: 第一种写法 axios.get('http://localhost:8080/xxx.php', { method : 'get', params : { a : 1, b : 2 } }).then ( (res) =>{ console.l...
  • vue-resource axios 访问本地 json ------------- vue-resource // axios({ //第三方的axios this.$http({ //把axios绑定到Vue的原型 url: './data/user.json' }).then( res => console.log('maxios res...
  • Vue 数据请求

    2019-05-27 22:13:01
    数据请求 数据请求在前端开发中的使用有两种形式 使用原生javascript提供的数据请求 ajax( 四部曲,一般需要我们结合Promise去封装,使用不是很便利,但是效率很高 ) fetch( 本身结合了Promise,并且已经做好了...
  • vue 在哪个生命周期进行数据请求

    万次阅读 2018-05-31 09:52:08
    看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。vue-router文档数据获取实例
  • &lt;template&gt; &lt;div class="hello"&gt; &lt;div&gt; {{title}} &lt;/div&gt; &lt;hr&gt; &lt;button @click="convert".../di
  • Vue.js 请求后台数据

    千次阅读 2017-12-18 23:13:25
    var that = this; that.$http({ //调用接口 method:'POST', url:ctxPath + "/login/doLogin" , params:{ userName : acco
  • vue中实现先请求数据再渲染dom

    万次阅读 2017-12-14 21:03:42
    在项目中遇到了一个问题,下面是...原因是并没有按照 请求数据—>渲染dom—>获取dom的顺序执行,实际的执行顺序是 先获取dom,而此时数组option中还是空的,上面的v-for循环也就没有渲染出dom,所以根本取不到(不理解
  • vue请求数据放在created好还是mounted里好

    万次阅读 多人点赞 2019-05-31 10:53:28
    vue请求数据放在created好还是mounted里好 建议放在created里 created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。 mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的...
  • 使用vue.js对后台进行请求发送。 现在问题描述。 定义一个vue中,有6个方法,其中有一个方法请求成功后会调用另外两个方法, 调用时候,必须等第一个方法成功返回之后对页面渲染后再掉第二个方法。 ...
  • vue请求到的数据赋值给data 对象

    万次阅读 2018-11-22 11:08:24
    在写vue的项目时,用axios请求到的数据,直接赋值给data对象,当修改data对象里面的数据请求到的数据也会改变 _this.detailData是data对象里面的数据,response.data.data是请求到的数据,当修改_this.detailData...
  • vuejs从后端请求数据的方式有多种,我这里介绍其中一种get方法。 比如从后端请求一张表过来, (1)首先,在data中return一个msg:[]数组来接收表的数据; (2)在方法中定义一个请求函数,比如我们这里函数名定义为...
  • VUE 定时请求接口数据

    千次阅读 2019-07-31 13:56:23
    1、设置定时器 mounted() { this.timer = setInterval(function(){ //执行内容 }, 60000); }, 2、清除定时器 beforeDestroy() { clearInterval(this.timer); }
  • vue向后端发送数据并得到返回值

    万次阅读 2019-09-05 13:18:34
    window.onload = function(){ var vm = new Vue({ el:'#box', data:{ msg:'Hello World!', }, methods:{ get:function(){ //发送get请求...
1 2 3 4 5 ... 20
收藏数 69,097
精华内容 27,638
关键字:

vue数据请求