虎踞丘上 2017-08-16 02:17 采纳率: 100%
浏览 19609
已采纳

Vue.js如何实现与后台的数据交互?

看有关的教学视频,说是使用api.ajax获取数据,但是没有具体演示,所以想清大神来帮忙回答一下,Vue.js如何与后台进行数据交互,还有从后台获取数据后,如何使用,例如集合或者对象如何进行展示。希望各位大神不吝赐教,本人不胜感激!

  • 写回答

1条回答 默认 最新

  • 罗忠浩 博客专家认证 2017-08-16 02:33
    关注

    感谢对VUE的支持,下面给您解释下在VUE中与后台进行交互的情况:
    1.使用axios.js
    这是一个基于VUE2.0以后的模块。vue-resource不再更新之后便推荐了它,如果是脚手架直接npm就OK了
    用法很简单,

                                    let that = this;
                    let config = {
                        method: 'get',
                        url: this.allUrl + "/init/webset",
                                            data:{
                                                            data1:"1"
                                            }
                    };
                    this.axios(config).then(function (res) {
                        console.log(res);
    
                    }).catch(function (err) {
                          $(".msgText").text("服务器连接错误");
                    })
    
    

    2.vue-resource
    引入同上,用法如下:

    Vue.http.get('/someUrl', [options]).then(successCallback, errorCallback);
    Vue.http.post('/someUrl', [body], [options]).then(successCallback, errorCallback);

    3.AJXA
    对的就是AJAX
    我在VUE项目中涉及到一个上传图片,需要控制,不能用表单,于是就使用了AJAX
    $.ajax({
    url: this.allUrl + '/user/uploadavater',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false
    }).done(function (res) {
    console.log(res);
    }).fail(function (res) {
    console.log(res);
    });

    以上内容希望对您有帮助,有问题也可以咨询我。
    Q:599901155

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥15 ubuntu虚拟机打包apk错误
  • ¥199 rust编程架构设计的方案 有偿
  • ¥15 回答4f系统的像差计算
  • ¥15 java如何提取出pdf里的文字?
  • ¥100 求三轴之间相互配合画圆以及直线的算法
  • ¥100 c语言,请帮蒟蒻写一个题的范例作参考
  • ¥15 名为“Product”的列已属于此 DataTable
  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题:最近需要用CAT工具Trados进行一些开发