<template>
<div id=
"app">
<Input/>
<List/>
<hr>
<h2>{{n}}</h2>
<button @click=
"handleAdd()">点击</button>
<button @click=
"handleAddData()">添加数据</button>
<button @click=
"handleDelData()">删除数据</button>
<button @click=
"handleUpdateData()">修改数据</button>
<button @click=
"handleGetData()">查询数据</button>
</div>
</template>
<script>
import List from "./components/list"
import Input from "./components/input"
import Vuex from "vuex";
export default {
name: 'app',
components: {
List,
Input
},
computed: {
...Vuex.mapState({
n:state=>
state.num.n
})
},
methods:{
...Vuex.mapMutations({
handleAdd:"num/mutationsNumAdd"
}),
handleAddData(){
//增加数据
this.$http({
method:"post",
url:"http://localhost:3000/data",
data:{
username:"余君",
age:38,
sign:"恭喜提公主一枚"
}
}).then((res)=>
{
console.log(res);
})
},//删除
handleDelData(){
this.$http({
method:"delete",
url:"http://localhost:3000/data/2"//删除第二条
}).then((res)=>
{
console.log(res);
})
},
handleUpdateData(){
// this.$http({
// method:"put", //替换
// url:"http://localhost:3000/data/2",
// //要修改成的内容
// data:{
// username:"小白"
// }
// }).
// then((res)=>{
// console.log(res);
// })
//修改(推荐使用)
this.$http({
method:"patch",
//修改
url:
"http://localhost:3000/data/1",
//要修改成的内容
data:{
username:"小白"
}
}).
then((res)=>
{
console.log(res);
})
},//查询
handleGetData(){
this.$http({
method:"get",
url:"http://localhost:3000/data?q=手"//模糊查询,查询带有'手'字的数据
}).then((res)=>
{
console.log(res)
})
}
}
}
</script>
<style >
</style>
转载于:https://www.cnblogs.com/kaijiangyugty/p/11151759.html
