0 environment
- System environment: Win10
- Front-end editor: vscode
- Rely on: axios
1 axios installation
1 Mode 1(Command Operation)
// Install axios(the root directory of the vue project created)
npm install axios;
Copy the code2 Mode 2(Visual Interface Operation)
❝
“Shortcut (Win + R)” –> “CMD” –> “Enter Vue UI” –> “Automatically jump port 8000 (default)”
❞
2 encapsulation axios
❝
Can cooperate with global interception (request interception + response interception) own search
❞
1 the new HTTP. Js
2 curd encapsulation
import axios from "axios";
import qs from "qs";
let baseURL = "http://127.0.0.1:8080/";
// let baseURL = "";
// const test = {} replaces export default
export default {
post(url, data) {
return axios({
method: "post".
url: `${baseURL}${url}`.
data: qs.stringify(data),
timeout: 10000
});
},
put(url, data) {
return axios({
method: "put".
url: `${baseURL}${url}`.
data: qs.stringify(data),
timeout: 10000
});
},
delete(url, data) {
return axios({
method: "delete".
url: `${baseURL}${url}`.
// url,
data: qs.stringify(data),
timeout: 10000.
headers: {
"Content-Type": "application/x-www-form-urlencoded"
}
});
},
get(url, params) {
return axios({
method: "get".
url: `${baseURL}${url}`.
params: params, // Get specifies the parameters used in the request
timeout: 10000
});
}
}
Copy the code3 references
1 Local Reference
- Page reference
/ / incoming HTTP. Js
import http from '.. /utils/http'
abc(){
/ / such as md? articleId=1
var url = "Back-end path";
/ / parameters
var params = {
id: id,
key: value
}
// For example, call get in a method
http.get(url, params).then(resp= > {
content
})
}
Copy the code2 Global reference (main.js)
❝
It’s at the bottom of the reference article
❞
- main.js
import api from '.. /utils/http' // Import the API interface
Vue.prototype.$api = api; // Mount the API to the vue prototype
Copy the code- Concrete page method
this.$api.get()
// Replace export default with const test = {} in http.js
this.$api.test.get()
Copy the code3 Global Reference (Configured in Store)
❝
Just to learn a little bit about Store Actions
❞
- store index.js
actions: {
get(_, params){
// var url = reqParams.url;
// var params = reqParams.params;
// console.log("url ==>",url);
console.log("params ==>",params);
return http.get(params.url, params.params);
},
async post(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return await http.post(url, params);
},
put(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return http.put(url, params);
},
delete(_, reqParams){
var url = reqParams.url;
var params = reqParams.params;
return http.delete(url, params);
}
}
Copy the code- The specific page
demo(id){
var url = "test/adc/";
var params = {
id: id
}
var data = {
url: url,
params: params
}
this.$store.dispatch("get", data).then(resp= > {
console.log("resp -->", resp);
})
}
Copy the code4 Reference Article
Refer to the article
Reference code