vue 调用 RESTful风格接口操作
首先是简单的java接口代码
写了四个让前端请求的接口,以下为代码
@GetMapping("/v1/user/{username}/{password}") public Result login2(@PathVariable("username") String username, @PathVariable("password") String password){ return Result.succResult(200,username+"--"+password); } @PostMapping("/v1/user") public Result login3(@RequestBody User user){ return Result.succResult(200,"ok",user); } @PutMapping("/v1/user") public Result putUser(@RequestBody User user){ return Result.succResult(200,user); } @DeleteMapping("/v1/user/{id}") public Result delete(@PathVariable Integer id){ return Result.succResult(200,id); }
前端请求需要在main.js中配置
import Axios from 'axios' Vue.prototype.$axios = Axios
前端请求方式如下
在调用的时候用以下方式进行请求
this.$axios.get('/api/v1/user/'+this.username+'/'+this.password) .then(data=> { alert('get//'+data.data.code); }).catch(error=> { alert(error); }); this.$axios.get('/api/v1/user',{ params: { username: this.username, password: this.password } }).then(data =>{ alert('get'+data.data.data) }).catch(error => { alert(error) }); this.$axios.put('/api/v1/user',{ id: 1, username: this.username, password: this.password }).then(data => { alert('数据password:'+data.data.data.password) alert('数据username:'+data.data.data.username) }).catch(error => { alert(error) }); this.$axios.delete('/api/v1/user/1') .then(data=> { alert('delete//'+data.data.code); }).catch(error=> { alert(error); }); this.$axios.post('/api/v1/user',{ username: this.username, password: this.password }).then(data => { alert('post'+data.data.data.password) }).catch(error => { alert(error); });
补充知识:vue结合axios封装form,restful,get,post四种风格请求
axios特点
1.从浏览器中创建 XMLHttpRequests
2.从 node.js 创建 http 请求
3.支持 Promise API
4.拦截请求和响应 (就是有interceptor)
5.转换请求数据和响应数据
6.取消请求
7.自动转换 JSON 数据
8.客户端支持防御 XSRF
安装
npm i axios–save npm i qs --save npm i element-ui --save npm i lodash --save
引入
1.在入口文件中引入所需插件
main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; import url from './apiUrl' import api from './apiUtil' Vue.prototype.$axios = api.generateApiMap(url); Vue.config.productionTip = false Vue.use(ElementUI); new Vue({ router, store, render: h => h(App) }).$mount('#app')
2.新建一个util文件夹(只要存放工具类)
在util中建apiUtil.js , apiUrl.js两个文件
apiUtil.js 封装请求体
import axios from 'axios' import _ from 'lodash' import router from '@/util/baseRouter.js' import { Message } from 'element-ui' import qs from 'qs' const generateApiMap = (map) => { let facade = {} _.forEach(map, function (value, key) { facade[key] = toMethod(value) }) return facade } //整合配置 const toMethod = (options) => { options.method = options.method || 'post' return (params, config = {}) => { return sendApiInstance(options.method, options.url, params, config) } } // 创建axios实例 const createApiInstance = (config = {}) => { const _config = { withCredentials: false, // 跨域是否 baseURL: '', validateStatus: function (status) { if(status != 200){ Message(status+':后台服务异常') } return status; } } config = _.merge(_config, config) return axios.create(config) } //入参前后去空格 const trim = (param) =>{ for(let a in param){ if(typeof param[a] == "string"){ param[a] = param[a].trim(); }else{ param = trim(param[a]) } } return param } //restful路径参数替换 const toRest = (url,params) => { let paramArr = url.match(/(?<=\{).*?(?=\})/gi) paramArr.forEach(el=>{ url = url.replace('{'+el+'}',params[el]) }) return url } //封装请求体 const sendApiInstance = (method, url, params, config = {}) => { params = trim(params) if(!url){ return } let instance = createApiInstance(config) //响应拦截 instance.interceptors.response.use(response => { let data = response.data //服务端返回数据 let code = data.meta.respcode //返回信息状态码 let message = data.meta.respdesc //返回信息描述 if(data === undefined || typeof data != "object"){ Message('后台对应服务异常'); return false; }else if(code != 0){ Message(message); return false; }else{ return data.data; } }, error => { return Promise.reject(error).catch(res => { console.log(res) }) } ) //请求方式判断 let _method = ''; let _params = {} let _url = '' if(method === 'form'){ _method = 'post' config.headers = {'Content-Type':'application/x-www-form-urlencoded'} _params = qs.stringify(params) _url = url }else if(method === 'resetful'){ _method = 'get' _params = {} _url = toRest(url,params) }else if(method === 'get'){ _method = 'get' _params = { params: params } _url = url }else if(method === 'post'){ _method = 'post' _params = params _url = url }else{ Message('请求方式不存在') } return instance[_method](_url, _params, config) } export default { generateApiMap : generateApiMap }
apiUrl.js 配置所有请求路径参数
其中resetful风格请求的路径中的请求字段必须写在 ‘{}'中
const host= '/api' //反向代理 export default { userAdd:{ url: host + "/user/add", method:"post" }, userList:{ url: host + "/user/userList", method:"get" }, userInfo:{ url: host + "/user/userInfo/{id}/{name}", method:"resetful"}, userInsert:{ url: host + "/login", method:"form"}, }
使用
四种请求方式的入参统一都以object形式传入
APP.vue
<template> <div class="login"> <el-button type="primary" @click="submitForm" class="submit_btn">登录</el-button> </div> </template> <script> export default { data() { return { }; }, methods:{ submitForm(){ this.$axios.userAdd({ id:'123', name:'liyang' }).then(data=>{ console.log(data) }) } } }; </script>
ps:入参也可以再请求interceptors.request中封装
以上这篇vue 调用 RESTful风格接口操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持猪先飞。
相关文章
- 这篇文章主要介绍了vue中activated的用法,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-01-03
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
这篇文章主要介绍了基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-02-23Antd-vue Table组件添加Click事件,实现点击某行数据教程
这篇文章主要介绍了Antd-vue Table组件添加Click事件,实现点击某行数据教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-17- 这篇文章主要介绍了vue 实现动态路由的方法,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-06
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了vue 监听 Treeselect 选择项的改变操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue组件跨层级获取组件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-28
- 这篇文章主要介绍了c# 三种方法调用WebService接口的相关资料,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-07
- 这篇文章主要介绍了vue 获取到数据但却渲染不到页面上的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-19
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
这篇文章主要介绍了antdesign-vue结合sortablejs实现两个table相互拖拽排序功能,本文通过实例图文相结合给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-09vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
这篇文章主要介绍了vuejs element table 表格添加行,修改,单独删除行,批量删除行操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-18- 最常见的多环境配置,就是开发环境配置,和生产环境配置,本文主要介绍了vue项目多环境配置的实现,感兴趣的可以了解一下...2021-07-20
vue项目页面嵌入代码块vue-prism-editor的实现
这篇文章主要介绍了vue项目页面嵌入代码块vue-prism-editor的实现,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-10-30- 这篇文章主要给大家介绍了关于Vue中slot-scope的深入理解,这个教程非常适合初学者,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17
- 这篇文章主要介绍了vue treeselect获取当前选中项的label实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01
- 这篇文章主要介绍了Vue 3.0 中 jsx 语法使用,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2020-11-13
解决vue的router组件component在import时不能使用变量问题
这篇文章主要介绍了解决vue的router组件component在import时不能使用变量问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-27- 这篇文章主要为大家详细介绍了vue实现同时设置多个倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-05-20
vue Treeselect下拉树只能选择第N级元素实现代码
这篇文章主要介绍了vue Treeselect下拉树只能选择第N级元素实现代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-01- 这篇文章主要为大家详细介绍了vue实现div单选多选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16