手把手学习vue动态做增删改查，非常全面，借此机会做个总结

vue动态做增删改查，非常全面，借此机会做个总结

工具：

idea
vue所需js

vue需要的三个js文件：**
vue.js vue最基础的js文件
qs.js后台传参时需要进行转换（此处单页面，不进行后台传参，所以不需要）
axios.js 发送路径

步骤1：
首先建一个vuetest.html文件，导入需要的js文件
如图：我的项目结构：
如图：

导入需要的js文件

<script src="../vueJs/vue.js"></script>
    <script src="../vueJs/axios.min.js"></script>
    <script src="../vueJs/qs.js"></script>

查询

<div id="app">
    <br/>
    <table border="1">

        <tr>
            <td>编号</td>
            <td>ID</td>
            <td>品牌名</td>
            <td>操作</td>
        </tr>

        <!--遍历： list为data中定义的数组名字  item为字段名，index为下标-->
         <tr  v-for="(item,index) in list" >
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
             <td>
                 <input type="button" v-on:click="toUpdate(item.id)" value="修改">
                 <input type="button" v-on:click="del(item.id)" value="删除">
             </td>
         </tr>
    </table>
</div>

<script type="text/javascript">
    var vueQj = new Vue({
        el:"#app",
        data:{
            nameJiLian:"",
            name:"",
            brandId:"",
            indexVal:"",
            list:[],

        },
	//相当于页面加载事件。浏览器一访问页面，此方法就会被调用
        created:function(){
           // alert(111);
           this.queryCarList();
        },

        methods: {
        //查询方法
            queryCarList:function(){

                //定义一个全局this，因为this只对当前方法里边有用
                var thisQj = this;
				//发送请求，调用controller中的方法，然后数据会传回到reponse（自定义）中，可console进行查看
                axios.get("/car/testVue").then(function(response){

                 console.log(response);
                 //将返回的数据给了list集合，然后进行展示
                thisQj.list = response.data;
                })
            },           
        }
    })

</script>

查询就成功了

新增

div中

<div id="app">
 ID： <input type="text"  v-model="brandId" />
   姓名： <input type="text" v-model="name" />

    <input type="button" v-on:click="add()" value="增加">
  </div>

<script type="text/javascript">
    var vueQj = new Vue({
        el:"#app",
        data:{
      	//与 v-model中一致
            name:"",
            brandId:"",
        },
   methods: {

            add:function(){
            //axios.post发送路径，/car/insertBrand controller层的路径，这里是正常传参，所以需要在controller层加注解：{name:this.name}往后台传到参数，name与后台实体类中的属性名必须保持一致，否则接收不到值
            //  了解详细的传参方式：https://blog.csdn.net/sunrj_niu/article/details/106793190  
                axios.post('/car/insertBrand',{name:this.name}).then(function(response) {
                   // this.$options.methods.queryCarList();
                    alert("提交成功！");
                    vueQj.queryCarList();
                })
            },            
        }
    })
</script>

controller层接收参数，需要一个注解@RequestBody

 @RequestMapping("insertBrand")
    @ResponseBody
    public void insertBrand(@RequestBody  Brand brand){
        brandService.insertBrand(brand);
    }

增加完成

修改

这里的修改，我为了节省时间，就是用是新增的form，

<div id="app">
   姓名： <input type="text" v-model="name" />

    <input type="button" v-on:click="add()" value="增加">
    <input type="button" v-on:click="updateUser()" value="修改">
    <br/>
    <table border="1">

        <tr>
            <td>编号</td>
            <td>ID</td>
            <td>品牌名</td>
            <td>操作</td>
        </tr>

        <!--遍历： list为数组名字  item为字段名，index为下标-->
         <tr  v-for="(item,index) in list" >
            <td>{{index}}</td>
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
             <td>
                 <input type="button" v-on:click="toUpdate(item.id)" value="修改">
                 <input type="button" v-on:click="del(item.id)" value="删除">
             </td>
         </tr>
    </table>
</div>

之前做修改，需要隐藏域回显一下该条数据的id，vue这里不需要，只需要在data中定义一个id，将获取到的id存进去就可以：
如代码所示：

  data:{
            nameJiLian:"",
            name:"",
            brandId:"",
            indexVal:"",
            list:[],
        },

methods中

 methods: {
 //回显
  toUpdate:function(brandId){
              var param = {brandId:brandId};
              console.log(param);
    //这里的传参方式是通过        Qs.stringify(param)的方式
    //了解详细的传参方式：https://blog.csdn.net/sunrj_niu/article/details/106793190  axios.post('/car/toUpdateBrand',Qs.stringify(param)).then(function(response) {
                  console.log(response.data);
                  var data1 = response.data;
                  vueQj.brandId = data1.id;
                  vueQj.name = data1.name;
              })
           },
//修改
   updateUser:function(){
              var param = {id:vueQj.brandId,name: vueQj.name};
              axios.post('/car/updateBrand',Qs.stringify(param)).then(function(response) {
                  // this.$options.methods.queryCarList();
                  alert("提交成功！");
                  vueQj.queryCarList();
                  vueQj.brandId = "";
                  vueQj.name = "";
              })
          },
        
      }

修改结束

删除

  del:function(brandId){
                var param = {brandId:brandId};
                axios.post('/car/deleteBrand',Qs.stringify(param)).then(function(response) {
                    // this.$options.methods.queryCarList();
                    alert("删除成功！");
                    vueQj.queryCarList();
                })
            }