First, the back-end uses a restful form, divided into
1.post (add) a request,
2.delect (delete) request,
Ideas at (modified) request,
4.get (query) request,
After vue in the project in, npm i axios -S, npm i vue-axios -S, download the two, in which main.js
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use (VueAxios, axios)
You can use the global axios
Write a method to add the desired button in, submit () {
Fill the first determine whether the content format standards, if it can be executed
addpost（）
}
// axios post request
addpost(){
that = this // this will be replaced to prevent this conflict that
this. $ axios
.post('url',{
Background data were: that the reception-defined variables.
})
.then（res =>{
console.log (res) // submitted background data state = RES
{ Data: {...}, Status: 200 is, the statusText: "", headers: {...}, config: {...}, ...}
getlist (), update the database after you finish adding data to the page
}
axios delect request
delectlist（）{
this. $ axios
.delect (url / adate, {// another method passes parameters params option pass parameters
params：{
id：‘123’
}
})
.then(res=>{
console.log(res)
})
}
axios get request
getlist（）{
this. $ axios.get (url / adate? id = '123') // Another method of passing parameters params option pass parameters
.then(res=>{
console.log(res)
this.datearr = res.data.date// dataarrr date assigned to the data defined in
})
}
axios put request has the form similar to the format post
old list () {
const params =new URLsearchParams（）
params.append('param1','value');
params.append('param1','value');
this.$axios.put('url' ,params ).then(res = >{
console.log (res) // modified data
})
}