Vue.js(四)

已于 2023-03-24 15:47:20 修改
阅读量174 收藏
点赞数
分类专栏： 前端 文章标签： vuejs vue 异步请求 前端 前端框架
于 2019-07-30 01:30:07 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xp_xpxp/article/details/97555398
版权

1.vue-resource发送get,post,jsonp请求

Vue 要实现异步加载需要使用到 vue-resource 库。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue-resource发送get,post,jsonp请求</title>
</head>
<body>

<div id="app">
    <input type="button" value="get请求" @click="getInfo">
    <input type="button" value="post请求" @click="postInfo">
    <input type="button" value="jsonp请求" @click="jsonpInfo">
</div>

<script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
<!--先导入vue.js,再引入vue-resource-->
<script type="text/javascript" src="js/vue-resource.js" charset="UTF-8"></script>
<script type="text/javascript" charset="UTF-8">
    var vm=new Vue({
        el:'#app',
        data:{

        },
        methods:{
            getInfo(){
                //发送get请求
                var url="http://vue.studyit.io/api/getlunbo";
                this.$http.get(url,{}).then(function (result) {
                  console.log(result);
                })
            },
            postInfo(){
                //注意:post请求需要提交表单类型的参数(option选项列表中添加'emulateJSON:true')
                var url="http://vue.studyit.io/api/getlunbo";
                this.$http.post(url,{},{emulateJSON:true}).then(function (result) {
                    console.log(result);
                })
            },
            jsonpInfo(){
                var url="http://vue.studyit.io/api/getlunbo";
                this.$http.jsonp(url,{},{}).then(function (result) {
                    console.log(result);
                })
            }
        }
    })
</script>
</body>
</html>

2.jsonp跨域请求

2.1.原理

①.由于浏览器的安全性限制,不允许ajax访问协议不同,域名不同,端口号不同的数据接口,浏览器认为这种访问不安全;

②. 可以通过动态创建script标签的形式,把script标签的src属性指向数据接口的地址,因为script标签不存在跨域限制,这样的数据获取方式被称作为jsonp;

2.2.实现过程

1>.在客户端事先定义一个回调函(预定义对数据的操作),用于服务器端回调

<script>
  function callbackFunction(data){
   //to do something
}
</script>

2>.再把这个回调方法的名称(参数不要),通过URL传参的形式提交到服务器端的数据接口

<script src=”http://xxx/xxx?callback=callbackFunction”></script>

3>.服务器端数据接口对应的方法中要组织好将要发送给客户端(/回调函数要请求)的数据,再拿着客户端传递过来的回调函数的名称,拼接出一个调用这个回调函数的字符串,发送到客户端去解析执行

4>.客户端拿到服务器端返回的(包含回调函数名称)字符串之后,把他当作script脚本去解析执行,这样就可以拿到jsonp的数据

3.案例:品牌列表从数据库获取列表

3.1.基本实现
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>品牌列表</title>
    <link href="static/boostrap/css/bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>

<div id=app>
    <div class="panel panel-primary">
        <div class="panel-heading">
            <h3 class="panel-title">
                品牌列表
            </h3>
        </div>
        <div class="panel-body">
            <table class="table table-hover table-responsive table-bordered table-striped" style="margin-bottom: 0px;">
                <div class="form-inline">
                    <div class="col-md-6 col-lg-6 col-sm-6">
                        <label>
                            NAME:
                            <input type="text" class="form-control" v-model="name" @keyup.enter="add()">
                        </label>
                        <label>
                            <button class="btn btn-primary" @click="add()">添加</button>
                        </label>
                    </div>
                    <div class="col-md-6 col-lg-6 col-sm-6 text-right">
                        <label>
                            <input type="text" class="form-control" v-model="keywords">
                            <button type="button" class="btn btn-primary" @click="search()">搜索</button>
                        </label>
                    </div>
                </div>
                <thead>
                <tr>
                    <th>编号</th>
                    <th>名称</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="item in list" :key="item.id">
                    <td v-text="item.id"></td>
                    <td v-text="item.name"></td>
                    <td v-text="item.cTime"></td>
                    <td>
                        <a @click="del(item.id)">删除</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>


