json-server

<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>