微信小程序与后台交互 在vue里 curd

添加

<template>
  <div>
<div>
  姓名：<input type="text" v-model="name" class="box"> 
  
  内容：<input type="text" v-model="contents" class="box"> 
  
  类型：<input type="text" v-model="type" class="box"> 
  
  </div>
  <div><button @click="set">添8加</button></div>

  </div>
</template>

<script>

export default {
  data () {
    return {
      name: '',
      contents: '',
      type: ''
    }
  },
    methods: {
    set () {
      var sets = {}
      sets.name = this.name
      sets.contents = this.contents
      sets.type = this.type
      
      wx.showToast({
        title: '成功',
        icon: 'success',
        duration: 2000
      })
      wx.request({
        url: 'http://127.0.0.1/laravel/public/mail/stroy', // 仅为示例，并非真实的接口地址
        data: {
          name: this.name,
          contents: this.contents,
          type: this.type
        },
        header: {
          'content-type': 'application/json' // 默认值
        },
        success (res) {
          console.log(res.data)
          wx.navigateTo({
            url: '../MesLogistics/main'     //注意添加成功之后 如果不能跳转   看看是不是 tabbar  删掉了吗
          })
        }
      })
    }
  }
}


</script>

删除

sat(id) {
  let t = this;
  wx.request({
    url: "http://127.0.0.1/laravel/public/mail/delete?id=" + id,
    data: {},
    header: {
      "content-type": "application/json" // 默认值
    },
    success(res) {
      //   console.log(res.data.shu)
      t.name = res.data.shu;
    }
  });
},

展示

 <table border="1">
    <div v-for="v in name" :key="index" class="div1">
      <div>
        姓名:{{v.name}}
        <br />
        手机号:{{v.contents}}
        <br />
        地址:{{v.created_at}}
      </div>

      <button @click="sat(v.id)" class="sc">删除</button>
      <button @click="xg(v.id)" class="xg">修改</button>
    </div>

    <a href="../add/main">
      <button class="add1">新增收货地址</button>
    </a>
  </table>

后台

<script>
export default {
  data() {
    return {
      name: {}
    };
  },
  mounted: function() {
    this.load();
  },
  methods: {
    load() {
      let t = this;
      wx.request({
        url: "http://laravel.com/day", // 仅为示例，并非真实的接口地址
        data: {},
        header: {
          "content-type": "application/json" // 默认值
        },
        success(res) {
          //   console.log(res.data.data)
          t.name = res.data.data;
        }
      });
    },
    sat(id) {
      let t = this;
      wx.request({
        url: "http://127.0.0.1/laravel/public/mail/delete?id=" + id,
        data: {},
        header: {
          "content-type": "application/json" // 默认值
        },
        success(res) {
          //   console.log(res.data.shu)
          t.name = res.data.shu;
        }
      });
    },
    xg(id) {
      wx.navigateTo({
        url: "../xg/main?id=" + id
      });
    }
  }
};
</script>

当点击修改是 （第一次是不是应该获取到修改的数据）

+

xg(id) {
  wx.navigateTo({
    url: "../xg/main?id=" + id
  });
}

小程序表单的默认值

因为下面一开始定义了个数组 修改完后的值都放在 name 里

如何获取修改的id

onLoad:function(option){
let id = options.id; //获取到修改的id
}

<template>
  <div>
    <div>
      姓名：
      <input type="text" v-model="name.name" class="box" />
      内容：
      <input type="text" v-model="name.contents" class="box" />
      类型：
      <input type="text" v-model="name.type" class="box" />
    </div>
    <div>
      <button @click="update">修改</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: ""
    };
  },
  onLoad: function(options) {
    let id = options.id;
    console.log(id);

    let t = this;
    wx.request({
      url: "http://127.0.0.1/laravel/public/mail/edit?id=" + id, // 仅为示例，并非真实的接口地址
      data: {},
      header: {
        "content-type": "application/json" // 默认值
      },
      success(res) {
        console.log(res.data);
        t.name = res.data;
      }
    });
  },
  methods: {
    update() {
      wx.request({
        url:
          "http://127.0.0.1/laravel/public/mail/update?id=" +
          this.name.id +
          "&name=" +
          this.name.name +
          "&contents=" +
          this.name.contents +
          "&type=" +
          this.name.type, // 仅为示例，并非真实的接口地址
        data: {},
        header: {
          "content-type": "application/json" // 默认值
        },
        success(res) {
          console.log(res);
          wx.navigateTo({
            url: "../lian/main"
          });
        }
      });
    }
  }
};
</script>