vue动态增删改查

题目：使用vue写简单表格动态增删改查
效果图1：

效果图2：点击回显按钮显示修改页面

效果图3：点击删除按钮弹出提示框

效果图3：删除完成后显示没有数据
main.js代码：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引用
import axios from 'axios'
import VueAxios from 'vue-axios'
//安装qs命令  nqm install qs
import QS from 'qs'

Vue.config.productionTip = false

//使用
Vue.use(VueAxios,axios)
Vue.prototype.$axios= axios
Vue.prototype.$qs= QS



/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

App.vue页面代码：

<template>

  <center>
    <div id="app">
      药品名称：<input v-model="drug.drugName" ><br>
      药品价格：<input v-model="drug.drugPrice"><br>
      药品库存：<input v-model="drug.drugSales"><br>
      药品数量：<input v-model="drug.drugStock"><br>
      是否处方药：<input v-model="drug.isOTC" type="radio" value="1">处方药
      <input v-model="drug.isOTC" type="radio" value="2">非处方药<br>
      适合人群：
      <input v-model="drug.person" type="checkbox" value="1">幼儿
      <input v-model="drug.person" type="checkbox" value="2">少年
      <input v-model="drug.person" type="checkbox" value="3">青年
      <input v-model="drug.person" type="checkbox" value="4">中年
      <input v-model="drug.person" type="checkbox" value="5">老年
      <br>
      <input type="button" value="新增" @click="add">

      <!--v-show="list.length>0" 删除完成后把表格隐藏-->
      <table border="1" width="1400px" style="text-align: center"  v-show="list.length>0">
        <tr>
          <th>编号</th>
          <th>药品名称</th>
          <th>药品价格</th>
          <td>药品库存</td>
          <th>药品数量</th>
          <th>是否处方药</th>
          <th>适合人群</th>
          <th>生产日期</th>
          <th>创建时间</th>
          <th>修改时间</th>
          <th>操作</th>
        </tr>
        <tr v-for="(drug,index) in list">
          <td>{{index+1}}</td>
          <td>{{drug.drugName}}</td>
          <td>{{drug.drugPrice}}</td>
          <td>{{drug.drugSales}}</td>
          <td>{{drug.drugStock}}</td>
          <td>{{drug.isOTC==1?"处方药":drug.isOTC==2?"非处方药":""}}</td>
          <td>{{drug.person .replace("1","幼儿").replace("2","少年").replace("3","青年").replace("4","中年").replace("5","老年").replace("6","")}}</td>
          <td>{{drug.producedDate}}</td>
          <td>{{drug.createtime}}</td>
          <td>{{drug.createtime}}</td>
          <td>
            <input type="button" value="删除" @click="del(drug.id)">
            <input type="button" value="回显" @click="hui(drug.id)">
          </td>
        </tr>

      </table>
   <!--删除完成后页面显示没有数据-->
      <p v-show="list.length==0" style="color: red"><b>没有数据！</b></p>
    </div>
   <table v-show="upd" >
      药品名称：<input v-model="drug2.drugName" ><br>
      药品价格：<input v-model="drug2.drugPrice"><br>
      药品库存：<input v-model="drug2.drugSales"><br>
      药品数量：<input v-model="drug2.drugStock"><br>
      是否处方药：<input v-model="drug2.isOTC" type="radio" value="1">处方药
      <input v-model="drug2.isOTC" type="radio" value="2">非处方药<br>
      适合人群：
           <input v-model="drug2.person"   type="checkbox" value="1">幼儿
            <input v-model="drug2.person"  type="checkbox" value="2">少年
           <input v-model="drug2.person"  type="checkbox" value="3">青年
           <input v-model="drug2.person"  type="checkbox" value="4">中年
          <input v-model="drug2.person"  type="checkbox" value="5">老年<br>
          <input type="button" value="修改" @click="update1()">
    </table>
  </center>

</template>

<script>
  export default {

    name: 'App',
    data(){
      return{
        list:[],
        //修改页面显示和隐藏
        upd:false,
        drug:{
          drugName:"",
          drugPrice:"",
          drugSales:null,
          drugStock:null,
          isOTC:null,
          person:[],
          producedDate:""
        },
        drug2:{
          drugName:"",
          drugPrice:"",
          drugSales:null,
          drugStock:null,
          isOTC:null,
          person:[],
          producedDate:""
        }

      }
    },
    created(){
      this.queryDrug();
    },

    methods:{
      //查询
      queryDrug () {
        var _this=this;
        this.$axios.get("http://localhost:8080/drug/queryDrug").then(function (result) {
          _this.list=result.data;
        })
      },
      //新增
      add () {
        this.drug.person=this.drug.person.toString();
        //this.$qs.stringify()如果$qs.stringify()方法点不出来，就安装qs命令  nqm install qs
        this.$axios.post("http://localhost:8080/drug/addDrug",this.$qs.stringify(this.drug)).then(function () {
          alert("新增成功");
          window.location.reload();
        }).catch(function () {
          alert("新增失败")
        })
      },
      //回显
      hui:function (id) {
        var _this = this;
        //upd点击回显显示表格
        this.upd = true;
        this.$axios.post("http://localhost:8080/drug/queryDurgById?id="+id).then(function (result) {
          //drug2回显和修改使用
          _this.drug2=result.data;


        }).catch(function () {
          alert("数据获取失败");
          _this.upd = false;
        })
      },
      //删除
      del:function(id){
        if (confirm("您确定要删除吗？")){
          this.$axios.post("http://localhost:8080/drug/deleteDrug?id="+id).then(function () {
            alert("删除成功");
            window.location.reload();
          }).catch(function () {
            alert("删除失败")
          })
        }

      },
      //修改
      update1:function () {
        this.drug2.person=this.drug2.person.toString();
        //this.$qs.stringify()如果$qs.stringify()方法点不出来，就安装qs命令  nqm install qs
        this.$axios.post("http://localhost:8080/drug/updateDrug",this.$qs.stringify(this.drug2)).then(function () {
          alert("修改成功");
          window.location.reload();
        }).catch(function () {
          alert("修改失败")
        })
      }


    },



  }
</script>