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

左手的ㄟ右手 2021-09-13 16:36 274阅读 0赞

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

## 工具： ##

**idea  
vue所需js**

vue需要的三个js文件：\*\*  
vue.js vue最基础的js文件  
qs.js后台传参时需要进行转换（此处单页面，不进行后台传参，所以不需要）  
axios.js 发送路径  
![在这里插入图片描述][2020061410392666.png]  
步骤1：  
首先建一个vuetest.html文件，导入需要的js文件  
如图：我的项目结构：  
如图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]  
导入需要的js文件

## 查询 ##

<div id="app">
        <br/>
        <table border="1">
    
            <tr>
                <td>编号</td>
                <td>ID</td>
                <td>品牌名</td>
                <td>操作</td>
            </tr>
    
            
             <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>

查询就成功了

## 新增 ##

div中

**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>
    
            
             <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();
                    })
                }

[2020061410392666.png]: /images/20210913/7365d9f0ebf2449994b096fdb70ab659.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bnJqX25pdQ_size_16_color_FFFFFF_t_70]: /images/20210913/6589b11596714bd29b8fcb9a14089ece.png