Element ui+Vue+SSM-简易学生信息管理系统-请求封装

Element ui+Vue+SSM-简易学生信息管理系统-请求封装

建立util包，request.js

封装get和post方法，还有请求相应拦截方法
加入进度条nprogress

import axios from 'axios'

//请求相关的方法
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'


//初始化一个axios对象
var instance = axios.create({
  //超时时间
  timeout:20000
});



//请求拦截器
instance.interceptors.request.use(
    function (config){
      //发送之前做些什么
      NProgress.start()
      return config;
    } ,
    function (error){
      //错误请求
      NProgress.done()
      return Promise.reject(error);
    });



//相应拦截器
instance.interceptors.response.use(
    function (response){
      //对相应数据做什么
      NProgress.done()
      return response;
  } ,
    function (error){
      //错误相应
      NProgress.done()
      return Promise.reject(error);
  });


//get请求
let get=async function (url,params){
  let res=await instance.get('http://127.0.0.1:8080/Poject_Stu_Cao'+url,{params});
  console.log(res)
  return res
};
//post请求
let post=async function (url,params){
  let {data}=await instance.post('http://127.0.0.1:8080/Poject_Stu_Cao'+url,params);
  return data
};
//导出get和post方法
export {
  get,
  post
}

建立myPlugin.js插件，将request.js导入插件

import {get,post} from '../util/request'

//定义一个插件
export default {
  //插件中必须包含一个install
    install:function (Vue){
      Vue.mixin({
          methods:{
              $get(url,params){
                return get(url,params)
              },
              $post(url,params){
                return post(url,params)
              }
          },
      })
    }

}

在插件index.js中注册

//注册myPlugin插件
import myPlugin from '../plugin/myPlugin'
Vue.use(myPlugin)

login.vue中添加请求

let res1 = await this.$post('/User/login',this.ruleForm)
 console.log(res1)

前端请求

后端contriller方法

 @RequestMapping(value="/login",method=RequestMethod.POST)
    @ResponseStatus(HttpStatus.OK)
    @CrossOrigin
    public void post( @RequestBody(required = false) String username){
        System.out.println("Post:");
        System.out.println(username);
    }

后端收到请求，打印信息