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);
}
后端收到請求，列印資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/287636.html
標籤：其他
上一篇：高精度乘法