vue结合axios实现restful风格的四种请求方式

目录
  • 1、npm下载axios到vue项目中
  • 2、main.js里引入
  • 3、定义全局变量路径(不是必须的,但是推荐)
    • (1)、方法一
    • (2)、方法二
  • 4、在具体需求的地方使用
    • (1)、get
    • (2)、post
    • (3)、put
    • (4)、delete

Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,基本请求有5种:

  • get:多用来获取数据
  • post:多用来新增数据
  • put:多用来修改数据(需要传递所有字段,相当于全部更新)
  • patch:多用来修改数据,是在put的基础上新增改进的,适用于局部更新,比如我只想修改用户名,只传用户名的字段就ok了,而不需要像put一样把所有字段传过去
  • delete:多用来删除数据

axios其实和原生ajax,jquery中的$ajax类似,都是用于请求数据的,不过axios是基于promise的,也是vue官方比较推荐的做法。

那么我们一起来看看具体在vue中的使用吧。

1、npm下载axios到vue项目中

这里解释一下为什么要下载qs,qs的作用是用来将请求参数序列化,比如对象转字符串,字符串转对象,不要小看它,会在后面有大用处的。

// npm下载axios到项目中
npm install axios --save

// npm下载qs到项目中
npm install qs.js --save

2、main.js里引入

记住这边使用axios时定义的名字,我定义的是axios,所以后续请求我也必须使用axios,当然你可以定义其他的,htpp,$axios,哪怕是你的名字都没关系,注意规范。

// 引入axios
import axios from 'axios'
// 使用axios
Vue.prototype.axios = axios;

// 引入qs
import qs from 'qs'
// 使用qs
Vue.prototype.qs = qs;

3、定义全局变量路径(不是必须的,但是推荐)

(1)、方法一

可在main.js里定义

// 右边就是你后端的每个请求地址公共的部分
// * : 地址是我瞎编的,涉及隐私,大家只要把每个请求地址一样的公共部分提出来即可

Vue.prototype.baseURL = "http://127.0.0.1:9000/api";

(2)、方法二

在config中的dev.env和prod.env中配置,在main.js里使用那两个文件的变量即可

①dev.env:本地环境

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    // 这里是本地环境的请求地址(请忽略地址,明白原理即可)
    API_ROOT: ' "http://localhost:8080/web" '
})

②prod.env:上线环境

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    // 这里是本地环境的请求地址(请忽略地址,明白原理即可)
    API_ROOT: ' "http://localhost:8080/web" '
})

③main.js中使用此路径

Vue.prototype.baseURL = process.env.API_ROOT;

4、在具体需求的地方使用

举个例子:

当我在登录页面点击登录,然后需要请求后台数据判断登录是否能通验证,以此来判断是否能正常登录,请求方法我写在methods里了,通过vue的@click点击事件,当点击登录按钮发起请求,然后通过vue的v-model绑定用户名和密码文本框的值,用来获取用户输入的值以便获取发送参数

之前我定义的变量是axios,所以这边使用this.axios发起请求,post是请求方式,而我需要把用户名和密码以字符串的形式发送,所以需要qs序列化参数(qs不是必须的,具体根据你请求发送的参数和后端定义的参数格式匹配即可)

  • .then是请求成功后的回调函数,response包含着后端响应的数据,可以打印看看
  • .catch是请求失败后的捕获,用来校验错误
login() {

    this.axios.post('http://bt2.xyz:8083/login/checkAdmin', qs.stringify({
          "username": this.userinfo.username,
          "password": this.userinfo.password
        }), {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });

}

以上方法也可以这样写:

login() {

    this.axios({
        method:"post",
        url:"http://bt2.xyz:8083/login/checkAdmin",
        data:qs.stringify({
            "username": this.userinfo.username,
             "password": this.userinfo.password
        }),
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });

}

注 : get、delete请求的参数是params(特殊情况可以直接跟在地址后面),而post、put、patch的参数是data

下面我们看看四种具体的请求方式吧 (忽略地址,涉及隐私所以就输了假的地址):

这里的${this.baseURL}就是我们前面定义的全局路径,只要在后面跟上变化的地址即可

这里的headers和qs不是必须的,因为我们业务需要传递这些数据,所以我才写的,大家只是参考格式即可

这里给出每种请求的两种写法,不尽相同,所以具体的请求还得看业务需求

put请求用的比较多,patch我自己用的很少,但是原理都是一样的,这里就不多说了

使用箭头函数是为了不改变this指向,方便后期处理数据

(1)、get