<script type="text/javascript" src="static/js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/js/vue-resource.js"></script>
<script type="text/javascript" charset="UTF-8">

    //全局过滤器,格式化日期
    Vue.filter('dataFormat', function (data, pattern) {
        //根据给定的时间字符串,得到一个特定的时间
        var dt = new Date(data);
        var y = dt.getFullYear();
        var m = dt.getMonth() + 1;
        var d = dt.getDate();

        if (pattern.toLowerCase() === 'yyyy-mm-dd') {
            return `${y}-${m}-${d}`;
        } else {
            var hh = dt.getHours();
            var mm = dt.getMinutes();
            var ss = dt.getSeconds();

            return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
        }
    });

    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: {}
        },
        created(){
            //第二个生命周期函数,表示data和methods内容都已经被初始化好了
            //提前发送请求,初始化数据,增强用户体验
            this.search(this.keywords);
        },
        methods: {
            del(id) {
               this.$http.delete("brand/delete/"+id,{},{}).then(result=>{
                   var body=result.body;
                   if (body.code==200){
                       //删除页面上的元素
                       //根据id找到list对应的对象,删除他
                       this.list.some((item, i) => {
                           if (item.id == id) {
                               //删除list中对应的元素
                               this.list.splice(i, 1);

                               //终止循环
                               return true;
                           }
                       })
                   }else{
                       alert("删除失败!");
                   }
               },result=>{
                   console.log("请求失败!");
               })
            },
            add() {
                //获取用户输入的内容
                var name = this.name;
                if (name==null || name==''){
                    alert("品牌名称不能为空!");
                    return;
                }
                //发送ajax请求
                this.$http.post("brand/add",{
                    name:name
                },{emulateJSON:true}).then(result=>{
                    var body=result.body;
                    if (body.code==200){
                        //属性产品列表
                        this.search();
                    } else{
                        alert("添加失败!")
                    }

                },result=>{
                    console.log("请求失败!");
                });

                //清空输入的内容
                this.name = "";
            },
            search() {
                var url="";
                if (this.keywords==null || this.keywords==''){
                    url="brand/list"
                }else {
                    url="brand/search/"+this.keywords;
                }
                //发送get请求
                this.$http.get(url).then(result => {
                    var body = result.body;
                    if (body.code == 200) {
                        //将数据库中查询的数据放入到list中
                        this.list = body.data;
                    } else {
                        alert("查询失败!");
                    }
                }, result => {
                    console.log("请求失败!");
                })
            }
        }
    })
</script>
</body>
</html>
3.2.全局配置数据接口的根域名
<script type="text/javascript" src="static/js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/js/vue-resource.js"></script>
<script type="text/javascript" charset="UTF-8">
    //使用全局配置设置默认值(vue-resource)
    //服务器请求的根路径,之后的url字符串前面不能再加"/"了!
    Vue.http.options.root="http://localhost:8080/";

    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: {}
        },
        created(){
            //第二个生命周期函数,表示data和methods内容都已经被初始化好了
            //提前发送请求,初始化数据,增强用户体验
            this.search(this.keywords);
        },
        methods: {
            del(id) {
               this.$http.delete("brand/delete/"+id,{},{}).then(result=>{
                   var body=result.body;
                   if (body.code==200){
                       //删除页面上的元素
                       //根据id找到list对应的对象,删除他
                       this.list.some((item, i) => {
                           if (item.id == id) {
                               //删除list中对应的元素
                               this.list.splice(i, 1);

                               //终止循环
                               return true;
                           }
                       })
                   }else{
                       alert("删除失败!");
                   }
               },result=>{
                   console.log("请求失败!");
               })
            },
            add() {
                //获取用户输入的内容
                var name = this.name;
                if (name==null || name==''){
                    alert("品牌名称不能为空!");
                    return;
                }
                //发送ajax请求
                this.$http.post("brand/add",{
                    name:name
                },{emulateJSON:true}).then(result=>{
                    var body=result.body;
                    if (body.code==200){
                        //属性产品列表
                        this.search();
                    } else{
                        alert("添加失败!")
                    }

                },result=>{
                    console.log("请求失败!");
                });

                //清空输入的内容
                this.name = "";
            },
            search() {
                var url="";
                if (this.keywords==null || this.keywords==''){
                    url="brand/list"
                }else {
                    url="brand/search/"+this.keywords;
                }
                //发送get请求
                this.$http.get(url).then(result => {
                    var body = result.body;
                    if (body.code == 200) {
                        //将数据库中查询的数据放入到list中
                        this.list = body.data;
                    } else {
                        alert("查询失败!");
                    }
                }, result => {
                    console.log("请求失败!");
                })

            }
        }
    })
