小編給大家分享一下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風格接口的的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
