vue 호출 RESTful 스타일 인터페이스 작업

우선 간단한 자바 인터페이스 코드입니다.
프론트에서 요청하는 인터페이스 네 개를 썼습니다. 다음은 코드입니다.

  @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 axiosCsave
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: 가입해도 인터셉터를 다시 요청할 수 있습니다.request
이상의 이 vue 호출 RESTful 스타일 인터페이스 조작은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.