</script>
3.3.全局配置emulateJson选项
<script type="text/javascript" src="static/js/vue.js" charset="UTF-8"></script>
<script type="text/javascript" src="static/js/vue-resource.js"></script>
<script type="text/javascript" charset="UTF-8">
    //使用全局配置设置默认值(vue-resource)
    //服务器请求的根路径,之后的url字符串前面不能再加"/"了!
    Vue.http.options.root="http://localhost:8080/";
    //当发送post请求的时候,就不要在post请求中添加该属性了
    Vue.http.options.emulateJSON=true;

    var vm = new Vue({
        el: '#app',
        data: {
            id: '',
            name: '',
            keywords: '',
            list: {}
        },
        created(){
            //第二个生命周期函数,表示data和methods内容都已经被初始化好了
            //提前发送请求,初始化数据,增强用户体验
            this.search(this.keywords);
        },
        methods: {
            del(id) {
               this.$http.delete("brand/delete/"+id,{},{}).then(result=>{
                   var body=result.body;
                   if (body.code==200){
                       //删除页面上的元素
                       //根据id找到list对应的对象,删除他
                       this.list.some((item, i) => {
                           if (item.id == id) {
                               //删除list中对应的元素
                               this.list.splice(i, 1);

                               //终止循环
                               return true;
                           }
                       })
                   }else{
                       alert("删除失败!");
                   }
               },result=>{
                   console.log("请求失败!");
               })
            },
            add() {
                //获取用户输入的内容
                var name = this.name;
                if (name==null || name==''){
                    alert("品牌名称不能为空!");
                    return;
                }
                //发送ajax请求
                this.$http.post("brand/add",{
                    name:name
                },{}).then(result=>{
                    var body=result.body;
                    if (body.code==200){
                        //属性产品列表
                        this.search();
                    } else{
                        alert("添加失败!")
                    }

                },result=>{
                    console.log("请求失败!");
                });

                //清空输入的内容
                this.name = "";
            },
            search() {
                var url="";
                if (this.keywords==null || this.keywords==''){
                    url="brand/list"
                }else {
                    url="brand/search/"+this.keywords;
                }
                //发送get请求
                this.$http.get(url).then(result => {
                    var body = result.body;
                    if (body.code == 200) {
                        //将数据库中查询的数据放入到list中
                        this.list = body.data;
                    } else {
                        alert("查询失败!");
                    }
                }, result => {
                    console.log("请求失败!");
                })

            }
        }
    })
