vue的增刪改查

目前是Java后端+mySQL
swagger可以查看接口如圖


swagger接口.png

1、獲取列表

 get() {
      this.Api.get('/operation', {
      }).then((res) => {
        //可以打印數(shù)據(jù)看看需要什么信息
      }).catch((err) => {
      });
    },

2、刪除

deleteRoad(id) {
      //彈出刪除確認
      this.Api.delete('/operation/' + id).then((res) => {
        this.modalDelete = false;
        this.$Modal.success({content: '刪除模型成功'});
        this.updateStatus();//更新表格數(shù)據(jù)
      }).catch((err) => {
      });
    },

3、新增加彈窗

  //新增初始化
    addRoadInit() {
      this.roadModal=true
    },

    //增加
    addRoad() {
            this.Api.post('/operation', this.road).then((res) => {

            }).catch((err) => {
              if (err.code == 18200) {
                this.$Modal.warning({content: err.message});
                return;
              }
            });
            this.roadModal=false
            this.updateStatus()
    },
  //新增初始化
    addRoadInit() {
      this.roadModal=true
    },

    //增加
    addRoad() {
            this.Api.post('/operation', this.road).then((res) => {

            }).catch((err) => {
              if (err.code == 18200) {
                this.$Modal.warning({content: err.message});
                return;
              }
            });
            this.roadModal=false
            this.updateStatus()
    }

//vue
<!-- 新增 start -->
    <Modal v-model="roadModal"  :mask-closable="false" :closable="false">
      <Form ref="roadModal" :model="road"  :label-width="120" @on-cancel="roadModal = false;">

        <Form-item label="部門" prop="name">
          <Input type="text" v-model="road.name" placeholder="名稱"/>
        </Form-item>
        <Form-item label="完整地址" prop="name">
          <Input type="text" v-model="road.url" placeholder="名稱"/>
        </Form-item>
      </Form>

      <div slot="footer"  class="modalFooter">
        <HdButton type="ghost" hover="defalut"class="card_button"  style="border-right-color:#C4C4C4;" border="none"  @click="roadModal = false;" >關(guān)閉</HdButton>
        <HdButton type="ghost" hover="defalut" class="card_button" border="none"  @click="addRoad()">提交</HdButton>
      </div>

    </Modal>
    <!-- 新增 end -->
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容