首先是簡單的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?savenpm i qs --savenpm i element-ui --savenpm 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 = falseVue.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風格接口操作就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。