</script>
一code当先
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
七. Vue.js整合axios，实现发送请求
HSH541的博客
03-21 1059
1. Vue.js向服务器发送请求的方式： Vue.js向服务器发送请求，有很多方式： （1）XMLHttpRequest：使用原生的XMLHttpRequest构造函数。 （2）fetch： （3）JQ：引入jquery使用【$.ajax()】 （4）axios：使用axios（项目中常用） 当然，上面的四种方法，我都不懂！！！ 这里说一下 Vue.js整合axios，实现发送请求 2. axios 1）vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。 2） ax
vuejs中vue-resource或使用axios发送请求及解决跨域问题
搁浅_9527
10-18 2590
1.安装axios，3种 ①.npm安装 npm install axios ②.使用淘宝源 cnpm install axios ③.或者使用cdn：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>2.在main.js文件里添加以下2行代码import axios from 'axios' Vue.pr
数据交互系列：简述vue项目中的两种请求方式（axios和vueResource）
Code_King006的博客
05-09 3515
VueJS的生态圈除了VueRouter之外，还有很多的插件，在网络请求中，vue是借助于vue-resource模块来进行异步请求，跨域请求。vue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。也就是说，$.ajax能做的事情，vue-resource插件一样也能做到，而且vue-resource的API更为简洁。特点。
Vuejs基本知识(七)【发送http请求】
极客神殿
12-25 5360
发送http请求 TODO: 需要加上 http resource, 在 main.js。 只要有js的地方，就要有接口。 特别是我们这样前后端分离的SPA， 几乎每个页面都要发起http请求。从后台接口读取数据，并且显示在前台页面。 这就需要用到http请求了. 1. 调用http请求 vuejs 内置了对发送http请求的支持. 只需要在对应页面的script 标签内加上对应的代码就好. 例...
vue前端接接口的书写方法
weixin_51435671的博客
12-18 3051
vue前端接接口的书写方法
vue.global.js，Vue.js 框架的核心文件之一
最新发布
08-11
`vue.global.js` 文件是 Vue.js 框架的核心文件之一。它包含了 Vue.js 全局对象的定义和一些全局方法和属性的实现。 该文件对整个 Vue.js 应用的运行起着重要的作用，它提供了全局范围的 Vue 构造函数和一些全局...
vue.js和vue.min.js
06-13
Vue.js和Vue.min.js是两种版本的同一款前端JavaScript框架——Vue.js的实现。Vue.js由尤雨溪（Evan You）开发，旨在为构建用户界面提供简洁、易用且可扩展的工具。这两个文件在功能上是相同的，但它们在实际应用中...
v2.6.10-vue.js&vue.min.js&vue.common.js&vue.runtime.js等14个资源
03-12
内容：vue.js、vue.min.js、vue.common.js、vue.common.dev.js、vue.common.prod.js、vue.esm.browser.js、vue.esm.browser.min.js、vue.runtime.js、vue.runtime.min.js、vue.runtime.esm.js、vue.runtime.common....
vue.js 下载，引入vue.js 本地开发
05-18
Vue.js 是一款流行的轻量级前端JavaScript框架，它以其易学易用、组件化和高性能的特点深受开发者喜爱。本文将详细介绍如何下载Vue.js并进行本地开发。 首先，我们需要下载Vue.js。Vue.js的官方源码可以从其官方...
vue.js项目实战,vue.js项目实战pdf下载,JavaScript
09-10
Vue.js 是一款轻量级的前端JavaScript框架，由尤雨溪开发，因其简单易学、高效灵活的特性，在Web开发领域迅速崛起。本资源聚焦于"Vue.js项目实战"，旨在帮助开发者通过实际操作深入理解Vue.js的核心概念和技术，从而...
VUE.js前端向后端发送请求 以及页面路由跳转
CSDNwangyi的博客
10-21 3738
首先构造入参请求体，内容通常是一个json格式的，(jason:前后端数据交互格式之一，辨识度好，发送接收方便，花括号引起来，格式如下。随后直接拿到路径发请求咯,从后端接收的数据放到res里以便前端接着处理，这是常见的回调语法，发请求的同时拿到后端返回的信息。注意：！！！如果你是get请求，post换成get外，params还要加上{}，变成{params}。
Vue的三种网络请求方式
月光晒了很凉快的博客
09-06 9896
在进行 Vue 的网络请求之前，我们先写一些假数据：users.json： 1. 写法1：XMLHttpRequest发送请求 使用 XMLHttpRequest 请求 users.json 中的数据： 使用 fetch 请求 users.json 中的数据： 概述：Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。能拦截请求和响应，自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。优势：使用方法： 步骤1：使用初始化 node.js 配置文件步骤
axios做爬虫_vue中使用axios的多种方式
weixin_29230805的博客
12-23 464
axiosaxios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端它本身具有以下特征：从浏览器中创建 XMLHttpRequest从 node.js 发出 http 请求支持 Promise API拦截请求和响应转换请求和响应数据取消请求自动转换JSON数据客户端支持防止 CSRF/XSRF安装安装其他插件的时候，可以直接在 main.js 中引入并 Vue.use(...
Vue.js的api的get请求
swq404的博客
07-26 1714
代码 axios .get('https://abc.xyz/api/abcd.php', {//是get请求的地址 params: { var1: 1 , var2: 2 //get请求携带的参数 } }) .then(response => (this.getdata = response.data))//把返回数据存到Vue.js类内的getdata变量中 .catch(function(error) {
Vue.js数据请求方式
五颜六色的白
01-15 600
Vue.js数据请求方式 一、 vue-resource 1&gt;通过 yarn 或者 NPM.安装 $ yarn add vue-resource $ npm install vue-resource 2&gt;在main.js中引用并使用它 import VueResource from 'vue-resource' Vue.use(VueResource) 3&gt;vue-resou...
vue实战——vue中发送AJAX请求
热门推荐
小公举的踩坑日记
05-14 17万+
vue中发送AJAX请求 一、简介 1）vue本身不支持发送AJAX请求，需要使用vue-resource、axios等插件实现。 2） axios是一个基于Promise的HTTP请求客户端，用来发送请求，也是vue2.0官方推荐的，同时不再对vue-resource进行更新和维护。 参考：GitHub上搜索axios，查看API文档 二、使用axios发送AJ...
Vue.js学习（9）-Vue.js通过Http请求数据 vue-resource
程序员精进之路
09-06 8580
1.请求数据的模块vue-resource https://github.com/pagekit/vue-resource vue-resource 是官方提供的vue的一个插件 axios fetch-json 2.模块初始化 npm install vue-resource --save 3.基本语法 // 传统写法 this.$http.get('/...
在vue.js框架给后端发送请求
明月朗，潇水寒
05-21 1万+
  在一篇文章中，我们说了如果在后端接收POST请求(JSON类型和x-www-form-urlencoded类型)，不过使用的是Postman来模拟前端发送请求的。 这篇文章将展示使用在vue.js框架中如何发送请求。   Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Axios官方说明文档 var map...
Vue.js 请求后台数据
anzy/pine的博客
12-18 1万+
var that = this; that.$http({ //调用接口 method:'POST', url:ctxPath + "/login/doLogin" , params:{ userName : acco
Vue.js入门教程： Majesty of Vue.js
本文档详细介绍了Vue.js这一流行的前端JavaScript框架。Vue.js是一个用于构建用户界面的渐进式框架，它强调易用性、灵活性和可维护性，适合开发单页应用（SPA）和复杂Web应用。 Vue.js概述部分简述了Vue的核心理念...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值