this.axios({
    method: "get",
    url:`${this.baseURL}/GetAll`,
    headers: {
        Account: "Admin",
        Password:"123456"
    }
})
.then((response)=> {
    console.log(response)
})
.catch((error)=> {
    console.log(error);
});
this.axios.get('http://bt2.xyz:8083/solr/adminQuery', {
    params: {
        "page": 1,
        "rows": 5
    }
})
 .then((response)=> {
    console.log(response)
})
.catch((error)=> {
    console.log(error);
});

(2)、post

this.axios({
    method:"post",
    url:`${this.baseURL}/Create`,
    headers: {
        Account: "Admin",
        Password:"123456"
    },
    data:qs.stringify({
        Title: this.addTitle,
        Host: this.addHost,
        Port: this.addPort,
        Account: this.addAccount,
        Password: this.addPassword,
        DbName: this.addDbName
    })
})
.then( (response)=> {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
login() {

    this.axios.post('http://bt2.xyz:8083/login/checkAdmin', qs.stringify({
          "username": this.userinfo.username,
          "password": this.userinfo.password
        }), {
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
        }
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });

}

(3)、put

像这个请求,我就在地址栏后面追加了一个参数,id,只要后端格式允许,也可以这样做

this.axios({
    method:"put",
    url:`${this.baseURL}/Update/`+(this.Data[index].id),
    headers: {
        Account: "Admin",
        Password:"123456"
    },
    data:qs.stringify({
        Title: inputs[0].value,
        Host: inputs[1].value,
        Port: inputs[2].value,
        Account: inputs[3].value,
        Password: inputs[4].value,
        DbName: inputs[5].value
    })
})
.then( (response)=> {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});
this.axios.put('http://bt2.xyz:8083/Goods/update', {
    "goodsId": goodsId,
    "goodsName": goodsName,
    "goodsPrice": goodsPrice,
    "goodsNum": goodsNum,
    "goodsKind": 1,
    "goodsWeight": goodsWeight
})
.then((response)=> {
    console.log(response)
})
.catch((error)=> {
    console.log(error);
});

(4)、delete

this.axios({
    method:"delete",
    url:`${this.baseURL}/Delete/`+(this.Data[index].id),
    headers: {
        Account: "Admin",
        Password:"123456"
    }
})
.then((response)=> {
    console.log(error);
})
.catch((error)=> {
    console.log(error);
});
this.axios.delete('http://bt2.xyz:8083/Goods/delete?goodsId=' + this.ProductId)
.then((response)=> {
    console.log(response)
})
.catch((error)=> {
    console.log(error);
});

以上就是常用的四种restful风格的请求,都是博主自己开发中请求的数据,都没问题,但是具体的请求还要看大家和后端数据格式的规范以及一些业务熟悉,这里只提供思路。如有错误或未考虑完全的地方,望不吝赐教。希望大家多多支持我们。

切记跨域问题,记得让后端处理,如果是本地的话,可以参考vue的代理

这里附上axios的官方文档,提供大家参考。axios中文官方文档

(0)

相关推荐

  • vue axios数据请求及vue中使用axios的方法

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: -------------------------------------------------------------------------------- •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支

  • 如何在Vue项目中使用axios请求

    在实际的项目中,和后台的数据交互是少不了的,我通常使用的是 axios 库,所以以下示例也是以 axios 为基础来进行封装的. 1.安装 首先是 npm 安装 axios 很简单:npm install axios 2.没有封装存在的问题 如果在没有封装接口的项目中,在文件中随处可以看到如下的接口调用方法: this.$axios.post("/user/add", { params: { name: this.name, age: this.age } }) .then(res =

  • Vue.js实战之使用Vuex + axios发送请求详解

    前言 Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios 来完成 ajax 请求,而大型项目都会使用 Vuex 来管理数据,所以这篇博客将结合两者来发送请求 Vuex 的安装将不再赘述,可以参考之前的Vue.js实战之Vuex的入门教程 使用 cnpm 安装 axios cnpm install axios -S 安装其他插件的时候,可以直接在 ma

  • vue 调用 RESTful风格接口操作

    首先是简单的java接口代码 写了四个让前端请求的接口,以下为代码 @GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200,username

  • vue结合axios实现restful风格的四种请求方式

    目录 1.npm下载axios到vue项目中 2.main.js里引入 3.定义全局变量路径(不是必须的,但是推荐) (1).方法一 (2).方法二 4.在具体需求的地方使用 (1).get (2).post (3).put (4).delete Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中,基本请求有5种: get:多用来获取数据 post:多用来新增数据 put:多用来修改数据(需要传递所有字段,相当于全部更新) patch:多用来修改数据,

  • SpringMVC的REST风格的四种请求方式总结

    一. 在HTTP 协议里面,四个表示操作方式的动词:GET.POST.PUT.DELETE. 它们分别对应四种基本操作: 1.GET ====== 获 取资源 2.POST ======新建资源 3.PUT======= 更新资源 4.DELETE==== 删除资源 二.REST:即 Representational State Transfer.(资源)表现层状态转化.是目前最流行的一种互联网软件架构.它结构清晰.符合标准.易于理解.扩展方便, 所以正得到越来越多网站的采用. 我们可以通过re

  • SpringMVC实现RESTful风格:@PathVariable注解的使用方式

    目录 1.RESTful简介 2.SpringMVC实现RESTful风格 2.1 @PathVariable注解 2.2 修改SpringMVC的前端控制器配置 3.静态资源访问问题 3.1 解决方法一 3.2 解决方法二 4.综合实例 1.RESTful简介 RESTful为Representational State Transfer的缩写,中文释义为"表现层状态转换".RESTful不是一种标准,而是一种设计风格. RESTful本质上是一种分布式系统的应用层解决方案,它的主要

  • Vue实现拖拽穿梭框功能四种方式实例详解

    目录 一.使用原生js实现拖拽 二.VUe使用js实现拖拽穿梭框 三.Vue 拖拽组件 vuedraggable 四.Awe-dnd指令封装 一.使用原生js实现拖拽 <html lang="en"> <head> <meta charset="UTF-8" /> <title>Lazyload</title> <style> .drag { background-color: skyblue;

  • vuex页面刷新数据丢失问题的四种解决方式

    目录 为什么说刷新页面vuex的数据会丢失 第一种方法用sessionStorage 第二种方法是 vuex-along 示例如下 第三种方法是 vuex-persistedstate 示例如下 第四种方法是 vuex-persist 示例如下 结语: 为什么说刷新页面vuex的数据会丢失 刷新页面vuex的数据会丢失属于正常现象,因为JS的数据都是保存在浏览器的堆栈内存里面的,刷新浏览器页面,以前堆栈申请的内存被释放,这就是浏览器的运行机制,那么堆栈里的数据自然就清空了. 第一种方法用sess

  • 详解C++中常用的四种类型转换方式

    目录 1.静态类型转换:static_cast(exp) 2.动态类型转换:dynamic_cast(exp) 3.常类型转换:const_case(exp) 4. 解释类型转换: reinterpret_cast(exp) 1.静态类型转换:static_cast(exp) 1.1静态类型转换主要用于两种转换环境 1.1.1 C++内置类型的转换:与C风格强转类似. 与c相同的地方: #include <iostream> using namespace std; int main() {

  • buildAdmin开源项目引入四种图标方式详解

    目录 正文 引入Element-Plus图标库 引入Iconfont图标库 引入FontAwesome图标库 引入本地svg图标 正文 在项目开发中,我们经常使用可能都是UI组件库里的图标,当然由于业务需要,可能当前图标库没有我们需要的图标这时候就需要引入其它图标库的图标,比如iconfont.FontAweSome.本地图标库.在了解引入这些图标库之前,我们先学习一下各种图标库的引入使用: Element-Plus:由于elemen官方已经把图标封装成了组件,所以当我们引入图标的时候,需要全局

  • 浅谈Java中的四种引用方式的区别

    强引用.软引用.弱引用.虚引用的概念 强引用(StrongReference) 强引用就是指在程序代码之中普遍存在的,比如下面这段代码中的object和str都是强引用: Object object = new Object(); String str = "hello"; 只要某个对象有强引用与之关联,JVM必定不会回收这个对象,即使在内存不足的情况下,JVM宁愿抛出OutOfMemory错误也不会回收这种对象. 比如下面这段代码: public class Main { publi

  • Android开发之基本控件和四种布局方式详解

    Android中的控件的使用方式和iOS中控件的使用方式基本相同,都是事件驱动.给控件添加事件也有接口回调和委托代理的方式.今天这篇博客就总结一下Android中常用的基本控件以及布局方式.说到布局方式Android和iOS还是区别挺大的,在iOS中有Frame绝对布局和AutoLayout相对布局.而在Android中的布局方式就比较丰富了,今天博客中会介绍四种常用的布局方式.先总结一下控件,然后再搞一搞基本方式,开发环境还是用的Mac下的Android Studio.开始今天的正题, 虽然A

  • 浅谈js函数三种定义方式 & 四种调用方式 & 调用顺序

    在Javascript定义一个函数一般有如下三种方式: 函数关键字(function)语句: function fnMethodName(x){alert(x);} 函数字面量(Function Literals): var fnMethodName = function(x){alert(x);} Function()构造函数: var fnMethodName = new Function('x','alert(x);') // 由Function构造函数的参数个数可变.最后一个参数写函数体

随机推荐